:root {
    --color2: #9d56fe;
  }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time, 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; 	outline: 0; 	vertical-align: baseline;}
    :focus {	outline: 0; } ol, ul {list-style: none;} a {text-decoration:none} .clear{clear:both} 
.clearfix:after { content: ""; display: table; clear: both;}
a {color:black}
h1 {font-family: "Jost", sans-serif; font-style: normal; font-size: 6.2em; font-weight: 400; margin-top: 0.2em; margin-bottom: 0.4em; line-height: 1em;}
h2 {font-family: "Jost", sans-serif; font-style: normal; font-size: 3.7em; font-weight: 400; line-height: 1.2em; margin-top: 0.2em; margin-bottom: 0.4em;}
h3 {font-family: "Jost", sans-serif; font-style: normal; font-size: 1.8em; line-height: 1.3em; font-weight: 450; margin-top: 0em;}
h4 {font-size: 1em; font-weight: 700; margin-bottom: 0.4em; text-transform: uppercase; line-height: 1.4em;}
h5 {font-size: 1.5em; font-weight: 700; margin-bottom: 0.8em; line-height: 1.2em;}
.row { position: relative; } .col {float:left; width: 50%;}

body, html {height:100%;}
/*html{-webkit-text-size-adjust: none;}*/ /*stop font resizse ios - better to have in in media queries*/ 
/*::-webkit-scrollbar { display: none; }*/
html {height:100% }
section {overflow:auto}

img {color:transparent; display: block;}

