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

/* ------- webfonts ------- */

@font-face {
    font-family: 'clearface';
    src: url('fonts/ClearfaceStd-Regular.eot');
    src: url('fonts/ClearfaceStd-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/ClearfaceStd-Regular.woff2') format('woff2'),
        url('fonts/ClearfaceStd-Regular.woff') format('woff'),
        url('fonts/ClearfaceStd-Regular.ttf') format('truetype'),
        url('fonts/ClearfaceStd-Regular.svg#ClearfaceStd-Regular') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'clearface';
    src: url('fonts/Clearface-ItalicT.eot');
    src: url('fonts/Clearface-ItalicT.eot?#iefix') format('embedded-opentype'),
        url('fonts/Clearface-ItalicT.woff2') format('woff2'),
        url('fonts/Clearface-ItalicT.woff') format('woff'),
        url('fonts/Clearface-ItalicT.ttf') format('truetype'),
        url('fonts/Clearface-ItalicT.svg#Clearface-ItalicT.') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

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

*{outline:none;margin:0;padding:0;font-family:'clearface';box-sizing:border-box;font-size:inherit;line-height:inherit;color:var(--color-primary)}
body{font-weight:400;-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;overflow-x:hidden;position:relative;margin:0 auto;background-color:var(--color-secondary);font-size:24px;line-height:28px}
body.scroll-disabled{overflow:hidden!important;overflow-x:hidden;-webkit-overflow-scrolling:touch}

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

a{cursor:pointer;text-decoration:none;color:inherit;font-size:inherit;display:block}
a:not(.btn-modal, .tag, .not-hover):hover{opacity:.5}
.btn-modal:hover{cursor:pointer}
li{list-style:none}
img{width:100%;display:block}
svg{width:100%;display:block}
video{position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:1;opacity:0;transition:opacity .3s ease}
video.hovered{opacity:1}
video.hovered ~ img{opacity:0!important}

.svg-fill{fill:var(--color-primary);stroke-width:0px}
.svg-fill-secondary{fill:var(--color-secondary);stroke-width:0px}
.svg-stroke{fill:none;stroke:var(--color-primary);stroke-miterlimit:10;stroke-width:2px}

.fs-s{font-size:14px;line-height:18px}
.fs-m{font-size:36px;line-height:40px}
.fs-l{font-size:46px;line-height:50px}
.fs-xl{font-size:56px;line-height:64px}
.fs-xxl{font-size:84px;line-height:90px}
.fs-italic{font-style:italic}
.line-through{text-decoration:line-through}
.display-block{display:block}
.display-inline{display:inline}
.ta-left{text-align:left}
.ta-right{text-align:right}
.ta-center{text-align:center}
.background-primary{background-color:var(--color-primary)}
.background-secondary{background-color:var(--color-secondary)}
.color-primary{color:var(--color-primary)}
.color-secondary{color:var(--color-secondary)}
.color-white{color:#FFF}
.no-padding{padding:0!important}
.centered{margin:0 auto}
.margin-bottom-10{margin-bottom:10px!important}
.margin-bottom-20{margin-bottom:20px!important}
.margin-bottom-60{margin-bottom:60px!important}
.margin-top-20{margin-top:20px!important}
.padding-bottom-60{padding-bottom:60px!important}
.padding-top-60{padding-top:60px!important}
.border-top{border-top:1px solid}
.border-bottom{border-bottom:1px solid}

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

.p-columns-2{column-count:2;column-gap:60px}

.head{width:160px;margin:40px auto;position:relative}
.head .overlay{position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;z-index:1;mix-blend-mode:hue}

.tag{padding:12px 30px 10px 30px;border:1px solid;border-radius:30px}
.tag.fs-s{padding:6px 20px 4px 20px}
.tag:hover{opacity:1;border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-secondary)}

.flex{display:flex;gap:20px;flex-direction:row;flex-wrap:wrap}
.justify-center{justify-content:center}
.justify-around{justify-content:space-around}
.gap-10{gap:10px}

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

.grid .c-1{grid-column-end:span 1}
.grid .c-1  > *{grid-column-end:span 1}
.grid .c-2{grid-column-end:span 2}
.grid .c-2  > *{grid-column-end:span 2}
.grid .c-3{grid-column-end:span 3}
.grid .c-3  > *{grid-column-end:span 3}
.grid .c-4{grid-column-end:span 4}
.grid .c-4  > *{grid-column-end:span 4}
.grid .c-5{grid-column-end:span 5}
.grid .c-5 > *{grid-column-end:span 5}
.grid .c-6{grid-column-end:span 6}
.grid .c-6 > *{grid-column-end:span 6}
.grid .c-5{grid-column-end:span 7}
.grid .c-5 > *{grid-column-end:span 7}

.grid .p-2{grid-column-start:2}
.grid .p-3{grid-column-start:3}
.grid .p-4{grid-column-start:4}
.grid .p-5{grid-column-start:5}
.grid .p-6{grid-column-start:6}
.grid .p-7{grid-column-start:7}
.grid .p-8{grid-column-start:8}

ul.grid-masonry{opacity:0;display:table;width:calc(100% - 120px);margin:0 60px}
ul.grid-masonry.loaded{opacity:1}
ul.grid-masonry > li{float:left;position:relative;margin-bottom:60px}
ul.grid-masonry .grid-sizer{visibility:hidden;opacity:0;margin:0}
ul.cc > li{width:calc((100% - 40px)/2);float:left}

/* .lazy-img */
.thumb{background-color:transparent;position:relative}
.aspect{opacity:0;visibility:hidden}
.lazy{opacity:0;visibility:hidden;transition:opacity .3s ease, transform .3s ease;transform:translateY(10px)}
.lazy.slow{transition:opacity 1s ease .3s, transform 1s ease .3s}
.lazy.visible{opacity:1;visibility:visible;transform:translateY(0)}
.lazy-img-wrapper{position:relative;overflow:hidden;background-color:var(--color-secondary);transition:background .2s ease}
.lazy-img-wrapper .img{position:absolute;top:0;left:0;bottom:0;width:100%;display:none;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{display:block}
.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-info{margin-top:5px}

/* modal */
body[modal-opened="video-modal"] .modal.video-modal{top:0}
body[modal-opened="video-modal"] .modal.video-modal .content{opacity:1}

.modal{background-color:#000;width:100vw;height:100vh;overflow:auto;position:fixed;left:0;z-index:80;top:100vh;transition:top .6s cubic-bezier(.7, 0, .3, 1)}
.modal .close-modal{position:absolute;top:35px;right:60px;z-index:81;width:40px;height:40px}
.modal .title{position:absolute;top:40px;left:50%;transform:translateX(-50%)}
.modal .content{width:100%;height:100%;position:relative;opacity:0;transition:opacity .6s cubic-bezier(.7, 0, .3, 1);transition-delay:.6s}
.modal .content .overlay-button{position:absolute;width:100%;height:calc(100% - 80px);z-index:1}
.modal .content .video-wrapper{opacity:1;transition:opacity .6s cubic-bezier(.7, 0, .3, 1)}
.modal .content .play-pause{display:inline;position:absolute;bottom:62px;left:50%;transform:translateX(-50%)}
.modal .content .video-wrapper.ended{opacity:.5}
.modal .content .video-wrapper.loading{opacity:.5}
.modal .content .controls .progress-wrapper{opacity:0;transition:opacity .6s ease;display:inline;position:absolute;bottom:35px;left:50%;transform:translateX(-50%)}
.modal .content .video-wrapper.loading + .controls .play-pause:after{content:".";animation:loader 1s infinite;-webkit-animation:loader 1s infinite;-moz-animation:loader 1s infinite;-ms-animation:loader 1s infinite}
@keyframes loader{0%{content:"."}33%{content:".."}66%{content:"..."}100%{content:"."}}
@-webkit-keyframes loader{0%{content:"."}33%{content:".."}66%{content:"..."}100%{content:"."}}
@-moz-keyframes loader{0%{content:"."}33%{content:".."}66%{content:"..."}100%{content:"."}}
@-ms-keyframes loader{0%{content:"."}33%{content:".."}66%{content:"..."}100%{content:"."}}
.modal .content .video-wrapper.loading + .controls .play-pause:hover{cursor:default;color:#FFF}
.modal.loaded .content .controls .progress-wrapper{opacity:1}

.modal .video-wrapper{width:100%;height:calc(100% - 120px);padding-top:120px}

/* swipe */
.swipe{position:fixed;top:-100vh;left:0;width:100%;height:100%;padding:40px;z-index:11;transition:top .6s cubic-bezier(.7, 0, .3, 1);overflow:auto;color:#FFF}
.swipe .btn-swipe{position:absolute;top:35px;right:60px;height:40px;width:40px}
body.swipe-opened .swipe{top:0}

/* .master-wrapper */
body.visible .master-wrapper{opacity:1}
.master-wrapper{width:100%;position:relative;opacity:0;transition:opacity .3s ease}

header.master{position:fixed;top:0;left:0;padding:30px 60px;z-index:10}
header.master a.logotype svg{width:60px}
header.master .btn-swipe{width:40px;height:40px;position:absolute;right:60px;top:35px}

section.full-height{min-height:100vh;margin-bottom:0}

main{width:100%;position:relative;display:block}
main.full-height{min-height:100vh}
main .main-img{background-size:cover;background-position:center;background-repeat:no-repeat;height:calc(100vh - 204px)}

.page-index.loading{overflow:hidden}
.page-index.loading main{transform:translateY(100vh)}
.page-index main{transform:translateY(0);transition:transform .6s cubic-bezier(.7, 0, .3, 1);padding:0}

.page-index.loading section.loader{opacity:1;transition:none}
section.loader{height:100vh;margin-bottom:0;position:fixed;top:0;left:0;width:100%;z-index:-1;opacity:0;transition:opacity .1s ease;transition-delay:1s}
section.loader .loadbar{position:absolute;top:0;left:0;width:0;height:10px;background-color:var(--color-primary);animation:loadbar 5s cubic-bezier(.7, 0, .3, 1) forwards}
@keyframes loadbar{0%{width:0%}100%{width:100%}}
@-webkit-keyframes loadbar{0%{width:0%}100%{width:100%}}
@-moz-keyframes loadbar{0%{width:0%}100%{width:100%}}
@-ms-keyframes loadbar{0%{width:0%}100%{width:100%}}
section.loader .logotype-wrapper{position:absolute;top:calc(50% - 30px);left:50%;transform:translate(-50%, -50%);width:70%;max-width:340px}
section.loader .logotype-wrapper .head{position:absolute;z-index:-1;width:80%;top:0;right:0;margin:0}
section.loader .logotype-wrapper .logotype{width:auto;height:100%}

.featured li{width:100%;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative}
.featured li .featured-content{position:absolute;left:0;top:50%;z-index:2;pointer-events:none;transform:translateY(-50%)}
.featured li .featured-content a{margin:0 auto}
.featured li .featured-content img{width:auto;height:140px;margin:40px auto 0;max-width:100%}
.page-video .featured li{height:100vh}
.page-video .btn-back{width:40px;height:40px;position:absolute;right:calc(50% - 20px);top:35px;z-index:11}

.directors li{position:relative}
.directors h3{position:relative;z-index:1}
.directors .lazy{width:20%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}
.directors a:hover{opacity:1}
.directors a:hover h3{color:#FFF}
.directors a:hover .lazy{display:block}


@media (max-width: 960px){
    body{font-size:18px;line-height:22px}
    .fs-s{font-size:10px;line-height:14px}
    .fs-m{font-size:24px;line-height:28px}
    .fs-l{font-size:30px;line-height:34px}
    .fs-xl{font-size:38px;line-height:42px}
    .fs-xxl{font-size:inherit;line-height:inherit}

    .head{width:80px;margin-top:80px}

    .p-columns-2{column-count:1}

	.grid{grid-template-columns:repeat(1, 1fr);grid-column-end:span 1;padding:0 30px}
    .grid > *{grid-column-end:span 1!important}
    .grid .p-2{grid-column-start:1}
    .grid .p-3{grid-column-start:1}
    .grid .p-4{grid-column-start:1}
    .grid .p-5{grid-column-start:1}
    .grid .p-6{grid-column-start:1}

    ul.grid-masonry{width:calc(100% - 60px);margin:0 30px}
    ul.cc > li{width:100%;float:none}

    .featured li .lazy-img-wrapper{width:100%;height:100%}
    .featured li video{opacity:1!important}
    .featured li video, .featured li img{width:100%;height:100%;object-fit:cover}
    .featured li .featured-content img{height:auto}

    .swipe .btn-swipe{right:30px}

    .modal{height:100svh;top:100vh}
    .modal .video-wrapper{padding:80px 30px 0}
    .modal .close-modal{right:30px}
    .videos-wrapper > *{margin-bottom:40px}

    header.master{padding:30px}
    header.master .btn-swipe{right:30px}

    section.loader{height:100svh}

    .featured li{height:100svh!important}

    .directors li{margin-bottom:60px}
    .directors li .lazy{width:100%;max-width:300px;position:static;transform:none;display:block;margin:0 auto 20px}
}