/* 
* 
* Fonts 
*
*/
@font-face {
    font-family: moderat;
    src: url(../fonts/moderat-regular.ttf);
    font-weight:400;
}
@font-face {
    font-family: gt-super-display;
    src: url(../fonts/gt-super-display-regular.otf);
}
@font-face {
    font-family: itc-avant-garde-gothic;
    src: url(../fonts/itc-avant-garde-gothic-medium.otf);
    font-weight:medium;
}
@font-face {
    font-family: itc-avant-garde-gothic;
    src: url(../fonts/itc-avant-garde-gothic-bold.otf);
    font-weight:bold;
}
/* 
* 
* Global Styles 
*
*/
:root{
    --color-white:#ffffff;
    --color-off-white:#f1f1f1;
    --color-grey:#999999;
    --color-black:#000000;
    --color-dark-grey:#171717;
    --fay-color-text: var(--color-white);
    --fay-color-h2: var(--color-white);
    --fay-color-link: var(--color-white);
    --fay-color-body-selection:var(--color-white);
    --fay-color-text-selection: var(--color-black);

    --font-primary:"itc-avant-garde-gothic",sans-serif;
    --font-secondary:"itc-avant-garde-gothic", serif;
    --fay-font-family-text:var(--font-primary);
    --fay-font-family-h1:var(--font-secondary);
    --fay-font-family-h3:var(--font-primary);
    --fay-font-family-h4:var(--font-secondary);

    --fay-font-size-text:16px;
    /*--fay-font-size-text:clamp(12px, 3vw, 16px);*/
    --fay-font-size-link:var(--fay-font-size-text);
    --fay-font-size-h1:clamp(26px, 3vw, 34px);
    --fay-font-size-h3:clamp(20px, 3vw, 26px);
    --fay-font-size-h4:16px;

    --fay-line-height-text:clamp(22px, 3vw, 26px);
    --fay-line-height-h1:clamp(36px, 3vw, 44px);
    --fay-line-height-h3:clamp(30px, 3vw, 36px);
    --fay-line-height-h4:clamp(16px, 2vw, 18px);

    --fay-font-weight-h1:bold;
    --fay-font-weight-h4:400;

     /* Default Row offset */
     --fay-row-offset-y-xs: 20px; 
     --fay-row-offset-y-sm: 60px;
     --fay-row-offset-y-md: 90px;
     --fay-row-offset-y-lg: 90px;
     --fay-row-offset-y-xl: 90px;
     --fay-row-offset-y-xxl: 90px;

     --fay-row-offset-x-xs: 20px;
     --fay-row-offset-x-sm: 60px; 
     --fay-row-offset-x-md: 90px; 
     --fay-row-offset-x-lg: 90px; 
     --fay-row-offset-x-xl: 90px; 
     --fay-row-offset-x-xxl: 60px; 

     /* Fay Spacer */
     --fay-spacer-xs: 40px;
     --fay-spacer-sm: 50px;
     --fay-spacer-md: 60px;
     --fay-spacer-lg: 80px;
     --fay-spacer-xl: 90px;
     --fay-spacer-xxl: 120px;

     /* Z Index */
     --zindex-header:5;
     --zindex-nav:4;
     --zindex-project:3;
     --zindex-page:2;
     --zindex-footer:1;
}
body{
    overflow:auto;
    background-color:#000000;
}
body.overflow-hidden{
    overflow:hidden;
}

