html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover,a:focus{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:0.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}html{box-sizing:border-box}*,*:after,*:before{box-sizing:inherit}.container{*zoom:1;max-width:1088px;margin-left:auto;margin-right:auto;}.container:before{content:'';display:table;}.container:after{content:'';display:table;clear:both;}@media( max-width: 1024px ) {

  .container{
    *zoom: 1;
    max-width: 1088px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .container:before{
    content: '';
    display: table;
  }

  .container:after{
    content: '';
    display: table;
    clear: both;
  }
}
html {
  font-family: 'Open Sans', sans-serif;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  background             : #0A3756;
}
html body{
  background  : #0A3756;
}
@font-face {
  font-family: 'icomoon';
  src:url( 'vendor/icomoon/icomoon.eot?ph4ftt' );
  src:url( 'vendor/icomoon/icomoon.eot?ph4ftt#iefix' ) format( 'embedded-opentype' ),
    url( 'vendor/icomoon/icomoon.ttf?ph4ftt' ) format( 'truetype' ),
    url( 'vendor/icomoon/icomoon.woff?ph4ftt' ) format( 'woff' ),
    url( 'vendor/icomoon/icomoon.svg?ph4ftt#icomoon' ) format( 'svg' );
  font-weight: normal;
  font-style: normal;
}

 /* Shared Elements */
.app-content {
  background: #ffffff;
}
.app-footer .bottom {
  *zoom: 1;
  padding     : 20px 0;
  background  : #0A3756;
}
.app-footer .bottom:before{
  content: '';
  display: table;
}
.app-footer .bottom:after{
  content: '';
  display: table;
  clear: both;
}
.app-footer .bottom .copy {
  width: calc(99.99% * 1/3 - (30px - 30px * 1/3));
  color      : #ffffff;
  font-size  : 0.8125rem;
  position: relative;
  left: calc(99.99% * -2/3 - (30px - 30px * -2/3) + 30px);
}
.app-footer .bottom .copy:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.app-footer .bottom .copy:last-child{
  margin-right: 0;
}
.app-footer .bottom .copy:nth-child(3n){
  margin-right: 0;
  float: right;
}
.app-footer .bottom .copy:nth-child(3n + 1){
  clear: left;
}
.app-footer .bottom .footer-menu {
  width: calc(99.99% * 2/3 - (30px - 30px * 2/3));
  position: relative;
  left: calc(99.99% * 1/3 - (30px - 30px * 1/3) + 30px);
  text-align : right;
}
.app-footer .bottom .footer-menu:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.app-footer .bottom .footer-menu:last-child{
  margin-right: 0;
}
.app-footer .bottom .footer-menu:nth-child(3n){
  margin-right: 0;
  float: right;
}
.app-footer .bottom .footer-menu:nth-child(3n + 1){
  clear: left;
}
.app-footer .bottom .footer-menu .menu-item {
  vertical-align: top;
}
@media( max-width: 1024px ) {

  .app-footer .bottom .footer-menu,
      .app-footer .bottom .copy {
    width: calc(99.99% * 2/2 - (30px - 30px * 2/2));
    text-align : center;
    right: auto;
    left: auto;
  }

  .app-footer .bottom .footer-menu:nth-child(1n),
      .app-footer .bottom .copy:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .app-footer .bottom .footer-menu:last-child,
      .app-footer .bottom .copy:last-child{
    margin-right: 0;
  }

  .app-footer .bottom .footer-menu:nth-child(2n),
      .app-footer .bottom .copy:nth-child(2n){
    margin-right: 0;
    float: right;
  }

  .app-footer .bottom .footer-menu:nth-child(2n + 1),
      .app-footer .bottom .copy:nth-child(2n + 1){
    clear: left;
  }

  .app-footer .bottom .footer-menu {
    margin-bottom: calc( 20px/2 );
  }
}
.app-header {
  background: #ffffff;
}
.app-header .sticky-logo-shim {
  display : none;
}
.app-header .top {
  display       : inline-block;
  vertical-align: middle;
  padding       : calc( 20px*1.5 ) 0;
  background    : #ffffff;
}
.app-header .top .logo {
  display       : inline-block;
  vertical-align: middle;
  width         : 286px;
  float         : left;
  height        : 43px;
}
.app-header .top .main-menu {
  display   : none;
  transition: all 0.5s ease-in-out;
  opacity   : 0;
}
.app-header .top .main-menu.show {
  display: inline-block;
  text-align: right;
  width: calc( 99.99% - 286px );
  float: right;
  opacity: 1;
}
.app-header .top .container {
  padding: 0;
}
.app-header .top.fixed {
  position     : fixed;
  width        : 100%;
  top          : 0;
  left         : 0;
  padding      : 15px 0;
  background   : white;
  z-index      : 999;
  border-bottom: 1px solid #E4E4E4;
}
@media( max-width: 1024px ) {

  .app-header .top.fixed .container{
    padding: 0 10px;
  }
}
.app-header .top.fixed .main-menu .menu-item,
        .app-header .top.fixed .main-menu .page-item {
  color    : #ACACAC;
  font-size: 1.0625rem;
}
.app-header .top.fixed .main-menu .menu-item:hover,
          .app-header .top.fixed .main-menu .menu-item.current-menu-item,
          .app-header .top.fixed .main-menu .menu-item.current-page-item,
          .app-header .top.fixed .main-menu .page-item:hover,
          .app-header .top.fixed .main-menu .page-item.current-menu-item,
          .app-header .top.fixed .main-menu .page-item.current-page-item,
          .app-header .top.fixed .main-menu .menu-item:focus,
          .app-header .top.fixed .main-menu .page-item:focus {
  background: none;
  color: #7B7B7B;
}
.app-header .top .mobile-navigation {
  display : none;
  overflow: hidden;
}
.app-header .top .mobile-navigation .mobile-button {
  padding        : 5px 8px;
  display        : inline-block;
  cursor         : pointer;
  vertical-align : middle;
  text-decoration: none;
  background     : #F1F1F1;
  border-radius  : 4px;
}
.app-header .top .mobile-navigation .mobile-button:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  content       : '\e90e';
  vertical-align: middle;
  color         : #545454;
  font-size     : 1.5625rem;
}
@media( max-width: 825px ) {

  .app-header .top .logo {
    width: 230px;
  }

  .app-header .top.fixed .main-menu {
    width: calc( 99.99% - 230px );
  }
}
@media      ( max-width: 768px ) {

  .app-header .container {
    padding: 0;
  }

  .app-header .top {
    display: block;
    padding: 15px 10px;
  }

  .app-header .top .main-menu {
    display: none !important;
  }

  .app-header .top .mobile-navigation {
    display: block;
    width: calc(99.999999% * 1.5/6);
  }

  .app-header .top .mobile-navigation:nth-child(1n){
    float: left;
    margin-right: 0;
    clear: none;
  }

  .app-header .top .mobile-navigation:last-child{
    margin-right: 0;
  }

  .app-header .top .mobile-navigation:nth-child(0n){
    margin-right: 0;
    float: right;
  }

  .app-header .top .mobile-navigation:nth-child(0n + 1){
    clear: left;
  }

  .app-header .top .logo {
    width: calc(99.999999% * 3.5/6);
  }

  .app-header .top .logo:nth-child(1n){
    float: left;
    margin-right: 0;
    clear: none;
  }

  .app-header .top .logo:last-child{
    margin-right: 0;
  }

  .app-header .top .logo:nth-child(0n){
    margin-right: 0;
    float: right;
  }

  .app-header .top .logo:nth-child(0n + 1){
    clear: left;
  }

  .app-header .top .mobile-search {
    display: block;
    width: calc(99.999999% * 1/6);
  }

  .app-header .top .mobile-search:nth-child(1n){
    float: left;
    margin-right: 0;
    clear: none;
  }

  .app-header .top .mobile-search:last-child{
    margin-right: 0;
  }

  .app-header .top .mobile-search:nth-child(0n){
    margin-right: 0;
    float: right;
  }

  .app-header .top .mobile-search:nth-child(0n + 1){
    clear: left;
  }
}
.app-sidebar {
  overflow: hidden;
}
.app-sidebar .sidebar > *, .app-sidebar .fixed-sidebar > * {
  margin-bottom: calc( 20px*1.5 );
}
.app-sidebar .sidebar > *:last-child, .app-sidebar .fixed-sidebar > *:last-child {
  margin-bottom: 0;
}
.app-sidebar .sidebar > *:first-child, .app-sidebar .fixed-sidebar > *:first-child {
  margin-top: 0;
}
.app-sidebar .sidebar {
  margin-bottom: calc( 20px*1.5 );
}
.app-sidebar .fixed-sidebar.float {
  position: fixed;
  right   : auto;
  left    : auto;
}
#wpstats {
  display: none;
}
.responsive-menu {
  display    : none;
  width: 100%;
  height: 100%;
  padding    : 0;
  list-style : none;
  margin     : 0;
  background : #206494;
  font-size  : 0.9em;
  font-weight: bold;
  overflow   : auto;
  position   : relative;
  -webkit-overflow-scrolling : touch;
}
.responsive-menu li {
  margin: 0;
  position: relative;
}
.responsive-menu li a {
  display        : block;
  color          : #ffffff;
  padding        : 15px 30px;
  border-bottom  : 1px solid rgba(0, 0, 0, .1);
  border-top     : 1px solid rgba(255, 255, 255, .1);
  text-decoration: none;
}
.responsive-menu li a:hover, .responsive-menu li a:focus {
  background: rgb(33, 118, 179);
  color     : #ffffff;
}
.responsive-menu li.current-menu-item > a, .responsive-menu li.current-page-item > a {
  background: #206494;
  color     : #ffffff;
}
.responsive-menu li.menu-item-has-children > a:before {
  content: '\203A';
  display : inline-block;
  font-size : 1rem;
  position: absolute;
  top: 0;
  bottom: 0;
  line-height: 10px;
  left: 5px;
  width: 10px;
  height: 10px;
  margin: auto 0;
}
.responsive-menu .sub-menu {
  will-change: transfrom;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition : transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  padding   : 0;
  margin    : 0;
  list-style: none;
  width : 200px;
  height : 100%;
  position : fixed;
  top : 0;
  -webkit-transform: translatex(-200px);
      -ms-transform: translatex(-200px);
          transform: translatex(-200px);
  font-weight : 700;
  box-shadow : inset -7px 0 17px rgba(0, 0, 0, 0.29);
  font-size  : 0.9em;
  overflow : auto;
  background : #206494;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-overflow-scrolling : touch;
}
.responsive-menu .sub-menu .sub-menu {
  margin-top: 0 !important;
}
.responsive-menu .sub-menu li > a {
  font-size : 0.875rem;
}
.responsive-menu .sub-menu.show {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  z-index: 6;
}
.responsive-menu .sub-menu .back a:before {
  content: '\2039';
  display : inline-block;
  font-size : 1rem;
  top: 0;
  bottom: 0;
  line-height: 10px;
  left: 5px;
  width: 10px;
  height: 10px;
  margin: auto 0;
  position: absolute;
}
.responsive-menu .sub-menu.current-menu-item > a, .responsive-menu .sub-menu.current-page-item > a {
  }

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position  : fixed;
  left      : 0;
  top       : 0;
  bottom    : 0;
  right     : 0;
  z-index   : 0;
  width     : 200px;
  overflow-y: auto;
  display   : none;
  -webkit-overflow-scrolling: touch;
}

.slideout-menu:before {
  content   : ' ';
  position  : absolute;
  width: 5px;
  height: 100%;
  top       : 0;
  bottom    : 0;
  right     : 0;
  box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
  z-index   : 1;
}

.slideout-panel {
  position:relative;
  z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .responsive-menu, .slideout-open body .responsive-menu, .slideout-open .slideout-panel .responsive-menu {
  display: block;
}

.slideout-open .slideout-menu {
  display: block;
}

.app-header {
  z-index: 3;
}

.app-header .top {
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition : transform 300ms ease, -webkit-transform 300ms ease;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #ffffff;
}

.app-header .top.fixed {
  height: 74px;
}

.app-header .top.no-transition {
  transition: none;
}

.fixed-open {
  -webkit-transform: translate3d(200px, 0px, 1px);
          transform: translate3d(200px, 0px, 1px);
  -webkit-transform-style: flat;
          transform-style: flat;
}

 /* Objects ( global ) */
.content-404 {

  padding: 110px 0;
  *zoom: 1;
  text-align  : center;
  background  : #ebf4fe;
}
.content-404:before{
  content: '';
  display: table;
}
.content-404:after{
  content: '';
  display: table;
  clear: both;
}
.content-404 .title {
  display    : inline-block;
  color      : #c5d9ef;
  font-size: calc(180px + 20 * ((100vw - 420px) / 860));
  font-weight: 200;
  width      : 100%;
}
@media screen and (min-width: 1280px){

  .content-404 .title{
    font-size: 200px;
  }
}
@media screen and (max-width: 420px){

  .content-404 .title{
    font-size: 180px;
  }
}
.content-404 .disclaimer {
  display: inline-block;
  color: #00365f;
  font-size: calc(24px + 8 * ((100vw - 420px) / 860));
  font-weight: 200;
  width: 100%;
}
@media screen and (min-width: 1280px){

  .content-404 .disclaimer{
    font-size: 32px;
  }
}
@media screen and (max-width: 420px){

  .content-404 .disclaimer{
    font-size: 24px;
  }
}
.content-404 .disclaimer:nth-child( 3n ) {
  padding-bottom: calc( 20px*2 );
}
.content-404 .search-bar {
  width: calc(99.99% * 4/12 - (30px - 30px * 4/12));
  margin-left: calc(99.99% * (-4/12 * -1) - (30px - 30px * (-4/12 * -1)) + 30px) !important;
}
.content-404 .search-bar:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.content-404 .search-bar:last-child{
  margin-right: 0;
}
.content-404 .search-bar:nth-child(12n){
  margin-right: 0;
  float: right;
}
.content-404 .search-bar:nth-child(12n + 1){
  clear: left;
}
.content-404 .search-bar .search {
  width: calc( 99% - 30px );
  height: 48px;
  color: #206494;
  font-size: 1.125rem;
  border-color: #206494;
}
.content-404 .search-bar .search::-webkit-input-placeholder {
  color: #206494;
}
.content-404 .search-bar .search:-moz-placeholder {/* Firefox 18- */
  color: #206494;
}
.content-404 .search-bar .search::-moz-placeholder {/* Firefox 19+ */
  color: #206494;
}
.content-404 .search-bar .search:-ms-input-placeholder {
  color: #206494;
}
.content-404 .search-bar .button {
  color       : #206494;
  padding     : 6px 5px;
  padding-left: 0;
  width: auto;
  height: auto;
}
.content-404 .search-bar .button:before {
  font-size: 1.375rem;
}
@media      ( max-width: 768px ) {

  .content-404 .search-bar {
    width: calc(99.99% * 4/6 - (30px - 30px * 4/6));
    margin-left: calc(99.99% * (-1/6 * -1) - (30px - 30px * (-1/6 * -1)) + 30px) !important;
  }

  .content-404 .search-bar:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .content-404 .search-bar:last-child{
    margin-right: 0;
  }

  .content-404 .search-bar:nth-child(6n){
    margin-right: 0;
    float: right;
  }

  .content-404 .search-bar:nth-child(6n + 1){
    clear: left;
  }
}
.author-snippet {
  padding      : 30px;
  *zoom: 1;
  border-top   : 1px solid #E0E0E0;
  margin-bottom: 20px;
}
.author-snippet:before{
  content: '';
  display: table;
}
.author-snippet:after{
  content: '';
  display: table;
  clear: both;
}
.author-snippet .display {
  width: calc(99.99% * 1/6 - (30px - 30px * 1/6));
  padding-top: cacl( 20px/2 );
}
.author-snippet .display:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.author-snippet .display:last-child{
  margin-right: 0;
}
.author-snippet .display:nth-child(6n){
  margin-right: 0;
  float: right;
}
.author-snippet .display:nth-child(6n + 1){
  clear: left;
}
.author-snippet .display img {
  padding-top  : 12px;
  max-width    : 100%;
  height       : auto;
  border-radius: 50%;
}
.author-snippet .column {
  width: calc(99.99% * 5/6 - (30px - 30px * 5/6));
}
.author-snippet .column:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.author-snippet .column:last-child{
  margin-right: 0;
}
.author-snippet .column:nth-child(6n){
  margin-right: 0;
  float: right;
}
.author-snippet .column:nth-child(6n + 1){
  clear: left;
}
.author-snippet .column .title {
  display    : inline-block;
  margin     : 0;
  padding-bottom: calc( 20px/2 );
  color      : #206494;
  font-size  : 1.375rem;
  line-height: 1;
  width      : 100%;
}
.author-snippet .column .content {
  color    : #444444;
  font-size: 1rem;
  line-height: 1.8rem;
}
.author-snippet .column .content a {
  color          : #c03d0c;
  transition     : color 0.1s ease-in-out;
  text-decoration: none;
}
.author-snippet .column .content a:visited {
  color: #c03d0c;
}
.author-snippet .column .content a:active,
        .author-snippet .column .content a:focus,
        .author-snippet .column .content a:hover,
        .author-snippet .column .content a:focus {
  color: rgb(153, 50, 13);
  text-decoration: underline;
}
@media( max-width: 568px ) {

  .author-snippet .display {
    width: calc(99.99% * 1/4 - (10px - 10px * 1/4));
  }

  .author-snippet .display:nth-child(1n){
    float: left;
    margin-right: 10px;
    clear: none;
  }

  .author-snippet .display:last-child{
    margin-right: 0;
  }

  .author-snippet .display:nth-child(0n){
    margin-right: 0;
    float: right;
  }

  .author-snippet .display:nth-child(0n + 1){
    clear: left;
  }

  .author-snippet .column {
    width: calc(99.99% * 3/4 - (10px - 10px * 3/4));
  }

  .author-snippet .column:nth-child(1n){
    float: left;
    margin-right: 10px;
    clear: none;
  }

  .author-snippet .column:last-child{
    margin-right: 0;
  }

  .author-snippet .column:nth-child(0n){
    margin-right: 0;
    float: right;
  }

  .author-snippet .column:nth-child(0n + 1){
    clear: left;
  }
}
@media      ( max-width: 414px ) {

  .author-snippet{
    text-align: center;
  }

  .author-snippet .display,
    .author-snippet .column {
    width: calc(99.99% * 1/1 - (20px - 20px * 1/1));
    height: calc(99.99% * 1/1 - (20px - 20px * 1/1));
    padding-top: 0;
  }

  .author-snippet .display:nth-child(1n),
    .author-snippet .column:nth-child(1n){
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    clear: none;
  }

  .author-snippet .display:last-child,
    .author-snippet .column:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .author-snippet .display:nth-child(0n),
    .author-snippet .column:nth-child(0n){
    margin-right: 0;
    float: right;
  }

  .author-snippet .display:nth-child(0n + 1),
    .author-snippet .column:nth-child(0n + 1){
    clear: left;
  }

  .author-snippet .display:nth-last-child(-n + 0),
    .author-snippet .column:nth-last-child(-n + 0){
    margin-bottom: 0;
  }
}
/*
 # Card grid object

  <section class="card-grid container">
    <span class="section-title">Latest</span>
    <div class="wrapper">
      <div class="info-card podcast">
        <span class="title">Listen</span>
        <div class="content">
          <ul class="styled-list">
            <li class="item"><a href="#">My tips and tools for creating your own podcast</a></li>
            <li class="item">How to work out how to brand your work</li>
            <li class="item">How to make a full time income your blog</li>
            <li class="item">My tips and tools for creating your own podcast</li>
            <li class="item">How to work out how to brand your work</li>
          </ul>
        </div>
        <div class="bottom">
          <a href="#" class="link">View all episodes</a>
        </div>
      </div>

      <div class="info-card blog">
        <span class="title">Read</span>
        <div class="content">
          <ul class="styled-list">
            <li class="item"><a href="#">My tips and tools for creating your own podcast</a></li>
            <li class="item">How to work out how to brand your work</li>
            <li class="item">How to make a full time income your blog</li>
            <li class="item">My tips and tools for creating your own podcast</li>
            <li class="item">How to work out how to brand your work</li>
          </ul>
        </div>
        <div class="bottom">
          <a href="#" class="link">View all episodes</a>
        </div>
      </div>
    </div>
  </section>

      <section class="card-grid container">
        <span class="section-title">Latest</span>
        <div class="wrapper">
          <div class="info-card podcast">
            <span class="title">Listen</span>
            <div class="content">
              <ul class="styled-list">
                <li class="item"><a href="#">My tips and tools for creating your own podcast</a></li>
                <li class="item">How to work out how to brand your work</li>
                <li class="item">How to make a full time income your blog</li>
                <li class="item">My tips and tools for creating your own podcast</li>
                <li class="item">How to work out how to brand your work</li>
              </ul>
            </div>
            <div class="bottom">
              <a href="#" class="link">View all episodes</a>
            </div>
          </div>

          <div class="info-card blog">
            <span class="title">Read</span>
            <div class="content">
              <ul class="styled-list">
                <li class="item"><a href="#">My tips and tools for creating your own podcast</a></li>
                <li class="item">How to work out how to brand your work</li>
                <li class="item">How to make a full time income your blog</li>
                <li class="item">My tips and tools for creating your own podcast</li>
                <li class="item">How to work out how to brand your work</li>
              </ul>
            </div>
            <div class="bottom">
              <a href="#" class="link">View all episodes</a>
            </div>
          </div>
        </div>
      </section>
 */

.card-grid {
  *zoom: 1;
  padding     : 60px 0;
}

.card-grid:before{
  content: '';
  display: table;
}

.card-grid:after{
  content: '';
  display: table;
  clear: both;
}

.card-grid .section-title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  margin-bottom: calc( 20px*2 );
}

@media screen and (min-width: 1280px){

  .card-grid .section-title{
    font-size: 64px;
  }
}

@media screen and (max-width: 420px){

  .card-grid .section-title{
    font-size: 48px;
  }
}

.card-grid .info-card {
  width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
}

.card-grid .info-card:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.card-grid .info-card:last-child{
  margin-right: 0;
}

.card-grid .info-card:nth-child(2n){
  margin-right: 0;
  float: right;
}

.card-grid .info-card:nth-child(2n + 1){
  clear: left;
}

@media( max-width: 1024px ) {

  .card-grid{
    padding: 60px calc( 20px/2 );
  }
}

@media      ( max-width: 768px ) {

  .card-grid .info-card {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    margin-bottom: 20px;
  }

  .card-grid .info-card:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .card-grid .info-card:last-child{
    margin-right: 0;
  }

  .card-grid .info-card:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .card-grid .info-card:nth-child(1n + 1){
    clear: left;
  }
}
/*
 # Categories sidebar object

 <div class="categories-sidebar">
   <span class="title">I need help with...</span>
   <div class="content">
     <ul class="styled-list">
       <li class="item"><a href="#">Starting a blog</a></li>
       <li class="item"><a href="#">Creating Content</a></li>
       <li class="item"><a href="#">Finding Readers and Community</a></li>
       <li class="item"><a href="#">Making Money</a></li>
       <li class="item"><a href="#">Productivity</a></li>
       <li class="item"><a href="#">Technical Stuff</a></li>
     </ul>
     <form action="#" class="search-bar">
       <input type="text" class="search" placeholder="Find Products" name="s">
       <button class="button"></button>
     </form>
   </div>
 </div>

    <div class="categories-sidebar">
      <span class="title">I need help with...</span>
      <div class="content">
        <ul class="styled-list">
          <li class="item"><a href="#">Starting a blog</a></li>
          <li class="item"><a href="#">Creating Content</a></li>
          <li class="item"><a href="#">Finding Readers and Community</a></li>
          <li class="item"><a href="#">Making Money</a></li>
          <li class="item"><a href="#">Productivity</a></li>
          <li class="item"><a href="#">Technical Stuff</a></li>
        </ul>
        <form action="#" class="search-bar">
          <input type="text" class="search" placeholder="Find Products" name="s">
          <button class="button"></button>
        </form>
      </div>
    </div>
 */

.categories-sidebar .title {
  background     : #d8eafe;
  padding        : calc( 20px/1.5 ) calc( 20px/2 );
  padding-bottom : calc( 20px / 2 );
  display        : inline-block;
  color          : #206494;
  font-size      : 1.125rem;
  font-weight    : 600;
  line-height    : 1;
  width          : 100%;
}

.categories-sidebar .title:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  display      : inline-block;
  padding      : 8px;
  margin-right : calc( 20px/1.5 );
  background   : #ffffff;
  border-radius: 50%;
  content      : ''\e90b'';
  color        : #c03d0c;
  font-size    : 1rem;
  margin-top   : -5px;
}

.categories-sidebar.trending .title:before {
  content: '\e909';
}

.categories-sidebar.trending .content .styled-list {
  padding-bottom: 0;
}

.categories-sidebar.social .title:before {
  content: '\f004';
}

.categories-sidebar.social .content {
  *zoom: 1;
  padding-bottom: calc( 20px/2 );
}

.categories-sidebar.social .content:before{
  content: '';
  display: table;
}

.categories-sidebar.social .content:after{
  content: '';
  display: table;
  clear: both;
}

.categories-sidebar.social .content .social-sidebar {
  text-align: center;
}

.categories-sidebar.features .title:before {
  content: '\f128';
  font-size: 1.25rem;
  padding: 6px 10px;
}

.categories-sidebar .content {
  padding: calc( 20px*1.5 ) calc( 20px/1.5 );
  background: #ffffff;
}

.categories-sidebar .content .styled-list {
  padding-bottom: calc( 20px*1.5 );
}

