footer{
    opacity: 0;
    }
.wrapper{
    opacity: 0;
    transition: all ease-in-out 400ms;
    }
.wrapper.on{
    opacity: 1;
    }
header{
    position: fixed;
    display: block;
    padding: 0px;
    height: 136px;
    width: 100%;
    z-index: 101;
    transition: all ease-in-out 300ms;
    background-color: rgba(247, 247, 247, 0.7);
    }
header.header-shrink{
    height: 88px;
    }
header.bg-on{
    background-color: rgba(247, 247, 247, 1);
    height: 144px;
    }
header.bg-on.header-shrink{
    height: 78px;
    }
header .header{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0px auto;
    width: 100%;
    z-index: 101;
    max-width: 1700px;
    padding: 0px 16px;
    }
header .header .header-logo{
    position: relative;
    display: block;
    height: 120px;
    width: 102.7761px;
    top: 0px;
    left: 0px;
    transition: all ease-in-out 300ms;
    }
header .header .header-logo a{
    transition: all ease-in-out 300ms;
    }
header .header .header-logo.white-bg{
    background-color: rgba(247, 247, 247, 1);
    }
header.header-shrink .header .header-logo{
    padding-top: 0px;
    height: 72px;
    width: 61.7px;
    top: -3px;
    }
header .header .header-nav{
    position: relative;
    display: none;
    padding-top: 54px;
    transition: all ease-in-out 300ms;
    }
header .header .header-nav.bg-on{
    background-color: rgb(247, 247, 247);
    }
header.header-shrink .header .header-nav{
    padding-top: 26px;
    background-color: rgb(247, 247, 247);
    }
header .header .header-nav ul{
    position: relative;
    margin: 0px;
    padding: 8px 0px 0px 0px;
    border-bottom:2px solid rgba(17, 17, 17, 1);
    }
header .header .header-nav ul::after{
    content: '';
    position: absolute;
    margin: 0px;
    padding: 0px;
    height: 2px;
    background-color: rgba(17, 17, 17, 1);
    width: 25vw;
    bottom: -2px;
    }
.header-nav-ul{
    height: 48px;
    }
