/* ==========================================================================
   Table of Contents
   ========================================================================== */

/*
    0.  Reset (from Compass)
    1.  Fonts
    2.  Icons
    3.  General
    4.  Utilities
    5.  General
    6.  Single Post
    7.  Tag Archive
    8.  Read Next
    9.  Error Page
    10. Third Party Elements
    11. Pagination
    12. Footer
    13. Media Queries (Mobile)
    14. Animations
*/

 /* ==========================================================================
   0. Reset (from Compass)
   ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
html { line-height: 1; }
/* ol, ul { list-style: none; } */
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
q, blockquote { quotes: none; }
q:before, q:after,
blockquote:before,
blockquote:after { content: ""; content: none; }
a img { border: none; }
article, aside, details,
figcaption, figure,
footer, header, hgroup,
menu, nav, section, summary { display: block; }

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mobile-only {
	display: none;
}

/* ==========================================================================
   1. Fonts
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    font-weight: 200;
    src: url('../fonts/montserrat-hairline-webfont.eot?v=1');
    src: url('../fonts/montserrat-hairline-webfont.eot?v=1#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-hairline-webfont.woff?v=1') format('woff'),
         url('../fonts/montserrat-hairline-webfont.ttf?v=1') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 300;
    src: url('../fonts/montserrat-ultralight-webfont.eot?v=1');
    src: url('../fonts/montserrat-ultralight-webfont.eot?v=1#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-ultralight-webfont.woff?v=1') format('woff'),
         url('../fonts/montserrat-ultralight-webfont.ttf?v=1') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 400;
    src: url('../fonts/montserrat-light-webfont.eot?v=1');
    src: url('../fonts/montserrat-light-webfont.eot?v=1#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-light-webfont.woff?v=1') format('woff'),
         url('../fonts/montserrat-light-webfont.ttf?v=1') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 500;
    src: url('../fonts/montserrat-regular-webfont.eot?v=1');
    src: url('../fonts/montserrat-regular-webfont.eot?v=1#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-regular-webfont.woff?v=1') format('woff'),
         url('../fonts/montserrat-regular-webfont.ttf?v=1') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 600;
    src: url('../fonts/montserrat-semibold-webfont.eot?v=1');
    src: url('../fonts/montserrat-semibold-webfont.eot?v=1#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-semibold-webfont.woff?v=1') format('woff'),
         url('../fonts/montserrat-semibold-webfont.ttf?v=1') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 700;
    src: url('../fonts/montserrat-bold-webfont.eot?v=1');
    src: url('../fonts/montserrat-bold-webfont.eot?v=1#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-bold-webfont.woff?v=1') format('woff'),
         url('../fonts/montserrat-bold-webfont.ttf?v=1') format('truetype');
    font-style: normal;
}

/* ==========================================================================
   2. Icons - Sets up the icon font and respective classes
   ========================================================================== */

@font-face {
    font-family: 'opti-icons';
    src: url('../fonts/opti-icon.eot?d71f2');
    src: url('../fonts/opti-icon.eot?d71f2#iefix') format('embedded-opentype'),
      url('../fonts/opti-icon.ttf?d71f2') format('truetype'),
      url('../fonts/opti-icon.woff?d71f2') format('woff'),
      url('../fonts/opti-icon.svg?d71f2#opti-icons') format('svg');
    font-weight: normal;
    font-style: normal;
  }

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'opti-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-logo-title:before {
    content: '\e901';
  }
  .icon-x-logo:before {
    content: '\e913';
  }
  .icon-checkmark2:before {
    content: '\2714';
  }
  .icon-linkedin:before {
    content: '\e911';
  }
  .icon-gplay:before {
    content: '\e910';
  }
  .icon-gplay-solid:before {
    content: '\e90c';
  }
  .icon-ann-signature:before {
    content: '\1f469';
  }
  .icon-exclamation:before {
    content: '\26a0';
  }
  .icon-instagram:before {
    content: '\e90f';
  }
  .icon-down-arrow:before {
    content: '\e90e';
  }
  .icon-close:before {
    content: '\274c';
  }
  .icon-search:before {
    content: '\e908';
  }
  .icon-right_arrow:before {
    content: '\e909';
  }
  .icon-warning:before {
    content: '\e90a';
  }
  .icon-checkmark:before {
    content: '\e90b';
  }
  .icon-svd:before {
    content: '\e900';
  }
  .icon-sr:before {
    content: '\e905';
  }
  .icon-di:before {
    content: '\e906';
  }
  .icon-breakit:before {
    content: '\e907';
  }
  .icon-android:before {
    content: '\e903';
  }
  .icon-appstore-solid:before {
    content: '\e904';
  }
  .icon-appstore:before {
    content: '\e90d';
  }
  .icon-check:before {
    content: '\e607';
  }
  .icon-twitter:before {
    content: '\e603';
  }
  .icon-fb:before {
    content: '\e604';
  }
  .icon-aeroplane:before {
    content: '\e602';
  }
  .icon-arrow:before {
    content: '\e601';
  }

/* Fix to a bug where the iconfont would be clipped and rendered twice in
   Chrome. http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
*/
.icon-hack {
	-webkit-transform: translate3d(0,0,0);
}


