html,body{margin:0;padding:0;width:100%;}
html{font-size:62.5%;/*user's browser setting controls font-size, default is 16px (so now 24px = 2.4rem)*/}
body{font-family:'Aeonik', sans-serif;background-color:#F8F8F8;color:#141414;box-sizing:border-box;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
body.dark{background-color:#0E0E0E;color:#ECECEC;}
::selection{color:#ECECEC;background-color:#0E0E0E;}
.dark ::selection{color:#141414;background-color:#F8F8F8;}
body:not(.animates) *{transition:none!important;}

@font-face{font-family:'Aeonik';src:url('../Fonts/Aeonik-Regular.woff2') format('woff2'),url('../Fonts/Aeonik-Regular.woff') format('woff');font-weight:400;font-style:normal;font-stretch:normal;font-display:swap;}
@font-face{font-family:'Aeonik';src:url('../Fonts/Aeonik-Medium.woff2') format('woff2'),url('../Fonts/Aeonik-Medium.woff') format('woff');font-weight:500;font-style:normal;font-stretch:normal;font-display:swap;}
@font-face{font-family:'Aeonik';src:url('../Fonts/Aeonik-Bold.woff2') format('woff2'),url('../Fonts/Aeonik-Bold.woff') format('woff');font-weight:700;font-style:normal;font-stretch:normal;font-display:swap;}
@font-face{font-family:'Helvetica';src:url('../Fonts/Helvetica-Regular.woff2') format('woff2'),url('../Fonts/Helvetica-Regular.woff') format('woff');font-weight:400;font-style:normal;font-stretch:normal;font-display:swap;}

h1,h2,h3,h4,h5,h6,p,q{position:relative;margin:0;padding:0;font-weight:normal;font-style:normal;line-height:1.4;box-sizing:border-box;}
h1{font-size:6.4rem;font-weight:500;line-height:1;}
h2{font-size:4.0rem;font-weight:500;line-height:1.1;}
h3{font-size:1.6rem;font-weight:500;}
h3.large{font-size:3.6rem;font-weight:400;}
.m.plaintext h3{font-weight:700;}
h5{font-size:1.2rem;font-weight:500;}
h6{font-size:1.0rem;font-weight:400;}
p,ul{font-size:1.6rem;min-height:2.6rem;/*2.7*/line-height:1.6;font-weight:400;color:#242424;}
p.large{font-size:3.4rem;}
.m.plaintext p, .m.plaintext ul{font-size:2.0rem;color:#242424;line-height:1.4;}
.dark p{color:#D4D4D4;}
.dark .m.plaintext p, .dark .m.plaintext ul{color:#D4D4D4;}
ul{padding-left:2.0rem;}
li{font-size:inherit;padding-left:0;}
p a, li a{text-decoration:none;transition:opacity .3s ease-out;}
p a:hover, li a:hover{opacity:.5;}
.primary{font-size:1.2rem;font-weight:500;}
.m.plaintext a{white-space:pre-wrap;word-wrap: break-word;}

/*      Buttons     */
a{position:relative;box-sizing:border-box;color:inherit;text-decoration:none;line-height:inherit;}
a{-moz-user-drag:none;-moz-user-select:none;-webkit-user-select:none;-webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);touch-action:manipulation;/*removes delay*/}
.herogame, canvas{-moz-user-drag:none;-moz-user-select:none;-webkit-user-select:none;-webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
button{position:relative;box-sizing:border-box;margin:0;padding:0;border:none;background:none;color:inherit;font-family:inherit;cursor:pointer;letter-spacing:inherit;}
button:focus{outline:none;}
button{-moz-user-select:none;-webkit-user-select:none;-webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
.colorBtn{position:fixed;right:24px;bottom:24px;background:url("../Grx/eye.svg") no-repeat;width:56px;height:56px;border-radius:100%;z-index:10;transition:transform .2s ease-out;will-change:transform;}
.colorBtn:hover{transform:scale(1.05,1.05);}
.dark .colorBtn{background-image:url("../Grx/eye_dark.svg");}

@media all and (max-width:1000.5px) {
    h1{font-size:3.8rem;}
    h2{font-size:3.0rem;}
    h3{font-size:1.5rem;}
    p,ul{font-size:1.8rem;min-height:3.0rem;}
    p.large{font-size:2.0rem;}
    .primary{font-size:2.4rem;}   
}

/*      Media       */
img,video,.lazy{border:0;-moz-user-select:none;-webkit-user-select:none;-webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
img,video{pointer-events:none;}/*with smooth scroll this helps Firefox external mouse*/
.fade{opacity:0;transition:opacity .6s ease-in-out;}
.fade.in{opacity:1;}
.lazy{position:relative;}
.lazy:not(.hori) {width:100%;}
.lazy.hori{width:auto;height:64px;}
.lazy.hori .rel{width:auto;height:100%;}
.lazy.hori .rel .img{position:relative;width:auto;}
.lazy .rel{position:relative;width:100%;overflow:hidden;}
.lazy .rel .img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.0s ease-in-out;/*, transform 2.0s ease-out;*/}
.lazy .rel .img.instant.in{transition:none;opacity:1;}
.lazy.masked .rel .img{transform:translateX(-100%);transition:transform 1.8s cubic-bezier(0.25, 1, 0.5, 1), opacity .5s ease-out;;}
.lazy.masked .rel .img.in{transform:translateX(0%);}
.txtfade{opacity:0;transition:opacity 0s ease-in-out;}
.txtfade.in{opacity:1;transition-duration:1s;}
.slideiny{transform:translateY(40px);}
.slideiny.delayed{transform:translateY(60px);}
.slideiny.in,.slideiny.reverse.in{transform:translateY(0px);transition:transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) .1s, opacity .6s ease-out .1s;}
.para{will-change:transform;}

/* Header and menu */
header{position:fixed;left:0;top:0;width:100%;height:0;z-index:10;}
.headerbg{position:fixed;left:0;top:0;width:100%;height:100vh;background-color:#F8F8F8;pointer-events:none;z-index:9;opacity:0;transition:opacity .4s ease-out;}
.headerbg.open{opacity:.2;transition:opacity .7s ease-out;}
header .logo{position:absolute;left:24px;top:32px;width:122px;z-index:10;transition:transform .3s ease-out, opacity .3s ease-out;}
header .logo .dark{display:none;}
header .logo .rel{position:relative;width:100%;padding-top:27.05%;}
header .logo .rel img{position:absolute;left:0;top:0;width:100%;height:100%;}
header .logo:hover{transform:translateX(2px);}
.fadeLogo header:not(.open) .logo{opacity:0;}
.fadeLogo header.open.closing .logo{opacity:0;}
header nav{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;background-color:#F8F8F8;}
header nav .content{position:absolute;left:0;top:0;width:100%;height:100vh;}
header:not(.open) nav{pointer-events:none;visibility:hidden;}
header.open:not(.closing) nav{height:100vh;}
header.open.opening nav{transition:height .7s cubic-bezier(0.25, 1, 0.5, 1);}
header.closing nav{transition:height .5s cubic-bezier(0.25, 1, 0.5, 1);}
header nav a{font-size:1.2rem;}
header nav .mainmenu{position:absolute;left:0;top:150px;width:43.5%;height:calc(100% - 255px);box-sizing:border-box;padding:40px 55px;border-top:1px solid #141414;}
header nav .mainmenu{background-size:20px 20px;background-image:url("../Grx/menu_grid.svg");}
.primary{display:block;padding:5px 0;color:#616176;transition:color .2s ease-out;}
.mainmenu .primary{will-change:transform;}
.mainmenu .primary.selected, .mainmenu .primary:hover{color:#141414;}
.dark .mainmenu .primary.selected, .dark .mainmenu .primary:hover{color:#ECECEC;}
.mainmenu .primary:before{content:"";position:absolute;left:-30px;top:5px;width:10px;height:12px;background:url("../Grx/menu_arrow.svg") no-repeat;opacity:0;transform:translate(-8px,-4px) rotate(8deg);transition:opacity .3s ease-out, transform .4s cubic-bezier(0.25, 1, 0.5, 1);}
.dark .mainmenu .primary:before{background-image:url("../Grx/menu_arrow_dark.svg");}
.mainmenu .primary:hover:before, .mainmenu .primary.selected:before{opacity:1;transform:translate(0,0) rotate(0deg);}
.mainmenu .primary span{display:inline-block;width:20px;font-size:1rem;font-weight:700;text-align:left;padding-right:8px;vertical-align:bottom;}
.footer .primary{transition:color .2s ease-out;line-height:1;}
.footer .primary.selected{color:#141414;font-weight:700;}
.footer .primary:not(.selected):hover{color:#141414;}
.anchormenu{position:fixed;left:20px;top:90px;z-index:5;box-sizing:border-box;padding:40px 55px;transition:opacity .6s ease-in-out;will-change:opacity;}
.fadeLogo .anchormenu{opacity:0;pointer-events:none;transition:opacity .3s ease-out;}
header nav .tetromino{position:absolute;right:0;top:0;width:18.75%;height:calc(100% - 105px);box-sizing:border-box;border-left:1px solid #141414;opacity:0;transition:opacity .3s ease-out;overflow:hidden;}
header.open:not(.closing) nav .tetromino{opacity:1;}
header nav .links{position:absolute;right:18.75%;top:0;width:37.75%;height:150px;box-sizing:border-box;padding:24px 22px;font-size:0;border-left:1px solid #141414;opacity:0;transform:translateY(-10px);transition:opacity .3s ease-out, transform .8s cubic-bezier(0.25, 1, 0.5, 1);}
header nav .links h5{margin-bottom:10px;}
header nav .links a{font-size:1.4rem;line-height:1.4;display:block;}
header.open:not(.closing) nav .links{opacity:1;transform:translateY(0px);}
header nav .grx{position:absolute;right:18.75%;top:150px;width:37.75%;height:calc(100% - 255px);box-sizing:border-box;border-left:1px solid #141414;border-top:1px solid #141414;font-size:0;}
header nav .grx .graphic{position:relative;display:inline-block;vertical-align:top;width:50%;height:50%;margin:0;padding:0;overflow:hidden;}
header nav .grx .graphic > div{position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;}
header nav .grx .graphic.a > div{background-image:url("../Grx/1.svg");}
header nav .grx .graphic.b > div{background-image:url("../Grx/2.svg");}
header nav .grx .graphic.c > div{background-image:url("../Grx/3.svg");}
header nav .grx .graphic.d > div{background-image:url("../Grx/4.svg");}

/* Maintain aspect ratio of graphics when screen size allows it */
@media all and (min-aspect-ratio:16/9) and (min-width:1000.5px) {
    header nav .grx, header nav .links{width:calc(100vh - 255px);right:calc(18.75% + ((37.75%) - (100vh - 255px)));}
    header nav .tetromino{width:calc(18.75% + ((37.75%) - (100vh - 255px)));}
}
@media all and (max-aspect-ratio:16/9) and (min-width:1000.5px) {
    header nav .grx, header nav .links{width:calc(100vh - 255px);}
    header nav .mainmenu{width:calc(81.25% - (100vh - 255px));}
}

.footer{position:absolute;left:0;bottom:0;width:100%;height:105px;border-top:1px solid #141414;box-sizing:border-box;}
.footer a, .footer h3, .footer h6{position:absolute;bottom:45px;}
.footer a{font-size:1.0rem;}
.footer a:nth-of-type(1) {left:16px;}
.footer a:nth-of-type(2) {left:20%;}
.footer h3{left:43.5%;padding-left:22px;}
.footer h6{right:18.75%;padding-right:22px;}
.dark .footer .primary{color:#ECECEC;}

/* Arrow for social links */
header nav .links .block:nth-of-type(2) a, footer .block:nth-of-type(3) a{padding-left:18px;}
header nav .links .block:nth-of-type(2) a:before, footer .block:nth-of-type(3) a:before{content:"";position:absolute;left:0;top:50%;margin-top:-4px;background:url("../Grx/arrow_out.svg") no-repeat;width:8px;height:8px;background-size:100%;}
.dark header nav .links .block:nth-of-type(2) a:before, .dark footer .block:nth-of-type(3) a:before{background-image:url("../Grx/arrow_out_dark.svg");}
header nav .links a, footer a{transition:color .2s ease-out;}
header nav .links a:hover, footer a:hover{color:#D4D4D4;}

header .toggle{position:absolute;width:54px;height:54px;right:16px;top:20px;z-index:10;transition:all .3s ease-out;}
header .toggle span{position:relative;display:block;width:100%;height:2px;background-color:#141414;margin:0;transition:all .2s ease-out;/*will-change:transform;*/}
header .toggle span:nth-of-type(2) {transform:translateY(2px);transition:all .6s cubic-bezier(0.34, 1.56, 0.64, 1) .1s, background-color .2s ease-out;}
header .toggle span:nth-of-type(3) {transform:translateY(4px);}
header.open .toggle span:nth-of-type(2) {transform:translateX(80px);transition:all .3s cubic-bezier(0.25, 1, 0.5, 1);}
header.open .toggle span:nth-of-type(1) {transform:rotate(45deg);transition:all .5s cubic-bezier(0.25, 1, 0.5, 1);}
header.open .toggle span:nth-of-type(3) {transform:translateY(-4px) rotate(-45deg);transition:all .5s cubic-bezier(0.25, 1, 0.5, 1);}

.dark header nav{background-color:#0E0E0E;}
.dark header nav .mainmenu{background-image:url("../Grx/menu_grid_dark.svg");}
.dark header .toggle span{background-color:#F8F8F8;}
.dark header .logo img{display:none;}
.dark header .logo .dark{display:block;}
.dark header nav .mainmenu, .dark header nav .tetromino, .dark header nav .links, .dark header nav .grx, .dark .footer{border-color:#62627B;}

@media all and (min-width:1000.5px) {
    header nav .links .block:not(.mobile) {display:inline-block;vertical-align:top;width:50%;box-sizing:border-box;padding-right:20px;}
}
@media all and (max-width:1000.5px) {
    header .logo{left:24px;top:28px;width:92px;}
    header nav{overflow:auto;}
    header nav .mainmenu{position:relative;width:58%;top:auto;margin-top:80px;height:350px;padding:50px 5px 0 50px;}
    header nav .tetromino{width:42%;top:80px;height:350px;border-top:1px solid #141414;}
    header nav .links{position:relative;right:auto;width:100%;height:auto;border-top:1px solid #141414;border-left:0;padding:40px 24px;}
    header nav .links .block{display:inline-block;vertical-align:top;width:33%;box-sizing:border-box;}
    header nav .links .block:nth-of-type(2) {padding-left:20px;}
    header nav .links .block.mobile{text-align:right;}
    header nav .grx{position:relative;top:auto;width:100vw;height:100vw;right:auto;border-left:0;}
    header nav .footer{position:relative;bottom:auto;height:auto;}
    header nav .footer h3{position:relative;left:auto;bottom:auto;padding:30px 24px;}
    .anchormenu{display:none;}
    .mainmenu .primary{padding:10px 0;font-weight:400;}
    .mainmenu .primary.selected{font-weight:500;}
    .mainmenu .primary:before{left:-30px;top:14px;width:16px;height:18px;}
    .mainmenu .primary span{font-size:1.4rem;padding-right:5px;margin-bottom:3px;}
    header .toggle{right:24px;}
}
@media all and (max-width:340.5px) {
    header nav .mainmenu{padding:40px 5px 0 40px;}
}
@media (hover:hover) {
    header:not(.open) .toggle:hover span:nth-of-type(1) {transform:translateY(-2px);}
    header:not(.open) .toggle:hover span:nth-of-type(3) {transform:translateY(6px);}
    header .toggle:hover{transform:scale(1.05,1.05);}
 }

main{position:relative;width:100%;}
.page{position:relative;width:100%;box-sizing:border-box;font-size:0;min-height:100vh;padding-top:100px;}

/* Standard module */
.m{position:relative;width:100%;box-sizing:border-box;}
.m .l, .m .r{position:relative;display:inline-block;vertical-align:top;width:50%;box-sizing:border-box;}

.herogame{width:100%;height:calc(100vh - 100px);background:linear-gradient(to bottom, #F8F8F8 10%, #EEEEEE 90%);overflow:hidden;}
.dark .herogame{background:linear-gradient(to bottom, #0E0E0E 10%, #121212 90%);}
.herogame .herocanvas{position:absolute;left:0;top:0;width:100%;height:100%;}
.herogame .textBobble{position:absolute;left:0;top:0;width:195px;background-color:#0E0E0E;z-index:4;color:#ECECEC;font-size:1.6rem;line-height:1.6;border-radius:8px 8px 8px 0;box-sizing:border-box;padding:15px;opacity:0;transition:opacity .4s ease-out;pointer-events:none;}
.dark .herogame .textBobble{background-color:#F8F8F8;color: #141414}
.herogame .textBobble:after{content:"";position:absolute;left:-8px;bottom:-8px;box-sizing:border-box;border-color:#0E0E0E transparent transparent transparent;border-width:19px 10px 0px 10px;border-style:solid;z-index:-1;transform:rotate(45deg);}
.dark .herogame .textBobble:after{border-color:#F8F8F8 transparent transparent transparent;}
.herogame .textBobble.in{opacity:1;}
.herogame .intro{position:absolute;left:0;top:0;width:100%;height:100%;background:radial-gradient(rgba(248,248,248,.9) 0%, rgba(248,248,248,.5) 100%);z-index:2;transition:opacity .3s ease-out;}
.dark .herogame .intro{background:rgba(14,14,14,.9);}
.herogame .intro h2{position:absolute;left:50%;top:50%;text-align:center;width:320px;height:50px;margin:-75px 0 0 -160px;}
.herogame.on .intro{opacity:0;pointer-events:none;}

.m.plaintext{width:100%;max-width:862px;box-sizing:border-box;padding:90px 25px 340px 25px;margin:auto;}
.m.plaintext p{padding-top:80px;}
.m.plaintext ul{padding-top:20px;}
.m.plaintext p + p, .m.plaintext h2 + p, .m.plaintext ul + p{padding-top:28px;}
.m.plaintext h2{padding-top:100px;}
.m.plaintext h3{padding-top:50px;}
.m.plaintext h3 + p, .m.plaintext h3 + ul{padding-top:15px;}

.m.ethos{padding-top:260px;padding-bottom:160px;}
.m.ethos h1{font-size:12vw;font-weight:700;line-height:1.4;padding-left:18%;padding-right:20px;height:66vw;}
.m.ethos h1 span{font-family:'Helvetica';font-weight:400;display:block;overflow:hidden;position:sticky;position:-webkit-sticky;pointer-events:none;background-color:#F8F8F8;}
.m.ethos h1 span:before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background-color:#141414;}
.m.ethos h1 span:nth-of-type(1) {color:#141414;top:7vw;height:50vw;}
.m.ethos h1 span:nth-of-type(2) {color:#141414;padding-left:15vw;top:15vw;height:42vw;margin-top:-38vw;}
.m.ethos h1 span:nth-of-type(3) {color:#141414;padding-left:8vw;top:23vw;height:34vw;margin-top:-30vw;}
.m.ethos h1 span:nth-of-type(4) {color:#141414;top:31vw;height:26vw;margin-top:-22vw;}
.m.ethos h1 span:nth-of-type(5) {top:35vw;height:18vw;margin-top:-14vw;}
.m.ethos p{margin-left:42.5%;width:50%;margin-top:-10vw;}
.dark .m.ethos h1 span{background-color:#0E0E0E;}
.dark .m.ethos h1 span:before{background-color:#ECECEC;}
.dark .m.ethos h1 span:nth-of-type(1) {color:#ECECEC;}
.dark .m.ethos h1 span:nth-of-type(2) {color:#ECECEC;}
.dark .m.ethos h1 span:nth-of-type(3) {color:#ECECEC;}
.dark .m.ethos h1 span:nth-of-type(4) {color:#ECECEC;}

.m.studio{padding:160px 10% 160px 18%;background-color:#EEEEEE;font-size:0;}
.m.studio .lazy{display:inline-block;vertical-align:top;box-sizing:border-box;}
.m.studio .lazy:nth-of-type(1) {width:65%;padding-right:20px;}
.m.studio .lazy:nth-of-type(2) {width:35%;padding-left:5px;}
.m.studio .text{width:100%;max-width:570px;padding-top:50px;}
.m.studio .text h3{padding-bottom:30px;font-weight:700;}
.m.studio .text h2{padding-bottom:25px;}
.m.studio .text p{max-width:420px;color:#242424;}
.dark .m.studio {background-color:#121212;}
.dark .m.studio .text p{color:#D4D4D4;}

.m.projects{padding:140px 18% 200px 18%;text-align:right;}
.m.projects .text{box-sizing:border-box;width:420px;display:inline-block;text-align:left;}
.m.projects .text h3{padding-bottom:30px;font-weight:700;}
.m.projects .text h2{padding-bottom:25px;}
.m.projects .text p{color:#242424;}
.m.projects .images{position:relative;margin-top:-10px;}
.m.projects .images .lazy{position:relative;}
.m.projects .images .lazy:nth-of-type(1) {width:22.8%;}
.m.projects .images .lazy:nth-of-type(2) {width:60%;margin-left:12%;margin-top:-10vw;z-index:2;}
.m.projects .images .lazy:nth-of-type(3) {width:35%;margin-left:65%;margin-top:-15vw;}
.dark .m.projects{background-color:#0E0E0E;}
.dark .m.projects .text p{color:#D4D4D4;}

footer{position:relative;width:100%;background-color:#EEEEEE;box-sizing:border-box;padding:28px 15px;height:100vh;min-height:700px;max-height:900px;overflow:hidden;font-size:0;text-align:center;}
footer .block{position:relative;display:inline-block;vertical-align:top;width:33%;max-width:200px;box-sizing:border-box;padding-right:25px;z-index:2;text-align:left;}
footer .block:nth-of-type(1) a{width:80px;height:80px;background-size:80px 80px;background-image:url("/Assets/Grx/logomark.svg");}
footer h5{margin-bottom:10px;}
footer a{font-size:1.4rem;line-height:1.4;display:block;}
footer .game{position:absolute;left:0;top:0;width:100%;height:calc(100% - 105px);}

.dark footer{background-color:#121212;}
.dark footer .block:nth-of-type(1) a{background-image:url("/Assets/Grx/logomark_dark.svg");}
.dark footer .footer .primary, .dark footer .footer h6{color:#D4D4D4;}

/* Mobile (from 1000.5 and down) */
@media all and (max-width:1000.5px) {
    .desktop{display:none;}

    .page{padding-top:80px;}

    .herogame{height:calc(100vh - 104px);}
    .herogame .textBobble{font-size:1.4rem;left:-30px;border-radius:8px;}
    .herogame .textBobble:after{transform:rotate(0deg);left:16px;bottom:-16px;}

    .m.plaintext{padding:80px 24px 200px 24px;}
    .m.plaintext p{padding-top:60px;}

    .m.ethos{padding-top:160px;padding-bottom:80px;}
    .m.ethos h1{font-size:16vw;padding-left:24px;padding-right:24px;height:110vw;line-height:1.5}
    .m.ethos h1 span:nth-of-type(1) {color:#141414;top:calc(10.5vw + 15vh);height:90vw;}
    .m.ethos h1 span:nth-of-type(1):before{display:none;}
    .m.ethos h1 span:nth-of-type(2) {color:#141414;padding-left:0;top:calc(25.5vw + 13.5vh);height:78vw;margin-top:-73vw;}
    .m.ethos h1 span:nth-of-type(3) {color:#141414;padding-left:14vw;top:calc(40.5vw + 12vh);height:66vw;margin-top:-61vw;}
    .m.ethos h1 span:nth-of-type(4) {color:#141414;top:calc(55.5vw + 10.5vh);height:54vw;margin-top:-49vw;}
    .m.ethos h1 span:nth-of-type(5) {top:calc(70.5vw + 9.5vh);height:42vw;margin-top:-37vw;}
    .m.ethos p{margin-left:0;width:100%;padding:25px 24px 0px 24px;margin-top:-30vw;}

    .m.studio{padding:100px 24px 180px 24px;}
    .m.studio .images{display:table;width:100%;}
    .m.studio .lazy:nth-of-type(1) {display:table-footer-group;width:100%;padding-right:0;}
    .m.studio .lazy:nth-of-type(2) {width:45%;margin-left:55%;margin-bottom:24px;}
    .m.studio .text{padding-top:40px;}
    .m.studio .text h3{padding-bottom:20px;}
    
    .m.projects{padding:140px 24px;}
    .m.projects .text{padding-left:0;width:100%;}
    .m.projects .images{margin-top:80px;}
    .m.projects .images .lazy:nth-of-type(2) {margin-top:-5vw;}
    .m.projects .images .lazy:nth-of-type(3) {margin-top:-25vw;}

    footer{padding:24px 24px 0 24px;text-align:left;}
    footer .block{padding-bottom:200px;/*hitarea*/padding-right:15px;}
    footer .block:first-of-type{display:block;margin-bottom:32px;padding-bottom:0;}
    footer .block:nth-of-type(1) a{width:64px;height:64px;background-size:64px 64px;}
    footer .block:nth-of-type(3) {padding-right:0;padding-left:15px;width:30%;}
    footer .block:nth-of-type(2), footer .block:nth-of-type(4) {width:35%;}
    footer .block.mobile{text-align:right;padding-right:0;}
    .footer h3{left:0;padding-left:24px;bottom:30px;}
    .footerarrow{position:relative;z-index:3;top:-160px;background:url("../Grx/footer_arrow.svg") no-repeat;width:16px;height:43px;}
    .dark .footerarrow{background-image:url("../Grx/footer_arrow_dark.svg");}
}

/* Desktop only */
@media all and (min-width:1000.5px) {
    .mobile, footer .block.mobile{display:none;}
}

.pageTransition{position:fixed;pointer-events:none;z-index:910;width:100vw;height:100vh;background-color:#F8F8F8;left:0;top:0;transition:opacity .6s ease-out;will-change:opacity;}
.pageTransition.loaded{opacity:0;}
.pageTransition.in{opacity:1;transition:opacity .3s ease-out;}
/*Used for mobile measurement of vh unit */
.vh{position:absolute;z-index:-1;top:0;left:-1px;width:1px;height:100vh;}