/*
Longread Css
Author: Tim Hereijgers
Author URI: http://timhereijgers.nl
Description: Overrides and longread article specific Css
Version: 1.0
*/


/* Global */

img,
video {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    vertical-align: middle;
}

@media (min-width: 34em) {
    html {
        font-size: 100%;
    }
}
@media (min-width: 112em) {
    html {
        font-size: 112.5%;
    }
}

html {
    line-height: 1.7;
    color: #043f47;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}



/* Typography */

h1, h2, h3 {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 700;
}

h1, .h1{ font-size: 2.5rem; line-height: 1.2; letter-spacing: -.03em; }
h2, .h2{ font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; }
h3, .h3{ font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 300; }

@media (min-width: 52em) {
    h1, .h1{ font-size: 2.75rem; }
    h2, .h2{ font-size: 2rem; }
}
@media (min-width: 64em) {
    h1, .h1{ font-size: 3.6rem; }
    h2, .h2{ font-size: 2.5rem; }
}

.title-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,.15);
}

.text-shadow {
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.annotation {
    letter-spacing: .1em;
    font-weight: 700;
    text-transform: uppercase;
}

blockquote {
    font-family: 'Merriweather', Georgia, serif;
    font-size: .875rem;
    font-weight: 300;
    color: #043f47;
    padding: 2rem 2rem 1rem;
    margin: 3rem 0;
    background-color: #fdf1e4;
}

@media (min-width: 52em) {
    blockquote {
        margin: 0 2rem 2rem -3.25rem;
        float: left;
        width: 16rem;
    }
}

@media (min-width: 64em) {
    blockquote {
        margin-left: -13rem;
        width: 18rem;
    }
}

.sans { font-family: 'Merriweather Sans', Helvetica, Arial, sans-serif; }


/* Layout */

.container      { max-width: 78rem; }
.container-sm   { max-width: 24rem; }
.container-md   { max-width: 34rem; }
.container-lg   { max-width: 40rem; }
.container-xl   { max-width: 53rem; }

@media (min-width: 52em) {
    .md-offset-1    { margin-left: -3.25rem; }
    .md-offset-2    { margin-left: -6.5rem; }
    .md-onset-1    { margin-right: -3.25rem; }
    .md-onset-2    { margin-right: -6.5rem; }

    .container-lg-plus  { max-width: calc(40rem + 3.25rem); }
}

@media (min-width: 64em) {
    .lg-offset-1    { margin-left: -3.25rem; }
    .lg-offset-2    { margin-left: -6.5rem; }
    .lg-onset-1    { margin-right: -3.25rem; }
    .lg-onset-2    { margin-right: -6.5rem; }

    .container-lg-plus  { max-width: calc(40rem + 6.5rem); }
}

.logo-base {
    width: 12rem;
}
@media (min-width: 52em) {
    .logo-base {
        width: 14rem;
    }
}
@media (min-width: 64em) {
    .logo-base {
        width: 16rem;
    }
}


/* Quotes */

.quote {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 300;
    color: #0A6F7D;
    font-size: .9375rem;
    margin-top: -3rem;
}

.quote-by:before {
    content: '\201C';
    display: inline-block;
    font-size: 7rem;
    vertical-align: top;
    margin-right: 1rem;
    font-weight: bold;
    font-family: 'Times New Roman', serif;
    color: #043f47;
    line-height: 1rem;
}

.quote p {
    margin-bottom: 1rem;
}



/* Images */

.no-js .lazyload {
    display: none;
}


@media (min-width: 64em) {
    .parallax-header {
        height: 35rem;
        overflow: hidden;
    }

    .parallax-header .simpleParallax {
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%);
    }
}

.parallax-shadow {
    box-shadow: inset 0 -200px 150px -50px rgba(0,0,0,.66);
    height: 100%;
}



/* Incidentals */

.bg-black-50 { background-color: rgba(0,0,0,.5); }
.bg-black-66 { background-color: rgba(0,0,0,.66); }