/*
*
* Loader
*
*/
.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
  }
  .loader::after,
  .loader::before {
    content: '';  
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    animation: animloader 2s linear infinite;
  }
  .loader::after {
    animation-delay: 1s;
  }
  
  @keyframes animloader {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
/*
*
* Header
*
*/
.header{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    position:relative;
    left:0;
    
}
.header-spacer{
    height:120px;
}
.header .logo{  
    opacity:1;
    transition: opacity .2s linear;
    z-index:var(--zindex-header);
    position:fixed;
    top:30px;
    left:25px;
}
.header .logo.hidden{    
    opacity:0.5;
}
.header .logo img{  
    width:60px;
}
.header .nav-toggle{
    margin-left:auto;
    background-color:var(--color-black);   
    width:50px;
    height:50px;    
    cursor:pointer;
    transition: background-color .2s ease-in-out;
    z-index:var(--zindex-header);
    position:fixed;
    top:18px;
    right:25px;
}
.header .nav-toggle span{
    background-color:var(--color-white);    
    height:2px;
    width:20px;
    display:inline-block;
    position:absolute;
    left:15px;
    transition: transform .25s cubic-bezier(.76,0,.24,1) .05s;
}
.header .nav-toggle:hover span{
    background-color:var(--color-white);
}

.header .nav-toggle span:first-child{
    top:19px;
}
.header .nav-toggle span:last-child{
    bottom:18px;
}
.header .nav-toggle.open, .header .nav-toggle:hover{
    background-color:var(--color-dark-grey);
}
.header .nav-toggle.open span:first-child, .header .nav-toggle:hover span:first-child{
    transform: translateY(3px);
}
.header .nav-toggle.open span:last-child, .header .nav-toggle:hover span:last-child{
    transform: translateY(-3px);
}
#nav{
    position:fixed;
    top:0;
    left:0;
    background-color:var(--color-black);
    display:none;
    z-index:var(--zindex-nav);
    transition: all .2s linear;
    
}
#nav.open{    
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
}
#nav .menu, #nav .social{   
    margin-right:60px;
}
#nav .menu{    
    /*width:215px;*/
}
#nav .menu ul, #nav .social ul{
    margin:0;
    padding:0;
    list-style-type:none;  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:end;
    padding-top:50px;
}

#nav .menu ul li{    
    padding:5px 0;
}


#nav .menu a{    
    text-decoration:none;
    font-size:20px;
    line-height:42px;
    font-family:var(--font-primary);
    font-weight:800;
    text-transform:uppercase;
 

}
.shine-text, .shine:hover{        
   /* background: linear-gradient(90deg, red, orange, green, yellow, blue);*/
    background: linear-gradient(90deg, #710003, #f10007, #f16c70, #335b01, #36c201, #94f291, #0b295c, #0b2cc3, #006ef2);
    /*background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);*/
   
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /*text-fill-color: transparent;*/
    background-size: 500% auto;
    animation: textShine 3s ease infinite alternate;

}
a.news-grid-item__inner:hover .title{        
    /* background: linear-gradient(90deg, red, orange, green, yellow, blue);*/
     background: linear-gradient(90deg, #710003, #f10007, #f16c70, #335b01, #36c201, #94f291, #0b295c, #0b2cc3, #006ef2);
     /*background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);*/
    
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
    /* text-fill-color: transparent;*/
     background-size: 500% auto;
     animation: textShine 3s ease infinite alternate;
 
 }
@keyframes textShine {
    0% {
		background-position: 0% 50%;
	}
	
	100% {
		background-position: 100% 50%;
	}
}

/*
#nav .menu ul li:nth-child(3n+0) a:hover{    
   color:#f10007;
}
#nav .menu ul li:nth-child(3n+1) a:hover{    
    color:#36c201;
 }
 #nav .menu ul li:nth-child(3n+2) a:hover{    
    color:#0b31c7;
 }*/
#nav .social a{    
    text-decoration:none;
    font-size:14px;
    line-height:19px;
    font-family:var(--font-primary);
    text-transform: uppercase;
}


@media (min-width: 576px) {
    
}
@media (min-width: 768px) {
    .header .logo{  
      
        left:50px;
    }
  
   
    .header .nav-toggle{
       
        top:38px;
        right:50px;
    }
    .header .logo img{  
        width:85px;
    }
    #nav .menu ul, #nav .social ul{
        
        align-items:start;
        
    }
    #nav .menu ul, #nav .social ul{
       
        padding-top:0px;
    }
    #nav .menu ul{
        align-items: flex-start;
    }
    #nav .social ul{
        align-items: flex-end;
    }
    #nav .menu{    
    width:auto;
}
    #nav .menu ul li{    
        padding:10px 0;
    }
  
    #nav .menu ul li:nth-child(2n){    
        transform: translateX(-100%);
    }
    
}
@media (min-width: 992px) {
   
    
}
@media (min-width: 1200px) {
    
}
@media (min-width: 1400px) {
    
}