/* ==========================================================================
   3. General - Setting up some base styles
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #2f3333;
  font-family: Montserrat, Helvetica Neue, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, li {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Montserrat, Helvetica Neue, Helvetica, sans-serif;
    font-weight: bold;
}

h1, h2, h3,
h4, h5, h6 {
    line-height: 1.15em;
}

a {
    text-decoration: none;
    color: #2f3333;
}

p, ul, ol, dl {
    -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    margin: 0 0 1.5em 0;
    text-rendering: geometricPrecision;
}

ol, ul {
    padding-left: 3rem;
}

ol ol, ul ul,
ul ol, ol ul {
    margin: 0 0 0.4em 0;
    padding-left: 2em;
}

dl dt {
    float: left;
    width: 180px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    margin-bottom: 1em;
}

dl dd {
    margin-left: 200px;
    margin-bottom: 1em
}

li {
    margin: 0.6em 0;
}

li li {
    margin: 0.5em 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ebebeb;
    margin: 2em 0;
    padding: 0;
}

blockquote {
    margin: 1.75em 0 1.75em -2.2em;
    padding: 0 0 0 1.75em;
    border-left: #4A4A4A 0.4em solid;
}

blockquote p {
    margin: 0.8em 0;
    font-style: italic;
}

blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    font-size: 0.9em;
    color: #CCC;
}

blockquote small:before { content: "\2014 \00A0"; }

blockquote cite {
    font-weight: 700;
}

blockquote cite a { font-weight: normal; }

b, strong { font-weight: 700; }
i, em, dfn { font-style: italic; }

mark {
    background-color: #fdffb6;
}

code, tt {
    padding: 1px 3px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.85em;
    white-space: pre-wrap;
    border: #E3EDF3 1px solid;
    background: #F7FAFB;
    border-radius: 2px;
}

pre {
    margin: 0 0 1.75em 0;
    border: #E3EDF3 1px solid;
    width: 100%;
    padding: 10px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.9em;
    white-space: pre;
    overflow: auto;
    background: #F7FAFB;
    border-radius: 3px;
}

pre code, pre tt {
    font-size: inherit;
    white-space: pre-wrap;
    background: transparent;
    border: none;
    padding: 0;
}

kbd {
    display: inline-block;
    margin-bottom: 0.4em;
    padding: 1px 8px;
    border: #CCC 1px solid;
    color: #666;
    text-shadow: #FFF 0 1px 0;
    font-size: 0.9em;
    font-weight: 700;
    background: #F4F4F4;
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 0 #fff inset;
}

.table-wrapper {
    display: block;
    overflow-x: auto;
}

table {
    display: block;
    overflow-x: auto;
    margin: 1.75em 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
}

table th,
table td {
    padding: 8px;
    line-height: 20px;
    font-size: 14px;
    text-align: left;
    vertical-align: top;
    border-top: #EFEFEF 1px solid;
}

table th {
    color: #000;
    font-weight: 500;
}

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
    border-top: 0;
}

table tbody + tbody { border-top: #EFEFEF 2px solid; }

table table table { background-color: #FFF; }

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: #F6F6F6;
}

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
   background: transparent;
}

iframe, .fluid-width-video-wrapper {
    display: block;
    margin: 1.75em 0;
}

/* When a video is inside the fitvids wrapper, drop the
margin on the iframe, cause it breaks stuff. */
.fluid-width-video-wrapper iframe {
    margin: 0;
}

/* Ghost 2.0 Image & Gallery Styles */
.kg-width-wide .kg-image {
    max-width: 1040px;
}

.kg-width-full .kg-image {
    max-width: 100vw;
}

.kg-width-full {}

.kg-image-card,
.kg-gallery-card {
    margin: 0 0 1.5em;
}

.kg-image-card figcaption,
.kg-gallery-card figcaption {
    margin: -1.0em 0 1.5em;
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    margin: 1.5em auto;
    max-width: 1040px;
    width: 100vw;
}
.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}
.kg-gallery-row:not(:first-of-type) {
    margin: 0.75em 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.75em;
}


/* ==========================================================================
   4. Utilities - These things get used a lot
   ========================================================================== */

/* Clears shit */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Hides shit */
.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

/* Creates a responsive wrapper that makes our content scale nicely */
.inner {
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
}

/* Wraps the main content & footer */
.site-wrapper {
    position: relative;
    z-index: 10;
    min-height: 100%;
    background: #fff;
    -webkit-transition: -webkit-transform 0.5s ease;
            transition: transform 0.5s ease;
}


/* ==========================================================================
   5. General - The main styles for the the theme
   ========================================================================== */

/* Navigation */

.main-nav {
    position: relative;
    padding: 35px 40px;
    margin: 0 0 30px 0;
}

.main-nav a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: white;
}

.header {

    background-color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid #e6e6e6;

    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 0 2em;
    color: white;
    top: 0;
    pointer-events: none;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    -o-transition: background-color 0.25s;
    transition: background-color 0.25s; }

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .header {
        padding: 0 1em; } }

.header .logo-styled {
    display: inline-block;
    width: 160px;
    height: 76px;
    padding-top: 16px!important;
}

