/* 
* 
* Fonts 
*
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;700&display=swap');

/* 
* 
* Global Styles 
*
*/
:root{

    /* 
    * Override Variables
    */

    /* Row Width */
    --fay-row-width-xs: 100%;
    --fay-row-width-sm: 100%;
    --fay-row-width-md: 100%;
    --fay-row-width-lg: 100%;
    --fay-row-width-xl: 100%;
    --fay-row-width-xxl: 100%;

    /* Row offset */
    --fay-row-offset-xs: 10px;
    --fay-row-offset-sm: 50px;
    --fay-row-offset-md: 50px;
    --fay-row-offset-lg: 50px;
    --fay-row-offset-xl: 50px;
    --fay-row-offset-xxl: 60px;
    
    /* 
    * Colors
    */
    --fay-default-color:#fec834;
    --fay-body-bg-color: #000000;
    /*--fay-body-font-color: #bcbcbc;*/
    --fay-body-font-color: #b3b3b3;
    --fay-heading-font-color:#FFFFFF;
    --fay-link-color: #FFFFFF;

     /* Spacers */
     --fay-spacer-xs:60px;
     --fay-spacer-sm:60px;
     --fay-spacer-md:60px;
     --fay-spacer-lg:90px;
     --fay-spacer-xl:90px;
     --fay-spacer-xxl:150px;

    /* Typography */
    --fay-body-font-family:'Montserrat', sans-serif;
    --fay-body-font-size:14px;
    --fay-body-font-weight:400;

    --fay-h1-font-family:'Montserrat', sans-serif;
    --fay-h1-font-size:clamp(2.4rem, 5vw, 4.5rem);
    --fay-h1-font-weight:800;

    --fay-h2-font-family:'Montserrat', sans-serif;
    --fay-h2-font-size:16px;
    --fay-h2-font-weight:700;

    --fay-h3-font-family:'Montserrat', sans-serif;
    --fay-h3-font-size:16px;
    --fay-h3-font-weight:700;
    /*
    *
    * Custom Variables
    *
    */

    --short-border-thickness:2px;

    /* Portfolio */
    --portfolio-overlay-color:rgba(0,0,0,0.3);
    --portfolio-items-gab:2px;

    /* Making */
    --making-items-gab:10px;
}
/* Loader -- start */
#loader{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#000000;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:100%;
    height:100%;
}
.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    4.9% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    5% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      opacity: 0;
    }
  }
/* Loader - end */

.top-spacer{
    height:60px;
}
.white-text{
    color:#FFFFFF;
}
.white-links a{
    color:#FFFFFF;
}
.white-links a:hover{
    color:var(--fay-default-color);
}
@media (min-width: 768px) {
    .top-spacer{
        height:150px;
    }
    
}

.footer{    
    padding:20px 0;
    text-align:center;
}
.footer.footer-home{
    text-align:center;
}
.footer.footer-fixed{
    position:fixed;
    bottom:0;
    left:0;
    z-index:1;
}
.footer .footer-links{
    padding-bottom:20px;
    
}
.footer.footer-home .footer-links{
    padding-bottom:20px;
    text-align:center;
}
.footer ul{
    list-style-type:none;
    padding:0;
    margin:0;
}
.footer ul li{
    display:inline;
    padding-left:40px;
}
.footer ul li:first-child{
    padding-left:0;
}
@media (min-width: 576px) {
    
}
@media (min-width: 768px) {
    .footer{
       text-align:left;
    }
    .footer .footer-links{
        text-align:right;
        padding-bottom:0;
    }
    
}


/*
*
* Home
*
*/
.home h1{
    color:var(--fay-default-color);
    font-family:'Oswald', sans-serif;
}
.home h1 span{
    color:#FFFFFF;
    font-family:'Montserrat', sans-serif;
    display:block;
    font-weight:300;
    font-size:clamp(0.8rem, 1.7vw, 1.5rem);
}