/*
*
* Footer
*
*/
.footer{    
    background-color:var(--color-black);
    font-family:var(--font-primary);
    position:fixed;
    bottom:0;
    left:0;
    z-index:var(--zindex-footer);
    height:300px;
    display:flex;
    flex-direction:column;
    align-items:center;   
    justify-content:center;
}
.footer a{
    font-family:var(--font-primary);
    text-decoration:none;
}
.footer div{
    margin-bottom:50px;
}
.footer div:last-child{
    margin-bottom:0;
}
.footer h2{
    margin-bottom:0;
    font-size:clamp(32px, 4vw, 48px);
}
.footer h2 a{
    font-size:clamp(30px, 4vw, 42px);
    border-bottom: 2px solid var(--color-white);
    padding-bottom:5px;
    transition: all .2s linear;
}
.footer h2 a:hover{
    padding-bottom:2px;
    border-bottom: 2px solid var(--color-white);
}
.footer .social a{
    padding:0 10px;
    font-size:14px;
 }
.footer .copyrights{
   position:absolute;
   bottom:20px;
   left:0;
   padding:0 50px;
}

/*
*
* Pages
*
*/
.page{
    --page-margin-bottom:300px;
    --page-padding-top:100px;
}
@media (min-width: 576px) {
    .page{
        --page-margin-bottom:300px;
        --page-padding-top:100px;
    }   
}
@media (min-width: 768px) {   
    .page{
        --page-margin-bottom:300px;
        --page-padding-top:100px;
    }  
    
}
@media (min-width: 992px) {
    .page{
        --page-margin-bottom:300px;
        --page-padding-top:130px;
    } 
    
}
@media (min-width: 1200px) {
    .page{
        --page-margin-bottom:300px;
        --page-padding-top:130px;
    } 
}
@media (min-width: 1400px) {
    .page{
        --page-margin-bottom:300px;
        --page-padding-top:130px;
    }
}
.page{
    position:relative;
    z-index:var(--zindex-page);
    background-color:var(--color-black);
    padding-top:var(--page-padding-top);
    margin-bottom:var(--page-margin-bottom);
}

/*
*
*
*
*/
.home .news-grid .news-grid-item:last-child{
    margin-bottom:0px;
}
.home-intro{
    font-family:var(--font-secondary);
    font-size: clamp(26px, 4vw, 64px);
    line-height: clamp(36px, 5vw, 72px);
    /*font-size: clamp(26px, 2vw, 32px);
    line-height: clamp(36px, 3vw, 42px);   */
    padding-top:120px;
    padding-bottom:120px;
    width:80%;
    font-weight:800;
    text-transform:uppercase;
}
#home-intro{
    width:100%;
    height:100%;
    background-color:var(--color-black);
    position:fixed;
    top:0;
    left:0;
    z-index:6;
    display:flex;
    justify-content:center;
    align-items:center;
}
#home-intro img{
    width:60%;
    opacity:0;
    transition: transform 1.5s ease-in-out;
}
@media (min-width: 576px) {
   
  
    
}
@media (min-width: 768px) {
  
   
}
@media (min-width: 992px) {
    .home-intro{      
        padding-top:240px;
        padding-bottom:240px;     
    }
    
   
}
@media (min-width: 1200px) {
  
}
@media (min-width: 1400px) {
    
}
/* 
*
* Grid
*
*/