.header a {
    color: #2B2F38 !important;
    
    pointer-events: auto;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
.header a:before {
    background-color: #2B2F38 !important;}
.header a:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
.header h1 {
    float: left;
    font-size: 3.3em; }
.header h1 span {
    display: none; }
.header h1 a {
    padding: 0.42em 0 0;
    display: block; }
.header nav {
    display: flex;
    align-items: center;
    float: right;
    text-align: center; 
    margin-top: 24px;
    margin-bottom: 24px;}
    .header nav .nav-item {
      position: relative;
      margin-left: 24px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.04em;
      display: inline-block; }

      .header nav .nav-item:first-child {
        margin-left: 0px;
      }

      @media only screen and (min-width: 1025px) {
        .header nav .nav-item:hover {
          filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
          opacity: 1; }
          .header nav .nav-item:hover:before {
            width: 100%;
            left: 0;
            bottom: -5px;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
            opacity: 0.3; }
        .header nav .nav-item:before {
          content: "";
          position: absolute;
          bottom: -10px;
          height: 2px;
          width: 100%;
          left: 0;
          background-color: #2B2F38;
          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
          opacity: 0;
          -moz-transition: all 0.3s;
          -o-transition: all 0.3s;
          -webkit-transition: all 0.3s;
          transition: all 0.3s; } }

@media only screen and (max-width:1024px) {
    .header nav .faq {    
        display: none;
    }
}

@media only screen and (max-width:900px) {
    .header nav .about {    
        display: none;
    }
}

.header nav .app-btn {
    height: 40px;
    line-height: 40px;
    padding: 0px 24px;
    font-weight: 500;
    border-radius: 100px;
    font-size: 14px;
    box-shadow: none;
    cursor: pointer;
}

.header nav .app-btn.login {
    color: #55af9a !important;
    background-color: rgba(91, 197, 176, 0.15);
    margin-left: 8px; 
}

.header nav .app-btn.sign-up {
    color: white !important;
    background-color: #5bc5b0;
    margin-left: 16px;
}

@media screen and (max-width: 850px) {
    .header nav .app-btn .login {
        margin-left: 0px;
    }
    
    .header nav .app-btn .sign-up {
        margin-left: 8px;
    }
}

.header nav .app-btn:hover {
    -moz-box-shadow: 0px 10px 25px 5px rgba(66, 158, 140, 0.24) !important;
    -webkit-box-shadow: 0px 10px 25px 5px rgba(66, 158, 140, 0.24) !important;
    box-shadow: 0px 10px 25px 5px rgba(66, 158, 140, 0.24) !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1 !important;
}

/* Desktop menu */
#desktop-menu-overlay {
    display: none;
}
.desktop-menu-container {
    z-index: 1000;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.98);
    overflow: hidden;
    padding: 6em 10em 6em 4em;
}

.menu__nav {
  display: flex;
}
.menu__nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.menu__nav li {
    margin: 0;
}
.menu__nav .menu__nav__block {
    padding-left: 80px;
}
.menu__nav .menu__nav__block:first-child {
    padding-left: 0;
}
.menu__nav .social {
    max-width: 190px;
}
.menu__nav .social ul {
    padding-top: 5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.menu__nav .social li {
    flex: 50%;
    aspect-ratio: 1 / 1;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .menu__nav .social li {
        flex: unset;
        aspect-ratio: unset;
        margin-right: 24px;
    }
}
.menu__nav .social a {
    font-size: 1.4em;
    line-height: 1em;
}
.menu__nav .menu__nav__header {
    font-weight: 500;
    color: #CFCFCF;
    font-size: 32px;
    line-height: 2em;
    margin: 0;
}
.menu__nav a {
    color: black;
    font-size: 20px;
    font-weight: 500;
    line-height: 2.5em;
}
.menu__nav a:hover {
    color: #41AA95;
}
.download-buttons {
    display: flex;
    margin-top: 3em;
}
.download-buttons a {
    display: block;
}
.download-buttons a:first-child {
    margin-right: 8px;
}
.download-buttons a:hover {
    opacity: 0.8;
}
.download-buttons img {
    height: 40px;
}
.menuActive {
    border: none !important;
}
.menuActive a {
    opacity: 0.03 !important;
    pointer-events: none !important;
}
.navActive {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}


@media only screen and (min-width:768px) and (max-width:1023px){ /* iPad Portrait */
    .desktop-menu-container {
        padding: 6em 8em 6em 2em;
    }
}
@media only screen and (min-width:768px) and (max-width:1024px){ /* Tablet */
    .menu__nav {
        flex-wrap: wrap;
    }
    .menu__nav .menu__nav__block {
        padding-left: 0px;
        margin-right: -100px;
        flex: 33%;
    }
    .menu__nav .menu__nav__block:first-child {
        margin-right: 0;
    }
    .menu__nav .social {
        max-width: 400px;
        padding-left: 0;
        flex-basis: 100%;
    }
    .menu__nav .social ul {
        padding-top: 3em;
    }
}
@media only screen and (min-width: 1025px){ /* Big */
    .desktop-menu-container {
        padding: 6em 6em;
    }
    .menu__nav .menu__nav__block {
        padding-left: 80px;
    }
    .menu__nav .social li:nth-child(even) {
        margin-right: 0;
    }
}
@media only screen and (min-width: 1261px){ /* Huge */
    .desktop-menu-container {
        padding: 6em 10em;
    }
    .menu__nav .menu__nav__block {
        padding-left: 100px;
    }
}
.menu-button-mobile {
    display: inline-block;
    margin: 0 1em;
    padding: 0.95rem 0.475rem;
    position: absolute;
    right: 0;
    border-radius: 0.27143rem;
    z-index: 1;
}
.menu-button-desktop {
    vertical-align: middle;
    margin: -4px 0 0 8px;
    padding: 16px 16px;
}
.menu-button {
    pointer-events: auto;
    border: none;
    background: none;
    transition: .3s;
    cursor: pointer;
    user-select: none;  }
.menu-button:hover {
    opacity: 1; }
.menu-button:active {
    transition: 0; }
.menu-button:focus {
    outline: none; }

.lines {
    display: inline-block;
    width: 1.4rem;
    height: 0.14rem;
    background: black;
    border-radius: 0.13571rem;
    transition: 0.3s;
    position: relative; }
.lines:before, .lines:after {
    display: inline-block;
    width: 1.4rem;
    height: 0.14rem;
    background: black;
    border-radius: 0.13571rem;
    transition: 0.3s;
    position: absolute;
    left: 0;
    content: '';
    -webkit-transform-origin: 0.13571rem center;
    transform-origin: 0.13571rem center; }
.lines:before {
    top: 0.3783783784rem; }
.lines:after {
    top: -0.3783783784rem; }
.lines.active {
    background-color: black; }
.lines.active:before {
    background-color: black !important; }
.lines.active:after {
    background-color: black !important; }

.menu-button.close {
        -webkit-transform: scale3d(0.8, 0.8, 0.8);
        transform: scale3d(0.8, 0.8, 0.8); }
    .menu-button.close .lines {
        background: transparent; }
    .menu-button.close .lines:before, .menu-button.close .lines:after {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        top: 0;
        width: 1.4rem; }
    .menu-button.close .lines:before {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg); }
    .menu-button.close .lines:after {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg); }