.categories-sidebar .content .styled-list .menu-item a, .categories-sidebar .content .styled-list .page-item a {
  font-size: 0.875rem;
}

.categories-sidebar .content .wrapper {
  *zoom: 1;
  padding: 0 calc( 20px*2 ) 20px;
  width: 100%;
  height: 100%;
}

.categories-sidebar .content .wrapper:before{
  content: '';
  display: table;
}

.categories-sidebar .content .wrapper:after{
  content: '';
  display: table;
  clear: both;
}

.categories-sidebar .content .wrapper .feature-widget {
  width: calc(99.99% * 1/2 - (20px - 20px * 1/2));
  height: calc(99.99% * 1/2 - (20px - 20px * 1/2));
}

.categories-sidebar .content .wrapper .feature-widget:nth-child(1n){
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  clear: none;
}

.categories-sidebar .content .wrapper .feature-widget:last-child{
  margin-right: 0;
  margin-bottom: 0;
}

.categories-sidebar .content .wrapper .feature-widget:nth-child(2n){
  margin-right: 0;
  float: right;
}

.categories-sidebar .content .wrapper .feature-widget:nth-child(2n + 1){
  clear: left;
}

.categories-sidebar .content .wrapper .feature-widget:nth-last-child(-n + 2){
  margin-bottom: 0;
}

.categories-sidebar .content .search-bar .search,
      .categories-sidebar .content .search-bar .button {
  color: #206494;
}

.categories-sidebar .content .search-bar .search::-webkit-input-placeholder, .categories-sidebar .content .search-bar .button::-webkit-input-placeholder {
  color: #206494;
}

.categories-sidebar .content .search-bar .search:-moz-placeholder, .categories-sidebar .content .search-bar .button:-moz-placeholder {/* Firefox 18- */
  color: #206494;
}

.categories-sidebar .content .search-bar .search::-moz-placeholder, .categories-sidebar .content .search-bar .button::-moz-placeholder {/* Firefox 19+ */
  color: #206494;
}

.categories-sidebar .content .search-bar .search:-ms-input-placeholder, .categories-sidebar .content .search-bar .button:-ms-input-placeholder {
  color: #206494;
}

@media( max-width: 1024px ) {

  .categories-sidebar .content .wrapper {
    padding: 0 0 20px;
  }
}

@media      ( max-width: 768px ) {

  .categories-sidebar .content .wrapper {
    padding: 0 calc( 20px*2 ) 20px;
  }
}

@media( max-width: 320px ) {

  .categories-sidebar .content .wrapper {
    padding: 0 20px 20px;
  }
}
.categories-snippet {

  text-align : center;
}
.categories-snippet .display {
  overflow     : hidden;
  max-height   : 162px;
  margin-bottom: calc(20px / 2);
  border       : 1px solid #B1B7C0;
  transition   : all 0.1s ease-in-out;
  position     : relative;
}
.categories-snippet .display img {
  width: 100%;
  height: 100%;
  display    : block;
  max-width  : 100%;
  min-height : 160px;
}
.categories-snippet .display:hover, .categories-snippet .display:focus {
  border-color: #c03d0c;
}
.categories-snippet .display:hover .play:before, .categories-snippet .display:focus .play:before {
  color : #206494;
}
.categories-snippet .display .play {
  display : block;
  position: absolute;
  left    : 0;
  right   : 0;
  top : 50%;
  margin  : auto;
  margin-top : -30px;
}
.categories-snippet .display .play:before {
  transition : all 0.3s ease-in-out;
  content    : '\f04b';
  font-family: 'Icomoon';
  font-size  : 3.75rem;
  color      : #EBF4FE;
}
.categories-snippet .display .powerpress_player {
  position : absolute;
  bottom   : 0;
  width    : 100%;
  opacity  : 0;
  z-index  : -1;
}
.categories-snippet .display .powerpress_player .mejs-audio {
  width : 100% !important;
}
.categories-snippet .title {
  display         : inline-block;
  margin          : 0 calc(20px / 2);
  transition      : all 0.1s ease-in-out;
  text-decoration : none;
  color           : #00365F;
}
.categories-snippet .title:visited {
  color : inherit;
}
.categories-snippet .title:hover, .categories-snippet .title:focus {
  color : #c03d0c;
}
@media( max-width: 568px ) {

  .categories-snippet .display {
    max-height : inherit;
  }

  .categories-snippet .display img {
    width      : auto;
    margin     : 0 auto;
    min-height : initial;
    height     : auto;
  }
}
/*
# Comments closed notice
<h1 class="closed-comments">Comments are closed for this post.</h1>
    <h1 class="closed-comments">Comments are closed for this post.</h1>
*/
.closed-comments {
  width      : 100%;
  margin-top : 16px;
  display    : block;
  text-align : center;
  font-size  : 1.5625rem;
  color      : #206494;
  font-weight: 700;
}
/*
 # Comment respond object

 <div id="respond" class="comment-respond">
   <h3 id="reply-title" class="comment-reply-title">Speak Your Mind <small><a rel="nofollow" id="cancel-comment-reply-link" href="#">Cancel reply</a></small></h3>

   <form action="#" method="post" id="commentform" class="comment-form">
     <p class="comment-form-author">
       <input id="author" name="author" type="text" value="" size="30" tabindex="1">
       <label for="author">Name</label> <span class="required">*</span>
     </p>
     <p class="comment-form-email">
       <input id="email" name="email" type="text" value="" size="30" tabindex="2"><label for="email">Email</label> <span class="required">*</span>
     </p>
     <p class="comment-form-url">
       <input id="url" name="url" type="text" value="" size="30" tabindex="3"><label for="url">Website</label>
     </p>
     <p class="comment-form-comment">
       <textarea id="comment" name="comment" cols="45" rows="8" tabindex="4"></textarea>
     </p>
     <p class="form-submit">
       <input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="" id="comment_post_ID">
     </p>
   </form>
 </div>

    <div id="respond" class="comment-respond">
      <h3 id="reply-title" class="comment-reply-title">Speak Your Mind <small><a rel="nofollow" id="cancel-comment-reply-link" href="#">Cancel reply</a></small></h3>

      <form action="#" method="post" id="commentform" class="comment-form">
        <p class="comment-form-author">
          <input id="author" name="author" type="text" value="" size="30" tabindex="1">
          <label for="author">Name</label> <span class="required">*</span>
        </p>
        <p class="comment-form-email">
          <input id="email" name="email" type="text" value="" size="30" tabindex="2"><label for="email">Email</label> <span class="required">*</span>
        </p>
        <p class="comment-form-url">
          <input id="url" name="url" type="text" value="" size="30" tabindex="3"><label for="url">Website</label>
        </p>
        <p class="comment-form-comment">
          <textarea id="comment" name="comment" cols="45" rows="8" tabindex="4"></textarea>
        </p>
        <p class="form-submit">
          <input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="" id="comment_post_ID">
        </p>
      </form>
    </div>
 */

.comment-respond .comment-reply-title {
  margin        : 0;
  padding       : 0 0 20px;
  display       : inline-block;
  color         : #00365f;
  font-size     : 1.125rem;
  font-weight   : 700;
  line-height   : 1;
  text-transform: uppercase;
}

.comment-respond p {
  margin: 0;
}

.comment-respond a {
  transition: all 0.1s ease-in-out;
  font-size : 0.9375rem;
  color     : #206494;
}

.comment-respond a:visited {
  color: #206494;
}

.comment-respond a:hover, .comment-respond a:focus {
  color: #c03d0c
}

.comment-respond .comment-form a {
  color          : #206494;
  font-weight    : 700;
  text-decoration: none;
}

.comment-respond .comment-form a:visited {
  color: #206494;
}

.comment-respond .comment-form a:hover, .comment-respond .comment-form a:focus {
  color: rgb(33, 88, 128);
}

.comment-respond .comment-form input[type=text],
.comment-respond .comment-form input[type=email],
.comment-respond .comment-form input[type=password],
.comment-respond .comment-form textarea {
  display     : inline-block;
  padding     : calc( 20px/2 ) 0;
  padding-left: calc( 20px/2 );
  border      : 1px solid #4c90b5;
  background  : #ffffff;
  color       : #444444;
  font-size   : 1rem;
  outline     : none;
  width       : 100%;
  resize      : none;
}

.comment-respond .comment-form label {
  color         : #206494;
  font-size     : 1.125rem;
  padding-bottom: calc( 20px/1.5 );
  display       : inline-block;
  line-height   : 1;
  font-weight: 700;
}

.comment-respond .comment-form .required {
  color    : #c03d0c;
  font-size: 0.75rem;
}

.comment-respond .comment-form .submit {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  font-size: 0.9375rem;
  width: 182px;
  height: 57px;
}

.comment-respond .comment-form .submit:hover,.comment-respond .comment-form .submit:focus{
  background: rgb(166, 54, 13);
}

.comment-respond .comment-form .logged-in-as,
    .comment-respond .comment-form .comment-notes {
  color: #206494;
  font-size: 1rem;
  margin: 0;
  padding-bottom: calc( 20px*2 );
}

.comment-respond .comment-form .comment-form-author,
    .comment-respond .comment-form .comment-form-email,
    .comment-respond .comment-form .comment-form-comment,
    .comment-respond .comment-form .comment-form-url {
  margin: 0;
  padding-bottom: calc( 20px*1.5 );
}

.comment-respond .comment-form .form-submit {
  margin     : 0;
  padding-top: calc( 20px*1.5 );
}

.comment-respond .comment-form input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

.comment-respond .comment-form .comment-form-subscriptions {
  color      : #206494;
  font-size  : 1rem;
  font-weight: 400;
  margin     : 0;
  padding    : 0;
}

.comment-respond .comment-form .comment-form-subscriptions label {
  margin     : 0;
  padding    : 0;
  font-size  : 1rem;
  font-weight: 400;
}

.comment-respond label[for="subscribe-reloaded"] {
  margin-top: 20px;
}

@media      ( max-width: 768px ) {

  .comment-respond .comment-form .submit {
    width: 100%;
  }
}
/*
 # Comment snippet object

  <div class="comment-snippet">
    <div class="column">
      <div class="display">
        <img src="http://41.media.tumblr.com/904b6a6ccb01ea0d99f62638ae977c0f/tumblr_nxgjo88w7t1st5lhmo8_1280.jpg" alt="">
      </div>
      <div class="content">
        <span class="author"><a href="#">Dane Boicos</a> says:</span>
        <span class="date">10/16/2015 at 1:20am</span>
      </div>
    </div>
    <div class="column">
      <a href="#" class="button">Reply</a>
    </div>
    <div class="post-content">Darren, as a fellow Australian and aspiring blogger, your information on monetization is invaluable to me! I have learned so much just from reading your posts. Thank you for making this venture far less daunting for me!</div>
  </div>

      <div class="comment-snippet">
        <div class="column">
          <div class="display">
            <img src="http://41.media.tumblr.com/904b6a6ccb01ea0d99f62638ae977c0f/tumblr_nxgjo88w7t1st5lhmo8_1280.jpg" alt="">
          </div>
          <div class="content">
            <span class="author"><a href="#">Dane Boicos</a> says:</span>
            <span class="date">10/16/2015 at 1:20am</span>
          </div>
        </div>
        <div class="column">
          <a href="#" class="button">Reply</a>
        </div>
        <div class="post-content">Darren, as a fellow Australian and aspiring blogger, your information on monetization is invaluable to me! I have learned so much just from reading your posts. Thank you for making this venture far less daunting for me!</div>
      </div>
 */

.comment-snippet {

  *zoom: 1;
  border-top  : 1px solid #dbdbdb;
  padding     : calc( 20px*1.5 ) 0;
}

.comment-snippet:before{
  content: '';
  display: table;
}

.comment-snippet:after{
  content: '';
  display: table;
  clear: both;
}

.comment-snippet .top {
  display      : block;
  margin       : 0;
  margin-bottom: calc( 20px / 2 );
  width        : 100%;
}

.comment-snippet .top:nth-child( 2 ) {
  width: calc( 99% - 68px );
}

.comment-snippet .top .display {
  width: 40px;
  height: 40px;
  display     : inline-block;
  margin-right: calc( 20px /2 );
}

.comment-snippet .top .display img {
  float: left;
  width: 100%;
}

.comment-snippet .top .meta {
  overflow      : hidden;
  color         : #206494;
  padding-bottom: 20px;
  display       : inline-block;
  vertical-align: top;
}

.comment-snippet .top .meta .author {
  display      : block;
  margin       : 0;
  margin-bottom: 5px;
  font-size    : 1rem;
  line-height  : 1;
}

.comment-snippet .top .meta .author a {
  transition: all 0.1s ease-in-out;
  color          : inherit;
  font-weight    : 700;
  text-decoration: none;
}

.comment-snippet .top .meta .author a:visited {
  color: #206494;
}

.comment-snippet .top .meta .author a:hover, .comment-snippet .top .meta .author a:focus {
  color: #c03d0c;
}

.comment-snippet .top .meta .date {
  float: right;
  transition     : all 0.1s ease-in-out;
  color          : inherit;
  display        : inline-block;
  font-size      : 0.9375rem;
  text-decoration: none;
}

.comment-snippet .top .meta .date:visited {
  color: #206494;
}

.comment-snippet .top .meta .date:hover, .comment-snippet .top .meta .date:focus {
  color: #c03d0c;
}

.comment-snippet .reply-wrapper > a {
  font-size      : 0.9375rem;
  color          : #c03d0c;
  background     : url( '../images/bullet-orange.png' ) center left no-repeat;
  background-size: 6px 10px;
  padding-left   : calc( 20px/2 );
  margin-top     : 20px;
  text-decoration: none;
}

.comment-snippet .post-content {
  font-size : 1rem;
  color     : #444444;
}

.comment-snippet .post-content h1,
.comment-snippet .post-content h2,
.comment-snippet .post-content h3,
.comment-snippet .post-content h4,
.comment-snippet .post-content h5,
.comment-snippet .post-content h6 {
  margin: 0 0 20px;
}

.comment-snippet .post-content h1 {
  font-size: 1.25rem;
}

.comment-snippet .post-content h2 {
  font-size: 1.125rem
}

.comment-snippet .post-content h3 {
  font-size: 1rem
}

.comment-snippet .post-content h4 {
  font-size: 0.875rem
}

.comment-snippet .post-content h5,
    .comment-snippet .post-content h6 {
  font-size: 0.8125rem;
}
/*
 # Comments navigation object

  <div class="comments-navigation">
    <div class="previous"><a href="">Older Comments</a></div>
    <div class="next"><a href="">Newer Comments</a></div>
  </div>

    <div class="comments-navigation">
      <div class="previous"><a href="">Older Comments</a></div>
      <div class="next"><a href="">Newer Comments</a></div>
    </div>
 */

.comments-navigation {
  *zoom: 1;
  width: 100%;
  height: 100%;
  padding     : 0 0 20px;
}

.comments-navigation:before{
  content: '';
  display: table;
}

.comments-navigation:after{
  content: '';
  display: table;
  clear: both;
}

.comments-navigation .previous,
  .comments-navigation .next {
  width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
  color: #206494;
}

.comments-navigation .previous:nth-child(1n),
  .comments-navigation .next:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.comments-navigation .previous:last-child,
  .comments-navigation .next:last-child{
  margin-right: 0;
}

.comments-navigation .previous:nth-child(2n),
  .comments-navigation .next:nth-child(2n){
  margin-right: 0;
  float: right;
}

.comments-navigation .previous:nth-child(2n + 1),
  .comments-navigation .next:nth-child(2n + 1){
  clear: left;
}

.comments-navigation .previous a, .comments-navigation .next a {
  transition: all 0.1s ease-in-out;
  color: inherit;
  text-decoration: none;
}

.comments-navigation .previous a:visited, .comments-navigation .next a:visited {
  color: #206494;
}

.comments-navigation .previous a:hover, .comments-navigation .next a:hover, .comments-navigation .previous a:focus, .comments-navigation .next a:focus {
  color: #c03d0c;
}

.comments-navigation .next {
  text-align: right;
}
/*
  # Comments section object

  <section class="comments" id="comments">
    <span class="section-title">Comments</span>
    <ol class="comment-list">
      <li class="comment">
        <div class="comment-snippet">
          <div class="column">
            <div class="display">
              <img src="http://41.media.tumblr.com/904b6a6ccb01ea0d99f62638ae977c0f/tumblr_nxgjo88w7t1st5lhmo8_1280.jpg" alt="">
            </div>
            <div class="content">
              <span class="author"><a href="#">Dane Boicos</a> says:</span>
              <span class="date">10/16/2015 at 1:20am</span>
            </div>
          </div>
          <div class="column">
            <a href="#" class="button">Reply</a>
          </div>
          <div class="post-content">Darren, as a fellow Australian and aspiring blogger, your information on monetization is invaluable to me! I have learned so much just from reading your posts. Thank you for making this venture far less daunting for me!</div>
        </div>
      </li>
    </ol>

    <div id="respond" class="comment-respond">
      <h3 id="reply-title" class="comment-reply-title">Speak Your Mind <small><a rel="nofollow" id="cancel-comment-reply-link" href="/archives/2015/11/09/a-3-step-blueprint-for-smart-affiliate-marketing/#respond" style="display:none;">Cancel reply</a></small></h3>

      <form action="#" method="post" id="commentform" class="comment-form">
        <p class="comment-form-author">
          <input id="author" name="author" type="text" value="" size="30" tabindex="1">
          <label for="author">Name</label> <span class="required">*</span>
        </p>
        <p class="comment-form-email">
          <input id="email" name="email" type="text" value="" size="30" tabindex="2"><label for="email">Email</label> <span class="required">*</span>
        </p>
        <p class="comment-form-url">
          <input id="url" name="url" type="text" value="" size="30" tabindex="3"><label for="url">Website</label>
        </p>
        <p class="comment-form-comment">
          <textarea id="comment" name="comment" cols="45" rows="8" tabindex="4"></textarea>
        </p>
        <p class="form-submit">
          <input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="45947" id="comment_post_ID">
        </p>
      </form>
    </div>
  </section>

      <section class="comments" id="comments">
        <span class="section-title">Comments</span>
        <ol class="comment-list">
          <li class="comment">
            <div class="comment-snippet">
              <div class="column">
                <div class="display">
                  <img src="http://41.media.tumblr.com/904b6a6ccb01ea0d99f62638ae977c0f/tumblr_nxgjo88w7t1st5lhmo8_1280.jpg" alt="">
                </div>
                <div class="content">
                  <span class="author"><a href="#">Dane Boicos</a> says:</span>
                  <span class="date">10/16/2015 at 1:20am</span>
                </div>
              </div>
              <div class="column">
                <a href="#" class="button">Reply</a>
              </div>
              <div class="post-content">Darren, as a fellow Australian and aspiring blogger, your information on monetization is invaluable to me! I have learned so much just from reading your posts. Thank you for making this venture far less daunting for me!</div>
            </div>
          </li>
        </ol>

        <div id="respond" class="comment-respond">
          <h3 id="reply-title" class="comment-reply-title">Speak Your Mind <small><a rel="nofollow" id="cancel-comment-reply-link" href="/archives/2015/11/09/a-3-step-blueprint-for-smart-affiliate-marketing/#respond" style="display:none;">Cancel reply</a></small></h3>

          <form action="#" method="post" id="commentform" class="comment-form">
            <p class="comment-form-author">
              <input id="author" name="author" type="text" value="" size="30" tabindex="1">
              <label for="author">Name</label> <span class="required">*</span>
            </p>
            <p class="comment-form-email">
              <input id="email" name="email" type="text" value="" size="30" tabindex="2"><label for="email">Email</label> <span class="required">*</span>
            </p>
            <p class="comment-form-url">
              <input id="url" name="url" type="text" value="" size="30" tabindex="3"><label for="url">Website</label>
            </p>
            <p class="comment-form-comment">
              <textarea id="comment" name="comment" cols="45" rows="8" tabindex="4"></textarea>
            </p>
            <p class="form-submit">
              <input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="45947" id="comment_post_ID">
            </p>
          </form>
        </div>
      </section>
*/

.comments .section-title {
  margin        : 0;
  padding       : 0 0 calc( 20px/1.5 );
  display       : inline-block;
  color         : #00365f;
  font-size     : 0.9375rem;
  font-weight   : 700;
  line-height   : 1;
  text-transform: uppercase;
}

.comments .comment-list {
  margin    : 0;
  padding   : 0 0;
  list-style: none;
}

.comments .comment-list li:nth-last-child(2) {
  padding-bottom: 20px;
}

.comments .comment-list li:last-child {
  padding-bottom: 60px;
}

/*margin-bottom: $margin-base;*/

.comments .comment-list .comment:last-child, .comments .comment-list .trackback:last-child, .comments .comment-list .pingback:last-child {
  margin-bottom: 0;
}

.comments .comment-list .comment .children, .comments .comment-list .trackback .children, .comments .comment-list .pingback .children {/*padding-top  : $padding-base;*/
  list-style   : none;
  padding-left : 68px;
}

.comments .comment-list .comment .children li:nth-last-child(2),
          .comments .comment-list .comment .children li:last-child,
          .comments .comment-list .trackback .children li:nth-last-child(2),
          .comments .comment-list .trackback .children li:last-child,
          .comments .comment-list .pingback .children li:nth-last-child(2),
          .comments .comment-list .pingback .children li:last-child {
  padding-bottom: 0;
}

@media( max-width: 1024px ) {

  .comments .comment-list .comment .children, .comments .comment-list .trackback .children, .comments .comment-list .pingback .children {
    padding-left: 40px;
  }
}

@media( max-width: 568px ) {

  .comments .comment-list .comment .children, .comments .comment-list .trackback .children, .comments .comment-list .pingback .children {
    padding-left: 20px;
  }
}
/*
 # Community bar object

 <section class="community-bar container">
   <div class="social-options">
     <a href="#" class="facebook"></a>
     <a href="#" class="twitter"></a>
     <a href="#" class="itunes"></a>
     <a href="#" class="linkedin"></a>
     <a href="#" class="rss"></a>
     <a href="#" class="youtube"></a>
   </div>
   <span class="cta">Join our community of <span class="highlight">300,000</span> + members!</span>
 </section>

    <section class="community-bar container">
      <div class="social-options">
        <a href="#" class="facebook"></a>
        <a href="#" class="twitter"></a>
        <a href="#" class="itunes"></a>
        <a href="#" class="linkedin"></a>
        <a href="#" class="rss"></a>
        <a href="#" class="youtube"></a>
      </div>
      <span class="cta">Join our community of <span class="highlight">300,000</span> + members!</span>
    </section>
 */

.community-bar {
  display: table;
  padding: calc( 20px*1.5 ) 0;
  width  : 100%;
}

.community-bar .social-options {
  display       : table-cell;
  vertical-align: middle;
  width         : 50%;
}

.community-bar .cta {
  display       : table-cell;
  vertical-align: middle;
  color         : #00365f;
  font-size     : 1.375rem;
  text-transform: uppercase;
  text-align    : right;
  line-height   : 1;
  width         : 50%;
}

.community-bar .cta .highlight {
  color      : #c03d0c;
  font-size  : 1.5625rem;
  font-weight: 700;
}

@media( max-width: 1024px ) {

  .community-bar{
    padding: calc( 20px*1.5 ) calc( 20px/2 );
  }
}

@media      ( max-width: 768px ) {

  .community-bar{
    display: none;/* .social-options,
    .cta {
      display   : inline-block;
      text-align: center;
      width     : 100%;
    }

    .social-options {
      margin-bottom: $margin-base;
    }
 */
  }
}
/*
 # Cta newsletter object

 <div class="cta-newsletter">
   <span class="title">Join Our Newsletter</span>
   <form action="" class="form-styled">
     <span class="mail-icon">
       <input type="email" placeholder="Join Over 321000 Readers!">
     </span>
     <button class="button">Subscribe</button>
   </form>
 </div>

    <div class="cta-newsletter">
      <span class="title">Join Our Newsletter</span>
      <form action="" class="form-styled">
        <span class="mail-icon">
          <input type="email" placeholder="Join Over 321000 Readers!">
        </span>
        <button class="button">Subscribe</button>
      </form>
    </div>
 */

.cta-newsletter {

  padding   : calc( 20px*1.5 ) 20px;
  background: #d8eafe;
  text-align: center;
}

.cta-newsletter .title {
  display       : inline-block;
  margin        : 0;
  padding-bottom: 20px;
  color         : #206494;
  font-size     : 1.875rem;
  line-height   : 1;
}

.cta-newsletter .form-styled .mail-icon {
  position     : relative;
  display      : inline-block;
  margin-bottom: calc( 20px/1.5 );
  width        : 100%;
}

.cta-newsletter .form-styled .mail-icon:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  content  : '\e904';
  color    : #206494;
  font-size: 0.9375rem;
  position : absolute;
  margin   : auto 0;
  top      : 0;
  bottom   : 0;
  left     : 10px;
  height   : 15px;
}

.cta-newsletter .form-styled input[type=text],
.cta-newsletter .form-styled input[type=email],
.cta-newsletter .form-styled input[type=password],
.cta-newsletter .form-styled textarea {
  padding-left: calc( 20px*2 );
  border-color: #b7b7b7;
  font-size   : 1rem;
  width: 100%;
  height: 40px;
}