/* Grid --> Layout */
.grid:not(.film-grid){
    display:flex;
    flex-wrap: wrap;
}
.grid:not(.film-grid) .grid-item{
    width: 100%;
    height:40vh;
}
.grid:not(.film-grid) .grid-item a{
    text-decoration:none;
}
@media (min-width: 576px) {
    .grid:not(.film-grid) .grid-item{
        
        height:60vh;
    }
}
@media (min-width: 768px) {
    .grid:not(.film-grid) .grid-item:nth-child(3n+1){
        height:80vh;
        width:100%;
    }
    .grid:not(.film-grid) .grid-item:nth-child(3n+2),
    .grid:not(.film-grid) .grid-item:nth-child(3n+3){
        height:40vh;
        width:50%;
    }   
}
@media (min-width: 1200px) {   
    .grid:not(.film-grid) .grid-item:nth-child(3n+1){
        height:100vh;
    } 
    .grid:not(.film-grid) .grid-item:nth-child(3n+2),
    .grid:not(.film-grid) .grid-item:nth-child(3n+3){
        height:60vh;
        width:50%;
    }  
}
/* Film Grid --> Layout */
.film-grid{
    display:grid;
    grid-template-columns:100%;
    grid-gap:10px;
}
.film-grid .grid-item{
    width: 100%;
    height:auto;
}
.film-grid .grid-item a{
    text-decoration:none;
}
@media (min-width: 592px) {
    .film-grid{
        grid-template-columns:repeat(2,1fr);
        grid-gap:10px;
    }
}
@media (min-width: 992px) {
    .film-grid{
        grid-template-columns:repeat(3,1fr);
        grid-gap:20px;
    }
}
/* Grid --> Grid Item --> Overlay */
.work-grid .grid-item .overlay{
    position: absolute;
    background-color: transparent;
    overflow: hidden;
}
.work-grid .grid-item .overlay,
.work-grid .grid-item .overlay .bottom,
.work-grid .grid-item .overlay .left, 
.work-grid .grid-item .overlay .right, 
.work-grid .grid-item .overlay .top{
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    pointer-events: none;
}
.work-grid .grid-item .overlay .bottom,
.work-grid .grid-item .overlay .left,
.work-grid .grid-item .overlay .right,
.work-grid .grid-item .overlay .top{
    position: absolute;
    background-color: var(--color-black);
    transition: transform .2s cubic-bezier(.21,.2,.13,.97);
}
.work-grid .grid-item .overlay .top{
    top: -40px;
    height: 40px;
}
.work-grid .grid-item .overlay .bottom{
    top: unset;
    bottom: -40px;
    height: 40px;
}
.work-grid .grid-item .overlay .left{
    left: -40px;
    width: 40px;
}
.work-grid .grid-item .overlay .right{
    left: unset;
    right: -40px;
    width: 40px;
}
.work-grid .grid-item:hover .overlay .top{
    transform: translateY(15px);
}
.work-grid .grid-item:hover .overlay .bottom{
    transform: translateY(-15px);
}
.work-grid .grid-item:hover .overlay .left{
    transform: translateX(15px);
}
.work-grid .grid-item:hover .overlay .right{
    transform: translateX(-15px);
}

/* Grid --> Grid Item --> Media */
.work-grid .grid-item .media{    
    height:100%;
}
.work-grid .grid-item .media video{
    object-fit:cover;
    height:100%;
    width:100%;
}
.work-grid .grid-item .media img{
    width:100%;
}
/* Grid --> Grid Item --> Meta */
.work-grid .grid-item .meta{
    position:absolute;
    bottom:15px;
    left:25px;
    transition: transform .2s cubic-bezier(.21,.2,.13,.97);
}
.work-grid .grid-item:hover .meta{
    transform: translateY(-15px);
}

.work-grid .grid-item .meta .credits{
    font-family:var(--font-secondary);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing: 2px;
    line-height:15px;
}
.work-grid .grid-item .meta .credits a{
    color:var(--fay-color-link);
}
.work-grid .grid-item:hover .meta .title h3, .grid .grid-item:hover .meta .credits{
    color:var(--color-off-white);
}

/* Projects Grid */


/* 
*
* About
*
*/

.about .intro, .about .bio{
    font-family:var(--font-secondary);
}
.about .intro{
    font-family:var(--font-secondary);
    font-size: clamp(26px, 4vw, 64px);
    line-height: clamp(36px, 5vw, 72px);
    width:80%;
    font-weight:800;
    text-transform:uppercase;
    padding-top:60px;
}
.about .bio{
    /*font-size: 18px;*/
    font-size: clamp(18px, 2vw, 24px);
    color:rgba(255,255,255,0.8);
    padding-top:50px;
    line-height: 27px;
    /*max-width:950px;*/
    /*margin:auto;*/
}
.about .cover img{
    width:100%;
    height:350px;
    object-fit:cover;
}
.about .gallery{
    display:flex;
    flex-wrap:wrap;
}
.about .gallery .gallery-item{
    width:100%;
    height:400px;
}

.about .gallery .gallery-item{
    margin-bottom:50px;
}
.about .gallery .gallery-item .images-wrapper{
    height:100%;
    width:100%;
    position:relative;
}
.about .gallery .gallery-item .images-wrapper .image{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition: opacity 2s ease;
}
.about .gallery .gallery-item .images-wrapper .image.active{
    opacity:1;
}