/*
*
* Portfolio
*
*/
.portfolio-filter{
    margin:20px 0;
}
.portfolio-filter ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
.portfolio-filter ul li{
    display:inline;
    margin-right:30px;
}
.portfolio-filter a.active{
    color:var(--fay-default-color);
    pointer-events: none;
}
.portfolio-grid{
   margin:calc(var(--portfolio-items-gab) * -1) 0;
}
.portfolio-item{
    color:var(--fay-default-color);
  padding:var(--portfolio-items-gab);
}
.portfolio-item > *{
    background-color:var(--portfolio-overlay-color);
    background-blend-mode: multiply;
}
.portfolio-item h3{
    font-size:16px;
    font-weight:700;
    padding-left:20px;
    padding-bottom:10px;
    max-width:40%;    
    /*font-weight:var(--fay-body-font-weight);*/
    color:var(--fay-default-color);
}

/*
*
* Single Project
*
*/
.project-credits h2, .project-equipment h2, .project-equipment h2, .project-bts h2{
    letter-spacing:6px;
}

.project-cover__inner{
    padding-bottom:60px;
    padding-left:20px;
}
.project-cover__inner:after{
    content:'';
    width:150px;
    height:var(--short-border-thickness);
    background-color:var(--fay-default-color);
}
.project-cover__inner h1{
    line-height:1em;
   width:50%;
}
.project-credits .project-credits__inner{
    padding-left:30px;
    border-left:var(--short-border-thickness) solid var(--fay-default-color);
}
.project-credits ul{
    list-style-type:none;
    padding:0;
    margin:0;
}

.project-gallery .gallery-item{
    padding:var(--making-items-gab);
}
.project-gallery .gallery-item img{
    width:100%;
}

.project-equipment .project-equipment__inner{
    padding:0 0;
}
@media (min-width: 576px) {
    .project-cover__inner{
        padding-left:0;
    }
    .project-equipment .project-equipment__inner{
        padding:0 10%;
    }
}
@media (min-width: 768px) {
    .project-equipment .project-equipment__inner{
        padding:0 20%;
    }
}
@media (min-width: 992px) {
    .project-equipment .project-equipment__inner{
        padding:0 30%;
    }
}
.project-equipment .project-equipment__inner:after{
    display:inline-block;
    content:'';
    width:150px;
    height:var(--short-border-thickness);
    background-color:var(--fay-default-color);
}
.project-video .project-video__inner{
    padding:0 10%;
}

.project-bts:before{
    display:inline-block;
    content:'';
    width:150px;
    height:var(--short-border-thickness);
    background-color:var(--fay-default-color);
}
.project-bts h2{
    padding-top:15px;
    padding-bottom:20px;
}
.project-cta h2{
    font-size:28px;
}
.project-cta a{
    display:inline-block;
    width:auto;
    margin:auto;
    border-bottom:var(--short-border-thickness) solid var(--fay-default-color);
}
@media (min-width: 576px) {
    .project-cta h2{
        font-size:36px;
    }
}
@media (min-width: 768px) {
    .project-cta h2{
        font-size:48px;
    }
}
@media (min-width: 992px) {
    .project-cta h2{
        font-size:64px;
    }
}
/*
*
* Making Of
*
*/
.making-grid h1:after{
    display:block;
    content:'';
    width:150px;
    height:var(--short-border-thickness);
    background-color:var(--fay-default-color);
}
.making-grid{
    margin:calc(var(--making-items-gab) * -1) 0;
 }
.making-item{
  padding:var(--making-items-gab);
}

/*
*
* About
*
*/
.about .about-left, .about .about-right{    
    width:100%;
    height:100%;
}
.about .about-right{
    position:fixed;
    top:0;
    right:0;
    display:none;
}
.about .about-left h1{
    text-align:left;
    display:inline-block;
    }
    .about .about-left .title h1:after{
       
    display:block;
    content:'';
    width:150px;
    height:var(--short-border-thickness);
    background-color:var(--fay-default-color);
 }