.header-nav-ul-logo{
   position: fixed;
    display: block;
    height: 54px;
    margin: 0px;
    right: 3px;
    width: 24vw;
    top: 54px;
    background-image: url(../../images/logos/grid-logo-v2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    z-index: -1;
    transition: all ease-in-out 300ms;
    }
.header-nav-ul-logo::before{
    content: '';
    position: relative;
    display: block;
    height: 54px;
    background-color: rgba(17, 17, 17, 1);
    right: 54px;
    width: 100%;
    top: 0px;
    }
.header-nav-ul-logo::after{
    content: '';
    position: absolute;
    display: block;
    height: 54px;
    background-color: rgba(17, 17, 17, 1);
    right: -3px;
    width: 3px;
    top: 0px;
    }
header.header-shrink .header .header-nav .header-nav-ul-logo{
    top: 26px;
    }
header .header .header-nav ul .menu-item{
    position: relative;
    display: inline-block;
    font-family: "neue-haas-unica", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1em;
    letter-spacing: 0.12em;
    color: rgb(17, 17, 17);
    height: 52px;
    padding: 0px 20px;
    cursor: pointer;
    top: 0px;
    margin: 0px;
    transition: all ease-in-out 300ms;
    }
header .header .header-nav ul .menu-item:first-child{
    padding-left: 0px
    }
header .header .header-nav ul .menu-item:last-child{
    padding-right: 0px;
    }
header .header .header-nav ul .menu-item:last-child::after{
    border-right: 2px solid rgba(87, 164, 225, 0);
    }
header .header .header-nav ul .menu-item a{
    position: relative;
    display: block;
    color: inherit;
    top: 3px
    }
header .header .header-nav ul .menu-item a .last{
    letter-spacing: 0px;
    }
header .header .header-nav ul .menu-item a::after{
    content: '';
    border-bottom: 8px solid rgba(17, 17, 17, 1);
    position: absolute;
    left: 0%;
    width: 0%;
    bottom: -15px;
    transition: all ease-in-out 300ms;
    }
header .header .header-nav ul .menu-item:hover a::after{
    width: 100%;
    }
header .header .header-nav ul .menu-item.selected a::after{
    width: 100%;
    transition: none;
    }
/*---------- PROJECTS SUB NAV ----------*/
header .header .header-nav ul .menu-item-2 .subnav-projects{
    display: block;
    position: absolute;
    margin-top: -338px;
    transition: all ease-in-out 300ms;
    padding: 0px;
    margin-left: 0px;
    opacity: 0;
    z-index: -1;
    clip-path: margin-box;
    }
header .header .header-nav.bg-on ul .menu-item-2 .subnav-projects{
    background-color: rgb(247, 247, 247);
    }
header .header .header-nav ul .menu-item-2:hover .subnav-projects{
    margin-top: 18px;
    padding-top: 0px;
    opacity: 1;
    }
header .header .header-nav ul .menu-item-2.on .subnav-projects{
    margin-top: 9px;
    padding-top: 9px;
    opacity: 1;
    transition: all ease 0ms !important;
    }
header .header .header-nav ul .menu-item-2:hover .subnav-projects::after{
    width: 64.66px;
    }
header .header .header-nav ul .menu-item-2.on .subnav-projects::after{
    width: 64.66px;
    }
header .header .header-nav ul .menu-item .subnav-projects ul{
    border-left: 2px solid rgba(17, 17, 17, 1);
    padding: 8px 0px 12px 21px;
    }
header .header .header-nav ul .menu-item .subnav-projects ul li.sub-nav{
    position: relative;
    display: block;
    padding: 8px 0px;
    width: 200px;
    z-index: 10;
    }
header .header .header-nav ul .menu-item .subnav-projects ul li.sub-nav a{
    line-height: 1em;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(17, 17, 17, 1);
    }
header .header .header-nav ul .menu-item .subnav-projects ul li.sub-nav:hover a{
    color: rgb(247, 247, 247);
    }
header .header .header-nav ul .menu-item .subnav-projects ul li.sub-nav.selected a{
    color: rgb(247, 247, 247);
    }
header .header .header-nav ul .menu-item .subnav-projects ul li.sub-nav a::after{
    content: '';
    position: absolute;
    height: 24px;
    background-color: rgba(17, 17, 17, 1);
    width: 0%;
    top: -6px;
    z-index: -1;
    left: -22px;
    transition: all ease-in-out 200ms;
    }
header .header .header-nav ul .menu-item .subnav-projects ul li.sub-nav:hover a::after{
    width: calc(100% + 24px);
    }
header .header .header-nav ul .menu-item .subnav-projects ul li.sub-nav.selected a::after{
    width: calc(100% + 27px);
    }
header .header .header-nav ul .menu-item-2 .subnav-projects::after{
    content: '';
    position: absolute;
    display: block;
    height: 263px;
    width: 100% !important;
    opacity: 0;
    left: 0px;
    bottom: 0px;
    background-color: rgba(247, 247, 247, 0.7);
    z-index: -1;
    transition: all ease-in-out 100ms 200ms;
    }
header .header .header-nav ul .menu-item-2:hover .subnav-projects::after{
    opacity: 1;
    }
/*--- /PROJECTS SUB NAV ---*/
/*--- MINIMIZED HEADER ELEMENTS ---*/
header .header nav.min-nav-btn{
    position: relative;
    display: block;
    margin-top: 53px;
    width: 50px;
    height: 50px;
    transition: all ease-in-out 300ms;
    cursor: pointer;
    }
header.header-shrink .header nav.min-nav-btn{
    margin-top: 32px;
    }
header .header nav.min-nav-btn i{
    position: absolute;
    display: block;
    width: 36px;
    height: 2px;
    right: 0px;
    top: 0px;
    background-color: #111;
    transition: all ease-in-out 300ms;
    }
header .header nav.min-nav-btn i:nth-child(2){
    top: 11px;
    }
header .header nav.min-nav-btn i:nth-child(3){
    top: 21px;
    }
header .header nav.min-nav-btn i.white{
    background-color: #fff;
    }
header .header nav.min-nav-btn.on i:nth-child(1){
    transform: rotate(45deg);
    right: -4px;
    top: 11px;
    }
header .header nav.min-nav-btn.on i:nth-child(2){
    opacity: 0;
    }
header .header nav.min-nav-btn.on i:nth-child(3){
    transform: rotate(-45deg);
    right: -4px;
    top: 11px;
    }
header nav.drop-down-nav{
    position: fixed;
    display: block;
    opacity:0;
    height: 120vh;
    width: 100%;
    margin: 0px auto;
    left: 0px;
    right: 0px;
    top: -100vh;
    background-color: #4e5c70;
    transition: all ease-in-out 300ms;
    z-index: 100;
    }
header nav.drop-down-nav.on{
    top: 0vh;
    opacity: 1;
    }
header nav.drop-down-nav ul{
    position: relative;
    margin: 0px;
    padding: 168px 16px;
    }
.menu-item-dd{
    position: relative;
    font-family: "neue-haas-unica", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 0.8em;
    letter-spacing: 0.1em;
    padding: 4px 0px;
    margin: 20px 0px;
    color: rgba(255, 255, 255, 0.6);
    width: max-content;
    opacity: 0;
    }
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100;
    }
}
.menu-item-dd.on{
    animation: fadeIn 300ms forwards;
    }
.menu-item-dd.selected{
    color: rgba(255, 255, 255, 1);
    border-bottom: 2px solid rgba(255, 255, 255, 1);
    }
/*--- /MINIMIZED HEADER ELEMENTS ---*/
.filter-white{
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%)
    }
@media only screen and (min-width:576px){
header .header{
    padding: 0px 36px;
    }
header nav.drop-down-nav ul{
    padding: 168px 36px;
    }
}

@media only screen and (min-width:768px){
header .header{
    padding: 0px 55px;
    }
header nav.drop-down-nav ul{
    padding: 168px 55px;
    }
}
@media only screen and (min-width:992px){
header{
    height: 168px;
    }
header.bg-on{
    height: 168px;
    }
header.bg-on.header-shrink{
    height: 100px;
    }
header .header{
    padding: 0px 55px 0px 55px;
    }
header.header-shrink{
    height: 120px;
    }
header .header .header-logo{
    height: 144px;
    width: 123.3314px;
    cursor: pointer;
    }
header.header-shrink .header .header-logo{
    height: 96px;
    width: 82.27px;
    }
header .header .header-nav{
    display: block;
    }
header .header nav.min-nav-btn{
    display: none;
    }
}
@media only screen and (min-device-width:100px) and (orientation: landscape) {
header .header .header-logo.reduced{
    height: 96px;
    width: 82px;
    }
header nav.drop-down-nav ul{
    padding-top: 96px !important;
    }
.menu-item-dd{
    margin: 16px 0px;
    }
}