.about .gallery .gallery-item .images-wrapper .image img{
    object-fit:cover;
    height:100%;
    width:100%;
}
.about .clients{
    padding:30px 0;
    /*background-color:var(--color-dark-grey);*/
    border-radius:10px;
    margin:40px 0px;    
    width:100%;
}
.about .clients h2{
    text-transform:uppercase;
    margin-bottom:20px;
}
.about .clients .owl-carousel{    
    width:80%;
}
.about .clients .owl-carousel .client{    
    width:150px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    /*background-color:var(--color-dark-grey);*/
}
.about .clients .owl-carousel .client img{    
   width:70%;
}


@media (min-width: 576px) {
   
}
@media (min-width: 768px) {
    .about .clients{
        flex-direction:row;
    }
    
    
    
}
@media (min-width: 992px) {
    .about .intro{        
        padding-top:120px;
    }
    .about .cover img{
        height:500px;
    }
    .about .gallery .gallery-item{
        width:50%;
        height:300px;
    }    
    .about .gallery .gallery-item:nth-child(odd){
        margin-top:2.5vw;
    }
    .about .gallery .gallery-item:nth-child(even){
        margin-top: -2.5vw;
    }
    .about .gallery .gallery-item:nth-child(odd) .images-wrapper .image{
        padding-right: 8vw;
    }
    .about .gallery .gallery-item:nth-child(even) .images-wrapper .image{
        padding-left: 8vw;
    }
    .about .bio{
       
        width:80%;
    }
    
}
@media (min-width: 1200px) {
    .about .gallery .gallery-item{
        height:450px;
    }
    .about .gallery .gallery-item:nth-child(odd){
        margin-top:7.5vw;
    }
    .about .gallery .gallery-item:nth-child(even){
        margin-top: -7.5vw;
    }
}
@media (min-width: 1400px) {
    
}

/*
*
* Contact
*
*/

/* Layout */
.contact .contacts{
    background-color:var(--color-dark-grey);
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    padding:20px 30px 0;
    border-radius:15px;
}
.contact .contacts a{
   text-decoration:none;
}
/* General */
.contact .contacts .general{
    font-family:var(--font-primary);
}
.contact .contacts .people .people-group h4,
.contact .contacts .general h4{
    margin-bottom:20px;
}
.contact .contacts .people .people-group,
.contact .contacts .general{
    margin-bottom:30px;
}
/* People */
.contact .contacts a{
    font-family:var(--font-primary);
}

.contact .contacts a{   
   font-size:16px;
   position:relative;
   transition: color .4s ease-in-out;
   transition-timing-function: ease-in-out;
   display:inline-block;
}
.contact .contacts a:hover{
    transition-timing-function: cubic-bezier(.22,1,.36,1);
 }
.contact .contacts a:after{
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0;
    border-bottom: 1px solid;
    width: 0;
    transition: width .4s cubic-bezier(.22,1,.36,1);
}
.contact .contacts a:hover:after{   
    width: 100%;
}

@media (min-width: 576px) {
    
}
@media (min-width: 768px) {
    .contact .contacts{
        flex-direction:row-reverse;
        align-items: flex-start;
        justify-content: flex-end;
    }
    .contact .contacts .general{
        margin-left:auto;
        margin-bottom:0;
        max-width:220px;    
        text-align:right;    
    }
    
}
@media (min-width: 992px) {
    
    
}
@media (min-width: 1200px) {
   
}
@media (min-width: 1400px) {
    
}

/*
*
* PROJECT
*
*/
#project{
    --project-spacer:60px;
}
#project {
    position:fixed;
    top:0;
    left:0;
    z-index:var(--zindex-project);
    height:100%;
    background-color:var(--color-black);
    transition:transform .5s ease;
    transform: translateY(100%);
    text-align:center;    
    overflow-y:auto;
}
.project-inner {
    position:relative;
    height:100%;
    padding:60px 0 0;
}
#project.open{
    transform: translateY(0);
}

#project.open{
    transform: translateY(0);
}
.project-spacer{
    height:var(--project-spacer);
}
#project h1{
    text-transform:uppercase;
}
/* Actions */
#project .actions{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    position:sticky;
    right:100%;
    bottom:0;
    background-color:var(--color-black);
    padding:5px 10px;
}
#project .actions a{
   font-family:var(--font-primary);
   font-size: 12px;