.cta-newsletter .form-styled .button {
  width: 100%;
}
/*
 # cta offer object

 <section class="cta-offer">
   <span class="title">Life in natural Light</span>
   <div class="column">
     <img src="dist/images/book_single.png" alt="">
   </div>
   <div class="column">
     <span class="subtitle">As a photogrpher, the mos powerful tool you have is natural light</span>
     <div class="content">Over 96 gorgeously illustrated pages, you’ll be taken on a photographic journey celebrating natural light – and inspired to explore its creative possibilities.</div>
     <a href="#" class="button">Download it now!</a>
   </div>
 </section>

    <section class="cta-offer">
      <span class="title">Life in natural Light</span>
      <div class="column">
        <img src="dist/images/book_single.png" alt="">
      </div>
      <div class="column">
        <span class="subtitle">As a photogrpher, the mos powerful tool you have is natural light</span>
        <div class="content">Over 96 gorgeously illustrated pages, you’ll be taken on a photographic journey celebrating natural light – and inspired to explore its creative possibilities.</div>
        <a href="#" class="button">Download it now!</a>
      </div>
    </section>
 */

.cta-offer {

  *zoom: 1;
  padding     : calc( 20px*1.5 );
  background  : #f0f0f0;
}

.cta-offer:before{
  content: '';
  display: table;
}

.cta-offer:after{
  content: '';
  display: table;
  clear: both;
}

.cta-offer .column {
  width: calc(99.99% * 1/3 - (30px - 30px * 1/3));
}

.cta-offer .column:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.cta-offer .column:last-child{
  margin-right: 0;
}

.cta-offer .column:nth-child(3n){
  margin-right: 0;
  float: right;
}

.cta-offer .column:nth-child(3n + 1){
  clear: left;
}

.cta-offer .column:last-child {
  width: calc(99.99% * 2/3 - (30px - 30px * 2/3));
}

.cta-offer .column:last-child:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.cta-offer .column:last-child:last-child{
  margin-right: 0;
}

.cta-offer .column:last-child:nth-child(3n){
  margin-right: 0;
  float: right;
}

.cta-offer .column:last-child:nth-child(3n + 1){
  clear: left;
}

.cta-offer .column img {
  display  : block;
  margin   : 0 auto;
  max-width: 100%;
  height   : auto;
}

.cta-offer .title {
  width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  display       : inline-block;
  margin        : 0 0 calc( 20px*2 );
  color         : #206494;
  font-size     : 2.1875rem;
  font-weight   : 600;
  text-transform: uppercase;
  line-height   : 1;
}

.cta-offer .title:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.cta-offer .title:last-child{
  margin-right: 0;
}

.cta-offer .title:nth-child(1n){
  margin-right: 0;
  float: right;
}

.cta-offer .title:nth-child(1n + 1){
  clear: left;
}

.cta-offer .subtitle {
  display  : inline-block;
  margin   : 0 0 calc( 20px/1.5 );
  color    : #2f2f2f;
  font-size: 1.4375rem;
  width    : 100%;
}

.cta-offer .content {
  margin   : 0 0 calc( 20px/1.5 );
  color    : #6c6c6c;
  font-size: 0.9375rem;
}

.cta-offer .button {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  padding: calc( 20px/1.5 ) 0;
  width  : 240px;
}

.cta-offer .button:hover,.cta-offer .button:focus{
  background: rgb(166, 54, 13);
}

@media( max-width: 568px ) {

  .cta-offer .column {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    height: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    text-align : center;
  }

  .cta-offer .column:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .cta-offer .column:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .cta-offer .column:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .cta-offer .column:nth-child(1n + 1){
    clear: left;
  }

  .cta-offer .column:nth-last-child(-n + 1){
    margin-bottom: 0;
  }

  .cta-offer .column:last-child {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    height: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .cta-offer .column:last-child:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .cta-offer .column:last-child:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .cta-offer .column:last-child:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .cta-offer .column:last-child:nth-child(1n + 1){
    clear: left;
  }

  .cta-offer .column:last-child:nth-last-child(-n + 1){
    margin-bottom: 0;
  }

  .cta-offer .button {
    width: 100%;
  }
}
/*
 # Feature snippet object

 <article class="feature-snippet">
   <a href="#" class="display"></a>
   <a href="#" class="title">Creating content</a>
   <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
 </article>

    <article class="feature-snippet">
      <a href="#" class="display"></a>
      <a href="#" class="title">Creating content</a>
      <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
    </article>
 */

.feature-snippet {
  overflow  : hidden;
  text-align: center;
}

.feature-snippet a:hover, .feature-snippet a:focus {
  color: #c03d0c;
}

.feature-snippet a:hover .title, .feature-snippet a:focus .title {
  color: #c03d0c;
}

.feature-snippet .title {
  padding        : calc(20px / 2) 0;
  display        : inline-block;
  text-align     : center;
  width          : 100%;
  color          : #206494;
  font-size      : 1.3125rem;
  font-weight    : 600;
  text-transform : uppercase;
  transition     : all 0.1s ease-in-out;
  text-decoration: none;
}

.feature-snippet .icon {
  color          : #206494;
  text-decoration: none;
  display        : inline-block;
}

.feature-snippet .icon:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  transition: all 0.1s ease-in-out;
  font-size : 5.625rem;
  display   : block;
  margin    : 0;
}

.feature-snippet .icon .display {
  max-height: 90px;
  width     : auto;
  display: block;
  margin: 0 auto;
}

.feature-snippet.starting .icon:before{
  content: '\f144';
}

.feature-snippet.creating .icon:before{
  content: '\f040';
}

.feature-snippet.finding .icon:before{
  content: '\f1e5';
}

.feature-snippet.community .icon:before{
  content: '\f0c0';
}

.feature-snippet.money .icon:before{
  content: '\f0d6';
}

.feature-snippet.productivity .icon:before{
  content: '\f017';
}

.feature-snippet.technical .icon:before{
  content: '\f085';
}

.feature-snippet.work .icon:before{
  content: '\f1ea';
}
.feature-widget {
  overflow  : hidden;
  display   : inline-block;
  text-align: center;
}
.feature-widget .icon {
  color          : #206494;
  text-decoration: none;
  transition     : all 0.1s ease-in-out;
  display        : inline-block;
  padding        : 0;
  vertical-align : top;
}
.feature-widget .icon:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  font-size: 2.5rem;
  margin   : 0;
}
.feature-widget .icon .display {
  max-height: 40px;
  width     : auto;
  float     : left;
}
.feature-widget .icon img {
  max-width: 100%;
}
.feature-widget .icon:hover, .feature-widget .icon:focus {
  color: #c03d0c;
}
.feature-widget .link {
  display       : inline-block;
  width         : 100%;
  padding-top   : 5px;
  text-transform: capitalize;
}
.feature-widget.starting .icon:before{
  content: '\f144';
}
.feature-widget.creating .icon:before{
  content: '\f040';
}
.feature-widget.finding .icon:before{
  content: '\f1e5';
}
.feature-widget.community .icon:before{
  content: '\f0c0';
}
.feature-widget.money .icon:before{
  content: '\f0d6';
}
.feature-widget.productivity .icon:before{
  content: '\f017';
}
.feature-widget.technical .icon:before{
  content: '\f085';
}
.feature-widget.work .icon:before{
  content: '\f1ea';
}
/*
 # Features section object

  <section class="features-section container">
    <span class="section-title">I need help with...</span>
    <div class="wrapper">
      <article class="feature-snippet">
        <a href="#" class="display">
          <img src="dist/images/feature-blog.png" alt="">
        </a>
        <a href="#" class="title">Starting a blog</a>
        <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
      </article>
      <article class="feature-snippet">
        <a href="#" class="display">
          <img src="dist/images/feature-content.png" alt="">
        </a>
        <a href="#" class="title">Creating content</a>
        <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
      </article>
      <article class="feature-snippet">
        <a href="#" class="display">
          <img src="dist/images/feature-readers.png" alt="">
        </a>
        <a href="#" class="title">Finding readers</a>
        <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
      </article>
    </div>
  </section>

      <section class="features-section container">
        <span class="section-title">I need help with...</span>
        <div class="wrapper">
          <article class="feature-snippet">
            <a href="#" class="display">
              <img src="dist/images/feature-blog.png" alt="">
            </a>
            <a href="#" class="title">Starting a blog</a>
            <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
          </article>
          <article class="feature-snippet">
            <a href="#" class="display">
              <img src="dist/images/feature-content.png" alt="">
            </a>
            <a href="#" class="title">Creating content</a>
            <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
          </article>
          <article class="feature-snippet">
            <a href="#" class="display">
              <img src="dist/images/feature-readers.png" alt="">
            </a>
            <a href="#" class="title">Finding readers</a>
            <div class="content">Lorem ipsum dolor sit amet, reawul consectetur adipiscing elit. leo cursus, rhoncus massa iduyares</div>
          </article>
        </div>
      </section>
 */

.features-section {
  padding: 60px 0 0;
}

.features-section .section-title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  margin: 0;
  padding: 0 0 calc( 20px*2 );
}

@media screen and (min-width: 1280px){

  .features-section .section-title{
    font-size: 64px;
  }
}

@media screen and (max-width: 420px){

  .features-section .section-title{
    font-size: 48px;
  }
}

.features-section .wrapper {
  *zoom: 1;
  padding-bottom: calc( 20px*2 );
  border-bottom: 4px solid #C1C8CC;
}

.features-section .wrapper:before{
  content: '';
  display: table;
}

.features-section .wrapper:after{
  content: '';
  display: table;
  clear: both;
}

.features-section .feature-snippet {
  width: calc(99.99% * 1/4 - (30px - 30px * 1/4));
  height: calc(99.99% * 1/4 - (30px - 30px * 1/4));
}

.features-section .feature-snippet:nth-child(1n){
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  clear: none;
}

.features-section .feature-snippet:last-child{
  margin-right: 0;
  margin-bottom: 0;
}

.features-section .feature-snippet:nth-child(4n){
  margin-right: 0;
  float: right;
}

.features-section .feature-snippet:nth-child(4n + 1){
  clear: left;
}

.features-section .feature-snippet:nth-last-child(-n + 4){
  margin-bottom: 0;
}

@media( max-width: 1024px ) {

  .features-section{
    padding: 60px calc( 20px/2 );
  }
}

@media      ( max-width: 768px ) {

  .features-section .feature-snippet {
    width: calc(99.99% * 1/3 - (30px - 30px * 1/3));
    height: calc(99.99% * 1/3 - (30px - 30px * 1/3));
  }

  .features-section .feature-snippet:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .features-section .feature-snippet:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .features-section .feature-snippet:nth-child(3n){
    margin-right: 0;
    float: right;
  }

  .features-section .feature-snippet:nth-child(3n + 1){
    clear: left;
  }

  .features-section .feature-snippet:nth-last-child(-n + 3){
    margin-bottom: 0;
  }
}

@media( max-width: 568px ) {

  .features-section .feature-snippet {
    width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
    height: calc(99.99% * 1/2 - (30px - 30px * 1/2));
  }

  .features-section .feature-snippet:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .features-section .feature-snippet:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .features-section .feature-snippet:nth-child(2n){
    margin-right: 0;
    float: right;
  }

  .features-section .feature-snippet:nth-child(2n + 1){
    clear: left;
  }

  .features-section .feature-snippet:nth-last-child(-n + 2){
    margin-bottom: 0;
  }
}

