@charset "utf-8";
/* CSS Document */

/* ------- webfonts ------- */
@font-face{font-family:'founders_grotesk';src:url('fonts/FoundersGrotesk-Regular.eot');src:local('☺'), url('fonts/FoundersGrotesk-Regular.woff') format('woff'), url('fonts/FoundersGrotesk-Regular.ttf') format('truetype'), url('fonts/FoundersGrotesk-Regular.svg') format('svg');font-weight:500;font-style:normal}

/* ------- STYLES ------- */

/* GENERAL */
.columns-guide{width:100%;position:fixed;height:100%;top:0;left:0px;z-index:100;pointer-events:none;grid-template-rows:1fr}

*{outline:none;margin:0;padding:0;font-family:'founders_grotesk';box-sizing:border-box;text-align:center}
body{font-weight:300;-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;overflow-x:hidden;font-size:32px;line-height:32px;color:#000;background-color:#f0f0f0;position:relative;margin:0 auto}
body.scroll-disabled{overflow:hidden!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;}

h1,h2,h3,h4,h5{font-weight:500;font-size:inherit}
p{font-size:inherit}

a{cursor:pointer;text-decoration:none;color:inherit;font-size:inherit;transition:opacity .2s ease, color .2s ease}
a.hover-opacity:hover{opacity:.5}
a.hover-color:hover{color:#FE5000}
a.underline{border-bottom:1px solid}
li{list-style:none;}
img{width:100%;display:block}

.fs-s{font-size:14px;line-height:20px}
.fs-l{font-size:55px;line-height:55px}
.uppercase{text-transform:uppercase}
.underlined{width:fit-content;border-bottom:1px solid}
.display-block{display:block}
.ta-left{text-align:left}

.position-relative{position:relative}
.position-sticky{position:sticky}

/* columns */
.grid{display:grid;grid-gap:60px;justify-content:center;width:100%;grid-template-columns:repeat(9, 1fr)}
.grid > *{grid-column-end:span 9}
.fit-content{height:fit-content}
.align-center{align-content:center;align-items:center;justify-items:center}

.grid .c-3{grid-column-end:span 3}
.grid .c-3  > *{grid-column-end:span 3}
.grid .c-5{grid-column-end:span 5}
.grid .c-5 > *{grid-column-end:span 5}

.grid .p-2{grid-column-start:3}
.grid .p-3{grid-column-start:4}

/* .lazy-img */
.thumb{background-color:transparent;position:relative}
.aspect{opacity:0;visibility:hidden}
.lazy{opacity:0;visibility:hidden;transition:opacity .3s ease}
.lazy.visible{opacity:1;visibility:visible}
.lazy-img-wrapper{position:relative;overflow:hidden;background-color:#e9e9e9;transition:background .2s ease}
.lazy-img-wrapper .img{position:absolute;top:0;left:0;bottom:0;width:100%;opacity:0;transition:opacity .2s ease;background-position:center;background-size:cover;background-repeat:no-repeat}
.lazy-img-wrapper .fade{display:none;width:100%;height:220px;position:absolute;left:0;top:-100px;z-index:1}
.lazy-img-wrapper.loaded{background-color:transparent}
.lazy-img-wrapper.loaded .img{opacity:1}
.img.thumb a{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}
.img.thumb a .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:rgba(45, 45, 45, 0.6);opacity:0;padding:20px;color:#FFF}
.img.thumb a:hover .overlay{opacity:1}

/* .video */
.video{position:relative;overflow:hidden;background-color:#e9e9e9;transition:background .2s ease}
.video video{position:absolute;top:0;left:0;bottom:0;width:100%;opacity:0;transition:opacity .2s ease;background-position:center;background-size:cover;background-repeat:no-repeat}
.video.loaded{background-color:transparent}
.video.loaded video{opacity:1}

/* .slider */
.slider{width:100%;height:100vh;min-height:-webkit-fill-available}
.slider div.slide{position:relative;height:100%}
.slider div.slide .img{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden}
.slider div.slide.slide-video video{background:transparent}
.slider-wrapper{position:relative}
.slider-wrapper .slider{height:100%;position:absolute;top:0;left:0}

/* .btn-swipe */
.btn-swipe{width:40px;height:40px;position:fixed;cursor:pointer;top:42px;left:60px;z-index:13;background-color:transparent}
.btn-swipe span{display:block;position:absolute;height:2px;width:40px;background:#000;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);transition:.25s ease-in-out}
.btn-swipe:hover span{background-color:#FE5000!important}
.header-transparent .btn-swipe span{background:#FFF}
.btn-swipe span:nth-child(1){top:14px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}
.btn-swipe span:nth-child(2){top:25px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}
.swipe-opened  .btn-swipe span{background:#000}
.swipe-opened .btn-swipe span:nth-child(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:6px;left:6px}
.swipe-opened .btn-swipe span:nth-child(2){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:34px;left:6px}

/* .swipe */
.swipe{position:fixed;top:100%;height:100%;left:0;width:100%;overflow:auto;z-index:10;background-color:#f0f0f0;transition:top .6s cubic-bezier(.7, 0, .3, 1)}
.swipe-opened .swipe{top:0}

/* .vertical-slider */
.vertical-slider{width:100vw;position:relative;min-height:100vh}
.vertical-slider .slider-content{position:sticky;width:100%;height:100vh;overflow:hidden;top:0;left:0}
.vertical-slider .slide{width:100%;height:100vh;background-position:center;background-repeat:no-repeat;background-size:120%;opacity:0;transition:opacity .3s ease;position:absolute;top:0;left:0;transition-delay:.3s;pointer-events:none}
.vertical-slider .slide.focused{opacity:1;transition-delay:0s;pointer-events:initial}
.vertical-slider .slide .slide-content{height:100%}

/* .master-wrapper */
.master-wrapper{margin:0 auto;width:100%}
.master-wrapper > section{width:100%;min-height:100vh}
.master-wrapper > section.video{width:100%;min-height:0}
.master-wrapper > section.text{padding:200px 0}
.master-wrapper > section a{text-decoration:underline}
.master-wrapper > section a:hover{color:#FE5000}

header.master{position:fixed;width:100%;top:0;padding-top:50px;z-index:10;left:0}
header.master .logo{display:inline-block;position:absolute;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%)}
header.master .shop{display:inline-block;position:absolute;right:60px}

main{width:100%;min-height:100vh;position:relative;display:block}

.text-wrapper{padding-top:200px;min-height:50vh;margin-bottom:-13%}
.text-wrapper ~ .lazy-img-wrapper{z-index:-1}

footer.master{width:100vw;min-height:100vh}

/* .page-downloads */
.file{width:300px;position:relative}
.file .btn-download{position:absolute;width:100%;left:0;bottom:-40px}


/* media-queries */
@media (max-aspect-ratio: 7/5) {
    .vertical-slider .slide{background-size:cover!important}
}

@media (min-width: 2140px){
    body{font-size:60px;line-height:60px}
    .fs-s{font-size:22px;line-height:28px}
    .fs-l{font-size:98px;line-height:98px}

    .btn-swipe{top:66px;width:60px;height:60px;left:80px}
    .btn-swipe span{width:60px}
    .btn-swipe span:nth-child(1){top:22px}
    .btn-swipe span:nth-child(2){top:34px}
    .swipe-opened .btn-swipe span:nth-child(1){top:8px;left:9px}
    .swipe-opened .btn-swipe span:nth-child(2){top:49px;left:9px}

    header.master{padding-top:80px}
    header.master .shop{right:80px}

    .text-wrapper{margin-bottom:-14%;padding-top:320px}

    .master-wrapper > section.text{padding:320px 0}

    .file{width:450px}
    .file .btn-download{bottom:-80px}
}

@media (min-width: 1440px) and (max-width: 2139px){
	body{font-size:44px;line-height:44px}
	.fs-s{font-size:20px;line-height:28px}
    .fs-l{font-size:72px;line-height:72px}

    .btn-swipe{top:52px}
    header.master{padding-top:60px}

    .text-wrapper{margin-bottom:-12%;padding-top:260px}

    .master-wrapper > section.text{padding:260px 0}

    .file{width:400px}
    .file .btn-download{bottom:-60px}
}

@media (max-width: 900px){
    body{font-size:26px;line-height:30px}
    .fs-s{font-size:14px;line-height:20px}
    .fs-l{font-size:48px;line-height:48px}

    .btn-swipe{top:40px}

    /* columns */
    .grid{grid-template-columns:100%;grid-column-gap:0}
    .grid > *{grid-column-end:auto}

    .grid .c-3{grid-column-end:auto}
    .grid .c-3  > *{grid-column-end:auto}
    .grid .c-5{grid-column-end:auto}
    .grid .c-5 > *{grid-column-end:auto}

    .grid .p-2{grid-column-start:1}
    .grid .p-3{grid-column-start:1}

    .lazy-img-wrapper{overflow:visible}
    .lazy-img-wrapper .fade{display:block}

    .position-sticky{position:static}

    .vertical-slider{height:auto!important}
    .vertical-slider .slider-content{position:static;height:auto;overflow:visible}
    .vertical-slider .slide{width:100%;height:auto;position:static;top:0;left:0;opacity:1!important}
    .vertical-slider .slide.img{padding-top:100%}
    .vertical-slider .slide .slide-content{padding:120px 60px}

    .text-wrapper{padding:120px 60px 0;align-content:start;align-items:start;justify-items:start}

    .master-wrapper > section{min-height:0}
    .master-wrapper > section.text{padding:120px 60px}

    footer.master{min-height:0;padding:120px 60px}    

    .file{width:200px}
    .page-downloads section{padding:120px 60px}
    .page-contact footer.master{min-height:100vh}
}

@media (max-width: 640px){
    body{font-size:24px;line-height:28px}
    .fs-s{font-size:12px;line-height:18px}
    .fs-l{font-size:32px;line-height:34px}

    .btn-swipe{top:28px;left:40px}
    .btn-swipe span{height:1px;width:40px}
    header.master{padding-top:40px}
    header.master .shop{right:40px}

    .vertical-slider .slide .slide-content{padding:100px 40px}

    .text-wrapper{padding:100px 40px 0}

    .master-wrapper > section.text{padding:100px 40px}

    footer.master{min-height:0;padding:100px 40px}

    .page-downloads section{padding:180px 40px}
}

@media (max-width: 500px){
    .lazy-img-wrapper .fade{height:180px}

    .text-wrapper{margin-bottom:-6%}
}