line-height: 16px;
font-weight: 400;
text-decoration:none;
}
#project .actions a:hover{
    opacity:0.8;
 }
 #project .actions svg{
    fill: var(--color-white);
 }
 #project .details-wrapper{
    min-height:calc(100% - 120px);
    padding:80px 20px 20px;
 }

 /* Video */
 .project-video{
    width:100%;
    margin:auto;
 }
 .project-poster img{
    width:30%;
 }

 .project-director{
    font-family:var(--font-secondary);
    font-weight:400;
    margin-top:20px;
}
.project-details{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    text-align:left;
    margin:auto;

}
.project-details .detail-block{
    padding-bottom:20px;
}
.project-details .detail-block p{
    margin-bottom:0;
}
.project-details .detail-block h3{
    font-family:var(--font-secondary);
    font-weight:400;
    text-transform:uppercase;
}

 @media (min-width: 768px) {
    #project .actions{
        width:60px;
        flex-direction:column;
    justify-content:center;
    align-items:center;
        left:100%;
        bottom:calc(50% - 50px);
        margin-right:20px;
    } 
    #project .actions a{
       padding-bottom:20px;
    } 
    .project-details{      
        width:60%;
        padding-bottom:60px;
    }
    
    .project-details .detail-block:nth-child(2n){    
        transform: translateX(100%);
    }
    .project-details .detail-block{
        width:54%;
    }

    .project-video{
        width:60%;
     }
}
@media (min-width: 1200px) {
    
    .project-video{
        width:55%;
     }
}

/* DIRECTORS */
.directors{
    min-height:100%;
    width:100%;
}
.directors-list .director{
  mix-blend-mode:  difference;
  width:33.333%;
}
.directors-list .director a{            
    font-size:20px;
    text-decoration:none;
    display:inline-block;
    padding:7px 0;
    color:var(--color-off-white);
    z-index: 100;  
}
.directors-list .director a.mute{
   opacity:.35;
}
#directors-bg{
    position:absolute;
    top: 15%;
    left: 10%;
    height:70%;
    width:80%;
    z-index:-1;
}
#directors-bg img{
    position:absolute;
    top:0;
    left:0;
   opacity:0;
    height:100%;
    width:100%;
    object-fit:cover;
    transition:opacity 1s ease;
}
@media (min-width: 576px) {
    
}
@media (min-width: 768px) {    
    .directors-list{
        padding-top:30px;
    }   
    .directors-list{
        display:flex;
        flex-direction:row;
        justify-content:start;        
        flex-wrap:wrap;
        padding-top:30px;
    }
    .directors-list .director:nth-child(3n+2){
        text-align:center;
    }
    .directors-list .director:nth-child(3n+3){
        text-align:right;
    }
}
@media (min-width: 992px) {
    
    
}
@media (min-width: 1200px) {
   
}
@media (min-width: 1400px) {
    
}
/*
.directors-list:hover .director a{
   color:var(--color-off-white);
}
.directors-list .director:hover a{
    color:var(--color-white);
 }
*/

/* SINGLE DIRECTOR */
.director-title{
    padding:0 30px 30px;
}
.director-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:start;
    padding:50px 0;
}
.director-info .director-block{
    width:100%;
    padding:0 40px;
}
.director-info .director-block h1{
    margin-bottom:20px;
}
.director-info .director-block .cover img{
    width:100%;
}
.director-info .director-block .brief{
    margin-top:40px;
}

@media (min-width: 576px) {
    
}
@media (min-width: 768px) {
     .director-info{
        flex-direction:row;
        justify-content:space-between;
        align-items:start;
        padding:50px 50px;
    }
    .director-info .director-block{
        width:50%;
        padding:0 20px;
    }
    .director-info .director-block h1{
        margin-bottom:50px;
    } 
    .director-info .director-block .brief{
        margin-top:0;
    }
    
    
}
@media (min-width: 992px) {
   
    .director-info .director-block{
        padding:0 40px;
    }
}
@media (min-width: 1200px) {
   
}
@media (min-width: 1400px) {
    .director-info .director-block{
        padding:0 120px;
    } 
}

/*
*
* News
*
*/
/* 
*
* Grid
*
*/