@media( max-width: 320px ) {

  .features-section .feature-snippet {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    height: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .features-section .feature-snippet:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .features-section .feature-snippet:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .features-section .feature-snippet:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .features-section .feature-snippet:nth-child(1n + 1){
    clear: left;
  }

  .features-section .feature-snippet:nth-last-child(-n + 1){
    margin-bottom: 0;
  }
}
/*
 # Footer menu object

<hr>

 <ul class="footer-menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About Us</a></li>
    <li class="menu-item"><a href="#">Services</a></li>
    <li class="menu-item"><a href="#">Resources</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
 </ul>

    <ul class="footer-menu">
      <li class="menu-item"><a href="#">Home</a></li>
      <li class="menu-item"><a href="#">About Us</a></li>
      <li class="menu-item"><a href="#">Services</a></li>
      <li class="menu-item"><a href="#">Resources</a></li>
      <li class="menu-item"><a href="#">Contact</a></li>
    </ul>
*/
.footer-menu {
  padding   : 0;
  margin    : 0;
  list-style: none;
}
.footer-menu .menu-item,
  .footer-menu .page-item {
  margin-right: 20px;
  display     : inline-block;
  color       : #ffffff;
  font-size   : 0.8125rem;
  transition  : all 0.1s ease-in-out;
}
.footer-menu .menu-item:last-child, .footer-menu .page-item:last-child {
  margin: 0la;
}
.footer-menu .menu-item:last-child, .footer-menu .page-item:last-child {
  margin-right: 0;
}
.footer-menu .menu-item a, .footer-menu .page-item a {
  display: inline-block;
  color           : inherit;
  font-size       : inherit;
  text-decoration : none;
}
.footer-menu .menu-item a:hover, .footer-menu .page-item a:hover, .footer-menu .menu-item a:focus, .footer-menu .page-item a:focus {
  color: rgb(142, 142, 142);
}
.footer-widget-wrapper .column {
  width: calc(99.99% * 1/3 - (40px - 40px * 1/3));
  padding     : calc( 20px * 2 ) 0;/*     .author-info {
      text-transform : uppercase;
      line-height    : 1;
      color          : $color-white;
      font-weight    : 600;
      font-family    : $font-primary;
      padding-bottom : calc( $padding-base / 1 );
    }

    .author-pic {
      float          : left;
      padding-right  : calc( $padding-base / 2 );
      padding-bottom : 0;
      max-width      : 40%;
      height         : auto;
      max-height     : 200px;
    }

    .widget-content, .widget-content-book {
      color       : $color-white;
      font-family : $font-primary;
      line-height : 1.7;
      font-size   : rem( 16 );

      a {
        transition: 0.1s color ease-in-out;
        font-style: oblique;
        color: $color-white;

        &:visited {
          color: $color-white;
        }

        &:hover {
          color: $color-orange;
        }
      }
    }

    .widget-content-book {
      font-size: rem( 20 );
    }

    .read-more {
      display          : inline-block;
      transition       : background-color 200ms ease-in-out;
      padding          : calc( $padding-base / 2 );
      color            : $color-white;
      text-transform   : uppercase;
      background-color : #C03D15;
      text-decoration  : none;
      border-radius    : 5px;
      font-weight      : 600;
      font-family      : $font-primary;
      text-align       : right;
      margin-top: $margin-base;

      &:hover {
        background-color: color( #C03D15 b( 30 ) );
      }

      &:visited {
        color: $color-white;
      }
    } */
}
.footer-widget-wrapper .column:nth-child(1n){/*     .author-info {
      text-transform : uppercase;
      line-height    : 1;
      color          : $color-white;
      font-weight    : 600;
      font-family    : $font-primary;
      padding-bottom : calc( $padding-base / 1 );
    }

    .author-pic {
      float          : left;
      padding-right  : calc( $padding-base / 2 );
      padding-bottom : 0;
      max-width      : 40%;
      height         : auto;
      max-height     : 200px;
    }

    .widget-content, .widget-content-book {
      color       : $color-white;
      font-family : $font-primary;
      line-height : 1.7;
      font-size   : rem( 16 );

      a {
        transition: 0.1s color ease-in-out;
        font-style: oblique;
        color: $color-white;

        &:visited {
          color: $color-white;
        }

        &:hover {
          color: $color-orange;
        }
      }
    }

    .widget-content-book {
      font-size: rem( 20 );
    }

    .read-more {
      display          : inline-block;
      transition       : background-color 200ms ease-in-out;
      padding          : calc( $padding-base / 2 );
      color            : $color-white;
      text-transform   : uppercase;
      background-color : #C03D15;
      text-decoration  : none;
      border-radius    : 5px;
      font-weight      : 600;
      font-family      : $font-primary;
      text-align       : right;
      margin-top: $margin-base;

      &:hover {
        background-color: color( #C03D15 b( 30 ) );
      }

      &:visited {
        color: $color-white;
      }
    } */
  float: left;
  margin-right: 40px;
  clear: none;
}
.footer-widget-wrapper .column:last-child{/*     .author-info {
      text-transform : uppercase;
      line-height    : 1;
      color          : $color-white;
      font-weight    : 600;
      font-family    : $font-primary;
      padding-bottom : calc( $padding-base / 1 );
    }

    .author-pic {
      float          : left;
      padding-right  : calc( $padding-base / 2 );
      padding-bottom : 0;
      max-width      : 40%;
      height         : auto;
      max-height     : 200px;
    }

    .widget-content, .widget-content-book {
      color       : $color-white;
      font-family : $font-primary;
      line-height : 1.7;
      font-size   : rem( 16 );

      a {
        transition: 0.1s color ease-in-out;
        font-style: oblique;
        color: $color-white;

        &:visited {
          color: $color-white;
        }

        &:hover {
          color: $color-orange;
        }
      }
    }

    .widget-content-book {
      font-size: rem( 20 );
    }

    .read-more {
      display          : inline-block;
      transition       : background-color 200ms ease-in-out;
      padding          : calc( $padding-base / 2 );
      color            : $color-white;
      text-transform   : uppercase;
      background-color : #C03D15;
      text-decoration  : none;
      border-radius    : 5px;
      font-weight      : 600;
      font-family      : $font-primary;
      text-align       : right;
      margin-top: $margin-base;

      &:hover {
        background-color: color( #C03D15 b( 30 ) );
      }

      &:visited {
        color: $color-white;
      }
    } */
  margin-right: 0;
}
.footer-widget-wrapper .column:nth-child(0n){/*     .author-info {
      text-transform : uppercase;
      line-height    : 1;
      color          : $color-white;
      font-weight    : 600;
      font-family    : $font-primary;
      padding-bottom : calc( $padding-base / 1 );
    }

    .author-pic {
      float          : left;
      padding-right  : calc( $padding-base / 2 );
      padding-bottom : 0;
      max-width      : 40%;
      height         : auto;
      max-height     : 200px;
    }

    .widget-content, .widget-content-book {
      color       : $color-white;
      font-family : $font-primary;
      line-height : 1.7;
      font-size   : rem( 16 );

      a {
        transition: 0.1s color ease-in-out;
        font-style: oblique;
        color: $color-white;

        &:visited {
          color: $color-white;
        }

        &:hover {
          color: $color-orange;
        }
      }
    }

    .widget-content-book {
      font-size: rem( 20 );
    }

    .read-more {
      display          : inline-block;
      transition       : background-color 200ms ease-in-out;
      padding          : calc( $padding-base / 2 );
      color            : $color-white;
      text-transform   : uppercase;
      background-color : #C03D15;
      text-decoration  : none;
      border-radius    : 5px;
      font-weight      : 600;
      font-family      : $font-primary;
      text-align       : right;
      margin-top: $margin-base;

      &:hover {
        background-color: color( #C03D15 b( 30 ) );
      }

      &:visited {
        color: $color-white;
      }
    } */
  margin-right: 0;
  float: right;
}
.footer-widget-wrapper .column:nth-child(0n + 1){/*     .author-info {
      text-transform : uppercase;
      line-height    : 1;
      color          : $color-white;
      font-weight    : 600;
      font-family    : $font-primary;
      padding-bottom : calc( $padding-base / 1 );
    }

    .author-pic {
      float          : left;
      padding-right  : calc( $padding-base / 2 );
      padding-bottom : 0;
      max-width      : 40%;
      height         : auto;
      max-height     : 200px;
    }

    .widget-content, .widget-content-book {
      color       : $color-white;
      font-family : $font-primary;
      line-height : 1.7;
      font-size   : rem( 16 );

      a {
        transition: 0.1s color ease-in-out;
        font-style: oblique;
        color: $color-white;

        &:visited {
          color: $color-white;
        }

        &:hover {
          color: $color-orange;
        }
      }
    }

    .widget-content-book {
      font-size: rem( 20 );
    }

    .read-more {
      display          : inline-block;
      transition       : background-color 200ms ease-in-out;
      padding          : calc( $padding-base / 2 );
      color            : $color-white;
      text-transform   : uppercase;
      background-color : #C03D15;
      text-decoration  : none;
      border-radius    : 5px;
      font-weight      : 600;
      font-family      : $font-primary;
      text-align       : right;
      margin-top: $margin-base;

      &:hover {
        background-color: color( #C03D15 b( 30 ) );
      }

      &:visited {
        color: $color-white;
      }
    } */
  clear: left;
}
.footer-widget-wrapper .rounded,
  .footer-widget-wrapper .title {
  display       : inline-block;
  margin        : 0;
  color         : #ffffff;
  font-size     : 1rem;
  text-transform: uppercase;
  line-height   : 1;
  padding-bottom: 20px;
  font-weight   : 600;
}
.footer-widget-wrapper .rounded a, .footer-widget-wrapper .title a {
  transition     : color 100ms ease-in-out;
  display        : inline-block;
  color          : inherit;
  font-size      : inherit;
  text-decoration: none;
}
.footer-widget-wrapper .rounded a:hover, .footer-widget-wrapper .title a:hover, .footer-widget-wrapper .rounded a:focus, .footer-widget-wrapper .title a:focus {
  color: #c03d0c;
}
.footer-widget-wrapper .rounded a img, .footer-widget-wrapper .title a img {
  display: none;
}
.footer-widget-wrapper ul {
  list-style: none;
  padding   : 0;
  margin    : 0;
}
.footer-widget-wrapper ul li {
  font-size     : 0.875rem;
  vertical-align: middle;
  padding-bottom: calc( 20px/2 );
}
.footer-widget-wrapper ul li a {
  transition     : color 100ms ease-in-out;
  display        : inline-block;
  color          : #ffffff;
  font-size      : inherit;
  text-decoration: none;
  vertical-align : middle;
  line-height    : 1.3;
  position: relative;
  padding-left: 16px;
}
.footer-widget-wrapper ul li a:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  position     : absolute;
  top          : 6px;
  bottom       : 0;
  left         : 0;
  width        : 16px;
  height       : 9px;
  content      : '\f111';
  font-size    : 8px;
  padding-right: calc( 20px/2 );
  color        : #c03d0c;
}
.footer-widget-wrapper ul li a:hover, .footer-widget-wrapper ul li a:focus {/* color: color( $color-font-highlight tint( 8% ) ); */
  color: #c03d0c;
}
@media( max-width: 1024px ) {

  .footer-widget-wrapper .column {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .footer-widget-wrapper .column:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .footer-widget-wrapper .column:last-child{
    margin-right: 0;
  }

  .footer-widget-wrapper .column:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .footer-widget-wrapper .column:nth-child(1n + 1){
    clear: left;
  }

  .footer-widget-wrapper .column:nth-child( 2 ), .footer-widget-wrapper .column:nth-child( 3 ) {
    width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
  }

  .footer-widget-wrapper .column:nth-child( 2 ):nth-child(1n), .footer-widget-wrapper .column:nth-child( 3 ):nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .footer-widget-wrapper .column:nth-child( 2 ):last-child, .footer-widget-wrapper .column:nth-child( 3 ):last-child{
    margin-right: 0;
  }

  .footer-widget-wrapper .column:nth-child( 2 ):nth-child(2n), .footer-widget-wrapper .column:nth-child( 3 ):nth-child(2n){
    margin-right: 0;
    float: right;
  }

  .footer-widget-wrapper .column:nth-child( 2 ):nth-child(2n + 1), .footer-widget-wrapper .column:nth-child( 3 ):nth-child(2n + 1){
    clear: left;
  }

  .footer-widget-wrapper .column:nth-child( 3 ) {
    clear: none !important;
  }
}
@media( max-width: 568px ) {

  .footer-widget-wrapper .column {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .footer-widget-wrapper .column:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .footer-widget-wrapper .column:last-child{
    margin-right: 0;
  }

  .footer-widget-wrapper .column:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .footer-widget-wrapper .column:nth-child(1n + 1){
    clear: left;
  }

  .footer-widget-wrapper .column:nth-child(2), .footer-widget-wrapper .column:nth-child( 3 ) {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .footer-widget-wrapper .column:nth-child(2):nth-child(1n), .footer-widget-wrapper .column:nth-child( 3 ):nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .footer-widget-wrapper .column:nth-child(2):last-child, .footer-widget-wrapper .column:nth-child( 3 ):last-child{
    margin-right: 0;
  }

  .footer-widget-wrapper .column:nth-child(2):nth-child(1n), .footer-widget-wrapper .column:nth-child( 3 ):nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .footer-widget-wrapper .column:nth-child(2):nth-child(1n + 1), .footer-widget-wrapper .column:nth-child( 3 ):nth-child(1n + 1){
    clear: left;
  }

  .footer-widget-wrapper .column:nth-child( 3 ) {
    clear: left;
  }
}
/*
 # Form styled object

 <form action="#" class="form-styled">
   <input type="text" class="third" placeholder="Name">
   <input type="email" class="third" placeholder="Email">
   <button class="button">Subscribe</button>
 </form>

    <form action="#" class="form-styled">
      <input type="text" class="third" placeholder="Name">
      <input type="email" class="third" placeholder="Email">
      <button class="button">Subscribe</button>
    </form>
 */

.form-styled,
.contact-form {
  *zoom: 1;
}

.form-styled:before,
.contact-form:before{
  content: '';
  display: table;
}

.form-styled:after,
.contact-form:after{
  content: '';
  display: table;
  clear: both;
}

.form-styled input[type=text],
.form-styled input[type=email],
.form-styled input[type=password],
.form-styled textarea,
.form-styled select,
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=password],
.contact-form textarea,
.contact-form select {
  display     : inline-block;
  padding     : calc( 20px/1.5 ) 0;
  padding-left: 20px;
  border      : 1px solid #206494;
  background  : #ffffff;
  color       : #444444;
  font-size   : 1rem;
  outline     : none;
  height      : 48px;
  max-width : 100% !important;
}

.form-styled input[type=text]::-webkit-input-placeholder,
.form-styled input[type=email]::-webkit-input-placeholder,
.form-styled input[type=password]::-webkit-input-placeholder,
.form-styled textarea::-webkit-input-placeholder,
.form-styled select::-webkit-input-placeholder,
.contact-form input[type=text]::-webkit-input-placeholder,
.contact-form input[type=email]::-webkit-input-placeholder,
.contact-form input[type=password]::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder,
.contact-form select::-webkit-input-placeholder {
  color: #a7a7a7;
}

.form-styled input[type=text]:-moz-placeholder,
.form-styled input[type=email]:-moz-placeholder,
.form-styled input[type=password]:-moz-placeholder,
.form-styled textarea:-moz-placeholder,
.form-styled select:-moz-placeholder,
.contact-form input[type=text]:-moz-placeholder,
.contact-form input[type=email]:-moz-placeholder,
.contact-form input[type=password]:-moz-placeholder,
.contact-form textarea:-moz-placeholder,
.contact-form select:-moz-placeholder {/* Firefox 18- */
  color: #a7a7a7;
}

.form-styled input[type=text]::-moz-placeholder,
.form-styled input[type=email]::-moz-placeholder,
.form-styled input[type=password]::-moz-placeholder,
.form-styled textarea::-moz-placeholder,
.form-styled select::-moz-placeholder,
.contact-form input[type=text]::-moz-placeholder,
.contact-form input[type=email]::-moz-placeholder,
.contact-form input[type=password]::-moz-placeholder,
.contact-form textarea::-moz-placeholder,
.contact-form select::-moz-placeholder {/* Firefox 19+ */
  color: #a7a7a7;
}

.form-styled input[type=text]:-ms-input-placeholder,
.form-styled input[type=email]:-ms-input-placeholder,
.form-styled input[type=password]:-ms-input-placeholder,
.form-styled textarea:-ms-input-placeholder,
.form-styled select:-ms-input-placeholder,
.contact-form input[type=text]:-ms-input-placeholder,
.contact-form input[type=email]:-ms-input-placeholder,
.contact-form input[type=password]:-ms-input-placeholder,
.contact-form textarea:-ms-input-placeholder,
.contact-form select:-ms-input-placeholder {
  color: #a7a7a7;
}

.form-styled .third, .contact-form .third {
  width: calc(99.99% * 3/8 - (15px - 15px * 3/8));
}

.form-styled .third:nth-child(1n), .contact-form .third:nth-child(1n){
  float: left;
  margin-right: 15px;
  clear: none;
}

.form-styled .third:last-child, .contact-form .third:last-child{
  margin-right: 0;
}

.form-styled .third:nth-child(8n), .contact-form .third:nth-child(8n){
  margin-right: 0;
  float: right;
}

.form-styled .third:nth-child(8n + 1), .contact-form .third:nth-child(8n + 1){
  clear: left;
}

.form-styled .button,
  .form-styled input[type="submit"],
  .contact-form .button,
  .contact-form input[type="submit"] {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  font-size     : 1rem;
  text-transform: uppercase;
  width: 157px;
  height: 48px;
}

.form-styled .button:hover,.form-styled input[type="submit"]:hover,.contact-form .button:hover,.contact-form input[type="submit"]:hover,.form-styled .button:focus,.form-styled input[type="submit"]:focus,.contact-form .button:focus,.contact-form input[type="submit"]:focus{
  background: rgb(166, 54, 13);
}

.form-styled label, .contact-form label {
  display       : inline-block;
  padding-bottom: 10px;
  font-size     : 1rem;
  font-weight   : 600;
}

.form-styled label span, .contact-form label span {
  font-weight: 400;
}

@media( max-width: 568px ) {

  .form-styled .third, .contact-form .third {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    margin-bottom: 20px;
  }

  .form-styled .third:nth-child(1n), .contact-form .third:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .form-styled .third:last-child, .contact-form .third:last-child{
    margin-right: 0;
  }

  .form-styled .third:nth-child(1n), .contact-form .third:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .form-styled .third:nth-child(1n + 1), .contact-form .third:nth-child(1n + 1){
    clear: left;
  }

  .form-styled .third:last-child, .contact-form .third:last-child {
    margin-bottom: 0;
  }
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=password],
.contact-form textarea,
.contact-form select {
  width: 100% !important;
  margin-bottom: 20px !important;
}

.contact-form textarea {
  min-height: 155px !important;
}
/*
 # Hero categories object

  <section class="hero-categories container">
    <span class="section-title">Start Here</span>
    <div class="wrapper">
      <article class="categories-snippet">
        <span class="title">Category Name</span>
        <ul class="list">
          <li class="item"><a href="">Link the number one here please</a></li>
          <li class="item"><a href="">Another link but number two</a></li>
          <li class="item">One more beauty  link the three</li>
          <li class="item">The final link in here is the four</li>
        </ul>
        <a href="#" class="link">More</a>
      </article>

      <article class="categories-snippet">
        <span class="title">Category Name</span>
        <ul class="list">
          <li class="item">Link the number one here please</li>
          <li class="item">Another link but number two</li>
          <li class="item">One more beauty  link the three</li>
          <li class="item">The final link in here is the four</li>
        </ul>
        <a href="#" class="link">More</a>
      </article>

      <article class="categories-snippet">
        <span class="title">Category Name</span>
        <ul class="list">
          <li class="item">Link the number one here please</li>
          <li class="item">Another link but number two</li>
          <li class="item">One more beauty  link the three</li>
          <li class="item">The final link in here is the four</li>
        </ul>
        <a href="#" class="link">More</a>
      </article>

      <article class="categories-snippet">
        <span class="title">Category Name</span>
        <ul class="list">
          <li class="item">Link the number one here please</li>
          <li class="item">Another link but number two</li>
          <li class="item">One more beauty  link the three</li>
          <li class="item">The final link in here is the four</li>
        </ul>
        <a href="#" class="link">More</a>
      </article>
    </div>
  </section>

      <section class="hero-categories container">
        <span class="section-title">Start Here</span>
        <div class="wrapper">
          <article class="categories-snippet">
            <span class="title">Category Name</span>
            <ul class="list">
              <li class="item"><a href="">Link the number one here please</a></li>
              <li class="item"><a href="">Another link but number two</a></li>
              <li class="item">One more beauty  link the three</li>
              <li class="item">The final link in here is the four</li>
            </ul>
            <a href="#" class="link">More</a>
          </article>

          <article class="categories-snippet">
            <span class="title">Category Name</span>
            <ul class="list">
              <li class="item">Link the number one here please</li>
              <li class="item">Another link but number two</li>
              <li class="item">One more beauty  link the three</li>
              <li class="item">The final link in here is the four</li>
            </ul>
            <a href="#" class="link">More</a>
          </article>

          <article class="categories-snippet">
            <span class="title">Category Name</span>
            <ul class="list">
              <li class="item">Link the number one here please</li>
              <li class="item">Another link but number two</li>
              <li class="item">One more beauty  link the three</li>
              <li class="item">The final link in here is the four</li>
            </ul>
            <a href="#" class="link">More</a>
          </article>

          <article class="categories-snippet">
            <span class="title">Category Name</span>
            <ul class="list">
              <li class="item">Link the number one here please</li>
              <li class="item">Another link but number two</li>
              <li class="item">One more beauty  link the three</li>
              <li class="item">The final link in here is the four</li>
            </ul>
            <a href="#" class="link">More</a>
          </article>
        </div>
      </section>
 */

.hero-categories {

  padding     : 60px 0;
  background  : #EBF4FE;
}

.hero-categories .section-title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  color: #00365F;
}

@media screen and (min-width: 1280px){

  .hero-categories .section-title{
    font-size: 64px;
  }
}

@media screen and (max-width: 420px){

  .hero-categories .section-title{
    font-size: 48px;
  }
}

.hero-categories .wrapper {
  *zoom: 1;
  height: 100%;
}

.hero-categories .wrapper:before{
  content: '';
  display: table;
}

.hero-categories .wrapper:after{
  content: '';
  display: table;
  clear: both;
}

.hero-categories .wrapper .categories-snippet {
  width: calc(99.99% * 1/3 - (40px - 40px * 1/3));
  height: calc(99.99% * 1/3 - (40px - 40px * 1/3));
}

.hero-categories .wrapper .categories-snippet:nth-child(1n){
  float: left;
  margin-right: 40px;
  margin-bottom: 40px;
  clear: none;
}

.hero-categories .wrapper .categories-snippet:last-child{
  margin-right: 0;
  margin-bottom: 0;
}

.hero-categories .wrapper .categories-snippet:nth-child(3n){
  margin-right: 0;
  float: right;
}

.hero-categories .wrapper .categories-snippet:nth-child(3n + 1){
  clear: left;
}

.hero-categories .wrapper .categories-snippet:nth-last-child(-n + 3){
  margin-bottom: 0;
}

@media      ( max-width: 768px ) {

  .hero-categories .wrapper .categories-snippet {
    width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
    height: calc(99.99% * 1/2 - (30px - 30px * 1/2));
    padding: 20px;
  }

  .hero-categories .wrapper .categories-snippet:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .hero-categories .wrapper .categories-snippet:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .hero-categories .wrapper .categories-snippet:nth-child(2n){
    margin-right: 0;
    float: right;
  }

  .hero-categories .wrapper .categories-snippet:nth-child(2n + 1){
    clear: left;
  }

  .hero-categories .wrapper .categories-snippet:nth-last-child(-n + 2){
    margin-bottom: 0;
  }
}

@media( max-width: 568px ) {

  .hero-categories .wrapper .categories-snippet {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    height: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .hero-categories .wrapper .categories-snippet:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .hero-categories .wrapper .categories-snippet:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .hero-categories .wrapper .categories-snippet:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .hero-categories .wrapper .categories-snippet:nth-child(1n + 1){
    clear: left;
  }

  .hero-categories .wrapper .categories-snippet:nth-last-child(-n + 1){
    margin-bottom: 0;
  }
}
/*
 # Hero community object

<section class="hero-community">
  <div class="container">
    <span class="title">Some Text with social proof and call to action</span>
    <span class="cta">Join our comunity of <span class="highlight">300,000</span> + members!</span>
    <form action="#" class="form-styled">
      <input type="text" class="third" placeholder="Name">
      <input type="email" class="third" placeholder="Email">
      <button class="button">Subscribe</button>
    </form>
  </div>
</section>

    <section class="hero-community">
      <div class="container">
        <span class="title">Some Text with social proof and call to action</span>
        <span class="cta">Join our comunity of <span class="highlight">300,000</span> + members!</span>
        <form action="#" class="form-styled">
          <input type="text" class="third" placeholder="Name">
          <input type="email" class="third" placeholder="Email">
          <button class="button">Subscribe</button>
        </form>
      </div>
    </section>
 */

.hero-community {
  text-align: center;
  padding   : 60px 0;
  background: #ffffff;
}

.hero-community .title {
  display      : inline-block;
  margin-bottom: calc( 20px*1.5 );
  color        : #206494;
  font-size    : 1.5625rem;
  font-weight  : 400;
  line-height  : 1.1;
}

.hero-community .cta {
  display       : inline-block;
  margin-bottom : calc( 20px*1.5 );
  color         : #00365f;
  font-size     : 2rem;
  line-height   : 1.1;
  text-transform: uppercase;
}

.hero-community .cta .highlight {
  color: #C03D0C;
}

.hero-community .form-styled {
  width: calc(99.99% * 8/12 - (30px - 30px * 8/12));
  margin-left: calc(99.99% * (-2/12 * -1) - (30px - 30px * (-2/12 * -1)) + 30px) !important;
}

.hero-community .form-styled:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.hero-community .form-styled:last-child{
  margin-right: 0;
}

.hero-community .form-styled:nth-child(12n){
  margin-right: 0;
  float: right;
}

.hero-community .form-styled:nth-child(12n + 1){
  clear: left;
}

.hero-community .form-styled .button {
  width: calc(99.99% * 2/8 - (30px - 30px * 2/8));
}

.hero-community .form-styled .button:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.hero-community .form-styled .button:last-child{
  margin-right: 0;
}

.hero-community .form-styled .button:nth-child(8n){
  margin-right: 0;
  float: right;
}

.hero-community .form-styled .button:nth-child(8n + 1){
  clear: left;
}

@media      ( max-width: 768px ) {

  .hero-community .form-styled {
    width: calc(99.99% * 10/12 - (30px - 30px * 10/12));
    margin-left: calc(99.99% * (-1/12 * -1) - (30px - 30px * (-1/12 * -1)) + 30px) !important;
  }

  .hero-community .form-styled:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .hero-community .form-styled:last-child{
    margin-right: 0;
  }

  .hero-community .form-styled:nth-child(12n){
    margin-right: 0;
    float: right;
  }

  .hero-community .form-styled:nth-child(12n + 1){
    clear: left;
  }
}

@media( max-width: 568px ) {

  .hero-community .form-styled .button {
    width: 100%
  }

  .hero-community .form-styled .third {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    margin-bottom: calc( 20px*1.5 );
  }

  .hero-community .form-styled .third:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .hero-community .form-styled .third:last-child{
    margin-right: 0;
  }

  .hero-community .form-styled .third:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .hero-community .form-styled .third:nth-child(1n + 1){
    clear: left;
  }

  .hero-community .form-styled .third:last-child {
    margin-bottom: 0;
  }
}
/*
 # Hero banner object

 <section class="hero-banner">
   <div class="container">
     <div class="display"></div>
     <div class="box">
       <span class="title">Value Proposition Unit</span>
       <span class="content">A short paragraph of text to personalise and position Problogger with an <a href="#">unassigned link</a>. A second row of text with a <a href="#">web link</a></span>
       <div class="wrapper">
         <a href="#" class="button">Tell me more</a>
         <a href="#" class="cta">Sign up &amp; join the community</a>
       </div>
     </div>
   </div>
 </section>

      <section class="hero-banner">
        <div class="container">
          <div class="display"></div>
          <div class="box">
            <span class="title">Value Proposition Unit</span>
            <span class="content">A short paragraph of text to personalise and position Problogger with an <a href="#">unassigned link</a>. A second row of text with a <a href="#">web link</a></span>
            <div class="wrapper">
              <a href="#" class="button">Tell me more</a>
              <a href="#" class="cta">Sign up &amp; join the community</a>
            </div>
          </div>
        </div>
      </section>
 */

.hero-home {

  background-color: #102237;
  background      : url( '../images/home-banner.png' ) center left no-repeat;
  background-size : cover;
}

.hero-home .container {
  position  : relative;
  min-height: 487px;
}

.hero-home .display {
  top            : auto;
  right          : auto;
  bottom         : 0;
  left           : 0;
  width: 31.3%;
  height: 455px;
  position       : absolute;
  background     : url( '../images/darren.png' ) center bottom no-repeat;
  background-size: contain;
}

.hero-home .box {
  width    : 100%;
  max-width: 678px;
  position : relative;
  padding : 89px 0 85px;
  top    : auto;
  right  : auto;
  bottom : auto;
  left   : auto;
  float : right;
  -webkit-transform : none;
      -ms-transform : none;
          transform : none;
  *zoom: 1;
}

.hero-home .box:before{
  content: '';
  display: table;
}

.hero-home .box:after{
  content: '';
  display: table;
  clear: both;
}

.hero-home .box .dynamic-content {
  display : none;
}

.hero-home .box .title {
  display       : block;
  margin        : 0 0 calc( 20px/2 );
  color         : #ffffff;
  font-size     : 2.6875rem;
  font-weight   : 700;
  letter-spacing: -1px;
}

.hero-home .box .content {
  display : block;
  overflow: hidden;
  margin     : 0 0 20px;
  color      : #ffffff;
  font-size: calc(18px + 5 * ((100vw - 420px) / 860));
  font-weight: 300;
}

@media screen and (min-width: 1280px){

  .hero-home .box .content{
    font-size: 23px;
  }
}

@media screen and (max-width: 420px){

  .hero-home .box .content{
    font-size: 18px;
  }
}

.hero-home .box .content p {
  margin-top: 0;
}

.hero-home .box .content a {
  border-bottom  : 1px solid #c03d0c;
  color          : #c03d0c;
  text-decoration: none;
  transition     : all 0.1s ease-in-out;
}

.hero-home .box .content a:hover, .hero-home .box .content a:focus {
  color       : rgb(140, 47, 13);
  border-color: rgb(140, 47, 13);
}

.hero-home .box .wrapper {
  text-align: right;
}

.hero-home .box .button,
    .hero-home .box .cta {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}

.hero-home .box .button:hover,.hero-home .box .cta:hover,.hero-home .box .button:focus,.hero-home .box .cta:focus{
  background: rgb(166, 54, 13);
}

.hero-home .box .button {
  border      : 2px solid #c03d0c;
  padding     : calc( 20px - 2px ) 0;
  margin-right: calc( 20px*2 );
  background  : none;
  width       : 177px;
}

.hero-home .box .button:hover, .hero-home .box .button:focus {
  background  : #c03d0c;
}

.hero-home .box .cta {
  padding: 20px 0;
  width  : 278px;
}

.hero-home .box.returning-user {
  text-align: center;
  padding   : calc( 20px  * 2 );/* End of Snippet */
}

.hero-home .box.returning-user .columns {
  *zoom: 1;
  margin-bottom : 30px;
}

.hero-home .box.returning-user .columns:before{
  content: '';
  display: table;
}

.hero-home .box.returning-user .columns:after{
  content: '';
  display: table;
  clear: both;
}

.hero-home .box.returning-user .columns .left,
        .hero-home .box.returning-user .columns .right {
  width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
  color : white;
}

.hero-home .box.returning-user .columns .left:nth-child(1n),
        .hero-home .box.returning-user .columns .right:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.hero-home .box.returning-user .columns .left:last-child,
        .hero-home .box.returning-user .columns .right:last-child{
  margin-right: 0;
}

.hero-home .box.returning-user .columns .left:nth-child(2n),
        .hero-home .box.returning-user .columns .right:nth-child(2n){
  margin-right: 0;
  float: right;
}

.hero-home .box.returning-user .columns .left:nth-child(2n + 1),
        .hero-home .box.returning-user .columns .right:nth-child(2n + 1){
  clear: left;
}

.hero-home .box.returning-user .columns .left .title, .hero-home .box.returning-user .columns .right .title {
  font-size    : 1.625rem;
  margin-bottom: 10px;
  font-weight  : 500;
}

.hero-home .box.returning-user .bottom {
  *zoom: 1;
}

.hero-home .box.returning-user .bottom:before{
  content: '';
  display: table;
}

.hero-home .box.returning-user .bottom:after{
  content: '';
  display: table;
  clear: both;
}

.hero-home .box.returning-user .bottom .left,
        .hero-home .box.returning-user .bottom .right {
  width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
}

.hero-home .box.returning-user .bottom .left:nth-child(1n),
        .hero-home .box.returning-user .bottom .right:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.hero-home .box.returning-user .bottom .left:last-child,
        .hero-home .box.returning-user .bottom .right:last-child{
  margin-right: 0;
}

.hero-home .box.returning-user .bottom .left:nth-child(2n),
        .hero-home .box.returning-user .bottom .right:nth-child(2n){
  margin-right: 0;
  float: right;
}

.hero-home .box.returning-user .bottom .left:nth-child(2n + 1),
        .hero-home .box.returning-user .bottom .right:nth-child(2n + 1){
  clear: left;
}

.hero-home .box.returning-user .bottom .new-posts,
        .hero-home .box.returning-user .bottom .subscribed {
  display : inline-block;
  font-size : 1.125rem;
}

.hero-home .box.returning-user .bottom .new-posts .count, .hero-home .box.returning-user .bottom .subscribed .count {
  background : #c03d0c;
  padding : 2px 5px;
  margin-right : 5px;
  border-radius: 3px;
}

.hero-home .box.returning-user .bottom .new-posts {
  margin-top: 7px;
  text-decoration : none;
  color : white;
}

.hero-home .box.returning-user .bottom .subscribed {
  padding: 15px 30px;
}

.hero-home .box.returning-user .bottom .subscribed {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  padding : 10px 20px;
  text-transform: none;
  border-radius : 3px;
  font-size : 1.125rem;
  font-weight : 400;
}

.hero-home .box.returning-user .bottom .subscribed:hover,.hero-home .box.returning-user .bottom .subscribed:focus{
  background: rgb(166, 54, 13);
}

.hero-home .box.returning-user .snippet {
  position : relative;
}

.hero-home .box.returning-user .snippet .display {
  width      : 100%;
  max-height : 164px;
  overflow   : hidden;
  display    : block;
  position   : relative;
  background : none;
  height : auto;
}

.hero-home .box.returning-user .snippet .display .play {
  display    : block;
  position   : absolute;
  left       : 0;
  right      : 0;
  top        : 50%;
  margin     : auto;
  margin-top : -30px;
}

.hero-home .box.returning-user .snippet .display .play:before {
  transition  : all 0.3s ease-in-out;
  content     : '\f04b';
  font-family : 'Icomoon';
  font-size   : 3.75rem;
  color       : #EBF4FE;
}

.hero-home .box.returning-user .snippet .display img {
  width  : 100%;
  height : auto;
  float  : left;
  min-height : 164px;
}

.hero-home .box.returning-user .snippet .display:hover .play:before, .hero-home .box.returning-user .snippet .display:focus .play:before {
  color : #206494;
}

.hero-home .box.returning-user .snippet .link {
  padding         : calc(20px / 2) 0;
  transition      : all 0.1s ease-in-out;
  font-size       : 1rem;
  display         : block;
  color           : white;
  text-decoration : none;
  margin-bottom   : calc(20px / 2);
}

.hero-home .box.returning-user .snippet .link:visited {
  color : white;
}

.hero-home .box.returning-user .snippet .link:hover, .hero-home .box.returning-user .snippet .link:focus {
  color : #c03d0c;
}

.hero-home .box.returning-user .snippet .link .player-container {
  position : relative;
}

.hero-home .box.returning-user .snippet .link .player-container .powerpress_player {
  position : absolute;
  bottom   : 0;
  width    : 100%;
  opacity  : 0;
  z-index  : -1;
}

.hero-home .box.returning-user .snippet .link .player-container .powerpress_player .mejs-audio {
  width : 100% !important;
}

.hero-home .box.returning-user .snippet:last-child .link {
  border        : none;
  margin-bottom : 0;
}

.hero-home .box.returning-user .snippet .player-container {
  position : relative;
}

.hero-home .box.returning-user .snippet .player-container .powerpress_player {
  position : absolute;
  bottom   : 0;
  width    : 100%;
  opacity  : 0;
  z-index  : -1;
}

.hero-home .box.returning-user .snippet .player-container .powerpress_player .mejs-audio {
  width : 100% !important;
}

@media( max-width: 1024px ) {

  .hero-home .box {
    padding: 0 calc( 20px/2 );
  }
}

@media      ( max-width: 768px ) {

  .hero-home .display {
    display: none;
  }

  .hero-home .container {
    position: static;
  }

  .hero-home .container > *{
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  .hero-home .box {
    text-align: center;
  }

  .hero-home .box .title {
    float: none;
  }

  .hero-home .box .button,
      .hero-home .box .cta {
    width: 100%;
  }

  .hero-home .box .button {
    margin-bottom: 20px;
  }
}

@media( max-width: 568px ) {

  .hero-home{
    height: auto;
    padding: calc( 20px*2 ) 0;
  }

  .hero-home .container {
    position: static;
  }

  .hero-home .container > *{
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }

  .hero-home .box .title {/*font-size: rem( 55 );*/
  }

  .hero-home .box .wrapper .cta,
        .hero-home .box .wrapper .button {
    display: block;
    margin : 0 auto;
  }

  .hero-home .box .wrapper .button {
    margin-bottom: 20px;
  }

  .hero-home .box.returning-user .columns .left,
          .hero-home .box.returning-user .columns .right {
    width: calc(99.99% * 1 - (30px - 30px * 1));
  }

  .hero-home .box.returning-user .columns .left:nth-child(1n),
          .hero-home .box.returning-user .columns .right:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .hero-home .box.returning-user .columns .left:last-child,
          .hero-home .box.returning-user .columns .right:last-child{
    margin-right: 0;
  }

  .hero-home .box.returning-user .columns .left:nth-child(undefinedn),
          .hero-home .box.returning-user .columns .right:nth-child(undefinedn){
    margin-right: 0;
    float: right;
  }

  .hero-home .box.returning-user .columns .left:nth-child(undefinedn + 1),
          .hero-home .box.returning-user .columns .right:nth-child(undefinedn + 1){
    clear: left;
  }

  .hero-home .box.returning-user .columns .snippet {
    height : auto !important;
  }

  .hero-home .box.returning-user .columns .snippet .display {
    max-height : none;
  }

  .hero-home .box.returning-user .bottom .left,
          .hero-home .box.returning-user .bottom .right {
    width: calc(99.99% * 1 - (30px - 30px * 1));
  }

  .hero-home .box.returning-user .bottom .left:nth-child(1n),
          .hero-home .box.returning-user .bottom .right:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .hero-home .box.returning-user .bottom .left:last-child,
          .hero-home .box.returning-user .bottom .right:last-child{
    margin-right: 0;
  }

  .hero-home .box.returning-user .bottom .left:nth-child(undefinedn),
          .hero-home .box.returning-user .bottom .right:nth-child(undefinedn){
    margin-right: 0;
    float: right;
  }

  .hero-home .box.returning-user .bottom .left:nth-child(undefinedn + 1),
          .hero-home .box.returning-user .bottom .right:nth-child(undefinedn + 1){
    clear: left;
  }

  .hero-home .box.returning-user .bottom .new-posts,
          .hero-home .box.returning-user .bottom .subscribed {
    font-size : 1.5rem;
  }

  .hero-home .box.returning-user .bottom .new-posts {
    margin-bottom : calc(20px * 2);
  }
}

@media( max-width: 320px ) {

  .hero-home .box.returning-user {
    padding : calc( 20px * 2 ) 10px;
  }
}
/*
 # Hero offer object

 <section class="hero-offer">
   <div class="container">
     <span class="title">Give me 31 Days and I’ll Give You a Dramatically Better Blog… Guaranteed</span>
     <div class="wrapper">
       <div class="display">
         <img src="" alt="">
       </div>
       <div class="content">
         <span class="highlight">31 Days to Build a Better Blog is for bloggers at different stages of their blogging including:</span>
         <ul class="list">
           <li class="item">You’ve just started a blog and don’t know what to do next</li>
           <li class="item">You’ve had a blog for a while but it’s stalled in its growth</li>
           <li class="item">You’re a blogger with bloggers block and lacking inspiration.</li>
         </ul>
         <div class="button">Download it now!</div>
       </div>
     </div>
   </div>
 </section>

    <section class="hero-offer">
      <div class="container">
        <span class="title">Give me 31 Days and I’ll Give You a Dramatically Better Blog… Guaranteed</span>
        <div class="wrapper">
          <div class="display">
            <img src="" alt="">
          </div>
          <div class="content">
            <span class="highlight">31 Days to Build a Better Blog is for bloggers at different stages of their blogging including:</span>
            <ul class="list">
              <li class="item">You’ve just started a blog and don’t know what to do next</li>
              <li class="item">You’ve had a blog for a while but it’s stalled in its growth</li>
              <li class="item">You’re a blogger with bloggers block and lacking inspiration.</li>
            </ul>
            <div class="button">Download it now!</div>
          </div>
        </div>
      </div>
    </section>
 */
.hero-offer {
  padding   : 60px 0;
  background: #EEF4FE;
}
.hero-offer .title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  font-size: 4.9375rem !important;
  margin-bottom : 75px;
  color         : #206494;
  letter-spacing: -1px;
  line-height   : 1.2;
}
@media screen and (min-width: 1280px){

  .hero-offer .title{
    font-size: 64px;
  }
}
@media screen and (max-width: 420px){

  .hero-offer .title{
    font-size: 48px;
  }
}
.hero-offer .wrapper {
  *zoom: 1;
}
.hero-offer .wrapper:before{
  content: '';
  display: table;
}
.hero-offer .wrapper:after{
  content: '';
  display: table;
  clear: both;
}
.hero-offer .wrapper .display {
  width: calc(99.99% * 4/14 - (35px - 35px * 4/14));
}
.hero-offer .wrapper .display:nth-child(1n){
  float: left;
  margin-right: 35px;
  clear: none;
}
.hero-offer .wrapper .display:last-child{
  margin-right: 0;
}
.hero-offer .wrapper .display:nth-child(0n){
  margin-right: 0;
  float: right;
}
.hero-offer .wrapper .display:nth-child(0n + 1){
  clear: left;
}
.hero-offer .wrapper .display img {
  max-width: 100%;
  height   : auto;
}
.hero-offer .wrapper .content {
  width: calc(99.99% * 10/14 - (35px - 35px * 10/14));
  overflow: hidden;
}
.hero-offer .wrapper .content:nth-child(1n){
  float: left;
  margin-right: 35px;
  clear: none;
}
.hero-offer .wrapper .content:last-child{
  margin-right: 0;
}
.hero-offer .wrapper .content:nth-child(0n){
  margin-right: 0;
  float: right;
}
.hero-offer .wrapper .content:nth-child(0n + 1){
  clear: left;
}
.hero-offer .wrapper .content p {
  margin-top   : 0;
  margin-bottom: 20px;
  display      : inline-block;
  clear        : both;
  float        : left;
  color        : #c03d0c;
  font-size    : 1.375rem;
  font-weight  : 600;
  line-height  : 28px;
}
.hero-offer .wrapper .content a {
  color          : #c03d0c;
  text-decoration: none;
  transition     : all 0.1s ease-in-out;
}
.hero-offer .wrapper .content a:visited {
  color: #c03d0c;
}
.hero-offer .wrapper .content a:hover, .hero-offer .wrapper .content a:focus {
  color: rgb(140, 47, 13);
}
.hero-offer .wrapper .content ul {
  margin    : 0 0 calc( 20px*1.5 );
  padding   : 0;
  list-style: none;
  display   : inline-block;
  clear     : both;
  float     : left;
}
.hero-offer .wrapper .content ul li {
  padding-left   : calc( 20px*1.6 );
  margin-bottom  : 17px;
  background     : url( '../images/check-bullet.png' ) left center no-repeat;
  background-size: 20px 13px;
  color          : #444444;
  font-size      : 1.25rem;
}
.hero-offer .wrapper .content ul li:last-child {
  margin-bottom: 0;
}
.hero-offer .wrapper .content .button {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  font-size  : 1.0625rem;
  font-weight: 700;
  float      : left;
  clear      : both;
  padding    : 24px 0;
  width      : 217px;
}
.hero-offer .wrapper .content .button:hover,.hero-offer .wrapper .content .button:focus{
  background: rgb(166, 54, 13);
}
.hero-offer .wrapper .content .button:visited,
        .hero-offer .wrapper .content .button:hover,
        .hero-offer .wrapper .content .button:focus {
  color: #ffffff;
}
@media      ( max-width: 768px ) {

  .hero-offer .title {
    font-size : 3.75rem !important;
  }

  .hero-offer .wrapper .display,
      .hero-offer .wrapper .content {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    margin-left: 0 !important;
    margin-right: 30px !important;
    margin-right : 0 !important;
  }

  .hero-offer .wrapper .display:nth-child(1n),
      .hero-offer .wrapper .content:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .hero-offer .wrapper .display:last-child,
      .hero-offer .wrapper .content:last-child{
    margin-right: 0;
  }

  .hero-offer .wrapper .display:nth-child(1n),
      .hero-offer .wrapper .content:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .hero-offer .wrapper .display:nth-child(1n + 1),
      .hero-offer .wrapper .content:nth-child(1n + 1){
    clear: left;
  }

  .hero-offer .wrapper .display {
    margin-bottom: 20px;
    text-align   : center;
  }

  .hero-offer .wrapper .content .button {
    width: 100%;
  }
}
@media      ( max-width: 414px ) {

  .hero-offer .title {
    font-size : 3rem !important;
  }
}
/*
 # Hero unit object

 <section class="hero-unit">
   <div class="container">
     <div class="wrapper">
       <span class="title">Speaking</span>
       <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id leo cursus, sit amet, consectetur adipiscing elit. Sed id leo cursus, rhoncus massa id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id leo cursus, rhoncus Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
       <a href="#" class="button">Book Darren</a>
     </div>
     <div class="display"></div>
   </div>
 </section>

    <section class="hero-unit">
      <div class="container">
        <div class="wrapper">
          <span class="title">Speaking</span>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id leo cursus, sit amet, consectetur adipiscing elit. Sed id leo cursus, rhoncus massa id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id leo cursus, rhoncus Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
          <a href="#" class="button">Book Darren</a>
        </div>
        <div class="display"></div>
      </div>
    </section>
 */
.hero-unit {
  padding        : calc( 20px*2.5 ) 0;
  background     : url( '../images/hero-speaking.png' ) center center no-repeat;
  background-size: cover;
}
.hero-unit .wrapper {
  width: calc(99.99% * 7/12 - (30px - 30px * 7/12));
  height: calc(99.99% * 7/12 - (30px - 30px * 7/12));
  position: relative;
  left: calc(99.99% * -5/12 - (30px - 30px * -5/12) + 30px);
}
.hero-unit .wrapper:nth-child(1n){
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  clear: none;
}
.hero-unit .wrapper:last-child{
  margin-right: 0;
  margin-bottom: 0;
}
.hero-unit .wrapper:nth-child(12n){
  margin-right: 0;
  float: right;
}
.hero-unit .wrapper:nth-child(12n + 1){
  clear: left;
}
.hero-unit .wrapper:nth-last-child(-n + 12){
  margin-bottom: 0;
}
.hero-unit .wrapper .title {
  clear        : both;
  display      : inline-block;
  margin: 0;
  margin-bottom: 23px;
  color        : #ffffff;
  font-size    : 3.75rem;
  font-weight  : 700;
  line-height  : 1;
}
.hero-unit .wrapper .content {
  clear        : both;
  float        : left;
  margin-bottom: calc( 20px*1.5 );
  color        : #ffffff;
  font-size    : 1.4375rem;
  width        : 100%;
  font-weight: 300;
}
.hero-unit .wrapper .content p {
  margin-top: 0;
}
.hero-unit .wrapper .content a {
  border-bottom: 1px solid #FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.1s ease-in-out;
  font-weight: 400;
  text-decoration: none;
}
.hero-unit .wrapper .content a:focus,
        .hero-unit .wrapper .content a:hover,
        .hero-unit .wrapper .content a:focus {
  color: rgb(226, 161, 137);
  border-color: rgb(226, 161, 137);
}
.hero-unit .wrapper .button {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  clear  : both;
  float  : left;
  padding: 20px calc( 20px*1.5 );
  font-size: 1.125rem;
}
.hero-unit .wrapper .button:hover,.hero-unit .wrapper .button:focus{
  background: rgb(166, 54, 13);
}
.hero-unit .display {
  width: calc(99.99% * 5/12 - (30px - 30px * 5/12));
  height: calc(99.99% * 5/12 - (30px - 30px * 5/12));
  position: relative;
  left: calc(99.99% * 7/12 - (30px - 30px * 7/12) + 30px);
  background-size: contain;
}
.hero-unit .display:nth-child(1n){
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  clear: none;
}
.hero-unit .display:last-child{
  margin-right: 0;
  margin-bottom: 0;
}
.hero-unit .display:nth-child(12n){
  margin-right: 0;
  float: right;
}
.hero-unit .display:nth-child(12n + 1){
  clear: left;
}
.hero-unit .display:nth-last-child(-n + 12){
  margin-bottom: 0;
}
.hero-unit .display img {
  display: block;
  max-width: 100%;
  height: auto;
}
.hero-unit .display iframe {
  max-width: 100%;
  width    : 100%;
}
@media      ( max-width: 768px ) {

  .hero-unit .wrapper,
    .hero-unit .display {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    height: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    left       : 0;
    right      : 0;
  }

  .hero-unit .wrapper:nth-child(1n),
    .hero-unit .display:nth-child(1n){
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    clear: none;
  }

  .hero-unit .wrapper:last-child,
    .hero-unit .display:last-child{
    margin-right: 0;
    margin-bottom: 0;
  }

  .hero-unit .wrapper:nth-child(1n),
    .hero-unit .display:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .hero-unit .wrapper:nth-child(1n + 1),
    .hero-unit .display:nth-child(1n + 1){
    clear: left;
  }

  .hero-unit .wrapper:nth-last-child(-n + 1),
    .hero-unit .display:nth-last-child(-n + 1){
    margin-bottom: 0;
  }

  .hero-unit .title {
    margin-top: 0;
  }

  .hero-unit .display img {
    margin: 0 auto;
  }

  .hero-unit .button {
    width: 100%;
  }
}
/*
 # Info card object

  <div class="info-card podcast">
    <span class="title">Latest Podcast</span>
    <div class="content">
      <ul class="styled-list">
        <li class="item">My tips and tools for creating your own podcast</li>
        <li class="item">How to work out how to brand your work</li>
        <li class="item">How to make a full time income your blog</li>
        <li class="item">My tips and tools for creating your own podcast</li>
        <li class="item">How to work out how to brand your work</li>
      </ul>
    </div>
    <div class="bottom">
      <a href="#" class="link">View all episodes</a>
    </div>
  </div>

      <div class="info-card podcast">
        <span class="title">Latest Podcast</span>
        <div class="content">
          <ul class="styled-list">
            <li class="item">My tips and tools for creating your own podcast</li>
            <li class="item">How to work out how to brand your work</li>
            <li class="item">How to make a full time income your blog</li>
            <li class="item">My tips and tools for creating your own podcast</li>
            <li class="item">How to work out how to brand your work</li>
          </ul>
        </div>
        <div class="bottom">
          <a href="#" class="link">View all episodes</a>
        </div>
      </div>
 */

.info-card {

  border: 1px solid #206494;
}

.info-card .title {
  display       : inline-block;
  background    : #206494;
  padding       : calc( 20px/1.5 ) 0;
  color         : #ffffff;
  font-size     : 1.0625rem;
  font-weight   : 700;
  text-transform: capitalize;
  text-indent   : 20px;
  line-height   : 1;
  width         : 100%;
}

.info-card .title:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  vertical-align: sub;
  font-size     : 1.375rem;
  margin-right  : calc( 20px/2 )
}

.info-card.podcast .title:before {
  content: '\e905';
}

.info-card.blog .title:before {
  content: '\e906';
}

.info-card.event .title:before {
  content: '\e901';
}

.info-card .content {
  padding: 20px calc( 20px*1.5 ) 0 calc( 20px*1.5 );
}

.info-card .content .subtitle {
  margin     : 0 0 calc( 20px/2 );
  display    : inline-block;
  color      : #222222;
  font-size  : 1.0625rem;
  font-weight: 600;
  line-height: 1;
  width      : 100%;
}

.info-card .content .disclaimer {
  color    : #222222;
  font-size: 0.9375rem;
}

.info-card .bottom {
  overflow: hidden;
  width   : 100%;
  padding : calc( 20px*1.5 ) calc( 20px*1.5 ) 20px;
}

.info-card .bottom .link {
  transition     : all 0.1s ease-in-out;
  display        : inline-block;
  float          : right;
  color          : #c03d0c;
  font-size      : 0.8125rem;
  font-weight    : 700;
  text-decoration: none;
  text-transform : uppercase;
}

.info-card .bottom .link:hover, .info-card .bottom .link:focus {
  color: rgb(153, 50, 13);
}

.info-card .bottom .button {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  float: right;
  padding: calc( 20px/1.5 ) calc( 20px*1.5 );
}

.info-card .bottom .button:hover,.info-card .bottom .button:focus{
  background: rgb(166, 54, 13);
}
/*
 # Latest card object

  <article class="latest-card podcast">
    <div class="display">
      <img src="dist/images/latest-image-1.png" alt="Latest Podcast">
      <div class="box">
        <span class="title">My Tips and Tools for Creatig Your Own Podcast</span>
        <a href="#" class="button">Subscribe</a>
      </div>
    </div>
    <div class="info-card">
      <span class="section-title">Latest Podcast</span>
      <div class="content">
        <ul class="styled-list">
          <li class="item">My tips and tools for creating your own podcast</li>
          <li class="item">How to work out how to brand your work</li>
          <li class="item">How to make a full time income your blog</li>
          <li class="item">My tips and tools for creating your own podcast</li>
          <li class="item">How to work out how to brand your work</li>
        </ul>
      </div>
      <div class="bottom">
        <a href="#" class="link">View all episodes</a>
      </div>
    </div>
  </article>

      <article class="latest-card podcast">
        <div class="display">
          <img src="dist/images/latest-image-1.png" alt="Latest Podcast">
          <div class="box">
            <span class="title">My Tips and Tools for Creatig Your Own Podcast</span>
            <a href="#" class="button">Subscribe</a>
          </div>
        </div>
        <div class="info-card">
          <span class="section-title">Latest Podcast</span>
          <div class="content">
            <ul class="styled-list">
              <li class="item">My tips and tools for creating your own podcast</li>
              <li class="item">How to work out how to brand your work</li>
              <li class="item">How to make a full time income your blog</li>
              <li class="item">My tips and tools for creating your own podcast</li>
              <li class="item">How to work out how to brand your work</li>
            </ul>
          </div>
          <div class="bottom">
            <a href="#" class="link">View all episodes</a>
          </div>
        </div>
      </article>
 */

.latest-card {
  display   : table;
  width: 100%;
  height: 100%;
  min-height: 288px;
}

.latest-card .column {
  display       : table-cell;
  width: 50%;
  height: 100%;
  vertical-align: middle;
}

.latest-card .column:first-child {
  padding-bottom: 1px;
}

.latest-card .display {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 288px;
}

.latest-card .display > *{
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.latest-card .display img {
  width: 100%;
  height: 100%;
}

.latest-card .display .box {
  text-align: center;
  min-width : 381px;
}

.latest-card .display .box .title {
  display       : block;
  margin-bottom : calc( 20px*2 );
  color         : #f6fafc;
  font-size: calc(24px + 4 * ((100vw - 420px) / 860));
  font-weight   : 700;
  text-transform: capitalize;
}

@media screen and (min-width: 1280px){

  .latest-card .display .box .title{
    font-size: 28px;
  }
}

@media screen and (max-width: 420px){

  .latest-card .display .box .title{
    font-size: 24px;
  }
}

.latest-card .display .box .button {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  background: rgba(192, 61, 12, 0.8);
  color     : #f6fafc;
  padding   : 20px 0;
  width     : 183px;
}

.latest-card .display .box .button:hover,.latest-card .display .box .button:focus{
  background: rgb(166, 54, 13);
}

.latest-card .info-card {
  border-left: none;
  border-top: none;
  height     : 100%;
}

.latest-card .info-card .content {
  min-height: 152px;
}

.latest-card.podcast .info-card .title:before {
  content: '\e905';
}

.latest-card.blog .info-card .title:before {
  content: '\e906';
}

.latest-card.event .info-card .title:before {
  content: '\e901';
}

@media      ( max-width: 768px ) {

  .latest-card{
    display: block;
  }

  .latest-card .info-card {
    display : block;
    width: 100%;
    height: 100%;
  }

  .latest-card .column {
    display: block;
    width: 100%;
    height: 100%;
  }

  .latest-card .column:first-child {
    padding-bottom: 0;
  }

  .latest-card .display {
    display    : block;
    min-height : 288px;
    overflow   : hidden;
  }

  .latest-card .display img {
    height: auto;
  }

  .latest-card .display .box {
    min-width: 95%;
  }

  .latest-card .info-card {
    display     : block;
    border-left : 1px solid #206494;
  }
}

@media( max-width: 568px ) {

  .latest-card .display {
    display: none;
  }
}
.latest-posts {

  text-align : center;
}
.latest-posts .title {
  color           : #206494;
  display         : inline-block;
  padding-bottom  : calc(20px);
  font-size       : 1.125rem;
  font-weight     : 700;
  text-transform  : uppercase;
  text-decoration : none;
}
.latest-posts .title:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  font-size     : 1.25rem;
  padding-right : calc(20px / 2);
}
.latest-posts .more {
  transition      : all 0.1s ease-in-out;
  color           : #206494;
  display         : block;
  margin-top      : calc(20px * 2);
  font-size       : 1.125rem;
  text-decoration : none;
  font-weight     : 700;
  background      : rgb(251, 253, 255);
  padding         : 14px 20px;
  border-radius   : 5px;
  width           : 220px;
  margin-left     : auto;
  margin-right    : auto;
  margin-bottom   : 30px;
}
.latest-posts .more:hover, .latest-posts .more:focus {
  color : #c03d0c;
}
.latest-posts.podcast .title {
  color : #206494;
}
.latest-posts.podcast .title:before {
  font-size : 1.375rem;
  content   : '\e905';
}
.latest-posts.blog .title {
  color : #206494;
}
.latest-posts.blog .title:before {
  content : '\e906';
}
.latest-posts.events .title {
  color : #206494;
}
.latest-posts.events .title:before {
  font-size : 1.25rem;
  content   : '\e901';
}
.latest-posts .content-list {
  margin     : 0;
  padding    : 0;
  list-style : none;
}
.latest-posts .content-list .snippet {
  position : relative;
}
.latest-posts .content-list .snippet .display {
  width      : 100%;
  max-height : 164px;
  overflow   : hidden;
  display    : block;
  position   : relative;
}
.latest-posts .content-list .snippet .display .play {
  display    : block;
  position   : absolute;
  left       : 0;
  right      : 0;
  top        : 50%;
  margin     : auto;
  margin-top : -30px;
}
.latest-posts .content-list .snippet .display .play:before {
  transition  : all 0.3s ease-in-out;
  content     : '\f04b';
  font-family : 'Icomoon';
  font-size   : 3.75rem;
  color       : #EBF4FE;
}
.latest-posts .content-list .snippet .display img {
  width  : 100%;
  height : auto;
  float  : left;
}
.latest-posts .content-list .snippet .display:hover .play:before, .latest-posts .content-list .snippet .display:focus .play:before {
  color : #206494;
}
.latest-posts .content-list .snippet .link {
  border-bottom   : 1px solid #DDE1E4;
  padding         : calc(20px / 2) 0;
  transition      : all 0.1s ease-in-out;
  font-size       : 0.875rem;
  display         : block;
  color           : #00365F;
  text-decoration : none;
  margin-bottom   : calc(20px / 2);
}
.latest-posts .content-list .snippet .link:visited {
  color : #00365F;
}
.latest-posts .content-list .snippet .link:hover, .latest-posts .content-list .snippet .link:focus {
  color : #c03d0c;
}
.latest-posts .content-list .snippet:last-child .link {
  border        : none;
  margin-bottom : 0;
}
.latest-posts .content-list .snippet .player-container {
  position : relative;
}
.latest-posts .content-list .snippet .player-container .powerpress_player {
  position : absolute;
  bottom   : 0;
  width    : 100%;
  opacity  : 0;
  z-index  : -1;
}
.latest-posts .content-list .snippet .player-container .powerpress_player .mejs-audio {
  width : 100% !important;
}
.latest-posts .content-list .display-item {
  overflow      : hidden;
  border-bottom : 1px solid #DDE1E4;
  padding       : calc(20px / 2) 0;
}
.latest-posts .content-list .display-item .display {
  float      : left;
  max-height : 168px;
  overflow   : hidden;
  display    : inline-block;
  width: 100%;
  height: 100%;
}
.latest-posts .content-list .display-item .display img {
  float      : left;
  border     : 1px solid #B1B7C0;
  width: 100%;
  height: 100%;
  display    : block;
  max-width  : 100%;
  min-height : 160px;
}
.latest-posts .content-list .item,
    .latest-posts .content-list .page-item,
    .latest-posts .content-list .menu-item {
  border-bottom : 1px solid #DDE1E4;
  padding       : calc(20px / 2) 0;
}
.latest-posts .content-list .item:first-child .link, .latest-posts .content-list .page-item:first-child .link, .latest-posts .content-list .menu-item:first-child .link {
  color       : #616164;
  font-weight : 800;
}
.latest-posts .content-list .item:first-child .link:visited, .latest-posts .content-list .page-item:first-child .link:visited, .latest-posts .content-list .menu-item:first-child .link:visited {
  color : #616164;
}
.latest-posts .content-list .item:first-child .link:hover, .latest-posts .content-list .page-item:first-child .link:hover, .latest-posts .content-list .menu-item:first-child .link:hover, .latest-posts .content-list .item:first-child .link:focus, .latest-posts .content-list .page-item:first-child .link:focus, .latest-posts .content-list .menu-item:first-child .link:focus {
  color : #c03d0c;
}
.latest-posts .content-list .item:last-child, .latest-posts .content-list .page-item:last-child, .latest-posts .content-list .menu-item:last-child {
  border : none;
}
.latest-posts .content-list .item .display, .latest-posts .content-list .page-item .display, .latest-posts .content-list .menu-item .display {
  max-height    : 168px;
  overflow      : hidden;
  margin-bottom : calc(20px / 2);
  display       : inline-block;
  width: 100%;
  height: 100%;
}
.latest-posts .content-list .item .display a, .latest-posts .content-list .page-item .display a, .latest-posts .content-list .menu-item .display a {
  }
.latest-posts .content-list .item .display img, .latest-posts .content-list .page-item .display img, .latest-posts .content-list .menu-item .display img {
  border     : 1px solid #B1B7C0;
  width: 100%;
  height: 100%;
  display    : block;
  max-width  : 100%;
  min-height : 160px;
}
.latest-posts .content-list .item a, .latest-posts .content-list .page-item a, .latest-posts .content-list .menu-item a {
  transition      : all 0.1s ease-in-out;
  margin          : 0 calc(20px / 1.5);
  font-size       : 0.875rem;
  display         : inline-block;
  color           : #00365F;
  text-decoration : none;
}
.latest-posts .content-list .item a:visited, .latest-posts .content-list .page-item a:visited, .latest-posts .content-list .menu-item a:visited {
  color : #00365F;
}
.latest-posts .content-list .item a:hover, .latest-posts .content-list .page-item a:hover, .latest-posts .content-list .menu-item a:hover, .latest-posts .content-list .item a:focus, .latest-posts .content-list .page-item a:focus, .latest-posts .content-list .menu-item a:focus {
  color : #c03d0c;
}
@media      ( max-width: 768px ) {

  .latest-posts .content-list {
    height: auto !important;
  }

  .latest-posts .content-list .snippet {
    height : auto !important;
  }

  .latest-posts .content-list .snippet .display {
    max-height : none;
    height: auto !important;
  }

  .latest-posts .content-list .snippet .link {
    height: auto !important;
  }

  .latest-posts .content-list .item {
    height : auto !important;
  }

  .latest-posts .content-list .item .display {
    max-height : inherit;
    border     : none;
  }

  .latest-posts .content-list .item .display img {
    width      : auto;
    margin     : 0 auto;
    min-height : initial;
    height     : auto;
  }

  .latest-posts .more {
    margin        : 0 auto;
    margin-bottom : 15px;
  }
}
.latest-section {

  background: #EBF4FE;
  padding: calc( 20px*1.5 ) 0;
  *zoom: 1;
}
.latest-section:before{
  content: '';
  display: table;
}
.latest-section:after{
  content: '';
  display: table;
  clear: both;
}
.latest-section .section-title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  margin        : 0;
  padding-bottom: calc( 20px*1.5 );
  text-transform: capitalize;
}
@media screen and (min-width: 1280px){

  .latest-section .section-title{
    font-size: 64px;
  }
}
@media screen and (max-width: 420px){

  .latest-section .section-title{
    font-size: 48px;
  }
}
.latest-section .wrapper {
  *zoom: 1;
}
.latest-section .wrapper:before{
  content: '';
  display: table;
}
.latest-section .wrapper:after{
  content: '';
  display: table;
  clear: both;
}
.latest-section .latest-posts {
  width: calc(99.99% * 1/3 - (15px - 15px * 1/3));
  border-right : 1px solid #E9ECF0;
  padding-right: calc( 20px/1.5 );
}
.latest-section .latest-posts:nth-child(1n){
  float: left;
  margin-right: 15px;
  clear: none;
}
.latest-section .latest-posts:last-child{
  margin-right: 0;
}
.latest-section .latest-posts:nth-child(3n){
  margin-right: 0;
  float: right;
}
.latest-section .latest-posts:nth-child(3n + 1){
  clear: left;
}
.latest-section .latest-posts:last-child {
  border : none;
}
@media      ( max-width: 768px ) {

  .latest-section .latest-posts {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
    margin-bottom: 20px;
    border       : none;
    padding      : 0;
  }

  .latest-section .latest-posts:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .latest-section .latest-posts:last-child{
    margin-right: 0;
  }

  .latest-section .latest-posts:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .latest-section .latest-posts:nth-child(1n + 1){
    clear: left;
  }

  .latest-section .latest-posts:last-child {
    margin-bottom: 0;
  }
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
 # Logo Object

 <a href="" class="logo"></a>

    <a href="" class="logo"></a>

 */

.logo {
  display        : inline-block;
  background     : url( '../images/logo.png' ) left center no-repeat;
  background-size: contain;
  text-decoration: none;
  width: 284px;
  height: 39px;
}

@media      ( max-width: 768px ) {

  .logo{
    background: url( '../images/logo.png' ) center center no-repeat;
    background-size: contain;
  }
}
/*
 # Main menu object

<hr>

 <ul class="main-menu">
    <li class="menu-item current-menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About Us</a></li>
    <li class="menu-item"><a href="#">Services</a></li>
    <li class="menu-item"><a href="#">Resources</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
 </ul>

    <ul class="main-menu">
      <li class="menu-item current-menu-item"><a href="#">Home</a></li>
      <li class="menu-item"><a href="#">About Us</a></li>
      <li class="menu-item"><a href="#">Services</a></li>
      <li class="menu-item"><a href="#">Resources</a></li>
      <li class="menu-item"><a href="#">Contact</a></li>
    </ul>
*/
.main-menu {
  padding          : 0;
  margin           : 0;
  list-style       : none;
  width            : 100%;
}
.main-menu .menu-item,
  .main-menu .page-item {
  display       : inline-block;
  color         : #ffffff;
  font-size     : 1.0625rem;
  transition    : all 0.1s ease-in-out;
  vertical-align: middle;
}
.main-menu .menu-item:first-child, .main-menu .page-item:first-child {
  margin-left: 0;
}
.main-menu .menu-item:last-child, .main-menu .page-item:last-child {
  padding-right: 0;
}
.main-menu .menu-item.current-menu-item,
    .main-menu .menu-item.current-page-item,
    .main-menu .menu-item:hover,
    .main-menu .page-item.current-menu-item,
    .main-menu .page-item.current-page-item,
    .main-menu .page-item:hover,
    .main-menu .menu-item:focus,
    .main-menu .page-item:focus {
  background: #A63F16;
}
.main-menu .menu-item a, .main-menu .page-item a {
  display        : inline-block;
  color          : inherit;
  font-size      : inherit;
  text-decoration: none;
  vertical-align : middle;
  padding        : calc( 20px/2 ) 17px;
}
@media( max-width: 1088px ) {

  .main-menu .menu-item a, .main-menu .page-item a {
    padding: 10px 16px;
  }
}
@media( max-width: 1050px ) {

  .main-menu .menu-item a, .main-menu .page-item a {
    padding: 10px 14px;
  }
}
@media( max-width: 1025px ) {

  .main-menu .menu-item a, .main-menu .page-item a {
    padding: 10px 12px;
  }
}
@media( max-width: 995px ) {

  .main-menu .menu-item,
  .main-menu .page-item{
    font-size: 1rem !important;
  }

  .main-menu .menu-item a, .main-menu .page-item a {
    padding: 10px 8px;
  }
}
@media( max-width: 950px ) {

  .main-menu .menu-item,
  .main-menu .page-item{
    font-size: 0.9375rem !important;
  }
}
@media( max-width: 930px ) {

  .main-menu .menu-item a, .main-menu .page-item a {
    padding: 10px 6px;
  }
}
@media( max-width: 937px ) {

  .main-menu .menu-item a, .main-menu .page-item a {
    padding: 10px 5px;
  }
}
@media( max-width: 1024px ) {/*font-size: rem( 16 );*/

  .main-menu .menu-item a, .main-menu .page-item a {/* padding: calc( $padding-base/2 ) calc( $padding-base/1.5 ); */
  }
}
/*
 # Main naviagation object

 <nav class="main-navigation">
   <div class="container">
     <ul class="main-menu">
       <li class="menu-item current-menu-item"><a href="#">Home</a></li>
       <li class="menu-item"><a href="#">About Us</a></li>
       <li class="menu-item"><a href="#">Services</a></li>
       <li class="menu-item"><a href="#">Resources</a></li>
       <li class="menu-item"><a href="#">Contact</a></li>
     </ul>
     <div class="mobile-navigation">
        <span class="mobile-button"></span>
     </div>
     <form action="#" class="search-bar">
        <input type="text" class="search" placeholder="Find Products" name="s">
        <button class="button"></button>
     </form>
   </div>
 </nav>

    <nav class="main-navigation">
      <div class="container">
        <ul class="main-menu">
          <li class="menu-item current-menu-item"><a href="#">Home</a></li>
          <li class="menu-item"><a href="#">About Us</a></li>
          <li class="menu-item"><a href="#">Services</a></li>
          <li class="menu-item"><a href="#">Resources</a></li>
          <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
        <div class="mobile-navigation">
          <span class="mobile-button"></span>
        </div>
        <form action="#" class="search-bar">
           <input type="text" class="search" placeholder="Find Products" name="s">
           <button class="button"></button>
        </form>
      </div>
    </nav>
*/

.main-navigation {
  background    : #206494;
  vertical-align: middle;
}

.main-navigation > .container {
  display: table;
  width: 100%;
  height: 100%;
}

.main-navigation .main-menu {
  width  : calc( 99.99% * 9/12 );
  display: table-cell;
}

.main-navigation .column {
  width         : calc( 99.99% * 3/12 );
  display       : table-cell;
  vertical-align: middle;
}

@media      ( max-width: 768px ) {

  .main-navigation{
    display: none;
  }
}
/* .menu-footer {

  .title {
    display: inline-block;
    color: $color-font-clear;
    font-size     : rem( 16 );
    text-transform: uppercase;
    line-height   : 1;
    padding-bottom: $padding-base;
    font-weight: 600;
  }

  ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
  }
  .menu-item,
  .page-item {

    font-size     : rem( 14 );
    vertical-align: middle;
    padding-bottom: calc( $padding-base/2 );

    a {
      transition    : color 100ms ease-in-out;
      display        : inline-block;
      color          : $color-font-clear;
      font-size      : inherit;
      text-decoration: none;
      vertical-align : middle;
      line-height: 1.3;

      &:before {
        @include icon;

        content: '\f111';
        font-size: 8px;
        padding-right: calc( $padding-base/2 );
        color: $color-font-highlight;
      }

      &:hover {
        color: color( $color-font-highlight tint( 8% ) );
        color: $color-orange;
      }
    }
  }
}
 */
.mobile-search {

  text-align : center;
  display    : none;
  will-change: contents;
}
.mobile-search .toggle {
  display: inline-block;
  height : 35px;
  color  : #545454;
  float  : right;
  padding: 0 5px;
}
.mobile-search .toggle:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  line-height: 35px;
  padding    : 0;
  content    : '\e908';
  font-family: 'Icomoon';
  font-size  : 19px;
  display    : inline-block;
}
.mobile-search .wrapper {
  text-align : left;
  position   : absolute;
  right      : 0;
  left       : 0;
  top        : 61px;
  display    : block;
  padding    : 11px 10px;
  background : #206494;
  width      : 100%;
  z-index    : -1;
  opacity    : 0;
}
.mobile-search .wrapper .search {
  display      : block;
  border-radius: 2px;
  background   : #F1F1F1;
  width        : 100%;
}
.mobile-search .wrapper .search .button {
  border    : none;
  padding   : 0 0 0 10px;
  background: transparent;
  color     : #b8b8b8;
  width     : 30px;
  height    : 35px;
  outline   : none;
}
.mobile-search .wrapper .search .button:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  padding    : 0;
  line-height: 35px;
  content    : '\e908';
  font-family: 'Icomoon';
  font-size  : 19px;
  display    : inline-block;
}
.mobile-search .wrapper .search .input {
  border      : none;
  padding-left: 5px;
  background  : transparent;
  color       : #6d6d6d;
  font-size   : 0.8125rem;
  font-family : 'Open Sans', sans-serif;
  width       : calc( 99.99% - 38px );
  height      : 35px;
  outline     : none;
}
.mobile-search .wrapper .search .input::-webkit-input-placeholder {
  color: #6d6d6d;
}
.mobile-search .wrapper .search .input:-moz-placeholder {/* Firefox 18- */
  color: #6d6d6d;
}
.mobile-search .wrapper .search .input::-moz-placeholder {/* Firefox 19+ */
  color: #6d6d6d;
}
.mobile-search .wrapper .search .input:-ms-input-placeholder {
  color: #6d6d6d;
}
.mobile-search .wrapper.show {
  -webkit-animation: show-bar 0.6s ease-in-out;
          animation: show-bar 0.6s ease-in-out;
  opacity: 1;
  top    : 69px;
  z-index: 1;
  display: block;
}
.mobile-search .wrapper.hide {
  -webkit-animation: hide-bar 0.6s ease-in-out;
          animation: hide-bar 0.6s ease-in-out;
  opacity  : 0;
  z-index  : -1;
}