.about .about-right h1{
    position:relative; 
    text-align: right;
    }
        .about .about-right h1:before{
            position:absolute;
            right:0px;
        display:block;
        content:'';
        width:150px;
        height:var(--short-border-thickness);
        background-color:var(--fay-default-color);
        text-align: right;
     }

.about-left h2{
    letter-spacing:6px;
    padding-bottom:15px;
}
.highlights-item{
    padding-left:  10px;
    padding-right:  10px;
    
}

.work-highlights .highlights-grid .highlights-item{
    margin-bottom:40px;
}
.work-highlights .highlights-grid .highlights-item img{
    width:100%;
}
.work-highlights .highlights-grid .highlights-item .highlights-details{
    padding-left:0;
    margin-top:10px;
}
 .work-highlights .highlights-grid .highlights-item .highlights-details h3{
   color:var(--fay-default-color);
}
.work-highlights .highlights-grid .highlights-item .highlights-details p{
    margin-bottom:0;
 }
 .work-highlights .highlights-grid .highlights-item .highlights-details .highlight-type{
    font-size:16px;
    font-weight:600;
    color:rgb(142, 142, 142);
 }

 @media (min-width: 576px) {
    .highlights-item{
        padding-left:  0;
        padding-right:  0;
        
    }
    .work-highlights .highlights-grid .highlights-item .highlights-details{
        margin-top:0;
    }
    .work-highlights .highlights-grid .highlights-item .highlights-details{
        padding-left:20px;
    }
    .highlight-extra{
        position:absolute; bottom:0; left:20px;
    }
 }
    @media (min-width: 1200px) {
    .about .about-left, .about .about-right{    
        width:50%;
    }
    .about .about-right{    
       display:inline-block;
    }
    .about .about-left .title h1{
        display:none;
        }
        .about .about-left .title .fay-spacer{
            height:0;
            }
}


 /*
*
 * Contact
 *
 */ 
 .contact h1{
position:relative; 
}
    .contact h1:before{
        position:absolute;
        right:0px;
    display:block;
    content:'';
    width:150px;
    height:var(--short-border-thickness);
    background-color:var(--fay-default-color);
    text-align: right;
 }
 .contact .contact-info{
    justify-content:center;
    align-items:center;
}
.contact .contact-info h3{
    font-size:14px;
    margin-top:1rem;
    color:var(--fay-default-color);
}

.contact .contact-info p{
    color:#FFFFFF;
}
 @media (min-width: 768px) {
    .contact{
        padding-bottom:150px;
    }
        .contact .row{
        height:100%;
        
    }
    .contact .contact-info{
        justify-content:end;
        align-items:start;
    }
}


/*
*
* Loader
*
*/
#project-loader{
    width:100%;
    text-align:center;
    padding-top:30px;
}
#load-more{
padding-top:30px;
}
    #load-more a span{
    font-size:18px;
    padding-left:5px;
}

.loader {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    color: var(--fay-body-font-color);
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
  }
  
  @keyframes animloader {
    0% {
      box-shadow: -38px -6px, -14px 6px,  14px -6px;
    }
    33% {
      box-shadow: -38px 6px, -14px -6px,  14px 6px;
    }
    66% {
      box-shadow: -38px -6px, -14px 6px, 14px -6px;
    }
    100% {
      box-shadow: -38px 6px, -14px -6px, 14px 6px;
    }
  }


  .preload-bg:before{
   
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        content:"";
        background-color:#e84040;
        -webkit-animation: fade-out 99999s 1 linear; /* Safari 4+ */
        -moz-animation:    fade-out 99999s 1 linear; /* Fx 5+ */
        -o-animation:      fade-out 99999s 1 linear; /* Opera 12+ */
        animation:         fade-out 99999s 1 linear; /* IE 10+ */

  }