/* Grid --> Layout */
.news-grid{
    --item-padding:0 20px;
    --item-child-width:100%;
    --bottom-margin:120px;
    --grid-padding:120px 0px 60px;
    --meta-padding:0 50px;
    --box-height:500px;
    --meta-item-padding:10px;
    --box-flex-direction-odd:column;
    --box-flex-direction-even:column;
}
@media (min-width: 576px) {
    .news-grid{
        --item-padding:0 50px;
        --item-child-width:100%;
        --bottom-margin:120px;
        --grid-padding:120px 0px 60px;
        --meta-padding:0 50px;
        --box-height:500px;
        --meta-item-padding:10px;
        --box-flex-direction-odd:column;
        --box-flex-direction-even:column;
        
    }
}
@media (min-width: 768px) {
    .news-grid{
        --item-padding:0 15%;
        --item-child-width:100%;
        --bottom-margin:160px;
        --grid-padding:160px 0px 80px;
        --meta-padding:0 50px;
        --box-height:600px;
        --meta-item-padding:10px;
        --box-flex-direction-odd:column;
        --box-flex-direction-even:column;
    }    
}
@media (min-width: 992px) {
    .news-grid{
        --item-padding:0 10%;
        --item-child-width:50%;
        --bottom-margin:180px;
        --grid-padding:180px 0px 90px;
        --meta-padding:0 50px;
        --box-height:450px;
        --meta-item-padding:10px;
        --box-flex-direction-odd:row;
        --box-flex-direction-even:row-reverse;
    }
}
@media (min-width: 1200px) {
    .news-grid{
        --item-padding:0 10%;
        --item-child-width:50%;
        --bottom-margin:240px;
        --grid-padding:240px 0px 120px;
        --meta-padding:0 50px;
        --box-height:450px;
        --meta-item-padding:10px;
        --box-flex-direction-odd:row;
        --box-flex-direction-even:row-reverse;
    }
}
@media (min-width: 1400px) {
    .news-grid{
        --item-padding:0 10%;
        --item-child-width:50%;
        --bottom-margin:240px;
        --grid-padding:240px 0px 120px;
        --meta-padding:0 50px;
        --box-height:450px;
        --meta-item-padding:10px;
        --box-flex-direction-odd:row;
        --box-flex-direction-even:row-reverse;
    }
}
.news-grid{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    padding:var(--grid-padding);
}
.news-grid .news-grid-item{
    margin-bottom: var(--bottom-margin);
    text-align:center;
    padding:var(--item-padding);
}
.news-grid .news-grid-item:last-child{
    margin-bottom: 0px;
}
.news-grid .news-grid-item{
    width: 100%;
    height:var(--box-height);
}
.news-grid .news-grid-item a{
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
}
.news-grid .news-grid-item:nth-child(odd) a{
    flex-direction:var(--box-flex-direction-odd);
}
.news-grid .news-grid-item:nth-child(even) a{   
    flex-direction:var(--box-flex-direction-even);
}
.news-grid .news-grid-item .news-grid-item__inner{
    height:100%;
}
/* Grid --> Grid Item --> Overlay */
.news-grid .news-grid-item .overlay{
    position: absolute;
    background-color: transparent;
    overflow: hidden;
}
.news-grid .news-grid-item .overlay,
.news-grid .news-grid-item .overlay .bottom,
.news-grid .news-grid-item .overlay .left, 
.news-grid .news-grid-item .overlay .right, 
.news-grid .news-grid-item .overlay .top{
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    pointer-events: none;
}
.news-grid .news-grid-item .overlay .bottom,
.news-grid .news-grid-item .overlay .left,
.news-grid .news-grid-item .overlay .right,
.news-grid .news-grid-item .overlay .top{
    position: absolute;
    background-color: var(--color-black);
    transition: transform .2s cubic-bezier(.21,.2,.13,.97);
}
.news-grid .news-grid-item .overlay .top{
    top: -40px;
    height: 40px;
}
.news-grid .news-grid-item .overlay .bottom{
    top: unset;
    bottom: -40px;
    height: 40px;
}
.news-grid .news-grid-item .overlay .left{
    left: -40px;
    width: 40px;
}
.news-grid .news-grid-item .overlay .right{
    left: unset;
    right: -40px;
    width: 40px;
}
.news-grid .news-grid-item:hover .overlay .top{
    transform: translateY(15px);
}
.news-grid .news-grid-item:hover .overlay .bottom{
    transform: translateY(-15px);
}
.news-grid .news-grid-item:hover .overlay .left{
    transform: translateX(15px);
}
.news-grid .news-grid-item:hover .overlay .right{
    transform: translateX(-15px);
}