/* Use white header on pages with hero */
.home-template .header a,
.paged .header a {
    color: white;
}
.home-template .header nav .nav-item:before,
.paged .header nav .nav-item:before {
    background-color: white;
}

.home-template .header nav .download-btn,
.paged .header nav .download-btn {
    background-color: transparent;
    color: white !important;
    -moz-box-shadow: inset 0px 0px 0px 2px white;
    -webkit-box-shadow: inset 0px 0px 0px 2px white;
    box-shadow: inset 0px 0px 0px 2px white;
}

.home-template .header nav .download-btn:hover,
.paged .header nav .download-btn:hover {
    opacity: 0.7;
}

/* Big cover image on the home page */
.main-header {
	z-index: 100;
	position: relative;
    width: 100%;
    height: 518px;
    background-color: #eef8f6;
	color: white;
	padding-left: 0 5em;
	overflow: hidden;
    text-align: center;
    background-image: url('../images/bg-blog.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.main-header .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-top: 3em;
}

.main-header .inner h1 {
    font-size: 4em;
    font-weight: 500;
}

@media only screen and (max-width:767px) {
    .main-header .inner h1 {
        font-size: 3em;
    }
}

.main-header .mobile-logo {
	display: none;
	font-size: 8em;
	text-align: center;
	margin: auto 0;
	width: 100%;
}

.subscribe-button {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    height: 38px;
    padding: 0 20px;
    color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
    text-align: center;
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 35px;
    border-radius: 3px;
    background: #fff;
    transition: all ease 0.3s;
}
.subscribe-button:before {
    font-size: 9px;
    margin-right: 6px;
}

/* Hide when there's no cover image or on page2+ */
.no-cover .scroll-down,
.no-cover.main-header:after,
.paged .scroll-down,
.paged .main-header:after {
    display: none
}

/* Appears in the top left corner of your home page */
.blog-logo {
    display: block;
    float: left;
    background: none !important; /* Makes sure there is never a background */
    border: none !important; /* Makes sure there is never a border */
}

.blog-logo img {
    display: block;
    height: 38px;
    padding: 1px 0 5px 0;
    width: auto;
}

/* Special styles when overlaid on an image*/
.main-nav.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    border: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
}
.no-cover .main-nav.overlay {
    background: none;
}

/* The details of your blog. Defined in ghost/settings/ */
.page-title {
    position:relative;
    font-size: 2.4em;
    font-weight: 400;
    letter-spacing: 10px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    padding-bottom:0.2em;
}

.page-title:after {
    content: "";
    position: absolute;
    height: 2px;
    left: 20%;
    width: 58%;
    bottom:0;
    background-color: rgba(255,255,255,0.15);
}

.page-description {
    margin: 0;
    font-size: 5.5em;
    font-weight: 500;
    letter-spacing: 12px;
    line-height: 1.2em;
    color: #fff;
    text-transform: uppercase;
}

.no-cover.main-header {
    min-height: 160px;
    max-height: 40vh;
    background: #f5f8fa;
}

.no-cover .page-title {
    color: rgba(0,0,0,0.8);
}

.no-cover .page-description {
    color: rgba(0,0,0,0.5);
}

/* Every post, on every page, gets this style on its <article> tag */
.post {
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: 2.8em auto;
    padding-bottom: 1.4em;
    border-bottom: 1px solid #e0e0e0;
    word-wrap: break-word;
}

.post-header {
    margin-bottom: 1.2em;
}

.post-title a {
    text-decoration: none;
    line-height: 1.15em;
}

.post-header h1 {
    font-weight: 500;
    font-size: 2.4em;
    line-height: 1.4em;
}

.post-header h2 {
    font-weight: 500;
    font-size: 1.75em;
}

.post-header img {
    width: 100%;
}

.post-image {
    position: relative;
    width: 100%;
    height: 340px;
    margin-bottom: 1.2em;
}

.post-image .img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

.post-excerpt p {
    margin: 0;
    font-size: 1.4em;
    line-height: 1.4em;
    font-family: "adobe-garamond-pro", Garamond, Georgia, Basekerville, serif;
}

.read-more {
    text-decoration: none;
}

.post-meta {
    margin: 1.75rem 0 0 0;
    line-height: 1.8em;
    font-size: 0.95em;
    font-weight: 500;
}

.post-meta .one-line {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 80%;
    text-overflow: ellipsis;
}

.post-meta .tags,
.post-meta a {
    color: #5ac2ad;
}

.post-meta a {
    border-right: 1px solid #e0e0e0;
    margin-right: .6em;
    padding-right: .8em;
    text-transform: capitalize;
    white-space: nowrap;
}

.post-meta a:last-child {
    border: none;
    margin: 0;
}

.post-meta a:hover {
    text-decoration: underline;
}