body { font-family: 'Inter', sans-serif; font-weight: normal; font-style: normal; font-size: 20px; font-size: 1vw;  line-height: 1.5em; color:#000; background:#fff;  height:100%;  }

::-moz-selection { background: #e6e1b0; color:black }
::selection { background: #e6e1b0; color:black } 


p {margin-bottom: 2.2em;}
.container {margin:auto; width:92%; max-width:1900px; position: relative;}
.cont-offset {margin:auto; width:80%; max-width:1900px; margin-left: auto;
    margin-right: 0;}

/*nav*/
.topbar {height:auto; padding-top: 2em; width:92%; max-width: 1900px; height: 6em; margin:0 auto; position: relative;}
/* .logo {font-size:1.2em; font-weight: normal; margin-top:1em; letter-spacing: -0.02em; width: 3.5em; position: static; z-index: 2; transition: all 0.3s ease;}
.logo.right {right: 3.7%; left:auto; width: 4em; position:static}
.logo.off {opacity:0} */
.ig {float: left; width: 1.7em; transform: translateY(-1em); opacity: 0; animation: logo 0.5s ease forwards;}
@keyframes logo {
    0% {opacity:0; transform: translateY(-1em)}
    100% {opacity:1; transform: translateY(0)}
}
.nav-cont {    position:static; right: 0em; top:0; margin-left: 2.3em; margin-top: 0.18em; transform: translateY(-1em); opacity: 0; animation: nav-cont 0.5s 0.1s ease forwards;}
@keyframes nav-cont {
    0%{transform: translateY(-1em); opacity:0}
    100%{transform: translateY(0); opacity:1}
}
.nav-cont li {float:left; letter-spacing: 0.0em; margin: 0 0 0 3em; font-size: 0.8em; position: relative;}
.nav-cont li a {font-weight: 500;}
.nav-cont li a:hover {color:var(--c2)}
/* .nav-cont li:hover::after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 1.9em; background-color: #000;} */

/*menu mobile*/
#ham {transition:opacity 1s; display: none;}
.menu {width:100%; height:100%; background:#e3e3e3; position:fixed; top:0; left:0; text-align: center;  display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s,  visibility 0s 0.5s; z-index:100;  }
.open-menu { opacity: 1;  visibility: visible; transition: opacity 0.5s; }

nav {  font-size: 1.2em;
  color: #eff2f7;
  line-height: 1.6em; }
.nav-show {opacity:1; transform:translateY(0)}    
nav a{color:#eff2f7; transition:color 0.2s; cursor:pointer; font-weight:800}
nav a:hover{color:red}

.section1 {height:73.7em}
.s1-img1 {position: absolute; left: 46%; width: 41%; opacity: 0;  animation:slideUp 1.3s 0.3s ease-out forwards}
@keyframes slideUp {
    0%{transform: translateY(2%); opacity:0}
    100%{transform: translateY(0); opacity:1}
}
.intro-text {position: absolute; right:52%; z-index: 2;}
.intro-text h1 {text-align: right; margin-bottom: 0.5em; margin-bottom: 0.2em; 
    opacity: 0; transform: translateY(2em); animation:slideUp 0.8s 0.7s ease forwards}
.intro-text h3 { text-align: right; margin-right: 0.3em; 
    opacity: 0; transform: translateY(2em); animation:slideUp 1.1s 0.8s ease forwards}

.s1-img2 {margin-top: 36em; position: absolute; left: 33%; width: 25%; opacity: 0;  animation:slideUp 1.3s 1s ease-out forwards}
.s1-img3 {margin-top: 56em; position: absolute; left: 3%;width: 24%; opacity: 0;  animation:slideUp 1.3s 1s ease-out forwards}

.circle {position: absolute; top: -3.3em; z-index: 3; left: 79.9%; display: block; width: 11%; height: auto; animation: rotate 20s linear backwards infinite; /* mix-blend-mode: exclusion; */ }
@keyframes rotate {
0%   {transform: rotate(360deg) }
100% {transform: rotate(0deg)}
}

.big-title-super-cont {overflow: hidden;}
.big-title, .big-title2 { font-size:15em; position:relative; left:-57vw; white-space: nowrap; /* right: 181vw; */     font-family: "Jost", sans-serif;
    font-style: normal;

    font-weight: 400;
    margin-top: 0.2em;
    margin-bottom: 0.4em;
    line-height: 1em;
    /* animation: big-title 5s linear alternate infinite; */
}
    @keyframes big-title {
        0%   {transform: translateX(-200px) }
        100% {transform: translateX(500px)}
        }

.work1 {height:73.7em; margin-bottom: 15em;}
.w1-img1 {position: absolute; left: 57%; top: 0; width: 34%; z-index: 1;}
.w1-img2 {position: absolute; left: 21%; top: 35em; width: 39%; z-index: 0;}
.w1-img3 {position: absolute; left: 51%; top: 56em; width: 28%; z-index: 1;}
.w1-img4 {position: absolute; left: 8%; top: 52em; width: 17%;}
.w1-img5 {position: absolute; left: 92%; top: 34em; width: 9%;;}


.tag {font-size: 1.1em; font-weight: 500; position: relative;}
.tag::after {content:''; width:3em; height: 2px; position: absolute; left: 0.8em; bottom: -0.1em; background-color: #000;}

.section2 {width: 86%; margin: 8em 0 3em 10%; position: relative;}
.sponsors {position: absolute; left:21%; top:21; width: 27%; z-index:2; mix-blend-mode: multiply;}
.s2-img1-cont {width: 50%; margin-left: 40%; position: relative; transition: all 1s ease; transform: translateY(4em); opacity:0;}

.s2-img1 {width: 100%;}
.overtitle1 {position: absolute; top: 25%; left: -2em; width: 70%; text-transform: uppercase; font-size: 6em; line-height: 1.1em; font-weight: 400;}
.overtitle1:after {content: ''; width: 1.3em; height: 0.1em; position: absolute; left: 0; bottom: -0.3em; background-color: #000;}
.explorer-cont {width: 30%; margin-left: 20%; margin-top: -5em; overflow: hidden;}
    .s2-img2 {width: 100%; animation: explorer 8s ease-in-out alternate infinite;}
        @keyframes explorer {
            0% {transform: scale(1.9) translate(-20%, -20%)}
          100% {transform: scale(1.8) translate(20%, 20%)}
        }
.s2-img3 {width: 30%; margin-left: 40%; margin-top: -5em; position: relative;}


.grid2x2 {float:left; width:60%; padding-bottom: 3em; overflow: hidden; margin-bottom: 10em; }
.grid-item {
    position: relative;
    width: 48%;
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
    overflow: hidden;
    transition: all 1s ease; transform: translateY(4em); opacity:0;
}
.grid-item .square { width: 100%; display: block; }
.grid-item .grid-img {  position: absolute; top:0; left:0; object-fit: cover; display: block; width: 100%; height: 100%;}
      
.showoff {transform: translateY(0); opacity: 1;}
.section3 .container {overflow: auto;     display: flex;}
.section3 .grid-right{float: left;
width: 36%;
margin-left: 4%;}

.grid2x1 {width: 97%; overflow:hidden; margin-bottom: 3em;}
.grid2x1 .grid-item {width: 47%;}
.grid2x1 .grid-item:nth-child(2n+2) {margin-right: 0;}

.section4{height: 73.7em; position: relative; margin-top: 5em; margin-bottom: -3em;}
h2.work3-title1 {position: absolute; right: 63%; width: 33.8%; text-align: right;}
.w3-img1 {position: absolute; left: 41%; width: 45%;}
.w3-img2 {position: absolute; left: 22%; width: 29%; top: 49em; 
    -webkit-box-shadow: 21px 28px 53px 0px rgba(0,0,0,0.23);
    -moz-box-shadow: 21px 28px 53px 0px rgba(0,0,0,0.23);
    box-shadow: 21px 28px 53px 0px rgba(0,0,0,0.23);}
.w3-img3 {position: absolute;     left: 0px; width: 37%; top: 7em;}
h2.work3-title2 {position: absolute; left: 56%; width: 33.8%; top: 19.4em;}

section.makingof {margin-top: 10em;}
.makingof-title {text-align: center;}
.makingof-cont { display: grid; grid-template-columns: repeat(3, 1fr);  grid-template-rows: 1fr;  grid-column-gap: 1%;  margin-top: 3em;}
.makingof-cont img {width: 100%;}




.container-about {width: 70%; margin: 20em auto 0;}
.container-about .col1 {padding-left: 10%; box-sizing: border-box;}
.container-about .col1 img {width: 100%;}
.container-about .col2 {padding: 2em 0 0 10%; box-sizing: border-box;}
.container-about .col2 p {font-family: "Jost", sans-serif; font-style: normal; font-size: 1.5em; line-height: 1.5em;}







/*single*/
.single {margin-top:2em;}
.single-row {display: flex;}
.single-img { width: auto; height: 82vh; margin-bottom: 5em; float: left; display: block;}
.single-right {margin-top: 1.8em;
width: 30%;
float: left;
float: left;
padding-top: 13%;
padding-left: 3rem;
box-sizing: border-box;
overflow: auto;}
.logo-static {position: static;}
.single h1 {margin-bottom: 2em; text-transform: uppercase; font-weight: 300; position: relative; line-height: 1.1em; }
.single h1::after {content:''; width:3em; height: 2px; position: absolute; left: 0; bottom: -0.4em; background-color: #000;}
.single p {width: 60%;}
.details {overflow: auto; width: 80%;}
.details img {float:left; width: 46%; margin-right: 1vw;}