@-webkit-keyframes show-bar {
  0% {
    display: block;
    opacity: 0;
    top    : 0;
    z-index: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    top    : 69px;
  }
}

@keyframes show-bar {
  0% {
    display: block;
    opacity: 0;
    top    : 0;
    z-index: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    top    : 69px;
  }
}

@-webkit-keyframes hide-bar {
  0% {
    opacity: 1;
    top    : 69px;
    z-index: 1;
  }
  60% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    top    : 0;
    z-index: -1;
  }
}

@keyframes hide-bar {
  0% {
    opacity: 1;
    top    : 69px;
    z-index: 1;
  }
  60% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    top    : 0;
    z-index: -1;
  }
}
/* .new-notice {
  background: #FFFFE8;
  padding: 12px;
  text-align: center;
  margin-bottom: 30px;
  display: block;
  width: 100%


  a {
    color: #BF5F1E;
  }

  .button {
    background     : #BF5F1E;
    color          : #fff;
    padding        : 5px 20px;
    display        : inline-block;
    margin-left    : 20px;
    border-radius  : 4px;
    text-decoration: none;
  }

  @media( $mobile-large ) {
    .button {
      width: 100%;
      display: inline-block;
      margin: 10px 0 0;
      paddig: 5px 0;;
    }
  }
}
 */
