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

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

@font-face {
    font-family: 'Work Sans';
    src: url('fonts/WorkSans-Bold.eot');
    src: url('fonts/WorkSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/WorkSans-Bold.woff2') format('woff2'),
        url('fonts/WorkSans-Bold.woff') format('woff'),
        url('fonts/WorkSans-Bold.ttf') format('truetype'),
        url('fonts/WorkSans-Bold.svg#WorkSans-Bold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

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

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

/* ------- STYLES ------- */

/* 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:'Work Sans';box-sizing:border-box;font-size:24px;line-height:28px;color:#194c83}
.bar *{color:#FFF}

body{font-weight:400;-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;overflow-x:hidden;position:relative;margin:0 auto}
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.hover-font:hover{font-family:'Kids Hand';font-size:34px}
li{list-style:none}
img{width:100%;display:block}
video{position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:1;opacity:0;transition:opacity .3 ease}
video.hovered{opacity:1}

.fs-s{font-size:18px;line-height:20px}
.fs-s.hover-font:hover{font-size:24px;line-height:24px}
.fs-l{font-size:54px;line-height:56px}
.fs-xl{font-size:76px;line-height:80px}
.fs-xl.hover-font:hover{font-size:120px;line-height:90px}
.fs-xxl{font-size:90px;line-height:94px}
.fs-xxxl{font-size:140px;line-height:144px}
.fw-bold{font-weight:600}
.fw-semibold{font-weight:500}
.uppercase{text-transform:uppercase}
.underlined{width:fit-content;border-bottom:1px solid}
.display-block{display:block}
.display-inline{display:inline}
.ta-left{text-align:left}
.ta-right{text-align:right}
.ta-center{text-align:center}

.c-white{color:#FFF}
.c-blue{color:#194c83}
.c-yellow{color:#f5c70e}
.background-orange{background-color:#ea6632}
.background-blue{background-color:#194c83}
.background-red{background-color:#c53925}
.background-yellow{background-color:#f5c70e}
.background-grey{background-color:#eaeaea}

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

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

.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}

.typewriter{position:relative}
.typewriter .text.hidden{opacity:0;visibility:hidden;position:absolute;top:0;left:0}
.typewriter span{opacity:0;visibility:hidden;color:inherit;display:inline;font-size:inherit;font-weight:inherit}
.typewriter span.visible{opacity:1;visibility:visible}

/* .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.visible{opacity:1;visibility:visible;transform:translateY(0)}
.lazy-img-wrapper{position:relative;overflow:hidden;background-color:#FFF;transition:background .2s ease;border-radius:10px}
.lazy-img-wrapper .img{position:absolute;top:0;left:0;bottom:0;width:100%;opacity:0;transition:opacity .2s ease;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{opacity:1}
.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:20px;right:40px;z-index:81}
.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:20px;left:40px}
.modal .content .video-wrapper.ended{opacity:.5}
.modal .content .video-wrapper.loading{opacity:.5}
.modal .content .controls{position:absolute;bottom:0;left:0;width:100%;z-index:1}
.modal .content .controls .progress-wrapper{opacity:0;transition:opacity .6s ease;display:inline;position:absolute;bottom:20px;right:40px}
.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% - 80px);padding-top:80px}

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

/* .logotype-big */
.logotype-big{position:fixed;width:80%;top:50%;left:10%;transform:translateY(-50%);z-index:100;display:none}
body.loaded .logotype:hover ~ .logotype-big{display:block}

/* .master-wrapper */
body.disabled{background-color:#ea6632}
body.disabled .master-wrapper{opacity:0}
.master-wrapper{width:100%}

header.master nav > *{position:fixed;z-index:51;transition:top .3s ease, right .3s ease, bottom .3s ease, left .3s ease}
header.master nav > ul li{float:left;margin-left:40px}
header.master .top{top:40px}
header.master .bottom{bottom:40px}
header.master .left{left:40px}
header.master .right{right:40px}
header.master .logotype{position:fixed;width:180px;display:block;top:40px;left:40px;transition:all .7s ease;transform:translate(0,0)}
    body.loading header.master .logotype{width:90%;left:50%;top:50%;transform:translate(-50%,-50%)}
    body.loading header.master nav ul.top{top:-100px}
    body.loading header.master nav .scroll-top{bottom:-100px}
    body.swipe-opened header.master nav .scroll-top{bottom:-100px}
    body:not(.loading) header.master nav .scroll-h{bottom:-100px}
    body.swipe-opened header.master a{color:#FFF!important}
    body.page-directors header.master a{color:#f5c70e}

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

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

section.loader{height:100vh;margin-bottom:0}
body.loaded section.loader{height:80px}
section.featured{padding-top:120px;padding-bottom:120px}

.directors-list{margin:120px 0;display:grid;justify-content:center;align-items:center;align-content:center}
.directors-list a{position:relative;z-index:7}
.directors-imgs{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;transition:opacity .3s ease}
.directors-imgs.visible{opacity:1}
.directors-imgs li{position:fixed}
.directors-imgs li.small{width:10%}
.directors-imgs li.medium{width:20%}
.directors-imgs li.large{width:40%}
.directors-imgs li .lazy-img-wrapper{background:transparent}

.page-directors footer.master{background-color:#FFF}

.page-director main h1{position:absolute;right:40px;bottom:40px;margin:0;max-width:50vw;text-align:right}
.page-director main img{max-height:calc(100vh - 180px);margin:120px 0 60px}
.page-director section.bio h2{margin-bottom:40px}

.page-videos main{height:200vh}
.page-videos .index-imgs{width:100%;height:100%}
.page-videos .index-imgs li{position:absolute;cursor:pointer}
.page-videos li.small{width:20%}
.page-videos li.medium{width:30%}
.page-videos li.large{width:45%}
.page-videos li .lazy-img-wrapper{background:transparent}

.page-contact main{align-content:space-between}
.page-contact h1{margin-top:180px}
.page-contact footer.master .grid{padding:0}
.page-contact header.master *{color:#FFF}
.page-contact footer.master *{color:#FFF}

footer.master{padding:40px 0;position:relative;z-index:49;background-color:transparent}

@media screen and (min-width: 1441px){
	.fs-xl{font-size:5.6vw;line-height:5.6vw}
    .fs-xl.hover-font:hover{font-size:8vw;line-height:5.6vw}
    .fs-xxl{font-size:5.4vw;line-height:5.6vw}
    .fs-xxxl{font-size:9vw;line-height:9.6vw}
}

@media (max-width: 960px){
    .fs-xl{font-size:54px;line-height:56px}
    .fs-xl.hover-font:hover{font-size:120px;line-height:90px}
    .fs-xxl{font-size:54px;line-height:56px}
    .fs-xxxl{font-size:90px;line-height:96px}

	.grid{display:table}
    .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}

    .modal .video-wrapper{padding:80px 40px 0}

    .videos-wrapper > *{margin-bottom:40px}

    footer.master{padding-bottom:100px}
    footer.master .ta-right{text-align:left}

    .page-director main img{width:auto}
}

@media (max-width: 680px){
    *{font-size:20px;line-height:24px}

    .fs-s{font-size:16px;line-height:18px}
    .fs-s.hover-font:hover{font-size:20px;line-height:22px}
    .fs-l{font-size:28px;line-height:32px}
	.fs-xl{font-size:36px;line-height:40px}
    .fs-xl.hover-font:hover{font-size:64px;line-height:40px}
    .fs-xxl{font-size:36px;line-height:40px}
    .fs-xxxl{font-size:36px;line-height:40px}

    header.master nav ul li:first-child{display:none}

    main.full-height{min-height:auto}
    section.featured{padding-top:80px;padding-bottom:80px}

    .page-director main h1{right:auto;left:40px;bottom:0}
}

@media (max-width: 460px){
    .fs-l{font-size:24px;line-height:28px}
    .fs-xl{font-size:24px;line-height:28px}
    .fs-xl.hover-font:hover{font-size:42px;line-height:32px}
    .fs-xxl{font-size:24px;line-height:28px}
    .fs-xxxl{font-size:24px;line-height:28px}

    .modal .close-modal{right:20px}
    .modal .content .play-pause{left:20px}
    .modal .content .controls .progress-wrapper{right:20px}

    section.loader{height:80vh}

    header.master .logotype{width:120px}
    header.master .left{left:20px}
    header.master .right{right:20px}
    header.master .bottom{bottom:20px}
    header.master .top{top:20px}

    .grid{padding:0 20px}

    .directors-list{margin-top:160px}

    .page-director main img{height:100%;width:100%}
    .page-director main h1{left:20px}

    .page-videos main{height:150vh}
}