.post-meta .read-more {
    float: right;
    border: none;
    text-transform: uppercase;
    position: absolute;
    right: 0;
    font-size:0.9em;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.author-thumb {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 9px;
    border-radius: 100%;
}

.post-date {
    display: inline-block;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: .8em;
    color: #999;
}

.publish-meta {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4.3rem 0 4rem 0;
    text-align: right;
}

.publish-heading {
    display: block;
    font-weight: 700;
}

.publish-date {
    display: block;
    font-size: 1.4rem;
    line-height: 1.5em;
}


/* ==========================================================================
   6. Single Post - When you click on an individual post
   ========================================================================== */

.post-template .post-header {
    margin-top: 8em;
    margin-bottom: 2em;
}

.post-template .post-title {
    text-align: center;
    margin-top: 1em;
}

.post-template .post-title:after {
    content: " ";
    display: block;
    width: 3em;
    border-top: 1px solid #ebebeb;
    margin: 1em auto;
}

.post-template .post-footer .post-meta {
    margin: 0;
}

.post-template .post-meta a:last-child {
    border: none;
    padding: 0;
}

.post-template .post-date {
    padding: 0;
    margin: 0;
    border: none;
}

/* Stop elements, such as img wider than the post content, from
   creating horizontal scroll - slight hack due to imperfections
   with browser width % calculations and rounding */
.post-template .content {
    overflow: hidden;
}

/* Tweak the .post wrapper style */
.post-template .post {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
    max-width: 700px;
}

.post-template .post-meta {
    font-size:1.1em;
}

.post-content h1 {
    font-size: 1.6em;
    font-weight: 500;
    margin-bottom: .7em;
    padding-top:1em;
}

.post-content h2 {
    font-size: 1.6em;
    font-weight: 500;
    margin-bottom: .4em;
    margin-top: 2.4em;
}

.post-content h3 {
    font-size: 1.2em;
    margin-bottom: .2em;
    font-weight: 500;
    line-height: 1.3em;
}

.post-content p,
.post-content li {
    font-size: 1.5rem;
    font-family: "adobe-garamond-pro", Garamond, Georgia, Basekerville, serif;
    line-height: 1.4em;
}

.post-content p {
    line-height: 1.4em;
}

.post-content a {
    text-decoration: underline;
    color: #0E8E74;
}

.post-content sub,
.post-content sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}
.post-content sup { top: -0.5em; }
.post-content sub { bottom: -0.25em; }

/* Keep images centered, and allow images wider than the main
   text column to break out. */
.post-content img {
    display: block;
    /*max-width: 126%; Don't allow this anymore. */
    max-width: 100%;
    height: auto;
    padding: 0.6em 0;
    /* Centers an image by (1) pushing its left edge to the
       center of its container and (2) shifting the entire image
       in the opposite direction by half its own width.
       Works for images that are larger than their containers. */
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%); /* for Safari and iOS */
    -ms-transform: translateX(-50%); /* for IE9 */
    transform: translateX(-50%);
}

.post-content .download-buttons {
    margin: 100px 0;
}

.post-content .appstore-button {
    position: relative;
}

.post-content .appstore-button img {
    display: inline;
    margin-right: 20px;
    max-width: 100%;
    width: 30%;
    padding-bottom: 0;
    left: 0;
    -webkit-transform: translateX(0); /* for Safari and iOS */
    -ms-transform: translateX(0); /* for IE9 */
    transform: translateX(0);
}

@media only screen and (max-width:767px) {
    .post-content .download-buttons {
        margin: 20px 0;
    }
}

.footnotes ol {
    padding-left: 2em;
}

.footnotes {
    font-size: .9em;
    line-height: 1.6em;
}

.footnotes li {
    margin: 1em 0;
}

.footnotes p {
    margin: 0;
}

.footnotes p a:last-child {
    text-decoration: none;
}


/* The author credit area after the post */
.post-footer {
    position: relative;
    margin: 3em 0 0 0;
    padding: 3em 0 0 0;
    border-top: 1px solid #e0e0e0;
}

.post-footer h4 {
    font-size: 1.4em;
    font-weight: 400;
    padding: .5em 0 0 0;
}

.post-footer p {
    margin: 1rem 0;
    font-size: 1.4rem;
    line-height: 1.75em;
}

/* list of author links - location / url */
.author-meta {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 1.4rem;
    line-height: 1;
    font-style: italic;
    color: #9EABB3;
}

.author-meta a {
    color: #9EABB3;
}
.author-meta a:hover {
    color: #111;
}

.post-footer h4 a {
    color: #2e2e2e;
    text-decoration: none;
}

.post-footer h4 a:hover {
    text-decoration: underline;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
    position: absolute;
    top: 6rem;
    right: 0;
    width: 140px;
}

.post-footer .share a {
    font-size: 1.8rem;
    display: inline-block;
    margin: 1rem 1.6rem 1.6rem 0;
    color: #BBC7CC;
    text-decoration: none;
}

.post-footer .share .icon-twitter:hover {
    color: #55acee;
}
.post-footer .share .icon-facebook:hover {
    color: #3b5998;
}
.post-footer .share .icon-google-plus:hover {
    color: #dd4b39;
}


/* ==========================================================================
   7. Author profile
   ========================================================================== */

.post-head.main-header {
    height: 65vh;
    min-height: 180px;
}

.no-cover.post-head.main-header {
    height: 85px;
    min-height: 0;
    margin-bottom: 0;
    background: transparent;
}

.tag-head.main-header {
    height: 40vh;
    min-height: 180px;
}

.author-head.main-header {
    height: 40vh;
    min-height: 180px;
}

.no-cover.author-head.main-header {
    height: 10vh;
    min-height: 100px;
    background: transparent;
}

.author-profile {
    padding: 8em 15px 3.5rem 15px;
    border-bottom: #EBF2F6 1px solid;
    text-align: center;
    margin-bottom: 60px;
}

.author-image {
    display: block;
    width: 80px;
    height: 80px;
    overflow: hidden;
    background: #fff;
    margin: auto;
    float: left;
    margin-right: 1em;
}

.author-image .img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
}

.author-profile .author-image {
    position: relative;
    top: 80px;
    width: 180px;
    height: 180px;
    box-shadow: none;
    float: none;
    margin: auto;
}

.author-title {
    margin: 6.5rem 0 0.5rem;
    font-size: 1.7em;
    font-weight: 500;
}

.author-bio {
    font-weight: 300;
}

.author-profile .author-bio {
    font-size: 1.5em;
}

