html{
    font-size: 20px;
}
body{color: #060f20; font-family: "Montserrat", serif; font-size: 1rem; font-weight: 400;  padding-top: 2.5rem;}
body.fixed_header{padding-top: 0;}
h1,h2,h3,h4,h5,h6 {font-weight: 400;}
a{color:inherit}

header{position: fixed; left: 0; top: 0; width: 100%; z-index: 5;  background-color: rgba(255, 255, 255, .80)}
#site-content{position: relative; z-index: 2; background: #ffffff; min-height: calc(100vh - 6.2rem);}

.nav-link {color: #060f20;}

#logo {height:100%;}
#logo img{height:90%; display: block; transform: translateY(2px);}

#header-wrapper{height: 2.5rem; padding: .25rem 3rem; display: flex; }
#header-inner{width: 100%;  width: 100%;}

#top-menu ul{display: flex; margin: 0; padding: 0;}
#top-menu ul li{display: flex; font-size: .675rem; }
#top-menu ul li a{text-decoration: none; color: #060f20;text-transform: uppercase; padding: .5rem 1rem;  display: block; transition: ease-in-out .3s all;}
#top-menu ul li a.selected{font-weight: 500;}
#top-menu ul li a:hover{color: #6de7c8;}


.works-list{display: grid; grid-template-columns: 1fr 1fr;}
.work-item{aspect-ratio: 900/376; overflow: hidden;}
.work-item a{height: 100%; display: block; position: relative; color: #FFF;  transition:ease-in-out .4s all; }

.work-item-thumb-wrapper{height: 100%; position: relative; z-index: 1;}
.work-item-thumb-wrapper::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background-color: #FFF; content: ''; transition:ease-in-out .4s all; z-index: 3;}
.work-item:hover .work-item-thumb-wrapper::after{opacity: .65;}
.work-item-thumb-wrapper img{width: 100%;  z-index: 1; position: relative; left: 0; top: 0; }
.work-info-wrapper{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; padding: 2rem; display: flex; align-items: end;}
.work-info-wrapper .work-title-wrapper{ font-size: 2rem;}

.work-info-wrapper .work-title-wrapper h3{font-size: 40%; line-height: 100%;}
.work-info-wrapper h2{font-size: 1.3rem;}

.work-item:hover a{color:#474747; }

.work-info-wrapper{font-size: 1rem;}

.work-other-info .work-info-item:not(:last-child)::after{content: '/'; display: inline-block; margin: 0 .5rem;}
.work-info-wrapper .work-info-item{display: block !important; font-size: .55em;}
#__loading_paging{padding: 2rem; }


footer{background-color: #FFF; width: 100%; z-index: 1; font-size: .65rem;}
footer a{color: inherit;}
footer a.social-media{margin: 0 .5rem;}
footer a.social-media img{width: 1.25rem; filter: brightness(0)}

.work-info-wrapper>div{transition: cubic-bezier(.07,.88,.23,.9) 2s all;}
.work-info-wrapper:hover>div{transform: translateY(-20px);}



.content-frame{padding: 8rem 3rem; text-align: center; }
.header-line{font-size: 2.25rem; position: relative; line-height: 100%;  display: inline-block; padding: 0 .5rem; margin-bottom: 2rem; color: #19eac7;}



.client-item{width:11.55rem; transition: linear all .2s;  align-items: center; justify-content: center; display: flex; }

.client-item img{display: block; width: 90%; transform: translateX(5%); filter: grayscale(100);  transition: linear .2s all;}
.client-item:hover img{filter: grayscale(0);}

#clients-wrapper{padding-top: 4rem;}

#directors-wrapper{
    
    

}
.director-item-wrapper a{text-decoration: none; padding: .5rem 0; display: block;}

.director-item-wrapper h2{font-size: 1.5rem; transition: ease-in-out .25s all ; }
.director-item-wrapper a:hover h2{color:#19eac7;}
.director-item{border: 4px solid #f8f8f8; border-radius: 50%; padding: 1rem;  position: relative; transition:ease-in-out all .3s; margin-bottom: .5rem; }
.director-card{border-radius: 50%; overflow: hidden; display: block; aspect-ratio: 1; position: relative;}


.director-card img{display: block; height: 100%; object-fit: cover;  width: 100%;}
.director-item:hover{border-color: #19eac7;}

#detail-wrapper{min-height: 652px;}

#work-detail-wrapper{overflow: hidden; aspect-ratio: 1800/704; max-width: 1440px; margin: auto;}


#work-detail-info{font-size: .75rem; color: #19eac7;}

#work-detail-info h1{font-size: 1.75rem;}
.work-info-item{display: flex; line-height: 100%; align-items: end; margin-bottom: .5rem; }
.work-info-item h3{font-size: .75rem; ; margin-bottom: 0;  min-width: 5rem;}
.work-info-item p{margin-bottom: 0;}

#work-detail-info .work-info-item {color: #060f20 }

.work-detail-info-client{font-size: 1.3rem;}

.delay-opacity-item{opacity: 0; animation: delayOpacity 0.5s cubic-bezier(0.23, 1, 0.320, 1) forwards;}

@keyframes delayOpacity {
    to {
        opacity: 1;        
      }
}


#octopus-arm-1{animation: OctopusLoading .3s ease-in-out alternate infinite; }
#octopus-arm-2{animation: OctopusLoading .3s ease-in-out alternate infinite; animation-delay: .3s;}
#octopus-arm-3{animation: OctopusLoading .3s ease-in-out alternate infinite; animation-delay: .5s;}
#octopus-arm-4{animation: OctopusLoading .3s ease-in-out alternate infinite; animation-delay: .7s;}
#octopus-arm-5{animation: OctopusLoading .3s ease-in-out alternate infinite; animation-delay: .9s;}


@keyframes  OctopusLoading {
    to {
        fill: #19eac7;
    }
}

#vimeo-play-button{width:80px; height: 80px;}
#vimeo-play-button path, #vimeo-play-button polygon{transition: ease-in-out .3s all;}
#vimeo-play-button:hover path, #vimeo-play-button:hover polygon{fill: #19eac7 !important ;}


#services-items-wrapper{}
#services-items-wrapper h2{font-size: 1.2rem; color: #19eac7;}
#services-items-wrapper p{margin-bottom: 0;}
.service-item{background-color: rgba(0,0,0, .80); color: #FFF; display: flex; justify-content: flex-end; flex-direction: column; font-size: .75rem; align-items: flex-start; padding: 1rem; text-align: left; transition: all ease-in-out .4s}
.service-item h2{font-size: 1rem;}
.service-item p{margin-bottom: 0;}
.service-item:nth-child(2n){background-color: rgba(0,0,0, .50);}
.service-item:hover{background-color: rgba(255, 255, 255, .85); color: #060f20; padding-bottom: 1.5rem;}

#services-container{min-height: 32rem;}

.locations-gallery-wrapper{display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; row-gap: 6rem; }
.locations-gallery-wrapper a{position: relative;  text-decoration: none; color: inherit; text-align: left;}
.location-image-wrapper{aspect-ratio: 1; margin-bottom: 2rem; position: relative;}
.locations-gallery-wrapper .location-gallery-item img{width: 100%; display: block; height: 100%; object-fit: cover;  filter: grayscale(1); transition: ease-in-out .2s all; position: relative; z-index: 1; margin-bottom: 1.5rem; }
.locations-gallery-wrapper .location-gallery-item:hover img{ filter: grayscale(0);}
.locations-gallery-wrapper .location-gallery-item span{ font-size: 1rem;}

.location-letter{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(60px); z-index: 4; font-size: 10rem; font-weight: 900; line-height: 100%; color: #19eac7; mix-blend-mode: multiply; }

#contact-map-wrapper{display: block; width: 100%;  position: relative; margin-bottom: 2rem;}
#contact-map-wrapper iframe{width:100%; }

.address-item{display: flex; align-items: flex-start; justify-content: flex-start; margin-bottom: .5rem;}
.address-item strong{min-width: 5rem; display: block;}

#contact-map-cell h2, #contact-form-cell h2{font-size: 1.25rem; ; margin-bottom: 1.5rem;}

.form-control{border: 2px solid #060f20; outline: none !important;}
.form-control:focus{border: 2px solid #060f20 !important; box-shadow: none !important;}

.btn.btn-primary{background-color:#19eac7; border-color: #19eac7; width: auto;}

#about-clients-wrapper{display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}


@media (min-width:1280px) {
    .work-item{aspect-ratio: 900/340; overflow: hidden;}
}

@media (max-width:1700px) {
    #work-detail-wrapper{max-width: 1280px;}
}

@media (max-width:990px) {
    #contact-map-cell{margin-bottom: 2rem ;}
    footer .row .col-lg-4{margin-bottom: 1rem; text-align: center !important;}
}

@media (max-width:960px) {
    #directors-wrapper{gap: 20px; grid-template-columns:repeat(2,1fr)}
    
}

@media (max-width:767px) {
    html{font-size: 14px;}
    .works-list{display: block;}   
    .work-info-wrapper{padding: 1rem;}
    #header-wrapper{height: 3.5rem;}
    body{padding-top: 3.5rem;}
    #header-wrapper{padding: .25rem 1rem;}
    #logo{position: relative; z-index: 4;}
    #logo img{height: 65%; }

    

    .content-frame{padding: 8rem 1rem;}
    #about-clients-wrapper{display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));}
    .client-item img{filter: none; width: 100%;}
    #clients-wrapper .container{padding: 0 !important;}

    #mobile-menu-trigger{display: flex; align-items: center; flex-direction: column; justify-content: space-evenly; width:30px; height: 30px; z-index: 5;}
    #mobile-menu-trigger>div{height: 3px; width:90%; background-color: #060f20; transition: all ease-in-out .2s; transform-origin: center center;}
    #top-menu{ display: flex; position: fixed; left: 0; top: 0; width: 100%; height: 100svh; display: flex; align-items: center; justify-content: center; background-color: #FFF; transform: translateX(100%); transition: cubic-bezier(0.075, 0.82, 0.165, 1) .2s all;}

    body.mobile-menu-open{overflow: hidden;}
    body.mobile-menu-open #mobile-menu-trigger{position: relative; }
    body.mobile-menu-open #mobile-menu-trigger>div{left: 0; top: 50%; margin-top: -2.5px; position: absolute; transform: scale(.5);}
    body.mobile-menu-open #mobile-menu-trigger>div:nth-child(2){display: none;}
    body.mobile-menu-open #mobile-menu-trigger>div:nth-child(1){transform: rotate(45deg);}
    body.mobile-menu-open #mobile-menu-trigger>div:nth-child(3){transform: rotate(-45deg);}

    
    #top-menu ul{flex-direction: column; align-items: center; justify-content: center;}

    #top-menu ul li a{font-size: 2rem;}

    body.mobile-menu-open #top-menu{transform: translateX(0);}
    
    
}