/*
 # Pagination links object

 <div class="pagination-links">
   <a href="" class="page-numbers">1</a>
   <a href="" class="page-numbers">2</a>
   <a href="" class="page-numbers">3</a>
   <a href="" class="next page-numbers">Next</a>
 </div>

    <div class="pagination-links">
      <a href="" class="page-numbers">1</a>
      <a href="" class="page-numbers">2</a>
      <a href="" class="page-numbers">3</a>
      <a href="" class="next page-numbers">Next</a>
    </div>
 */
.pagination-links {
  text-align : center;
}
.pagination-links .page-numbers {
  margin-right   : calc( 20px/2 );
  padding        : calc( 20px/2 );
  box-sizing     : border-box;
  display        : inline-block;
  vertical-align : middle;
  color          : #206494;
  font-size      : 0.9375rem;
  font-weight    : 700;
  text-decoration: none;
  text-align     : center;
  line-height    : 1.2;
}
.pagination-links .page-numbers.current {
  background: #ffffff;
}
.pagination-links a.page-numbers {
  transition: all 0.1s ease-in-out;
  cursor    : pointer;
}
.pagination-links a.page-numbers:hover, .pagination-links a.page-numbers:focus {
  background : #ffffff;
}
@media( max-width: 568px ) {

  .pagination-links .page-numbers {
    display: none;
  }

  .pagination-links .page-numbers.current,
      .pagination-links .page-numbers.next,
      .pagination-links .page-numbers.prev {
    display: inline-block;
  }
}
.podcast-small {

  margin-bottom: 20px;
  display      : table;
  width        : 100%;
  position     : relative;
  will-change  : top;
}
.podcast-small .display {
  transition    : max-height 600ms ease-in-out;
  display       : table-cell;
  overflow      : hidden;
  width: 80px;
  height: 80px;
  padding-right : calc(20px / 2);
  vertical-align: middle;
  max-height    : 200px;
}
.podcast-small .display .wrapper {
  position   : relative;
  display    : inline-block;
  width      : 100%;
  will-change: top;
}
.podcast-small .display .play:before {
  display    : block;
  position   : absolute;
  left       : 4px;
  right      : 0;
  top        : 19px;
  margin     : auto;
  transition : all 0.3s ease-in-out;
  content    : '\f04b';
  font-family: 'Icomoon';
  font-size  : 2rem;
  color      : white;
  text-align : center;
}
.podcast-small .display img {
  float  : left;
  width  : 100%;
  height : auto;
}
.podcast-small .display:hover .play:before, .podcast-small .display:focus .play:before {
  color: #206494;
}
.podcast-small .right {
  display       : table-cell;
  vertical-align: middle;
  position      : relative;
  will-change   : contents;
}
.podcast-small .right .title {
  transition     : all 0.1s ease-in-out;
  text-decoration: none;
  color          : #00365f;
  word-break     : break-word;
  line-height    : 18px;
  background     : none;
  font-weight    : 400;
  padding        : 0;
  font-size      : 0.9375rem;
  text-indent    : 0;
  vertical-align : top;
  position       : relative;
}
.podcast-small .right .title:before {
  content: none;
}
.podcast-small .right .title:hover, .podcast-small .right .title:focus {
  color: #DD5010;
  text-decoration: underline;
}
.podcast-small .right .player {
  opacity    : 0;
  position   : absolute;
  margin-top : 10px;
  bottom     : -20px;
  z-index    : -1;
  right      : 0;
  overflow   : hidden;
  width      : 100%;
}
.podcast-small .right .player .powerpress_player {
  width: 100%;
}
.podcast-small.show {
  -webkit-animation: 'container' 800ms ease-in-out;
          animation: 'container' 800ms ease-in-out;
}
.podcast-small.show .display .wrapper {
  -webkit-animation: 'play' 800ms ease-in-out;
          animation: 'play' 800ms ease-in-out;
}
.podcast-small.show .right .title {
  -webkit-animation: 'title' 800ms ease-in-out;
          animation: 'title' 800ms ease-in-out;
}
.podcast-small.show .right .player {
  z-index  : 1;
  position : relative;
  bottom   : 0;
  opacity  : 1;
  -webkit-animation: 'player' 800ms ease-in-out;
          animation: 'player' 800ms ease-in-out;
}
.podcast-small.show ~ .podcast-small {
  -webkit-animation: 'sibling' 800ms ease-in-out;
          animation: 'sibling' 800ms ease-in-out;
}
.podcast-small.open .right .player {
  z-index  : 1;
  position : relative;
  bottom   : 0;
  opacity  : 1;
}

@-webkit-keyframes container {
  0% {
    height: 85%;
  }
  100% {
    height: 100%;
  }
}

@keyframes container {
  0% {
    height: 85%;
  }
  100% {
    height: 100%;
  }
}

@-webkit-keyframes sibling {
  0% {
  }
  100% {
    top: 0;
  }
}

@keyframes sibling {
  0% {
  }
  100% {
    top: 0;
  }
}

@-webkit-keyframes player {
  0% {
    opacity: 0;
    z-index: 1;
    bottom: -20px;
  }
  25% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
    bottom: 0;
    position: relative;
  }
}

@keyframes player {
  0% {
    opacity: 0;
    z-index: 1;
    bottom: -20px;
  }
  25% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
    bottom: 0;
    position: relative;
  }
}

@-webkit-keyframes title {
  0% {
    top: 21px;
  }
  100% {
    top: 0;
  }
}

@keyframes title {
  0% {
    top: 21px;
  }
  100% {
    top: 0;
  }
}

@-webkit-keyframes play {
  0% {
  }
  100% {
    top: 0;
  }
}

@keyframes play {
  0% {
  }
  100% {
    top: 0;
  }
}
.post-content {
  color    : #444444;
  font-size: 1.125rem;
  line-height: 1.5;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin     : 3px 0 20px;
  color      : #206494;
  font-weight: 400;
  line-height: 1.3;
}
.post-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
}
.post-content h2 {
  font-size: 2.125rem;
  font-weight: 700;
  color: #00365F;
}
.post-content h3 {
  font-size: 1.75rem
}
.post-content h4 {
  font-size: 1.5rem
}
.post-content h5 {
  font-size: 1.25rem;
}
.post-content h6 {
  font-size: 1rem;
}
.post-content p,
  .post-content ul,
  .post-content ol,
  .post-content blockquote {
  margin: 0 0 20px;
  line-height: 1.8;
}
.post-content a {
  color      : #c03d0c;
  transition : color 0.1s ease-in-out;
  font-weight: 600;
}
.post-content a:active,
    .post-content a:focus,
    .post-content a:hover,
    .post-content a:focus {
  color: rgb(153, 50, 13);
}
.post-content hr {
  border-bottom: 1px solid #206494;
  border-left  : 0;
  border-right : 0;
  border-top   : 0;
  margin       : 20px 0;
}
.post-content img,
  .post-content picture {
  margin   : 0;
  max-width: 100%;
  height   : auto;
}
.post-content blockquote {
  border-left: 3px solid #206494;
  padding    : calc( 20px / 2 ) 20px;
}
.post-content blockquote p:last-child {
  margin: 0;
}
.post-content ul {
  padding     : 0;
  padding-left: calc( 20px*1.5 );
  margin-left      : 0;
  list-style  : none;
}
.post-content ul li {
  margin-bottom   : calc( 20px/1.5 );
  background      : url( '../images/list-bullet.png' ) 0px 13px no-repeat;
  background-size : 6px 9px;
  padding-left    : 20px;
  color           : #444444;
}
.post-content ul li strong {
  display      : block;
  margin-bottom: calc( 20px/2 );
}
.post-content ol {
  padding     : 0;
  padding-left: calc( 20px*1.5 );
  margin-left : 0;
}
.post-content ol li {
  margin-bottom   : calc( 20px/1.5 );
  margin-left    : 20px;
  color           : #444444;
}
.post-content ol li strong {
  display      : block;
  margin-bottom: calc( 20px/2 );
}
.post-content .alignleft {
  margin-right: 20px;
  float       : left;
  height      : auto;
  max-width   : 100%;
}
.post-content .alignright {
  margin-left: 20px;
  float      : right;
  height     : auto;
  max-width  : 100%;
}
.post-content .aligncenter {
  margin   : 0 auto 20px auto;
  display  : block;
  float    : none;
  width: auto;
  height: auto;
  max-width: 100%;
}
.post-content .wp-caption {
  margin: 0 0 20px;
}
.post-content .wp-caption .wp-caption-text {
  text-align : center;
}
.post-content iframe {
  max-width: 100%;
}
@media( max-width: 568px ) {

  .post-content .alignleft,
    .post-content .alignright {
    margin : 0 auto 20px auto;
    display: block;
    float  : none;
  }
}
/*
 # Post feed object

 <section class="post-feed">
   <div class="post-snippet">
     <div class="display"><img src="http://41.media.tumblr.com/7b15a4bbb78fd7d1b97076fc2f99c349/tumblr_nx7kwhonte1st5lhmo1_1280.jpg" alt=""></div>
     <div class="content">
       <span class="title">Elise Cripe: Top ten things I learned after almost a decade</span>
       <div class="meta">
         <span class="author">Posted By <a href="" class="highlight">Jhonn Smith</a></span>
         <span class="date">12 th of October 2015</span>
         <a href="" class="cta">Community</a>
       </div>
       <div class="snippet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend nisl at nulla cursus, eu fermentum mauris tristique. Nam eu tellus.</div>
       <a href="" class="link">Read Post</a>
       <a href="" class="comments"><span class="highlight">24</span> Comments</a>
     </div>
   </div>
 </section>

    <section class="post-feed">
      <div class="post-snippet">
        <div class="display"><img src="http://41.media.tumblr.com/7b15a4bbb78fd7d1b97076fc2f99c349/tumblr_nx7kwhonte1st5lhmo1_1280.jpg" alt=""></div>
        <div class="content">
          <span class="title">Elise Cripe: Top ten things I learned after almost a decade</span>
          <div class="meta">
            <span class="author">Posted By <a href="" class="highlight">Jhonn Smith</a></span>
            <span class="date">12 th of October 2015</span>
            <a href="" class="cta">Community</a>
          </div>
          <div class="snippet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend nisl at nulla cursus, eu fermentum mauris tristique. Nam eu tellus.</div>
          <a href="" class="link">Read Post</a>
          <a href="" class="comments"><span class="highlight">24</span> Comments</a>
        </div>
      </div>
    </section>
 */

.post-feed .post-snippet {
  background   : #ffffff;
  margin-bottom: calc( 20px*1.5 );
}
/*
 # Post snippet object

<div class="post-snippet">
  <div class="display">
    <img src="<?php echo $snippet_thumbnail; ?>" alt="<?php echo get_the_title(); ?>">
  </div>
  <div class="content">
    <div class="meta">
      <span class="date"><?php the_date(); ?></span>
      <span class="comments"><?php echo $approved_comments; ?></span>
    </div>
    <div class="title">
      <?php the_title(); ?>
    </div>
    <div class="excerpt">
      <?php the_excerpt(); ?>
    </div>
  </div>
</div>

    <div class="post-snippet">
      <div class="display">
        <img src="<?php echo $snippet_thumbnail; ?>" alt="<?php echo get_the_title(); ?>">
      </div>
      <div class="content">
        <div class="meta">
          <span class="date"><?php the_date(); ?></span>
          <span class="comments"><?php echo $approved_comments; ?></span>
        </div>
        <div class="title">
          <?php the_title(); ?>
        </div>
        <div class="excerpt">
          <?php the_excerpt(); ?>
        </div>
      </div>
    </div>
 */

.post-snippet {

  display : table;
  width   : 100%;
  padding : 20px;
}

.post-snippet .display {
  display        : table-row;
  vertical-align : middle;
  padding-right  : 20px;
}

.post-snippet .display img {
  width          : 100%;
  display        : block;
  max-height     : inherit;
  height         : auto;
  padding-bottom : calc( 20px / 4 );
}

.post-snippet .content {
  display       : table-cell;
  vertical-align: top;
  font-family   : 'Open Sans', sans-serif;
  overflow      : hidden;
}

.post-snippet .content .meta {
  padding-top: calc( 20px / 2 );
}

.post-snippet .content .meta .date {
  margin        : 0;
  font-size     : 0.8125rem;
  font-weight   : 500;
  padding-right : calc( 20px / 4 );
}

.post-snippet .content .meta .date:after {
  display       : inline-block;
  content       : "|";
  padding-left  : calc( 20px / 2 );
  color         : #cccccc;
}

.post-snippet .content .meta .comments-wrapper .comments {
  transition      : text-decoration 200ms ease-in-out;
  margin          : 0;
  font-size       : 0.875rem;
  font-family     : 'Open Sans', sans-serif;
  font-weight     : 500;
  text-decoration : none;
  color           : #1d3245;
}

.post-snippet .content .meta .comments-wrapper .comments:before {
  font-family   : 'Icomoon';
  display       : inline-block;
  content       : '\f075';
  padding-right : calc( 20px / 2 );
  color         : #097ec8;
  font-size     : 0.8125rem;
  margin-left   : calc( 20px / 2 );
}

.post-snippet .content .meta .comments-wrapper .comments:hover, .post-snippet .content .meta .comments-wrapper .comments:focus {
  text-decoration: underline;
}

.post-snippet .content .meta .comments-wrapper:before {
  display      : inline-block;
  content      : "|";
  padding-left : calc( 20px / 4 );
  color        : #cccccc;
}

.post-snippet .content .meta .post-categories {
  display: inline;
  padding: 0;
  margin : 0;
}

.post-snippet .content .meta .post-categories a {
  transition     : text-decoration 200ms ease-in-out;
  font-size      : 0.875rem;
  font-family    : 'Open Sans', sans-serif;
  font-weight    : 400;
  color          : #1d3245;
  text-decoration: none;
}

.post-snippet .content .meta .post-categories a:visited {
  color: #1d3245;
}

.post-snippet .content .meta .post-categories a:hover, .post-snippet .content .meta .post-categories a:focus {
  text-decoration: underline;
}