/* Location, website, and link */
.author-profile .author-meta {
    margin: 0;
    font-size: 1.5rem;
    position: absolute;
    bottom: -10px;
    width: 140px;
    background-color: white;
    left:50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.author-meta span {
    display: inline-block;
    word-wrap: break-word;
    color: #3fae93;
    font-style: normal;
}
.author-meta a {
    text-decoration: none;
}

/* Turn off meta for page2+ to make room for extra
   pagination prev/next links */
.paged .author-profile .author-meta {
    display: none;
}

/* ==========================================================================
   7. Tag Archive - Tag Page
   ========================================================================== */

.tag-template .inner {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    background-color: #F5F5F5   ;
    padding: 8em 1em;
}

.tag-template .page-title {
    color: #3b3b3b;
    letter-spacing: 4px;
    font-weight: 500;
    font-size: 1.8em;
    width: 100%;
    text-align: center;
    padding-bottom:0.6em;
}

.tag-template .page-title:after {
    content: "";
    position: absolute;
    height: 1px;
    left: 20%;
    width: 58%;
    max-width: 400px;
    bottom:0;
    background-color: rgba(0,0,0,0.15);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tag-template .page-description {
    font-size: 1.7em;
    font-weight: 400;
    width: 100%;
    text-align: center;
    color: #3fae93;
    margin-top: 20px;
    text-transform: none;
    letter-spacing: 0px;
}

/* ==========================================================================
   8. Read More - Next/Prev Post Links
   ========================================================================== */

.read-next {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-top: 6rem;
}

.read-next-story {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 50%;
    text-decoration: none;
    position: relative;
    text-align: center;
    color: #fff;
    background: #222 no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
.read-next-story:hover:before {
    background: rgba(0,0,0,0.8);
    transition: all 0.2s ease;
}
.read-next-story:hover .post:before {
    color: #222;
    background: #fff;
    transition: all 0.2s ease;
}

.read-next-story:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    transition: all 0.5s ease;
}

.read-next-story .post {
    padding-top: 6rem;
    padding-bottom: 5rem;
    max-width: 600px;
}

.read-next-story .post:before {
    content: "Läs även";
    padding: 12px 11px 12px 14px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: rgba(255,255,255,1);
    border: rgba(255,255,255,1) 1px solid;
    border-radius: 4px;
    transition: all 0.5s ease;
}
.read-next-story.prev .post:before {
    content: "Läs sedan";
}

.read-next-story h2 {
    font-size: 1.7em;
    margin-top: 3rem;
    color: #fff;
    line-height: 1.3em;
}

.read-next-story p {
    margin: 0;
    line-height: 1.6em;
    color: rgba(255,255,255,0.8);
}

/* Special styles for posts with no cover images */
.read-next-story.no-cover {
    background: #f5f8fa;
}

.read-next-story.no-cover:before {
    display: none;
}

.read-next-story.no-cover .post:before {
    color: rgba(0,0,0,0.5);
    border-color: rgba(0,0,0,0.2);
}

.read-next-story.no-cover h2 {
    color: rgba(0,0,0,0.8);
}

.read-next-story.no-cover p {
    color: rgba(0,0,0,0.5);
}

/* if there are two posts without covers, put a border between them */
.read-next-story.no-cover + .read-next-story.no-cover {
    border-left: rgba(0,0,100,0.04) 1px solid;
}


/* ==========================================================================
   9. Error Page
   ========================================================================== */

.fallback-container{
    height: 55em;
    width: 100%
}

.fallback-container .fallback-content{
    max-width: 480px;
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding: 0 1em;
    top: 20%
}

@media only screen and (max-width:767px){
    .fallback-container .fallback-content{
        top: 10%
    }
}

.fallback-container .fallback-content h1{
    font-size: 140px;
    font-weight: 700;
    color: #fff;
    background-color: #CCC;
    padding: 80px 0
}

@media only screen and (max-width:767px){
    .fallback-container .fallback-content h1{
        font-size: 80px
    }

}

.fallback-container .fallback-content h2{
    margin: 40px 0 12px;
    font-size: 28px;
    font-weight: 500
}

@media only screen and (max-width:767px){
    .fallback-container .fallback-content h2{
        font-size: 24px
    }

}

.fallback-container .fallback-content a{
    color: #5bc5b0;
    font-size: 24px;
    margin-bottom: 100px
}

.fallback-container .fallback-content a:hover{
    text-decoration: underline
}

/* ==========================================================================
   10. Third Party Elements - Embeds from other services
   ========================================================================== */

/* Github */
.gist table {
    margin: 0;
    font-size: 1.4rem;
}
.gist td {
    line-height: 1.4;
}
.gist .line-number {
    min-width: 25px;
}

/* Pastebin */
.content .embedPastebin {
    margin-bottom: 1.75em;
}


/* ==========================================================================
   11. Pagination - Tools to let you flick between pages
   ========================================================================== */

/* The main wrapper for our pagination links */
.pagination {
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: 4rem auto;
    font-size: 1.3rem;
    color: #9EABB3;
    text-align: center;
}

.pagination a {
    color: #9EABB3;
}

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
    position: absolute;
    display: inline-block;
    text-decoration: none;
}

.older-posts {
    right: 0;
}

.page-number {
    display: inline-block;
    min-width: 100px;
}

.newer-posts {
    left: 0;
}

.older-posts:hover,
.newer-posts:hover {
    color: #889093;
    border-color: #98a0a4;
}

.extra-pagination {
    display: none;
    border-bottom: 1px solid #e0e0e0;
}

/* On page2+ make all the headers smaller */
.paged .main-header {
    max-height: 30vh;
}

/* On page2+ show extra pagination controls at the top of post list */
.paged .extra-pagination {
    display: block;
}


/* ==========================================================================
   12. Footer - The bottom of every page
   ========================================================================== */

.footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #1e2128;
    padding: 4em 5em 2em;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer ol, .footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer p, .footer li {
    padding: 0;
    margin: 0;
    font-size: 18px;
}

.footer h2 {
    margin-bottom: 20px;
}

.footer .logo-h {
   width: 100px;
   opacity: 0.4;
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    .footer {
        padding: 3em 2em 1em
    }
}

@media only screen and (max-width:767px) {
    .footer {
        padding: 2em 1em 1em;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.footer a {
    color: hsla(0, 0%, 100%, .3);
    -webkit-transition: all .3s;
    transition: all .3s;
    white-space: nowrap
}

.footer a:hover {
    color: hsla(0, 0%, 100%, 1)
}

.footer .footer__logo {
    width: 20%
}

@media only screen and (max-width:1024px) {
    .footer .footer__logo {
        text-align: center;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 30px
    }
}

.footer .footer__logo span {
    display: none
}

.footer .footer__logo a {
    font-size: 3.7em
}

@media only screen and (max-width:767px) {
    .footer .footer__logo a {
        font-size: 3em
    }
}

.footer .footer__logo h2 {
    font-size: 1em
}

.footer .footer__nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (max-width:400px) {
    .footer .footer__nav {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%
    }
}

@media only screen and (min-width:401px) and (max-width:767px) {
    .footer .footer__nav {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 80%
    }
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    .footer .footer__nav {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media only screen and (max-width:400px) {
    .footer .footer__nav {
        font-size: .9em
    }
}

@media only screen and (max-width:767px) {
    .footer .footer__nav .footer__nav__block {
        width: 35%
    }
    .footer .footer__nav .footer__nav__block:nth-child(odd) {
        width: 65%
    }
    .footer .footer__nav .footer__nav__block:nth-child(odd):after {
        content: " ";
        width: 100%
    }
    .footer .footer__nav .footer__nav__block:nth-child(n+3) {
        margin-top: 2em
    }
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    .footer .footer__nav .footer__nav__block {
        padding-left: 4.2em
    }
}

@media only screen and (min-width:1025px) {
    .footer .footer__nav .footer__nav__block {
        padding-left: 65px
    }
}

@media only screen and (min-width:1261px) {
    .footer .footer__nav .footer__nav__block {
        padding-left: 75px
    }
}

.footer .footer__nav .footer__nav__block:first-child {
    padding-left: 0
}

.footer .footer__nav .footer__nav__block.social {
    max-width: 160px;
}

.footer .footer__nav .footer__nav__block.social ul {
    padding-top: 1em
}

.footer .footer__nav .footer__nav__block.social li {
    display: inline-block;
    margin: 0 1em 1em 0
}

.footer .footer__nav .footer__nav__block.social li:nth-child(even) {
    margin-right: 0
}

.footer .footer__nav .footer__nav__block.social a {
    font-size: 1.7em;
    line-height: 1em
}

@media only screen and (max-width:767px) {
    .footer .footer__nav .footer__nav__block.social {
        max-width: 100px;
    }
}

.footer .footer__nav .footer__nav__header {
    font-weight: 500;
    color: hsla(0, 0%, 100%, .9);
    font-size: 1.3em;
    line-height: 2em
}

.footer .footer__nav a {
    font-size: 1.1em;
    line-height: 2.5em
}

.footer .legal {
    width: 100%;
    margin-top: 30px;
    padding-top: 20px;
    color: hsla(0, 0%, 100%, .3);
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    font-size: 1em
}

.footer .legal a {
    color: inherit
}

.footer .legal a:hover {
    color: hsla(0, 0%, 100%, 1)
}

.footer .legal .legal__copyright {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.footer .legal .legal__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 24px;
    min-height: 48px;
}

.footer .legal .legal__links>* {
    margin-right: 24px;
}

.footer .legal .legal__downloads {
    width: 100%;
    text-align: center;
    padding-bottom: 1em
}

.footer .legal .legal__downloads a {
    font-size: 4em
}

@media only screen and (min-width:1025px) {
    .footer .legal .legal__downloads {
        display: none
    }
}

.footer .legal .legal__copyright .legal__appstore {
    font-size: 3em;
    flex: 1;
    text-align: right;
}

@media only screen and (max-width:1024px) {
    .footer .legal .legal__copyright .legal__appstore {
        display: none
    }
}

.footer .legal .legal__disclaimer {
    line-height: 1.5em;
    color: #2f3333;
    font-size: .9em;
    color: hsla(0, 0%, 100%, .3);
    margin-top: 2em;
    max-width: 680px;
}

@media only screen and (max-width:767px) {
    .footer .legal {
        font-size: .9em
    }
    .footer .legal .legal__links {
        padding-left: 0;
    }
    .footer .legal .legal__copyright {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        flex-direction: column;
        align-items: unset;
    }
    .footer .legal .legal__copyright>* {
        margin-right: 0
    }
}

/* Hide footer on post pages */
.post-template .footer {
    display: none;
}

/* ==========================================================================
   13. Media Queries
   ========================================================================== */


/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer {
        padding: 3em 2em 1em 2em;
    }

    .footer .right .link {
        margin-left: 16px;
		font-size: 18px;
    }
}

/* Smaller mobile */
@media only screen and (max-width: 374px) {
    .footer .bot .copy {
        float: left;
    }
}

/* Mobile */
@media only screen and (max-width: 767px) {

    .inner {
        width: 100%;
    }

    .screen-only {
	    display: none !important;
    }

    .mobile-only {
	    display: inline-block;
    }

    .page-description {
        font-size: 3.2em;
        margin-top:10px;
    }

    .mobile-header {
        position: fixed;
        width: 100%;
        z-index: 1000;
        padding: 0;
        top: 0;
        height: 60px;
        background-color: rgba(0, 0, 0, 0);
        pointer-events: none;
    }
    .mobile-header.active {
        background-color: white;
        height: 100%;
    }
    .mobile-header.active .download-btn {
        display: block;
    }
    .download-container {
        position: fixed;
        width: 100%;
        bottom: 0;
        right: 0;
        z-index: 3;
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    }
    .download-btn {
        display: none;
        text-align: center;
        padding: 20px 25px;
        background-color: #5BC5B0;
        font-weight: 500;
        border-radius: 100px;
        color: white !important;
        margin: 24px 20px;
        font-size: 19px;
        box-shadow: 0px 10px 25px 0px rgba(66, 158, 140, 0.3);
        pointer-events: auto;
    }
    .mobile-menu {
        position: absolute;
        overflow: auto;
        height: 0;
        z-index: 0;
        background-color: white;
        width: 100%;
        padding: 2em 0em 12em 0;
        visibility: hidden;
    }
    .mobile-menu .container {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-left: 32px;
        padding-right: 32px;
        z-index: 0;
    }
    .mobile-menu .nav-item {
        font-weight: 500;
        color: #4A4A4A;
        position: relative;
        display: block;
        font-size: 20px;
        line-height: 2.8em;
        max-width: 400px;
        margin: auto;
        -webkit-tap-highlight-color: rgba(0,0,0,0.025);
    }
    .mobile-menu .app-btn {
        color: #55af9a;
        background-color: #ebf7f5;
    
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    
        position: relative;
        display: block;
        max-width: 400px;
        margin: 16px auto;
        padding: 24px 0px;
        border-radius: 14px;
    
        -webkit-tap-highlight-color: #d0eee7;
      }
    .mobile-menu .primary {
        color: black;
        font-size: 24px;
    }
    .mobile-menu .first-secondary {
        margin-top: 24px;
    }
    .mobile-menu.active {
        visibility: visible;
        pointer-events: auto;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-logo {
      display: inline-block;
      width: 112px;
      position: absolute;
      left: 16px;
      top: 12px; }

      .home-template .lines,
      .home-template .lines:before,
      .home-template .lines:after {
          background: white;
      }

    .main-header {
        margin-bottom: 15px;
        height: 280px;
    }

    .main-header .mobile-logo {
        display: inline-block;
    }

    .main-header .page-title {
        font-size:1.6em;
        padding-bottom: 0.6em;
    }

    .paged .main-header {
        max-height: 20vh;
        min-height: 160px;
        padding: 10% 0;
    }

    .main-nav {
        padding: 5px;
        margin-bottom: 2rem;
    }

    .blog-logo {
        padding: 5px;
    }

    .blog-logo img {
        height: 30px;
    }

    .main-nav.overlay a:hover {
        color: #fff;
        border-color: transparent;
        background: transparent;
    }

    .no-cover .main-nav.overlay {
        background: none;
    }

    hr {
        margin: 1.75em 0;
    }

    p, ul, ol, dl {
        margin: 0 0 2.5rem 0;
    }

    .post {
        width: 100%;
        padding:20px;
        padding-bottom: 10px;
        margin: 0.8em auto;
        border-bottom: none;
    }

    .post-image {
        width: 100%;
        height: 240px;
    }

    .post-excerpt p {
        font-size: 1.1em;
        line-height: 1.5em;
    }

    .post-template .post-header {
        margin-top: 3em;
    }

    .post-header h1 {
        font-size: 1.6em;
        line-height: 1.3em;
    }

    .post-header h2 {
        font-size: 1.5em;
    }

    .post-header img,
    .post-content img {
        padding: 0;
        max-width: 100%;
    }

    .post-content p,
    .post-content li {
        font-size: 1.2em;
        line-height: 1.6em;
    }

    .post-content h2 {
        line-height: 1.3em;
        font-size: 1.4em;
    }

    .post-content .appstore-button img {
        width: 60%;
        padding-bottom: 1em;
    }

    .post-footer {
        padding: 2em 0;
    }

    .post-footer .share a {
        margin: 1.4rem 0.8rem 0 0.8rem;
    }

    .post .post-meta {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 2em;
    }

    .post-template .post-meta {
        border:none;
        padding-bottom: 0em;
    }

    .post-meta {
        font-size: 1.0em !important;
    }

    .post-meta .one-line {
        width: 68%;
    }

    .post-meta .read-more {
        right: 7px;
    }

    .author-meta li {
        float: none;
        margin: 0;
        line-height: 1.75em;
    }

    .author-meta li:before {
        display: none;
    }

    .older-posts,
    .newer-posts {
        position: static;
        margin: 10px 0;
    }

    .page-number {
        display: block;
    }

    .author-profile {
        padding-bottom: 2rem;
    }

    .post-head.main-header {
        height: 30vh;
    }

    .tag-head.main-header,
    .author-head.main-header {
        height: 20vh;
    }

    .author-profile .author-image {
        margin-top: -70px;
    }

    .author-profile .author-meta span {
        font-size: 1.4rem;
    }

    .paged .main-header .page-description {
        display: none;
    }

    /* Tags */
    .tag-template .inner {
        padding: 10em 2em 6em;
    }

    .tag-template .page-title {
        font-size: 1.6em;
        text-align: center;
        padding-bottom:0.6em;
        word-break: break-word;
        line-height: 1.4em;
        letter-spacing: 2px;
    }

    .tag-template .page-description {
        font-size: 1.5em;
    }

    /* Read next */
    .read-next {
        margin-top: 0;
        margin-bottom: -37px;
    }

    .read-next .post {
        width: 100%;
    }

    .read-next h2 {
        font-size:1.5em;
    }

    .read-next-story {
        display: none;
    }

    .read-next-story.prev {
        display: inline;
    }
}

/* ==========================================================================
   14. Animations
   ========================================================================== */

/* ==========================================================================
   End of file. Animations should be the last thing here. Do not add stuff
   below this point, or it will probably fuck everything up.
   ========================================================================== */