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:'SuisseIntl', sans-serif;background:#FFF;color:#000;box-sizing:border-box;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;/*text-rendering:optimizeSpeed;*/}
::selection{background:#acacac;color:#FFF;}
body:not(.animates) *{transition:none!important;}
::-webkit-scrollbar{width:0!important;height:0!important;display:none;}

/*@font-face{font-family:'FontName';src:url('../Fonts/FontName.woff2') format('woff2'),url('../Fonts/FontName.woff') format('woff');font-weight:normal;font-style:normal;font-stretch:normal;font-display:swap;}*/
@font-face{font-family:'SuisseIntl';src:url('../Fonts/SuisseIntl-Medium-WebS.woff2') format('woff2'),url('../Fonts/SuisseIntl-Medium-WebS.woff') format('woff');font-weight:500;font-style:normal;font-stretch:normal;font-display:swap;}

:root{
    /*Easing*/
    --sine:cubic-bezier(0.39, 0.575, 0.565, 1);
    --quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);/*cubic-bezier(0.5, 1, 0.89, 1);*/
    --quad-in-out:cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --cubic:cubic-bezier(0.215, 0.61, 0.355, 1);/*cubic-bezier(0.33, 1, 0.68, 1)*/
    --cubic-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);
    /*--quart:cubic-bezier(0.165, 0.84, 0.44, 1);*/
    --quart:cubic-bezier(0.25, 1, 0.5, 1);
    --quart-in-out:cubic-bezier(0.77, 0, 0.175, 1);
    --quint:cubic-bezier(0.23, 1, 0.32, 1);
    --expo:cubic-bezier(0.16, 1, 0.3, 1);
    /*--expo:cubic-bezier(0.19, 1, 0.22, 1);*/
    --back:cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --delay:0s;
}


/* Font settings - medium/500, semibold/600 and bold/700 */
h1,h2,h3,h4,h5,h6,p,q{position:relative;margin:0;padding:0;font-weight:500;font-style:normal;line-height:1;box-sizing:border-box;}
h1{font-size:3.6rem;line-height:1;}
h2{font-size:1.6rem;line-height:1;}
p,ol,ul{font-size:1.6rem;line-height:1.2;min-height:1.6rem;}
p a{transition:color .2s ease;}
/*q{display:block;font-size:1.6rem;line-height:1.5;min-height:2.4rem;}*/
ul{box-sizing:border-box;margin:0;padding:0 0 0 20px;}
li{position:relative;box-sizing:border-box;}
input, textarea, select{font-family:'SuisseIntl';font-size:inherit;line-height:normal;appearance:none;background:none;display:block;color:inherit;box-sizing:border-box;padding:0;margin:0;outline:0;border:0;}

@media all and (max-width:1000.5px){
    h1{font-size:2.0rem;line-height:1.1;}
    h2{font-size:1.1rem;}
    p,ol,ul{font-size:1.3rem;line-height:1.2;min-height:1.4rem;}
}

/*      Buttons     */
a, button{position:relative;display:inline-block;box-sizing:border-box;margin:0;padding:0;text-decoration:none;border:none;background:none;color:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;font-weight:inherit;-moz-user-select:none;-webkit-user-select:none;-webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);cursor:pointer;touch-action:manipulation;/*removes delay*/}
button:focus{outline:none;}