@media (min-width:52em) {
    .btn-big {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}


.legend {
    display: inline-block;
    margin-bottom: 1.5rem;
    margin-left: 1rem;
}

@media (min-width: 52em) {
    .legend {
        position: absolute;
        left: 3vw;
        top: 8rem;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        transform: rotate(-90deg) translateX(-100%);
        -webkit-transform: rotate(-90deg) translateX(-100%);
        margin: 0;
    }
}


.video-link {
    cursor: pointer;
    overflow: hidden;
}

.video-link:hover .fader {
    opacity: .2;
}

.video-link:hover .image {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
}

.video-link:hover .title,
.video-link:hover .header {
    -webkit-transform: translateY(-.5rem);
    transform: translateY(-.5rem);
}

.video-link:hover .play {
    background-color: rgba(255,255,255,.75);
    -webkit-transform: translateX(.5rem);
    transform: translateX(.5rem);
}

.video-link .fader {
    background-color: #000;
    opacity: .4;
    -webkit-transition: 350ms opacity;
    transition: 350ms opacity;
}

.video-link .image {
    -webkit-transition: 750ms;
    transition: 750ms;
}

.video-link .title,
.video-link .header {
    -webkit-transition: 500ms;
    transition: 500ms;
}

.video-link .play {
    padding: 1.3rem 1.6rem;
    width: 4rem;
    height: 4rem;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: rgba(255,255,255,.5);
    -webkit-transition: 350ms;
    transition: 350ms;
}

.video-link .play-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .5rem 0 .5rem 1rem;
    border-color: transparent transparent transparent #000000;
}

@media (max-width: 40em) {
    .video-link .title {
        width: calc(100% - 10rem);
        display: block;
    }
}


input[type="checkbox"].video-check:checked ~ .video-link {
    display: none;
}



.video embed, .video iframe, .video object {
    vertical-align: top;
    width:100%;
    height:100%;
    margin:0px;
    overflow:hidden;
    min-height: 210px;
}

@media (min-width: 28em) {
    .video embed, .video iframe, .video object {
        min-height: 300px;
    }
}

@media (min-width: 40em) {
    .video embed, .video iframe, .video object {
        min-height: 360px;
    }
}

@media (min-width: 52em) {
    .video embed, .video iframe, .video object {
        min-height: 419px;
    }
}


/* Tinyslider */

.tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active{position:relative;left:auto !important}.tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}


.slide-info {
    opacity: 0;
    -webkit-transform: translateX(-3rem);
    transform: translateX(-3rem);
    -webkit-transition: all 300ms;
    transition: all 300ms;
}
.animIn .slide-info {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms;
}
.animOut .slide-info {
    opacity: 0;
    -webkit-transform: translateX(-3rem);
    transform: translateX(-3rem);
}


.slide-img {
    opacity: 0;
    -webkit-transform: translateX(3rem);
    transform: translateX(3rem);
    -webkit-transition: all 300ms;
    transition: all 300ms;
}
.animIn .slide-img {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms;
}
.animOut .slide-img {
    opacity: 0;
    -webkit-transform: translateX(3rem);
    transform: translateX(3rem);
}

@media (max-width: 40em) {
    .slide-img .cover-img {
        top: 0;
        -ms-transform: translateX(-50%) translateY(0);
        -moz-transform: translateX(-50%) translateY(0);
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }

    @supports ( object-fit: cover ) {
        .slide-img .cover-img {
            object-position: center top;
            -ms-transform: none;
            -moz-transform: none;
            -webkit-transform: none;
            transform: none;
        }
    }
}


.slides-nav {
    max-width: 6rem;
}

.slides-nav .active {
    color: #f39325;
    position: relative;
}

.slides-nav .active:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -6rem;
    width: 5rem;
    height: 3px;
    background-color: #f39325;
    top: calc(50%);
}

.slider-nav-btn {
    cursor: pointer;
}
.slider-nav-btn:hover {
    opacity: .65;
}
.active.slider-nav-btn {
    cursor: default
}
.active.slider-nav-btn:hover {
    opacity: 1;
}