/* LOGOs */

/* Hero logo */
.text-inner {
  background: url(../img/logo.svg) no-repeat;
  background-position-y: 20%;
  background-size: 80% 25%;
}

/* main site navbar */
#fh5co-header .navbar-header {
  display: none;
}

#fh5co-header.navbar-fixed-top .navbar-header {
  display: block;
}

/* blog navbar (normal state) */
#blog-header .navbar-brand {
  padding: 5px;
}

#blog-header h1 {
  background: url(../img/logo.svg) no-repeat;
  background-size: 180px;
  background-position-y: 6px;
  padding-left: 200px;
  display: inline-block;
  height: 100px;
  font-size: 56px;
  font-weight: 300;
  color: white;
  padding-top: 6px;
}

#blog-header #navbar li a, #blog-header i {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}

#blog-header #navbar li a:hover, #blog-header i:hover {
  color: #fff;
}

#blog-header #icon-block {
  display: none;
  margin-top: 8px;
}

#blog-header #icon-block a {
  display: inline;
  padding: 10px 10px;
}

#blog-header i {
  font-size: 32px;
}

@media screen and (max-width: 992px) {
  #blog-header .nav {
    float: left !important;
    padding-left: 180px;
  }

  #blog-header h1 {
    font-size: 50px;
  }
}

@media screen and (max-width: 768px) {
  #blog-header .nav {
    float: left !important;
    padding-left: 130px;
    margin: 0;
  }

  #blog-header h1 {
    background-position-y: 12px;
    background-size: 120px;
    padding-left: 140px;
    font-size: 38px;
  }

  #blog-header i {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {
  #blog-header .nav {
    padding-left: 62px;
    margin-top: -8px;
  }

  #blog-header h1 {
    font-size: 30px;
    background: url(../img/logo_short.svg) no-repeat;
    background-size: 50px;
    background-position: 0px 14px;
    padding-left: 66px;
  }

  #blog-header a {
    padding: 0 10px;
  }
}

/* blog navbar (fixed state) */
#blog-header.navbar-fixed-top .container {
  width: 100%;
}

#blog-header.navbar-fixed-top {
  background-color: #52d3aa !important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
  background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
}

#blog-header.navbar-fixed-top h1 {
  height: 40px;
  margin: 0;
  font-size: 40px;
  background: url(../img/logo_short.svg) no-repeat;
  background-size: 48px;
  background-position-y: 5px;
  padding-left: 70px;
  padding-top: 0;
}

#blog-header.navbar-fixed-top #icon-block {
  display: block;
}

@media screen and (max-width: 992px) {
  #blog-header.navbar-fixed-top .nav {
    float: right !important;
    padding: 0;
  }

  #blog-header.navbar-fixed-top h1 {
    font-size: 36px;
  }
}

@media screen and (max-width: 768px) {
  /* Prevent navbar option collapse */
  #blog-header .navbar-collapse {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Prevent navbar option collapse */
  #blog-header .navbar-collapse.collapse {
    display: block !important;
  }

  /* Prevent navbar option collapse */
  #blog-header .navbar-nav>li, #blog-header .navbar-nav {
    padding-top: 6px;
    float: left !important;
  }

  /* Prevent navbar option collapse */
  #blog-header .navbar-nav.navbar-right:last-child {
    margin-right: -15px !important;
  }

  #blog-header.navbar-fixed-top .navbar-header:after {
    display: inline;
  }

  #blog-header.navbar-fixed-top .navbar-header h1 .text {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  #blog-header.navbar-fixed-top .nav {
    margin-top: 0px;
    background-size: 46px;
  }

  #blog-header.navbar-fixed-top li a {
    padding: 10px 6px;
  }

  #blog-header.navbar-fixed-top #icon-block a {
    padding: 0 8px;
  }
}

/* BLOG PAGES */
.blog {
  min-height: 100vh;
}

.blog .fh5co-overlay {
  z-index: -1;
}

.blog:before, .blog-list:after, #disqus {
  background-color: #52d3aa !important;
  /* IE9, iOS 3.2+ */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
  /* Android 2.3 */
  background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  /* IE10+ */
  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  margin-left: -1em;
  width: 110% !important;
}

.blog:before {
  top: 0;
  margin-top: -50px !important;
  height: 160px;
}

@media screen and (max-width: 480px) {
  .blog:before {
    margin-top: -70px !important;
  }
}

.blog-list:after {
  bottom: 0;
  margin-bottom: -35px;
  height: 160px;
}

/* Blog - header */
.blog-list .section-heading h2 {
  text-transform: none;
}

.blog-page .section-heading h2 {
  text-transform: lowercase;
}

.blog .section-heading h2 {
  font-size: 40px;
}

/* Blog - content */
.blog-page {
  padding-bottom: 0;
  display: table;
  height: 100%;
}

.blog-page #post {
  display: table-row;
}

.blog-page .section-heading {
  display: table-cell;
}

.blog-page .content {
  -ms-word-break: break-all;
  word-break: break-all;

  /* Non standard for WebKit */
  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  margin-bottom: 4em;
}

.blog-page #disqus {
  display: table-cell;
  height: 100%;
  position: relative;
  overflow: visible;
}

.blog-page #disqus:before {
  height: 100px;
  margin-top: -50px;
}

.blog-page #disqus .container {
  padding-top: 6em;
}

.blog-page #tags a {
  padding: 5px 12px;
  margin: 5px 3px;
}

/* Blog - table */
.blog #table-wrapper {
  padding: 1em;
}

.blog.terms #table-wrapper {
  padding: 1em 25%;
}

@media screen and (max-width: 480px) {
  .blog.terms #table-wrapper {
    padding: 1em 2em;
  }
}

.blog table {
  border: 1px solid white;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  -webkit-box-shadow: 7px 7px 7px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 7px 7px 7px 1px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 7px 7px 7px 1px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 7px 7px 7px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 7px 7px 7px 1px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.5);
}

.blog table>tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.blog table th {
  color: #fff;
  font-weight: lighter;
}

.blog table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: lighter;
}

.blog table td.date, .blog table td.time, .blog table td.author {
  min-width: 5vw;
  color: #ff9900;
}

.blog table td.title {
  max-width: 65vw;
}

.blog table td.title a {
  color: #ffee33;
  border-bottom: 1px dashed rgba(0,0,0,0);
}

.blog table td.title a:hover {
  text-decoration: none;
  border-bottom: 1px dashed #ffee33;
}

.blog table td.time {
  color: #33cc00;
}

.blog table td.time.long {
  color: #ff0000;
}

@media screen and (max-width: 768px) {
  /* Blog - trivial elements. Things to hide when screen changes */
  .blog .trivial {
    display: none;
  }
}

/* Blog - Messages (for updates & affiliate links) */
.blog-page #messages {
  margin-bottom: 2em;
  padding: 5px 10px;
  border: 1px dashed #52d3aa;
  display: inline-block;
  width: 100%;
  font-size: 16px;
}

.blog-page #messages .spacer {
  height: 1em;
}

/* Blog - Date footer */
.blog-page #blog-date {
  font-size: 16px;
  margin: 5px 3px;
}