/*      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);}
picture,img,.lazy svg,video:not(.native-controls){pointer-events:none;}/*with smooth scroll this helps Firefox and Safari with external mouse*/
body.scrolling .lazy .video iframe{pointer-events:none;}/*with smooth scrolling this helps scroll continuously*/
picture, video{width:100%;display:block;height:auto;box-sizing:border-box;padding:0;margin:0;overflow:hidden;}
picture img{position:relative;display:block;width:100%;height:auto;}
.lazy{position:relative;}
.lazy.video:before{content:"";display:block;padding-top:calc(var(--aspect) * 1%);width:100%;pointer-events:none;}/*fix aspect ratio for videos*/
.lazy .video, .lazy .video iframe, .lazy > svg{position:absolute;left:0;top:0;width:100%;height:100%;}
.lazy .video{background:#FFF;}/*needed for mux video*/
.m.gallery .overview .media .lazy .video{background:transparent;}
/* Thumbnail (not "poster"!) with play button */
.lazy.video .load-ui{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;z-index:2;display:flex;text-align:center;}
.lazy.video .load-ui .lazy{position:absolute;left:0;top:0;width:100%;height:100%;}
.lazy.video .load-ui .lazy video, .lazy.video .load-ui .lazy img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
/*.lazy.video .load-ui .play-btn{margin:auto;padding:20px;font-size:2.4rem;background-color:#333;color:#FFF;}*/
.lazy.video .load-ui .play-btn{margin:auto;width:64px;height:74px;border-style:solid;border-width:37px 0px 37px 64px;border-color:transparent transparent transparent #FFF;}
.lazy.video.fade-ui .load-ui{opacity:0;transition:opacity .4s ease-in-out .1s;pointer-events:none;}
.lazy.video.hide-ui .load-ui{display:none;}

/* Animations */
.fade{opacity:0;}
.fade.in{opacity:1;transition:opacity .8s ease-in-out var(--delay);}

header{position:fixed;left:0;top:0;width:100%;height:0;z-index:11;}
header .logo{position:absolute;left:30px;top:20px;}
header .menu{position:absolute;right:30px;top:20px;transition:opacity .3s ease;}
header .logo, .primary{font-size:1.1rem;padding:10px 0;line-height:1;text-transform:uppercase;transition:color .2s ease;}
header .primary span{display:inline-block;vertical-align:top;margin-top:-.5px;}
.primary + .primary{margin-left:6px;}
.primary:not(.selected){color:#acacac;}
body.at-gallery header .menu{pointer-events:none;opacity:0;}
body.at-fullscreen header{display:none;}
@media (hover:hover){
    .primary:not(.selected):hover{color:#000;}
    header .logo:hover{color:#acacac;}
    body.at-fullscreen .m.gallery .medias .lazy.video{background:#000;}
    body.at-fullscreen .m.gallery .medias .lazy.video .controls{mix-blend-mode:difference;filter:invert(100%);}
    body.at-fullscreen .m.gallery .medias .lazy.video .controls .primary, body.at-fullscreen .m.gallery .medias .lazy.video .controls .primary.time{color:#000;}
    body.at-fullscreen .m.gallery .medias .lazy.video .controls .primary:hover{color:#222;}
}

main{position:relative;width:100%;}
.page{position:relative;width:100%;box-sizing:border-box;font-size:0;/*padding-top:40px;*/}
.page.removing{position:fixed;left:0;top:0;z-index:5;}

/* Standard module */
.m{position:relative;width:100%;box-sizing:border-box;font-size:0;}
.m div{position:relative;box-sizing:border-box;}
.m .l, .m .r{position:relative;display:inline-block;vertical-align:top;width:50%;}
.canoverflow{overscroll-behavior:contain;}

/* Modules */

.m.intro{position:fixed;left:0;top:0;width:100%;height:100%;background:#FFF;color:#000;display:flex;text-align:center;z-index:12;}
.m.intro .c{margin:auto;text-transform:uppercase;}
.m.intro .fade.in{opacity:1;transition:opacity 1.2s ease-in-out var(--delay);}
.m.intro.hidden{display:none;}
.m.intro.anim-out{opacity:0;transition:opacity .8s ease-in-out 2s;}

.m.work-header{position:fixed;left:26%;top:20px;width:calc(75vw - 240px);z-index:5;}
.m.work-header .l{display:inline-block;vertical-align:top;width:25vw;}
.m.work-header .r{display:inline-block;vertical-align:top;white-space:nowrap;}
.m.work-header .primary.active{color:#000;}

.m.work-category{padding:70px 30px;}
.m.work-category .el .media{width:100%;padding-top:128.28%;margin-bottom:12px;transition:opacity .3s ease;}
.m.work-category .el .lazy{position:absolute;left:0;top:0;width:100%;height:100%;}
.m.work-category .el .lazy video{height:auto;object-fit:contain;object-position:left top;}
.m.work-category .el p{font-size:1.1rem;line-height:1;min-height:unset;text-transform:uppercase;}
.m.work-category .el p + p{color:#acacac;padding-top:2px;}
.m.work-category .el p.hover{position:absolute;right:0;top:0;padding-top:0;opacity:0;transition:opacity .3s ease;color:#000;}
.m.work-category .el:hover .media{opacity:.8;transition:opacity .3s ease;}
.m.work-category .el:hover p.hover{opacity:1;transition:opacity .3s ease;}

.fade-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#FFF;pointer-events:none;z-index:2;transition:opacity .2s ease;}
.fade-overlay.out{opacity:0;pointer-events:none;transition:opacity .8s ease-in-out;}

.m.about{padding:90px 30px 120px 30px;min-height:100vh;min-height:100svh;}
.m.about .inner{padding-left:calc(100% - 545px);}
.m.about .credits{position:absolute;right:0;bottom:30px;width:575px;font-size:0;padding-right:30px;}
.m.about .contact{padding-top:30px;font-size:0;}
.m.about .contact p, .m.about .credits p{display:inline-block;vertical-align:top;width:50%;}
.m.about .credits p{font-size:1.1rem;}
.m.about .contact p:nth-of-type(2n), .m.about .credits p:nth-of-type(2n){text-align:right;color:#acacac;}
.m.about p a:hover{color:#000;}

.m.gallery{position:absolute;left:0;top:0;width:100%;height:100%;min-height:100vh;min-height:100svh;background-color:#FFF;z-index:9;}
.m.gallery.fixed{position:fixed;opacity:0;transition:opacity .3s ease;}
.m.gallery.fixed.at-overview .overview{overflow:auto;}
.m.gallery.fixed:not(.on){display:none;}
.m.gallery.fixed.on.in{opacity:1;}
.m.gallery .nav{position:absolute;left:0;top:20px;width:100%;padding:0 26%;white-space:nowrap;font-size:0;z-index:4;user-select:none;}
body.at-fullscreen .m.gallery .nav{display:none;}
.m.gallery .nav .name{display:inline-block;vertical-align:top;width:50%;text-transform:uppercase;padding:10px 0;cursor:default;}
.m.gallery .nav .name p{display:inline-block;vertical-align:top;font-size:1.1rem;line-height:1;}
.m.gallery .nav .name p + p{color:#acacac;padding-left:4px;}
.m.gallery .nav .ralign{display:inline-block;vertical-align:top;width:50%;padding:10px 0;}
.m.gallery .nav .ralign .counter{text-align:right;cursor:default;}
.m.gallery .nav .ralign .counter p{font-size:1.1rem;line-height:1;}
.m.gallery .nav .ralign .counter span:first-of-type{color:#acacac;padding-right:1px;}
.m.gallery .nav .close-btn.desktop{position:absolute;right:20px;top:0;padding-right:10px;}
.m.gallery .medias{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:0 15%;font-size:0;}
.m.gallery .medias::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:#FFF;z-index:1;opacity:0;transition:opacity .4s ease;pointer-events:none;}
.m.gallery.at-overview .medias::after{opacity:.9;}
.m.gallery .medias .media{display:flex;margin:auto;}
.m.gallery .medias .media .lazy{width:70vw;display:inline-block;vertical-align:top;}
.m.gallery .medias .media.center .lazy{vertical-align:middle;align-self:center;}
.m.gallery .medias .media.bottom .lazy{vertical-align:bottom;align-self:end;}
.m.gallery .medias .media.pair .lazy{width:calc((70vw - 30px) / 2);}
.m.gallery .medias .media .lazy + .lazy{margin-left:30px;}
.m.gallery .medias .media:not(.on){display:none;}
.m.gallery .medias .media.video{max-height:70%;}/*videos are always single, so they can scale normally with css*/
body.at-fullscreen .m.gallery .medias .media.video{max-height:100%;}
body.at-fullscreen .m.gallery .medias .media.video video{width:100%;height:100%;object-fit:contain;}
.m.gallery .medias .controls{position:absolute;left:50%;bottom:-30px;color:#000;transform:translateX(-50%);}
.m.gallery .medias .controls .primary{display:inline-block;vertical-align:top;}
.m.gallery .medias .controls .primary.time{color:#000;width:40px;}
body.at-fullscreen .m.gallery .medias .controls{left:30px;bottom:0;width:100%;transform:none;z-index:10;}
body.at-fullscreen .m.gallery .medias .controls .primary.time{position:absolute;right:30px;bottom:0;}
.m.gallery.at-overview .medias{filter:grayscale(100%);transition:filter 0s ease .2s;}
/* Preload */
.m.gallery .medias .media:not(.on).preload{position:absolute;top:-2px;display:block;width:1px;height:1px;visibility:hidden;pointer-events:none;}
.m.gallery .medias .media:not(.on).preload .lazy{width:1px;}
.m.gallery .medias .media:not(.on).preload .controls{display:none;}
.m.gallery .medias .media:not(.on).preload .lazy.video.in{display:none;}

.m.gallery .overview{position:fixed;left:0;top:0;width:100%;height:100%;z-index:3;padding:120px;display:flex;mix-blend-mode:multiply;opacity:0;transition:opacity .2s ease;}
.m.gallery:not(.at-overview) .overview:not(.out){display:none;}
.m.gallery.at-overview .overview.in{opacity:1;transition:opacity .4s ease;}
.m.gallery.at-overview .overview.in.out{opacity:0;}
.m.gallery .overview .inner{margin:auto;text-align:center;max-width:1280px;}
.m.gallery .overview .media{display:inline-flex;vertical-align:top;width:120px;margin:25px;cursor:pointer;}
.m.gallery .overview .media .lazy{width:100%;}
.m.gallery .overview .media .lazy + .lazy{margin-left:5px;}
.m.gallery .overview .media.pair .lazy{display:inline-block;vertical-align:top;width:50%;}
.m.gallery .overview .media.pair.center .lazy{vertical-align:middle;align-self:center;}
.m.gallery .overview .media.pair.bottom .lazy{vertical-align:bottom;align-self:end;}

@media all and (min-width:1000.5px) and (max-width:1200.5px){
    .m.work-header{left:25%;}
    .m.work-header .l{width:35%;}
    .m.work-header .r{width:65%;text-align:right;}
    .m.gallery .nav{padding:0 25%;}
}

.page-transition{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#fdfbfb;pointer-events:none;z-index:10;transition:opacity .8s ease-in-out;will-change:opacity;}
.page-transition.loaded{opacity:0;}
.page-transition.in{opacity:1;transition:opacity .2s ease;}
.page-transition.fast{transition:none;}

.vh{position:absolute;z-index:-1;top:0;left:-1px;width:1px;height:100vh;}/*Used for mobile measurement of vh (svh for smallest viewport height, lvh for largest - similar to just vh) */

/* Mobile only */
@media all and (max-width:1000.5px){
    .desktop{display:none;}
    .lazy.video:before{padding-top:calc(var(--aspectm, var(--aspect)) * 1%);}

    header.bottom-align{top:auto;bottom:40px;}
    header .logo{left:15px;top:5px;}
    header .menu{right:15px;top:5px;}
    header .logo, .primary{font-size:1.1rem;}

    .m .l, .m .r{display:block;width:100%;}

    .carousel[data-mobilenative="true"] .inner{overflow:auto;}
    .m.carousel .el{height:25vh;}

    .m.work-category{padding:90px 0 90px 0;}    
    .m.work-category:not(.desktop) + .m.work-category{padding-top:0;margin-top:-40px;}
    .m.work-category h2{text-transform:uppercase;color:#acacac;margin-bottom:30px;}
    .m.work-category .inner{width:100%;overflow:auto;white-space:nowrap;padding:0 0 15px 15px;}
    .m.work-category .inner::-webkit-scrollbar{width:0!important;height:0!important;display:none;}
    .m.work-category .title{padding:0 15px;}
    .m.work-category .el{display:inline-block;vertical-align:top;white-space:normal;width:43vw;max-width:300px;margin-right:15px;}
    .m.work-category .el p{font-size:1.1rem;}
    .m.work-category div.el{display:none;}

    .m.about{padding:90px 15px;min-height:100vh;min-height:100svh;}
    .m.about .inner{padding-left:0;}
    .m.about .credits{right:0;bottom:15px;width:100%;padding:0 15px;}
    .m.about .contact{padding-top:30px;font-size:0;}
    .m.about .contact p, .m.about .credits p{display:inline-block;vertical-align:top;width:40%;}
    .m.about .credits p{font-size:1.1rem;}
    .m.about .contact p:nth-of-type(2n), .m.about .credits p:nth-of-type(2n){text-align:left;width:60%;}

    /*body.at-gallery .page{position:fixed;left:0;top:0;height:100%;overflow:hidden;}*/
    .m.gallery.fixed{min-height:unset;/*max-height:100vh;/*max-height:100svh;*/}
    .m.gallery.fixed.at-overview .overview{max-height:calc(100% - 65px);}
    .m.gallery.homepage{position:fixed;}
    .m.gallery .nav{position:absolute;left:auto;right:0;top:auto;bottom:10px;width:100%;padding:0 15px;}
    .m.gallery.homepage .nav{position:relative;left:auto;top:auto;bottom:0;}
    .m.gallery .nav .name{width:45%;display:inline-block;vertical-align:top;}
    .m.gallery .nav .ralign{width:auto;float:right;/*display:inline-block;vertical-align:top;*/padding:0;}
    .m.gallery .nav .ralign .counter{display:inline-block;vertical-align:top;padding:10px 0;/*width:calc((100% - 40px) / 3);*/}
    .m.gallery .nav .ralign .primary{display:inline-block;vertical-align:top;margin-left:20px;/*width:calc((100% - 40px) / 3);*/text-align:right;}
    
    body.at-gallery header .logo{pointer-events:none;opacity:0;}

    .m.gallery .medias{padding:15px;}
    .m.gallery.homepage .medias{position:relative;height:auto;padding-bottom:0px;}
    .m.gallery .video{margin-bottom:30px;}
    .m.gallery .video.no-margin{margin-bottom:0;}
    body.at-fullscreen .m.gallery .medias video{width:100%;height:100%;object-fit:contain;}
    .m.gallery .video .controls{position:absolute;left:0;bottom:-30px;transform:none;}
    body.at-fullscreen .m.gallery .medias .controls{left:15px;bottom:0;width:100%;transform:none;z-index:10;}
    body.at-fullscreen .m.gallery .medias .controls .primary.time{position:absolute;right:15px;bottom:0;}
    .m.gallery .controls.in-name{height:0;width:auto;}
    .m.gallery .controls.in-name{display:inline-block;vertical-align:top;width:auto;margin-top:-10px;}
    .m.gallery .controls.in-name .primary:nth-of-type(1), .m.gallery .controls.in-name .primary:nth-of-type(2), .m.gallery .controls.in-name .primary.time{display:none;}

    .m.gallery .medias .lazy{width:100%;}
    .m.gallery .medias .lazy:not(.on){display:none;}
    /* Preload */
    .m.gallery .medias .lazy:not(.on).preload{position:absolute;top:0;display:block;width:1px;height:1px;visibility:hidden;pointer-events:none;}
    .m.gallery .medias .lazy:not(.on).preload.video{top:-2px;}
    .m.gallery .medias .lazy:not(.on).preload .lazy{width:1px;}
    .m.gallery .medias .lazy:not(.on).preload .lazy.video.in{display:none;}
    .m.gallery .medias .lazy:not(.on).preload .controls{display:none;}

    .m.gallery .overview{padding:15px 12px;}
    .m.gallery .overview .inner{margin:0;text-align:left;}
    .m.gallery .overview .lazy{display:inline-block;vertical-align:top;width:20%;padding:0 3px;margin-bottom:25px;pointer-events:all;}    
}
@media all and (max-width:1000.5px) and (orientation:landscape){

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

    .m.work-category:not(.on){display:none;}
    .m.work-category .inner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:90px 25px;}

    .m.gallery .medias.desktop{display:flex;}
    .m.gallery .nav .ralign .counter{position:absolute;right:0;top:10px;width:50%;}
    .m.gallery .nav .ralign .overview-btn{position:absolute;left:0;top:0;text-align:left;}

    /* Cursor */
    body.browse-right .m.gallery{cursor:e-resize;}
    body.browse-left .m.gallery{cursor:w-resize;}
}