.post-snippet .content .meta .post-categories a:first-child:before {
  display      : inline-block;
  content      : "|";
  padding-left : calc( 20px / 4 );
  padding-right: calc( 20px / 2 );
  color        : #cccccc;
}

.post-snippet .content .meta .author {
  transition      : text-decoration 200ms ease-in-out;
  font-size       : 0.875rem;
  font-family     : 'Open Sans', sans-serif;
  font-weight     : 400;
  color           : #1d3245;
  text-decoration : none;
}

.post-snippet .content .meta .author:visited {
  color: #1d3245;
}

.post-snippet .content .meta .author:hover, .post-snippet .content .meta .author:focus {
  text-decoration: underline;
}

.post-snippet .content .title {
  transition      : all 200ms ease-in-out;
  padding         : calc( 20px / 4 ) 0;
  color           : #00365F;
  font-size       : 1.3125rem;
  line-height     : 1.5;
  text-decoration : none;
  font-weight     : 700;
}

.post-snippet .content .title:hover, .post-snippet .content .title:focus {
  cursor          : pointer;
  text-decoration : underline;
}

.post-snippet .content .title a {
  transition      : all 200ms ease-in-out;
  color: inherit;
  font-size       : 1.3125rem;
  line-height     : 1.5;
  text-decoration : none;
  font-weight     : 700;
}

.post-snippet .content .title a:hover, .post-snippet .content .title a:focus {
  cursor          : pointer;
  text-decoration : underline;
}

.post-snippet .content .excerpt {
  font-size   : 0.875rem;
  font-family : 'Open Sans', sans-serif;
  line-height : 1.9;
}

.post-snippet .content .excerpt .more-link {
  transition      : text-decoration 200ms ease-in-out;
  color           : #f75e45;
  text-decoration : none;
}

.post-snippet .content .excerpt .more-link:hover, .post-snippet .content .excerpt .more-link:focus {
  text-decoration: underline;
}

.post-snippet .content .category {
  transition     : text-decoration 200ms ease-in-out;
  font-size      : 0.875rem;
  text-align     : right;
  text-decoration: none;
  line-height    : 1.3;
  color          : #206494;
  display        : inline-block;
  margin-top     : 10px;
  width          : auto;
  float          : right;
}

.post-snippet .content .category:hover, .post-snippet .content .category:focus {
  text-decoration: underline;
}

.post-snippet .content .category:visited {
  color: #206494;
}

@media( max-width: 568px ) {

  .post-snippet{
    display: block;
  }

  .post-snippet .display {
    display        : block;
    margin         : 0 auto;
    width          : 100%;
    padding-bottom : calc( 20px / 2 );
    padding-right  : 0;
  }

  .post-snippet .display img {
    width   : 100%;
    height  : auto;
    padding : 0;
  }

  .post-snippet .content {
    display: block;
  }
}

@media      ( max-width: 414px ) {

  .post-snippet .content .comments-wrapper {
    display: none;
  }
}
.posts-list {
}
.posts-list .item {
  display        : block;
  text-decoration: none;
  margin-bottom  : 20px;
  position : relative;
}
.posts-list .item .display {
  display       : inline-block;
  overflow      : hidden;
  width: 70px;
  height: 70px;
  margin-right  : calc( 20px / 2 );
  vertical-align: middle;
  position : relative;
}
.posts-list .item .display img {
  height   : auto;
  max-width: 100%;
}
.posts-list .item .title {
  transition     : all 0.1s ease-in-out;
  text-decoration: none;
  color          : #00365f;
  word-break     : break-word;
  line-height    : 18px;
  background     : none;
  font-weight    : 400;
  padding        : 0;
  font-size      : 0.9375rem;
  width          : auto;
  max-width      : 80%;
  text-indent    : 0;
  vertical-align : middle;
}
.posts-list .item .title:before {
  content: none;
}
.posts-list .item:last-child {
  margin-bottom: 0;
}
.posts-list .item:hover .title, .posts-list .item:focus .title {
  color          : #DD5010;
  text-decoration: underline;
}
.posts-list .item:hover .display .play:before, .posts-list .item:focus .display .play:before {
  color : #206494;
}
@media( max-width: 568px ) {

  .posts-list .item .title {
    max-width: 70%;
  }
}
@media      ( max-width: 414px ) {

  .posts-list .item .title {
    max-width: 60%;
  }
}
@media( max-width: 320px ) {

  .posts-list .item {
    margin-bottom: calc( 20px * 2 );
  }

  .posts-list .item .display {
    display      : block;
    margin       : auto;
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
  }

  .posts-list .item .title {
    display  : block;
    max-width: 100%;
    font-size: 1.125rem;
  }
}
.promotional-widget {
  display  : block;
  width    : 100%;
  overflow : hidden;
  max-width: 400px;
  margin   : 20px auto;
}
.promotional-widget img {
  float: left;
  width: 100%;
}
.promotional-widget.full {
  padding   : 20px;
  background: #EEF4FE;
  max-width : 100%;
}
.promotional-widget.full .title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  margin-bottom : 20px;
  color         : #206494;
  letter-spacing: -1px;
  line-height   : 1.2;
}
@media screen and (min-width: 1280px){

  .promotional-widget.full .title{
    font-size: 64px;
  }
}
@media screen and (max-width: 420px){

  .promotional-widget.full .title{
    font-size: 48px;
  }
}
.promotional-widget.full .wrapper {
  *zoom: 1;
}
.promotional-widget.full .wrapper:before{
  content: '';
  display: table;
}
.promotional-widget.full .wrapper:after{
  content: '';
  display: table;
  clear: both;
}
.promotional-widget.full .wrapper .display {
  width: calc(99.99% * 1/3 - (30px - 30px * 1/3));
}
.promotional-widget.full .wrapper .display:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.promotional-widget.full .wrapper .display:last-child{
  margin-right: 0;
}
.promotional-widget.full .wrapper .display:nth-child(0n){
  margin-right: 0;
  float: right;
}
.promotional-widget.full .wrapper .display:nth-child(0n + 1){
  clear: left;
}
.promotional-widget.full .wrapper .content {
  width: calc(99.99% * 2/3 - (30px - 30px * 2/3));
  overflow: hidden;
}
.promotional-widget.full .wrapper .content:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.promotional-widget.full .wrapper .content:last-child{
  margin-right: 0;
}
.promotional-widget.full .wrapper .content:nth-child(0n){
  margin-right: 0;
  float: right;
}
.promotional-widget.full .wrapper .content:nth-child(0n + 1){
  clear: left;
}
.promotional-widget.full .wrapper .content .highlight {
  padding-bottom: 20px;
  display: block;
}
.promotional-widget.full .wrapper .content p {
  margin-top   : 0;
  margin-bottom: 20px;
  display      : inline-block;
  clear        : both;
  float        : left;
  color        : #c03d0c;
  font-size    : 1.3125rem;
  font-weight  : 600;
  line-height  : 1;
}
.promotional-widget.full .wrapper .content a {
  color          : #c03d0c;
  text-decoration: none;
  transition     : all 0.1s ease-in-out;
}
.promotional-widget.full .wrapper .content a:visited {
  color: #c03d0c;
}
.promotional-widget.full .wrapper .content a:hover, .promotional-widget.full .wrapper .content a:focus {
  color: rgb(140, 47, 13);
}
.promotional-widget.full .wrapper .content ul {
  margin    : 0 0 calc( 20px*1.5 );
  padding   : 0;
  list-style: none;
  display   : inline-block;
  clear     : both;
  float     : left;
}
.promotional-widget.full .wrapper .content ul li {
  padding-left   : calc( 20px*1.6 );
  margin-bottom  : calc( 20px/1.5 );
  background     : url( '../images/check-bullet.png' ) left center no-repeat;
  background-size: 16px 11px;
  color          : #444444;
}
.promotional-widget.full .wrapper .content ul li:last-child {
  margin-bottom: 0;
}
.promotional-widget.full .wrapper .content .button {
  transition: all 0.1s ease-in-out;
  display: inline-block;
  border: none;
  border-radius: 6px;
  background: #c03d0c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  color: #ffffff;
  float  : left;
  clear  : both;
  padding: calc( 20px + 3px ) 0;
  width  : 207px;
}
.promotional-widget.full .wrapper .content .button:hover,.promotional-widget.full .wrapper .content .button:focus{
  background: rgb(166, 54, 13);
}
.promotional-widget.full .wrapper .content .button:visited,
          .promotional-widget.full .wrapper .content .button:hover,
          .promotional-widget.full .wrapper .content .button:focus {
  color: #ffffff !important;
}
@media( max-width: 568px ) {

  .promotional-widget.full .wrapper .display,
        .promotional-widget.full .wrapper .content {
    width: calc(99.99% * 1 - (30px - 30px * 1));
  }

  .promotional-widget.full .wrapper .display:nth-child(1n),
        .promotional-widget.full .wrapper .content:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .promotional-widget.full .wrapper .display:last-child,
        .promotional-widget.full .wrapper .content:last-child{
    margin-right: 0;
  }

  .promotional-widget.full .wrapper .display:nth-child(undefinedn),
        .promotional-widget.full .wrapper .content:nth-child(undefinedn){
    margin-right: 0;
    float: right;
  }

  .promotional-widget.full .wrapper .display:nth-child(undefinedn + 1),
        .promotional-widget.full .wrapper .content:nth-child(undefinedn + 1){
    clear: left;
  }

  .promotional-widget.full .wrapper .display {
    max-width: 300px;
    margin   : 0 auto 20px !important;
    float    : none !important;
    overflow : hidden;
  }

  .promotional-widget.full .wrapper .button {
    display: block;
    margin : auto;
    float  : none;
  }
}
/*
 # Related post object

  <section class="related-posts">
    <div class="column">
      <span class="disclaimer">You may also like...</span>
      <a class="title">Lorem ipsum dolor sit consec pisrea talvit degaset</a>
      <a class="date">12 hours ago</a>
      <a class="display" href="#">
        <img src="http://41.media.tumblr.com/904b6a6ccb01ea0d99f62638ae977c0f/tumblr_nxgjo88w7t1st5lhmo8_1280.jpg" alt="">
      </a>
    </div>
    <div class="column">
      <div class="snippet">
        <a href="" class="display">
          <img src="http://41.media.tumblr.com/63a3f91278403f2a2b6e0fe162a61ac9/tumblr_nwmon54fBz1st5lhmo1_1280.jpg" alt="">
        </a>
        <div class="content">
          <a href="#" class="title">Lorem ipsum dolor sit consectetu pis rea talvit degaset</a>
          <a href="#" class="date">17 hours ago</a>
        </div>
      </div>
      <div class="snippet">
        <a href="" class="display">
          <img src="http://41.media.tumblr.com/63a3f91278403f2a2b6e0fe162a61ac9/tumblr_nwmon54fBz1st5lhmo1_1280.jpg" alt="">
        </a>
        <div class="content">
          <a href="#" class="title">Lorem ipsum dolor sit consectetu pis rea talvit degaset</a>
          <a href="#" class="date">17 hours ago</a>
        </div>
      </div>
      <div class="snippet">
        <a href="" class="display">
          <img src="http://36.media.tumblr.com/9a54d330544ab5a28479f6c4ae989417/tumblr_nx8yg5ShNa1st5lhmo1_1280.jpg" alt="">
        </a>
        <div class="content">
          <a href="#" class="title">Lorem ipsum dolor sit consectetu pis rea talvit degaset</a>
          <a href="#" class="date">17 hours ago</a>
        </div>
      </div>
    </div>
  </section>

      <section class="related-posts">
        <div class="column">
          <span class="disclaimer">You may also like...</span>
          <a class="title">Lorem ipsum dolor sit consec pisrea talvit degaset</a>
          <a class="date">12 hours ago</a>
          <a class="display" href="#">
            <img src="http://41.media.tumblr.com/904b6a6ccb01ea0d99f62638ae977c0f/tumblr_nxgjo88w7t1st5lhmo8_1280.jpg" alt="">
          </a>
        </div>
        <div class="column">
          <div class="snippet">
            <a href="" class="display">
              <img src="http://41.media.tumblr.com/63a3f91278403f2a2b6e0fe162a61ac9/tumblr_nwmon54fBz1st5lhmo1_1280.jpg" alt="">
            </a>
            <div class="content">
              <a href="#" class="title">Lorem ipsum dolor sit consectetu pis rea talvit degaset</a>
              <a href="#" class="date">17 hours ago</a>
            </div>
          </div>
          <div class="snippet">
            <a href="" class="display">
              <img src="http://41.media.tumblr.com/63a3f91278403f2a2b6e0fe162a61ac9/tumblr_nwmon54fBz1st5lhmo1_1280.jpg" alt="">
            </a>
            <div class="content">
              <a href="#" class="title">Lorem ipsum dolor sit consectetu pis rea talvit degaset</a>
              <a href="#" class="date">17 hours ago</a>
            </div>
          </div>
          <div class="snippet">
            <a href="" class="display">
              <img src="http://36.media.tumblr.com/9a54d330544ab5a28479f6c4ae989417/tumblr_nx8yg5ShNa1st5lhmo1_1280.jpg" alt="">
            </a>
            <div class="content">
              <a href="#" class="title">Lorem ipsum dolor sit consectetu pis rea talvit degaset</a>
              <a href="#" class="date">17 hours ago</a>
            </div>
          </div>
        </div>
      </section>
*/

.related-posts {

  border : 1px solid #dfeeff;
  color  : #206494;
  display: table;
  width: 100%;
  height: 465px;
  padding: 20px;

}

.related-posts .search-bar {
  margin-bottom: 20px;
}

.related-posts .search-bar .search,
    .related-posts .search-bar .button {
  color: #206494;
}

.related-posts .search-bar .search::-webkit-input-placeholder, .related-posts .search-bar .button::-webkit-input-placeholder {
  color: #206494;
}

.related-posts .search-bar .search:-moz-placeholder, .related-posts .search-bar .button:-moz-placeholder {/* Firefox 18- */
  color: #206494;
}

.related-posts .search-bar .search::-moz-placeholder, .related-posts .search-bar .button::-moz-placeholder {/* Firefox 19+ */
  color: #206494;
}

.related-posts .search-bar .search:-ms-input-placeholder, .related-posts .search-bar .button:-ms-input-placeholder {
  color: #206494;
}

.related-posts .section-content .column {
  display       : table-cell;
  vertical-align: top;
  width         : 50%;
}

.related-posts .section-content .column:last-child {
  padding-left: calc( 20px/2 );
}

.related-posts .section-content .column:first-child {
  padding-right: 20px;
}

.related-posts .section-content .column .categories-sidebar .content {
  padding: 0;
}

.related-posts .section-content .column .categories-sidebar .content .wrapper {
  padding: 0 calc( 20px/1.5 ) 20px;
}

.related-posts .display {
  display: inline-block;
}

.related-posts .display img {
  display    : block;
  margin     : 0 auto;
  min-height : 310px;
  min-width  : 310px;
  max-width  : 100%;
  width: 100%;
  height: 100%;
}

.related-posts .disclaimer {
  display     : inline-block;
  color       : #00365f;
  font-size   : 1rem;
  font-weight : 600;
  width       : 100%;
}

.related-posts .disclaimer:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  color       : #B31B1B;
  margin-right: calc( 20px / 2 );
  content     : '\e90b';
  font-size   : 0.9375rem;
}

.related-posts .title {
  display      : inline-block;
  margin-bottom: calc( 20px/2 );
  float        : left;
  clear        : both;
  font-size    : 1.125rem;
}

.related-posts .date {
  float        : left;
  clear        : both;
  display      : inline-block;
  margin-bottom: calc( 20px/1.5 );
  font-size    : 0.6875rem;
  font-weight  : 700;
  line-height  : 1;
}

.related-posts a.title,
  .related-posts a.date {
  transition      : all 0.1s ease-in-out;
  text-decoration : none;
  color           : #206494;
}

.related-posts a.title:visited, .related-posts a.date:visited {
  color: #206494;
}

.related-posts a.title:hover, .related-posts a.date:hover, .related-posts a.title:focus, .related-posts a.date:focus {
  color: rgb(33, 73, 102);
}

.related-posts .snippet {
  width: 100%;
  height: calc(99.99% * 1/3 - (30px - 30px * 1/3));
  margin-bottom: 30px;
  overflow     : hidden;
  border-bottom: 1px solid #dfeeff;
}

.related-posts .snippet:last-child{
  margin-bottom: 0;
}

.related-posts .snippet:last-child {
  border-bottom: none;
}

.related-posts .snippet:last-child .display img {
  padding-bottom: 0;
}

.related-posts .snippet .display {
  width: calc(99.99% * 5/12 - (18px - 18px * 5/12));
}

.related-posts .snippet .display:nth-child(1n){
  float: left;
  margin-right: 18px;
  clear: none;
}

.related-posts .snippet .display:last-child{
  margin-right: 0;
}

.related-posts .snippet .display:nth-child(3n){
  margin-right: 0;
  float: right;
}

.related-posts .snippet .display:nth-child(3n + 1){
  clear: left;
}

.related-posts .snippet .display img {
  min-width      : 125px;
  max-width      : 125px;
  min-height     : inherit;
  padding-bottom : 20px;
}

.related-posts .snippet .content {
  width: calc(99.99% * 7/12 - (18px - 18px * 7/12));
}

.related-posts .snippet .content:nth-child(1n){
  float: left;
  margin-right: 18px;
  clear: none;
}

.related-posts .snippet .content:last-child{
  margin-right: 0;
}

.related-posts .snippet .content:nth-child(3n){
  margin-right: 0;
  float: right;
}

.related-posts .snippet .content:nth-child(3n + 1){
  clear: left;
}

.related-posts .snippet .content .title {
  font-size: 0.9375rem;
}