/* Grid --> Grid Item --> Media */
.news-grid .news-grid-item .media{  
    width:var(--item-child-width);  
    height:100%;
}
.news-grid .news-grid-item .media img{
    object-fit:cover;
    height:100%;
    width:100%;
}
/* Grid --> Grid Item --> Meta */
.news-grid .news-grid-item .meta{
    width:var(--item-child-width); 
    margin-top: 15px;
    padding-left: 30px;
    padding-right: 30px;
    transition: transform .2s cubic-bezier(.21,.2,.13,.97);
    padding:var(--meta-padding);
}
.news-grid .news-grid-item .meta .title h3{
   font-family:var(--font-secondary);
   font-size:clamp(26px, 3vw, 34px);
   padding:var(--meta-item-padding) 0;
}
.news-grid .news-grid-item:hover .meta .title h3{
    color:var(--color-off-white);
 }
 .news-grid .news-grid-item .meta .date{
    font-size:14px;
 }

/*
*
* Article
*
*/
#article{
    --article-spacer:60px;
}
#article {
    position:fixed;
    top:0;
    left:0;
    z-index:var(--zindex-project);
    height:100%;
    background-color:var(--color-black);
    transition:transform .5s ease;
    transform: translateY(100%);
    text-align:center;
    
    overflow-y:auto;
}
.article-inner {
    position:relative;
    height:100%;
    padding:60px 0 0;
}
#article.open{
    transform: translateY(0);
}

.article-spacer{
    height:var(--article-spacer);
}
/* Actions */
#article .actions{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    position:sticky;
    right:100%;
    bottom:0;
    background-color:var(--color-black);
    padding:5px 10px;
}
#article .actions a{
   font-family:var(--font-primary);
   font-size: 12px;
line-height: 16px;
font-weight: 400;
text-decoration:none;
}
#article .actions a:hover{
    color:var(--color-off-white);
 }
 #article .actions svg{
    fill: var(--color-white);
 }
 #article .actions a:hover svg{
    fill: var(--color-off-white);
 }
 #article .details-wrapper{
    min-height:calc(100% - 120px);
    padding:80px 20px 20px;
 }
 #article .details-wrapper .article-title{
    padding:0 20px;
 }
 #article .details-wrapper img{
    width:100%;
 }
 #article .details-wrapper .article-body{
    width:100%;
    text-align:left;
 }
 #article .details-wrapper .article-body a{
    display:block;
    text-decoration:none;
    margin-top:20px;
 }
 #article .details-wrapper .article-share a{
   text-decoration:none;
   padding:0 5px;
   display:block;
   font-size:20px;
   text-transform:uppercase;
 }




 @media (min-width: 768px) {
    #article .details-wrapper{
        padding:80px 100px 20px;
     }
    #article .details-wrapper .article-title{
        padding:0 20%;
     }
    
     #article .details-wrapper img{
        width:80%;
        margin:auto;
     }
     #article .details-wrapper .article-body{
        width:80%;
        margin-left:auto;
        text-align:left;
        padding-right:50px;
     }
    #article .actions{
        width:60px;
        flex-direction:column;
    justify-content:center;
    align-items:center;
        left:100%;
        bottom:calc(50% - 50px);
        margin-right:20px;
    } 
    #article .actions a{
       padding-bottom:20px;
    } 
   
    
}
@media (min-width: 992px) {
    #article .details-wrapper .article-body{
        width:80%;
     }
    #article .details-wrapper .article-share{
        cursor:pointer;
      }
     #article .details-wrapper .article-share a{
       display:none;
     }
     #article .details-wrapper .article-share:hover h2{
        display:none;
      }
      #article .details-wrapper .article-share:hover a{
        display:block;
      }
       #article .details-wrapper img{
        width:60%;
        margin:auto;
     }
}
@media (min-width: 1200px) {
    #article .details-wrapper .article-body{
        width:50%;
     }
}