/* Global: reset by tags */
body, p, ul, ol, form, input, button, select, h1, h2, h3, h4, h5, h6, dl, dt, dd, blockquote, address, pre{margin:0;padding:0;}
ul, ol{list-style:none;}
button{border:none;}


/* Global: fonts */
@font-face{font-family:'GT Haptik';src:url('../fonts/GT-Haptik-Light.woff2') format('woff2');font-weight:300;}
@font-face{font-family:'GT Haptik';src:url('../fonts/GT-Haptik-Regular.woff2') format('woff2');font-weight:400;}


/* Global: tags */
body{background-color:#111315;font-family:'GT Haptik', sans-serif;font-size:22px;line-height:2;color:#fff;}
a{text-decoration:none;color:inherit;}
::selection{background-color:rgba(255, 255, 255, .1);}


/* Global: animations */
@keyframes grain{
  0%, 100%{transform:translate(0, 0);}
  20%{transform:translate(5%, -15%);}
  40%{transform:translate(12%, 9%);}
  60%{transform:translate(-3%, 7%);}
}


/* Component: page */
#page{position:relative;overflow:hidden;}
#page:before{content:'';position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;background-image:url(../img/page-before.png);animation:grain 1500ms steps(4) infinite;}
#page-background{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;}
#page-background video{position:fixed;right:0;bottom:0;min-width:100%;min-height:100%;}
#page-warning{display:none;position:fixed;bottom:0;right:0;left:0;z-index:100;padding:30px;background-color:#b41c28;color:#fff;font-size:14px;line-height:1.4;font-weight:300;text-align:center;}
html:not([lang='en']) #page-warning{display:block;}
#page-warning a{text-decoration:underline;}
#page-warning a:hover{text-decoration:none;}


/* Component: section */
.section-wrapper{max-width:1680px;margin:auto;}
.section-wrapper.is-small{max-width:768px;}
.section-wrapper.is-medium{max-width:1180px;}

.section-title{display:inline-block;position:relative;margin-bottom:150px;font-size:13px;text-transform:uppercase;letter-spacing:7px;font-weight:300;}
.section-title:last-child{margin-bottom:0;}
.section-title .sub-line{position:absolute;top:50%;left:50%;width:5000px;height:1px;margin-left:-2500px;text-indent:-999em;overflow:hidden;background-color:#b41c28;}
.section-title[data-index='1'] .sub-line{transform:rotate(-45deg);}
.section-title[data-index='2'] .sub-line{transform:rotate(45deg);}
.section-title[data-index='3'] .sub-line{transform:rotate(-45deg);}
.section-title[data-index='4'] .sub-line{transform:rotate(45deg);}
.section-title .sub-text{position:relative;}

#section-header{position:fixed;top:0;left:0;right:0;z-index:12;padding:100px 100px 0;}
#section-header-logo{display:block;width:75px;height:75px;overflow:hidden;background-color:rgba(0, 0, 0, .9);}
#section-header-logo svg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:25px;overflow:visible;transition:300ms;}
#section-header-logo path{fill:#fff;}
#section-header-logo.on-animate{cursor:pointer;}

#section-introduction{margin:200px 100px 400px;}
#section-introduction-inner{display:flex;flex-wrap:wrap;align-items:center;}
#section-introduction-col-1{position:relative;z-index:11;width:48%;position:relative;}
#section-introduction-title{margin-right:-25%;font-size:38px;font-weight:400;line-height:1.5;}
#section-introduction-col-2{position:relative;width:52%;}
#section-introduction-visual{position:relative;z-index:1;width:100%;height:750px;overflow:hidden;visibility:hidden;}
#section-introduction-visual-outer{position:relative;}
#section-introduction-visual-layer1, #section-introduction-visual-layer2{position:absolute;top:0;left:0;right:100%;bottom:0;z-index:2;}
#section-introduction-visual-layer1{background:#0b0c0d;}
#section-introduction-visual-layer2{background:#0d0e10;}
#section-introduction-visual img{position:absolute;width:100%;height:100%;object-fit:cover;font-family:'object-fit:cover;';image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;}
#section-introduction-badge{position:absolute;top:-30px;right:-15px;z-index:11;overflow:visible;width:150px;}
#section-introduction-badge path{fill:#fff;}

#section-passions{position:relative;z-index:11;margin:400px 100px;text-align:center;}
#section-passions-list{margin:0 -50px;font-size:84px;line-height:1.6;}
#section-passions-list > li{position:relative;display:inline-block;margin:0 50px;white-space:nowrap;}
#section-passions-list > li + li:not(.has-breakline) .sub-separator{display:block;}
#section-passions-list .sub-separator{display:none;position:absolute;top:50%;}
#section-passions-list .sub-separator-hbar, #section-passions-list .sub-separator-vbar{position:absolute;background-color:#fff;}
#section-passions-list .sub-separator-hbar{width:12px;height:2px;top:50%;left:-55px;}
#section-passions-list .sub-separator-vbar{width:2px;height:12px;top:50%;left:-50px;margin-top:-5px;}

#section-references{margin:400px 100px;}
#section-references-viewport{position:relative;padding-left:50px;margin-left:-50px;} /* Pixel perfect shadow aligment (due to ScrollBooster) */
#section-references-shadow{position:absolute;top:0;right:0;bottom:90px;background:url(../img/section-references-shadow.png) no-repeat;background-size:100% 100%;opacity:.05;}
#section-references-list{display:flex;align-items:center;direction:rtl;}
#section-references-list > li{flex-shrink:0;box-sizing:border-box;height:100%;max-width:100%;text-align:center;line-height:1.6;direction:ltr;}
#section-references-list > li + li{margin-right:250px;}
@media (min-width:1160px){ #section-references-list > li:last-child{padding-left:calc( (100vw - 150px - 1010px)/2 );} }
@media (min-width:1280px){ #section-references-list > li:last-child{padding-left:calc( (100vw - 200px - 1010px)/2 );} }
@media (min-width:1050px){ #section-references-list > li:nth-child(2){padding-right:calc( (100vw - 150px - 900px)/2 );} }
@media (min-width:1280px){ #section-references-list > li:nth-child(2){padding-right:calc( (100vw - 200px - 900px)/2 );} }
#section-references-list .sub-visual{position:relative;display:block;max-width:100%;}
#section-references-list .sub-visual:before{content:'';position:absolute;top:50px;right:50px;bottom:50px;left:-50px;background:#000;box-shadow:0 0 10px 10px #000;opacity:.25;}
#section-references-list .sub-visual img{display:block;position:relative;max-width:100%;}
#section-references-list .sub-projectname{display:block;margin-top:35px;font-size:18px;}
#section-references-list .sub-projectdate{display:block;padding:0 20px;font-weight:300;font-size:16px;opacity:.5;}

#section-partners{position:relative;z-index:11;margin:400px 100px;}
#section-partners-inner{display:flex;align-items:center;}
#section-partners-row-1{width:40%;}
#section-partners-row-2{width:60%;}
#section-partners-list{display:flex;flex-wrap:wrap;margin:-75px 0 0 -75px;}
#section-partners-list > li{padding:75px 0 0 75px;width:25%;box-sizing:border-box;text-align:center;}
#section-partners-list img{display:block;max-width:100%;}

#section-convictions{position:relative;z-index:11;margin:400px 100px;}
#section-convictions-list{max-width:745px;font-size:84px;line-height:1.4;}
#section-convictions-list > li + li{margin-top:75px;}
#section-convictions-list a{position:relative;display:block;}
#section-convictions-list a:before{content:'';position:absolute;left:-150px;top:60px;width:50px;height:2px;background-color:#fff;}
#section-convictions-list a > [class^='js-serialeffect']{position:relative;}
#section-convictions-list a > [class^='js-serialeffect']:before{content:'';position:absolute;bottom:20px;left:-15px;right:-15px;height:0;background-color:#27292b;transition:300ms;}
#section-convictions-list a:hover > [class^='js-serialeffect']:before{height:10px;}

#section-contact{position:relative;z-index:11;margin:100px;text-align:center;}
#section-contact-box{position:relative;display:flex;align-items:center;box-sizing:border-box;padding:100px;background-color:#fff;font-size:21px;line-height:1.8;font-weight:400;color:#111315;}
#section-contact-box-inner{max-width:745px;margin:auto;}
#section-contact-list{display:flex;align-items:center;justify-content:space-between;max-width:300px;margin:75px auto 0;font-weight:400;}
#section-contact-list a{padding:5px;}
#section-contact-list img{width:18px;}


/* Overlay */
#overlay-scrolltop{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:11;}
#overlay-scrolltop-inner{position:absolute;top:0;right:0;bottom:0;left:0;height:500%;transform:rotate(45deg) translateY(-50%);transform-origin:top left;}
[id^='overlay-scrolltop-layer']{position:absolute;width:0%;height:100%;background-color:#020202;opacity:0;}
#overlay-scrolltop-layer-1{left:0;}
#overlay-scrolltop-layer-2{left:20%;}
#overlay-scrolltop-layer-3{left:40%;}
#overlay-scrolltop-layer-4{left:60%;}
#overlay-scrolltop-layer-5{left:80%;}
#overlay-scrolltop.on-animate-out [id^='overlay-scrolltop-layer']{left:auto;}
#overlay-scrolltop.on-animate-out #overlay-scrolltop-layer-1{right:0;}
#overlay-scrolltop.on-animate-out #overlay-scrolltop-layer-2{right:20%;}
#overlay-scrolltop.on-animate-out #overlay-scrolltop-layer-3{right:40%;}
#overlay-scrolltop.on-animate-out #overlay-scrolltop-layer-4{right:60%;}
#overlay-scrolltop.on-animate-out #overlay-scrolltop-layer-5{right:80%;}


/* JavaScript: serialeffect */
.js-serialeffect{display:inline-block;transition:transform 300ms;transition-timing-function:cubic-bezier(0, 0.6, 0.6, 1);will-change:transform;}
.js-serialeffect.is-visual{}
.js-serialeffect.is-word{white-space:nowrap;}
.js-serialeffect.is-letter{}
.js-serialeffect-compounded{display:inline-block;white-space:nowrap;}


/* JavaScript: serialvisual */
.js-serialvisual{display:block;}
.js-serialvisual-outer{display:block;width:100%;height:100%;overflow:hidden;}


/* JavaScript: on load animation */
body[data-document-state='loading'] #section-header-logo,
body[data-document-state='loading'] #section-header-logo .js-serialeffect.is-visual,
body[data-document-state='loading'] #section-introduction-title,
body[data-document-state='loading'] #section-introduction-title .js-serialeffect.is-letter,
body[data-document-state='loading'] #section-introduction-badge,
body[data-document-state='loading'] #section-introduction-badge .js-serialeffect.is-letter{opacity:0;}

body[data-serialeffect-state='ready'] #section-introduction-title,
body[data-serialeffect-state='ready'] #section-introduction-badge{opacity:1;}


/* JavaScript: serialcursor */
#serialcursor{pointer-events:none;}
#serialcursor-inner{position:fixed;z-index:13;width:80px;height:80px;margin:-40px 0 0 -40px;opacity:0.2;transition:opacity 900ms;}
#serialcursor-pointer{position:fixed;z-index:13;height:8px;width:8px;transform:translate(-50%, -50%);background-color:#bc2d39;border-radius:100%;transition:200ms;}
#serialcursor.on-mousemove #serialcursor-inner{opacity:.6;}
#serialcursor.is-click #serialcursor-inner{opacity:1;}
#serialcursor.is-click #serialcursor-pointer{transform:translate(-50%, -50%) scale(0.75);}

[data-serialcursor-state='grab']{cursor:grab;}
#serialcursor-pointer-grab{opacity:0;transition:opacity 400ms;}
#serialcursor-pointer-grab .sub-icon{position:absolute;top:-2px;width:6px;height:14px;fill:#bc2d39;transition:400ms;}
#serialcursor-pointer-grab .sub-icon.is-left{left:-5px;}
#serialcursor-pointer-grab .sub-icon.is-right{right:-5px;}
#serialcursor.is-grab #serialcursor-pointer-grab{opacity:1;}
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon{fill:#fff;}
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-left{left:-16px;}
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-right{right:-16px;}