@media( max-width: 1024px ) {

  .related-posts .snippet:last-child .display img {
    padding-bottom: 20px;
  }

  .related-posts .snippet:last-child .content .title {
    padding-bottom: 0;
  }

  .related-posts .snippet .display {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .related-posts .snippet .display:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .related-posts .snippet .display:last-child{
    margin-right: 0;
  }

  .related-posts .snippet .display:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .related-posts .snippet .display:nth-child(1n + 1){
    clear: left;
  }

  .related-posts .snippet .content {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .related-posts .snippet .content:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .related-posts .snippet .content:last-child{
    margin-right: 0;
  }

  .related-posts .snippet .content:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .related-posts .snippet .content:nth-child(1n + 1){
    clear: left;
  }

  .related-posts .snippet .content .title {
    text-align     : center;
    width          : 100%;
    margin         : 0 auto;
    padding-bottom : 20px;
  }

  .related-posts .snippet .content .date {
    display: none;
  }

  .related-posts .section-content .column {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .related-posts .section-content .column:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .related-posts .section-content .column:last-child{
    margin-right: 0;
  }

  .related-posts .section-content .column:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .related-posts .section-content .column:nth-child(1n + 1){
    clear: left;
  }

  .related-posts .section-content .column .display {
    width      : 100%;
    padding    : 20px;
    text-align : center;
    margin     : 0 auto;
  }

  .related-posts .section-content .column .date {
    display: none;
  }
}

@media( max-width: 568px ) {

  .related-posts .section-content .column {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .related-posts .section-content .column:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .related-posts .section-content .column:last-child{
    margin-right: 0;
  }

  .related-posts .section-content .column:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .related-posts .section-content .column:nth-child(1n + 1){
    clear: left;
  }

  .related-posts .section-content .column:first-child {
    border-bottom: 1px solid #dfeeff;
  }

  .related-posts .section-content .column:first-child .display {
    padding: 0;
  }

  .related-posts .section-content .column:first-child .display img {
    height: auto;
    width: 100%;
    min-height: auto;
    min-width: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

@media      ( max-width: 414px ) {

  .related-posts .section-content .column .categories-sidebar .content .wrapper {
    padding: 0 calc( 20px/2 ) 20px;
  }
}

@media( max-width: 320px ) {

  .related-posts .section-content .column:first-child {
    padding: 0;
    padding-bottom: 20px;
  }
}
/*
  # Search bar object

  <hr>

  <form action="#" class="search-bar">
     <input type="text" class="search" placeholder="Search" name="s">
     <button class="button"></button>
  </form>

      <form action="#" class="search-bar">
         <input type="text" class="search" placeholder="Search" name="s">
         <button class="button"></button>
      </form>
 */

.search-bar {
  overflow     : hidden;
  border       : 1px solid #bbdaee;
  border-radius: 2px;
}

.search-bar .search {
  float      : left;
  padding    : 0 0 0 7px;
  border     : none;
  background : none;
  color      : #ffffff;
  font-size  : 0.8125rem;
  outline    : none;
  width: calc( 99% - 30px );
  height: 32px;
}

.search-bar .search::-webkit-input-placeholder {
  color: #ffffff;
}

.search-bar .search:-moz-placeholder {/* Firefox 18- */
  color: #ffffff;
}

.search-bar .search::-moz-placeholder {/* Firefox 19+ */
  color: #ffffff;
}

.search-bar .search:-ms-input-placeholder {
  color: #ffffff;
}

.search-bar .button {
  transition: all 0.1s ease-in-out;
  float     : left;
  padding   : 0;
  margin    : 0;
  border    : none;
  background: none;
  color     : #ffffff;
  width: 30px;
  height: 32px;
}

.search-bar .button:hover, .search-bar .button:focus {
  color : rgb(212, 213, 213);
}

.search-bar .button:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  content    : '\e908';
  font-size  : 0.9375rem;
  line-height: 1.5;
}
.search-notice .section-title {
  display    : inline-block;
  text-align : center;
  margin     : 0 0 calc( 20px*2 );
  color      : #206494;
  font-weight: 300;
  line-height: 1;
  width      : 100%;
  font-size  : 2.8125rem;
  line-height: normal;
}
.search-notice .search-bar .search,
    .search-notice .search-bar .button {
  color: #206494;
}
.search-notice .search-bar .search::-webkit-input-placeholder {
  color: #206494;
}
.search-notice .search-bar .search:-moz-placeholder {/* Firefox 18- */
  color: #206494;
}
.search-notice .search-bar .search::-moz-placeholder {/* Firefox 19+ */
  color: #206494;
}
.search-notice .search-bar .search:-ms-input-placeholder {
  color: #206494;
}
/*
 # Single article object

  <article class="single-article">
    <h1 class="title">5 Things to Pay Attention to When Considering Local SEO and Your Blog</h1>
    <div class="meta">
      <span class="author">Posted By <a href="" class="highlight">Jhonn Smith</a></span>
      <span class="date">12 th of October 2015</span>
      <a href="" class="cta">Community</a>
    </div>
    <div class="display">
      <img src="http://41.media.tumblr.com/3ce5c519b5ac5be21ab4483622cfd2b6/tumblr_nwmon2DbMZ1st5lhmo1_1280.jpg" alt="">
    </div>
    <div class="post-content"></div>
  </article>

      <article class="single-article">
        <h1 class="title">5 Things to Pay Attention to When Considering Local SEO and Your Blog</h1>
        <div class="meta">
          <span class="author">Posted By <a href="" class="highlight">Jhonn Smith</a></span>
          <span class="date">12 th of October 2015</span>
          <a href="" class="cta">Community</a>
        </div>
        <div class="display">
          <img src="http://41.media.tumblr.com/3ce5c519b5ac5be21ab4483622cfd2b6/tumblr_nwmon2DbMZ1st5lhmo1_1280.jpg" alt="">
        </div>
        <div class="post-content"></div>
      </article>
 */
.single-article .title {
  display    : inline-block;
  margin     : 0 0 calc( 20px*1.5 );
  color      : #206494;
  font-size  : 2.25rem;
  line-height: 40px;
}
.single-article .meta {
  margin-bottom: calc( 20px );
  color        : #1d3245;
  font-size    : 0.75rem;
  width        : 100%;
}
.single-article .meta .highlight,
    .single-article .meta .cta {
  transition: all 0.1s ease-in-out;
  color     : #c03d0c;
}
.single-article .meta .highlight:hover, .single-article .meta .cta:hover, .single-article .meta .highlight:focus, .single-article .meta .cta:focus {
  color: rgb(140, 47, 13);
}
.single-article .meta .author {
  display     : inline-block;
  margin-right: calc( 20px/2 );
}
.single-article .meta .author:after {
  content    : '|';
  margin-left: calc( 20px/2 );
  display    : inline-block;
  color        : #cccccc;
}
.single-article .meta .comments-wrapper .comments {
  transition      : text-decoration 200ms ease-in-out;
  margin          : 0;
  font-size       : 0.75rem;
  font-family     : 'Open Sans', sans-serif;
  font-weight     : 500;
  text-decoration : none;
  color           : #1d3245;
}
.single-article .meta .comments-wrapper .comments:before {
  font-family   : 'Icomoon';
  display       : inline-block;
  content       : '\f075';
  padding-right : calc( 20px / 2 );
  color         : #097ec8;
  font-size     : 0.8125rem;
  margin-left   : calc( 20px / 2 );
}
.single-article .meta .comments-wrapper .comments:hover, .single-article .meta .comments-wrapper .comments:focus {
  text-decoration: underline;
}
.single-article .meta .comments-wrapper:before {
  display      : inline-block;
  content      : "|";
  padding-left : calc( 20px / 4 );
  color        : #cccccc;
}
.single-article .meta .post-categories {
  display: inline;
  padding: 0;
  margin : 0;
}
.single-article .meta .post-categories a {
  transition     : text-decoration 200ms ease-in-out;
  font-size      : 0.75rem;
  font-family    : 'Open Sans', sans-serif;
  font-weight    : 400;
  color          : #1d3245;
  text-decoration: none;
}
.single-article .meta .post-categories a:visited {
  color: #1d3245;
}
.single-article .meta .post-categories a:first-child:before {
  display      : inline-block;
  content      : "|";
  padding-left : calc( 20px / 4 );
  padding-right: calc( 20px / 2 );
  color        : #cccccc;
}
.single-article .meta .post-categories a:hover, .single-article .meta .post-categories a:focus {
  text-decoration: underline;
}
.single-article .display {
  margin-bottom: calc( 20px*1.5 );
}
.single-article .display img {
  display  : block;
  margin   : 0 auto;
  max-width: 100%;
  height   : auto;
}
/*
 # Social options object
 # Uses social-button mixin

 <div class="social-options">
   <a href="#" class="facebook"></a>
   <a href="#" class="twitter"></a>
   <a href="#" class="itunes"></a>
   <a href="#" class="linkedin"></a>
   <a href="#" class="rss"></a>
   <a href="#" class="youtube"></a>
 </div>

    <div class="social-options">
      <a href="#" class="facebook"></a>
      <a href="#" class="twitter"></a>
      <a href="#" class="itunes"></a>
      <a href="#" class="linkedin"></a>
      <a href="#" class="rss"></a>
      <a href="#" class="youtube"></a>
    </div>
 */

.social-options {
}

.social-options .facebook{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-right: 5px;
  color: #3a589d;
}

.social-options .facebook:before{
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  font-size: 1.1875rem;
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  width: 20px;
  height: 20px;
}

.social-options .facebook:hover,.social-options .facebook:focus{
  background: #3a589d;
  color: #ffffff;
}

.social-options .facebook:before{
  content: '\e900';
}

.social-options .twitter{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-right: 5px;
  color: #55abf4;
}

.social-options .twitter:before{
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  font-size: 1.1875rem;
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  width: 20px;
  height: 20px;
}

.social-options .twitter:hover,.social-options .twitter:focus{
  background: #55abf4;
  color: #ffffff;
}

.social-options .twitter:before{
  content: '\e90c';
}

.social-options .itunes{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-right: 5px;
  color: #f9322a;
}

.social-options .itunes:before{
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  font-size: 1.1875rem;
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  width: 20px;
  height: 20px;
}

.social-options .itunes:hover,.social-options .itunes:focus{
  background: #f9322a;
  color: #ffffff;
}

.social-options .itunes:before{
  content: '\e90f';
  font-size: 1.4375rem;
  width: 23px;
  height: 23px;
}

.social-options .rss{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  color: #52504f;
}

.social-options .rss:before{
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  font-size: 1.1875rem;
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  width: 20px;
  height: 20px;
}

.social-options .rss:hover,.social-options .rss:focus{
  background: #52504f;
  color: #ffffff;
}

.social-options .rss:before{
  content: '\e907';
}

.social-options .youtube{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-right: 5px;
  color: #e22d23;
}

.social-options .youtube:before{
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  font-size: 1.1875rem;
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  width: 20px;
  height: 20px;
}

.social-options .youtube:hover,.social-options .youtube:focus{
  background: #e22d23;
  color: #ffffff;
}

.social-options .youtube:before{
  content: '\e90d';
  font-size: 1.4375rem;
  width: 23px;
  height: 23px;
}

.social-options .linkedin{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-right: 5px;
  color: #0477b5;
}

.social-options .linkedin:before{
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  font-size: 1.1875rem;
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  width: 20px;
  height: 20px;
}

.social-options .linkedin:hover,.social-options .linkedin:focus{
  background: #0477b5;
  color: #ffffff;
}

.social-options .linkedin:before{
  content: '\e903';
}

.social-options .extra{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  border: 1px solid;
  border-radius: 50%;
  text-decoration: none;
  line-height: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-right: 5px;
  color: #52504f;
}

.social-options .extra:before{
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  font-size: 1.1875rem;
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  width: 20px;
  height: 20px;
}

.social-options .extra:hover,.social-options .extra:focus{
  background: #52504f;
  color: #ffffff;
}

.social-options .extra:before{
  content: '\e90a';
  font-size: 1.5rem;
  width: 24px;
  height: 24px;
}
/*
 # Social Sidebar object

 <div class="social-sidebar">
   <span class="title">Follow Us</span>
   <a href="#" class="facebook"></a>
   <a href="#" class="twitter"></a>
   <a href="#" class="rss-alt"></a>
 </div>

    <div class="social-sidebar">
      <span class="title">Follow Us</span>
      <a href="#" class="facebook"></a>
      <a href="#" class="twitter"></a>
      <a href="#" class="rss-alt"></a>
    </div>
 */

.social-sidebar .facebook{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  color: #ffffff;
  background: #206494;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  width: 37px;
  height: 37px;
  margin-right: 3px;
  margin-bottom: 20px;
}

.social-sidebar .facebook:hover,.social-sidebar .facebook:focus{
  background: #c03d0c;
}

.social-sidebar .facebook:before{
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '\e900';
  font-size: 0.875rem;
  width: 37px;
  height: 16px;
}

.social-sidebar .twitter{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  color: #ffffff;
  background: #206494;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  width: 37px;
  height: 37px;
  margin-right: 3px;
  margin-bottom: 20px;
}

.social-sidebar .twitter:hover,.social-sidebar .twitter:focus{
  background: #c03d0c;
}

.social-sidebar .twitter:before{
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '\e90c';
  font-size: 0.875rem;
  width: 37px;
  height: 16px;
}

.social-sidebar .itunes{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  color: #ffffff;
  background: #206494;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  width: 37px;
  height: 37px;
  margin-right: 3px;
  margin-bottom: 20px;
}

.social-sidebar .itunes:hover,.social-sidebar .itunes:focus{
  background: #c03d0c;
}

.social-sidebar .itunes:before{
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '\e90f';
  font-size: 0.875rem;
  width: 37px;
  height: 16px;
}

.social-sidebar .rss{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  color: #ffffff;
  background: #206494;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  width: 37px;
  height: 37px;
  margin-right: 3px;
  margin-bottom: 20px;
}

.social-sidebar .rss:hover,.social-sidebar .rss:focus{
  background: #c03d0c;
}

.social-sidebar .rss:before{
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '\e907';
  font-size: 0.875rem;
  width: 37px;
  height: 16px;
}

.social-sidebar .youtube{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  color: #ffffff;
  background: #206494;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  width: 37px;
  height: 37px;
  margin-right: 3px;
  margin-bottom: 20px;
}

.social-sidebar .youtube:hover,.social-sidebar .youtube:focus{
  background: #c03d0c;
}

.social-sidebar .youtube:before{
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '\e90d';
  font-size: 0.875rem;
  width: 37px;
  height: 16px;
}

.social-sidebar .linkedin{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  color: #ffffff;
  background: #206494;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  width: 37px;
  height: 37px;
  margin-right: 3px;
  margin-bottom: 20px;
}

.social-sidebar .linkedin:hover,.social-sidebar .linkedin:focus{
  background: #c03d0c;
}

.social-sidebar .linkedin:before{
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '\e903';
  font-size: 0.875rem;
  width: 37px;
  height: 16px;
}

.social-sidebar .extra{
  transition: all 0.1s ease-in-out;
  display: inline-block;
  position: relative;
  color: #ffffff;
  background: #206494;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  width: 37px;
  height: 37px;
  margin-right: 3px;
  margin-bottom: 20px;
}

.social-sidebar .extra:hover,.social-sidebar .extra:focus{
  background: #c03d0c;
}

.social-sidebar .extra:before{
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: '\e90a';
  font-size: 0.875rem;
  width: 37px;
  height: 16px;
}

.social-sidebar .facebook:before {
  font-size: 1rem;
}

.social-sidebar .youtube:before,.social-sidebar .itunes:before,.social-sidebar .extra:before{
  font-size: 1.1875rem;
  bottom   : 3px;
  height: 19px;
}

@media( max-width: 1024px ) {

  .social-sidebar .facebook{
    margin-right: calc( 20px/2 );
  }

  .social-sidebar .twitter{
    margin-right: calc( 20px/2 );
  }

  .social-sidebar .itunes{
    margin-right: calc( 20px/2 );
  }

  .social-sidebar .rss{
    margin-right: calc( 20px/2 );
  }

  .social-sidebar .youtube{
    margin-right: calc( 20px/2 );
  }

  .social-sidebar .linkedin{
    margin-right: calc( 20px/2 );
  }

  .social-sidebar .extra{
    margin-right: calc( 20px/2 );
  }
}

@media      ( max-width: 768px ) {

  .social-sidebar .facebook{
    margin-right: calc( 20px/1.5 );
  }

  .social-sidebar .twitter{
    margin-right: calc( 20px/1.5 );
  }

  .social-sidebar .itunes{
    margin-right: calc( 20px/1.5 );
  }

  .social-sidebar .rss{
    margin-right: calc( 20px/1.5 );
  }

  .social-sidebar .youtube{
    margin-right: calc( 20px/1.5 );
  }

  .social-sidebar .linkedin{
    margin-right: calc( 20px/1.5 );
  }

  .social-sidebar .extra{
    margin-right: calc( 20px/1.5 );
  }
}
@media      ( max-width: 768px ) {

  .sticky-top-bar-message{
    display: none !important;
  }
}

@media      ( max-width: 768px ) {

  .sticky-top-bar-open-button{
    display: none !important;
  }
}
/*
# Styled list object

<ul class="styled-list">
  <li class="item">My tips and tools for creating your own podcast</li>
  <li class="item">How to work out how to brand your work</li>
  <li class="item">How to make a full time income your blog</li>
  <li class="item">My tips and tools for creating your own podcast</li>
  <li class="item">How to work out how to brand your work</li>
</ul>

    <ul class="styled-list">
      <li class="item">My tips and tools for creating your own podcast</li>
      <li class="item">How to work out how to brand your work</li>
      <li class="item">How to make a full time income your blog</li>
      <li class="item">My tips and tools for creating your own podcast</li>
      <li class="item">How to work out how to brand your work</li>
    </ul>
*/
.styled-list {
  margin    : 0;
  padding   : 0;
  list-style: none;
}
.styled-list .item,
  .styled-list .menu-item {
  padding-bottom: 20px;
  padding-left   : calc( 20px/1.5 );
  background     : url( '../images/list-bullet.png' ) 0px 5px no-repeat;
  background-size: 6px 9px;
  color          : #00365f;
  font-size      : 0.9375rem;
  line-height    : 1.2;
}
.styled-list .item > a, .styled-list .menu-item > a {
  color           : inherit;
  transition      : all 0.1s ease-in-out;
  word-break      : break-word;
  text-decoration : none;
}
.styled-list .item > a:visited, .styled-list .menu-item > a:visited {
  color: #00365f;
}
.styled-list .item > a:hover, .styled-list .menu-item > a:hover, .styled-list .item > a:focus, .styled-list .menu-item > a:focus {
  color: #DD5010;
  text-decoration: underline;
}
.styled-list .item:last-child, .styled-list .menu-item:last-child {
  padding-bottom: 0;
}
.white-popup {
  position     : relative;
  background   : #FFF;
  padding      : 20px;
  width        : auto;
  margin       : 20px auto;
  border-radius: 8px;
  max-width : none !important;
}

.mfp-content {
  max-width: 1088px;
}

.mfp-zoom-in .mfp-with-anim {
  opacity   : 0;
  transition: all 0.2s ease-in-out;
  -webkit-transform : scale(0.8);
      -ms-transform : scale(0.8);
          transform : scale(0.8);
}

.mfp-zoom-in.mfp-bg {
  opacity   : 0;
  transition: all 0.3s ease-out;
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity  : 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
  opacity  : 0;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}
.widget-wrapper {
}
.widget-wrapper .rounded {
  background    : #d8eafe;
  padding       : calc( 20px/1.5 ) calc( 20px/2 );
  padding-bottom: calc( 20px/2 );
  display       : inline-block;
  color         : #206494;
  font-size     : 1.125rem;
  font-weight   : 600;
  line-height   : 1;
  width         : 100%;
  margin        : 0;
}
.widget-wrapper .rounded:before {
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-family: 'Icomoon';
  speak: none;
  line-height: 1;
  display      : inline-block;
  padding      : 8px;
  margin-right : calc( 20px/1.5 );
  background   : #ffffff;
  border-radius: 50%;
  content      : '\e90b';
  color        : #c03d0c;
  font-size    : 1rem;
  margin-top   : -5px;
}
.widget-wrapper .execphpwidget {
  padding   : calc( 20px*1.5 ) calc( 20px/1.5 );
  background: #ffffff;
  font-size : 1rem;
}
.widget-wrapper .execphpwidget p {
  margin         : 0;
  margin-bottom  : 20px;
  color          : #00365f;
}
.widget-wrapper .execphpwidget p a {
  transition     : all 0.1s ease-in-out;
  color          : #DD5010;
  text-decoration: none;
}
.widget-wrapper .execphpwidget p a:hover, .widget-wrapper .execphpwidget p a:focus {
  color          : rgb(177, 64, 13);
  text-decoration: underline;
}
.widget-wrapper .execphpwidget ul {
  margin        : 0;
  padding       : 0;
  list-style    : none;
}
.widget-wrapper .execphpwidget ul li {
  padding-bottom: 20px;
  padding-left   : calc( 20px/1.5 );
  background     : url( '../images/list-bullet.png' ) 0px 5px no-repeat;
  background-size: 6px 9px;
  color          : #00365f;
  font-size      : 0.9375rem;
  line-height    : 1.2;
}
.widget-wrapper .execphpwidget ul li > a {
  color           : inherit;
  transition      : all 0.1s ease-in-out;
  word-break      : break-word;
  text-decoration : none;
}
.widget-wrapper .execphpwidget ul li > a:visited {
  color: #00365f;
}
.widget-wrapper .execphpwidget ul li > a:hover, .widget-wrapper .execphpwidget ul li > a:focus {
  color: #DD5010;
  text-decoration: underline;
}
.widget-wrapper .execphpwidget ul li:last-child {
  padding-bottom: 0;
}
.widgets-container {
  background-color: #124C75;
}
.wp-audio-shortcode.mejs-container {


  border    : 1px solid #324B61;
  height    : auto !important;
  background: none;
}
.wp-audio-shortcode.mejs-container .mejs-inner {
  height    : 60px !important;
  background: #162c40 !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls {
  padding   : 0 20px/2;
  background: #162c40 !important;
  top       : 0;
  height    : 60px;
}
.wp-audio-shortcode.mejs-container .mejs-controls div {
  top: 0;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-button {
  padding-top: 10px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-button button {
  background: none !important;
  margin    : 7px 3px;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-playpause-button button {
  background: none;
  font-size : 1.625rem;
  height    : 26px;
  width     : 26px;
  color     : #ffffff;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-play button:before {
  content    : '\f04b';
  font-family: 'Icomoon';
  font-size  : 1.25rem;
  font-weight: normal;
  color      : #ffffff;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-pause button:before {
  content    : '\f04c';
  font-family: 'Icomoon';
  font-size  : 1.25rem;
  font-weight: normal;
  color      : #ffffff;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-volume-button {
  padding-top: 15px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-volume-button button {
  font-size: 1rem;
  height   : 16px;
  width    : 16px;
  color    : #ffffff;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-mute button:before {
  content    : '\f028';
  font-family: 'Icomoon';
  font-size  : 1.125rem;
  font-weight: normal;
  color      : #ffffff;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-unmute button {
  color: #ffffff;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-unmute button:hover, .wp-audio-shortcode.mejs-container .mejs-controls .mejs-unmute button:focus {
  color: rgb(230, 230, 230);
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-unmute button:before {
  transtion  : color 0.1s ease-in-out;
  content    : '\f026';
  font-family: 'Icomoon';
  font-size  : 1.125rem;
  font-weight: normal;
  color      : inherit;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-currenttime,
    .wp-audio-shortcode.mejs-container .mejs-controls .mejs-duration {
  font-size: 0.8125rem !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-currenttime-container {
  padding-left: 20px/2;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-duration-container {
  padding-right: 20px/2;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-time {
  padding-top: 25px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-horizontal-volume-slider {
  margin-top: 22px !important;
  width     : 50px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
      .wp-audio-shortcode.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  height: 15px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  background: #051629;
  width     : 45px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  background: #587088;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail {
  padding-top: 18px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded,
      .wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-slider,
      .wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-current,
      .wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-buffering {
  height: 15px !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-slider {
  background: #051629 !important;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: #8aca8b;
}
.wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #ffffff;
}

 /* Views ( layouts ) */
.archive .app-content, .page-blog .app-content, .search .app-content {
  padding-bottom   : calc( 20px * 1.5 );
  padding-top      : 30px;
  background-color : #ebf4fe;
}
.archive .main-content, .page-blog .main-content, .search .main-content {
  width: calc(99.99% * 8/12 - (30px - 30px * 8/12));
}
.archive .main-content:nth-child(1n), .page-blog .main-content:nth-child(1n), .search .main-content:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.archive .main-content:last-child, .page-blog .main-content:last-child, .search .main-content:last-child{
  margin-right: 0;
}
.archive .main-content:nth-child(12n), .page-blog .main-content:nth-child(12n), .search .main-content:nth-child(12n){
  margin-right: 0;
  float: right;
}
.archive .main-content:nth-child(12n + 1), .page-blog .main-content:nth-child(12n + 1), .search .main-content:nth-child(12n + 1){
  clear: left;
}
.archive .app-sdiebar, .page-blog .app-sdiebar, .search .app-sdiebar {
  width: calc(99.99% * 4/12 - (30px - 30px * 4/12));
}
.archive .app-sdiebar:nth-child(1n), .page-blog .app-sdiebar:nth-child(1n), .search .app-sdiebar:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.archive .app-sdiebar:last-child, .page-blog .app-sdiebar:last-child, .search .app-sdiebar:last-child{
  margin-right: 0;
}
.archive .app-sdiebar:nth-child(12n), .page-blog .app-sdiebar:nth-child(12n), .search .app-sdiebar:nth-child(12n){
  margin-right: 0;
  float: right;
}
.archive .app-sdiebar:nth-child(12n + 1), .page-blog .app-sdiebar:nth-child(12n + 1), .search .app-sdiebar:nth-child(12n + 1){
  clear: left;
}
.archive .pagination-links, .page-blog .pagination-links, .search .pagination-links {
  clear: both;
}
@media      ( max-width: 768px ) {

  .archive .main-content,
    .archive .app-sidebar,
    .page-blog .main-content,
    .page-blog .app-sidebar,
    .search .main-content,
    .search .app-sidebar {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .archive .main-content:nth-child(1n),
    .archive .app-sidebar:nth-child(1n),
    .page-blog .main-content:nth-child(1n),
    .page-blog .app-sidebar:nth-child(1n),
    .search .main-content:nth-child(1n),
    .search .app-sidebar:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .archive .main-content:last-child,
    .archive .app-sidebar:last-child,
    .page-blog .main-content:last-child,
    .page-blog .app-sidebar:last-child,
    .search .main-content:last-child,
    .search .app-sidebar:last-child{
    margin-right: 0;
  }

  .archive .main-content:nth-child(1n),
    .archive .app-sidebar:nth-child(1n),
    .page-blog .main-content:nth-child(1n),
    .page-blog .app-sidebar:nth-child(1n),
    .search .main-content:nth-child(1n),
    .search .app-sidebar:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .archive .main-content:nth-child(1n + 1),
    .archive .app-sidebar:nth-child(1n + 1),
    .page-blog .main-content:nth-child(1n + 1),
    .page-blog .app-sidebar:nth-child(1n + 1),
    .search .main-content:nth-child(1n + 1),
    .search .app-sidebar:nth-child(1n + 1){
    clear: left;
  }

  .archive .app-content, .page-blog .app-content, .search .app-content {
    padding: 20px;
  }

  .archive .app-sidebar, .page-blog .app-sidebar, .search .app-sidebar {
    margin-top: calc( 20px * 1.5 );
  }
}
.archive.page .main-content, .page-blog.page .main-content, .search.page .main-content {
  padding-top: 0;
}
.author.archive .section-title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  font-size: 54px !important;
}
@media screen and (min-width: 1280px){

  .author.archive .section-title{
    font-size: 64px;
  }
}
@media screen and (max-width: 420px){

  .author.archive .section-title{
    font-size: 48px;
  }
}
.category.archive .section-title {
  display: inline-block;
  text-align: center;
  margin: 0 0 calc( 20px*2 );
  color: #206494;
  font-size: calc(48px + 16 * ((100vw - 420px) / 860));
  font-weight: 300;
  line-height: 1;
  width: 100%;
  font-size     : 54px !important;
  margin-bottom : 30px !important;
}
@media screen and (min-width: 1280px){

  .category.archive .section-title{
    font-size: 64px;
  }
}
@media screen and (max-width: 420px){

  .category.archive .section-title{
    font-size: 48px;
  }
}
.category.archive .section-title .subtitle {
  display        : block;
  font-size      : 20px;
  margin-bottom  : 9px;
  text-transform : uppercase;
  color          : #206494;
}
@media      ( max-width: 768px ) {

  .category.archive .section-title {
    font-size : 40px !important;
    margin    : 0 0 20px !important;
  }

  .category.archive .section-title .subtitle {
    margin-bottom: 0;
  }
}
.home {
}
.page .main-content {
  padding: calc( 20px*2 ) 0 calc( 20px*1.5 );
}
.page .main-content > * {
  margin-bottom: calc( 20px*2.5);
}
.page .main-content > *:last-child {
  margin-bottom: 0;
}
.page-portal.page .app-content {
  padding: 0;
}
.page-portal .hero-unit {
  background-image: url( '../images/hero-portal.png' );
}
.page-portal .hero-unit .title {
  margin-top: calc( 20px*1.5 );
  font-size: 3.75rem;
}
.page-portal .hero-unit .content {
  font-size: 1.25rem;
  line-height: 1.5;
}
.page-portal .hero-unit .content a {
  border-bottom  : 1px solid #c03d0c;
  color          : #c03d0c;
  text-decoration: none;
  transition     : all 0.1s ease-in-out;
}
.page-portal .hero-unit .content a:hover, .page-portal .hero-unit .content a:focus {
  color       : rgb(140, 47, 13);
  border-color: rgb(140, 47, 13);
}
.page-portal .hero-unit .button {
  float: left;
}
.page-portal .hero-unit .display {
  background: url( '../images/image-portal.png' ) center center no-repeat;
  height    : 293px;
}
@media      ( max-width: 768px ) {

  .page-portal .hero-unit .title {
    margin-top: 0;
  }
}
.single .app-content {
  padding: 60px 0 calc( 20px*1.5 );
}
.single .main-content {
  width: calc(99.99% * 8/12 - (30px - 30px * 8/12));
}
.single .main-content:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.single .main-content:last-child{
  margin-right: 0;
}
.single .main-content:nth-child(12n){
  margin-right: 0;
  float: right;
}
.single .main-content:nth-child(12n + 1){
  clear: left;
}
.single .main-content > * {
  margin-bottom: calc( 20px*2.5);
}
.single .main-content > *:last-child {
  margin-bottom: 0;
}
.single .main-content .single-article .powerpress_player {
  display: block;
  margin-bottom: 20px;
}
.single .widget-area {
  margin: 0;
}
.single .widget-area > * {
  margin-bottom: calc( 20px*2.5);
}
.single .app-sidebar {
  width: calc(99.99% * 4/12 - (30px - 30px * 4/12));
  margin-right: 0 !important;
}
.single .app-sidebar:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}
.single .app-sidebar:last-child{
  margin-right: 0;
}
.single .app-sidebar:nth-child(12n){
  margin-right: 0;
  float: right;
}
.single .app-sidebar:nth-child(12n + 1){
  clear: left;
}
@media      ( max-width: 768px ) {

  .single .main-content,
    .single .app-sidebar {
    width: calc(99.99% * 1/1 - (30px - 30px * 1/1));
  }

  .single .main-content:nth-child(1n),
    .single .app-sidebar:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .single .main-content:last-child,
    .single .app-sidebar:last-child{
    margin-right: 0;
  }

  .single .main-content:nth-child(1n),
    .single .app-sidebar:nth-child(1n){
    margin-right: 0;
    float: right;
  }

  .single .main-content:nth-child(1n + 1),
    .single .app-sidebar:nth-child(1n + 1){
    clear: left;
  }

  .single .app-sidebar {
    margin-top: calc( 20px * 1.5 );
  }
}

.sumome-share-client-wrapper.sumome-share-client-wrapper-left.sumome-share-client-counts.sumome-share-client-light.sumome-share-client-medium > div > div {
  display: none !important;
}
.special-portal .post-content {
  //background : #EBF4FE;
  padding    : calc(20px * 3) calc(20px * 6);
}
.special-portal .post-content .title {
  font-size     : 1.75rem;
  color         : #00365F;
  margin-bottom : calc(20px / 2);
}
.special-portal .post-content .text {
  font-size : 1rem;
}
.special-portal .hero-categories {
  background : white;
}
@media      ( max-width: 768px ) {

  .special-portal .post-content {
    padding : calc(20px * 3) 0;
  }
}
.page-login.page .main-content {
  height: 100%;
  text-align: center;
}
.page-login.page .main-content .tml-login {
  margin: 0 auto;
}
.page-login.page .main-content .tml-login .button {
  width: 90px;
}
.page-login.page .main-content .tml-login a {
  color      : #c03d0c;
  transition : color 0.1s ease-in-out;
  font-weight: 600;
}
.page-login.page .main-content .tml-login a:active,
          .page-login.page .main-content .tml-login a:focus,
          .page-login.page .main-content .tml-login a:hover,
          .page-login.page .main-content .tml-login a:focus {
  color: rgb(153, 50, 13);
}

/*# sourceMappingURL=application.css.map */