
/*Overlay Menu*/
.menu-open .footer-stic,
.menu-open .scroll-button,
.menu-open #fp-nav,.menu-open .btn-callact,
.menu-open .header  .logo {
     opacity: 0
}
.menu-open .footer-stic,
.menu-open .scroll-button,
.menu-open #fp-nav,.menu-open .btn-callact{
    display: none;
}

body .overlay-menu .nav-menu-prod{display: none;}
body.project-page .overlay-menu .nav-menu-default {
    display: none;
}
body.project-page .overlay-menu .nav-menu-prod{
    display: block;
}
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgb(22 40 26 / 80%);
    padding-top: 0px;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
}
.overlay-menu .menu-logo{
    position: absolute;
    pointer-events: none;
    z-index: 5;
    width: 100%;
    left:0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
.overlay-menu .menu-logo img{opacity: 0;max-width: 25vw; max-height: 45vh;    width: 250px;}
.menu-open .overlay-menu .menu-logo img{
    animation: scaleOut;
    animation-duration: 1.5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}
.overlay-menu .main-menu-container {
   
    text-align: left;
    display: flex;
    padding: 0;
    margin: 0; margin-left: auto;
    list-style-type: none;
    overflow: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    flex-direction: column;
}
.overlay-menu .main-menu-container::-webkit-scrollbar {
    display: none;
}
.overlay-menu .main-menu-container ul{
    margin-left: 0px;padding-left: 25px;
    background: var(--d-gradient);
    padding:150px 60px 150px 97px;    height: 100vh;    margin-bottom: 0px;
    position: relative;
}


.overlay-menu .nav-menu li{position: relative;}
    .overlay-menu .nav-menu li:hover:after,.overlay-menu .nav-menu li.active:after{border-color: #fff;}
.overlay-menu .nav-menu a {
    text-transform: uppercase;font-size: 25px;color: #fff;
    transition: all ease 0.4s;
    display: inline-block;position: relative;
}
.overlay-menu .nav-menu a:hover,
.overlay-menu .nav-menu .active a{color: #AFD678; }

.overlay-menu .nav-menu li:hover a:after,.overlay-menu .nav-menu .active a:after{opacity: 1;}





.overlay-menu {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transition: all cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
    padding-bottom: 0px;  
}

.overlay-menu .copyright{position: absolute; bottom: 30px; left: 0px; width: 100%;color: #212b42;
    opacity: 0; transition: var(--d-transition); text-align: center;background: transparent;
}
body.menu-open .overlay-menu {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}
body.menu-open .overlay-menu .copyright{opacity: 1; transition-delay: 1s;}
body.menu-open .overlay-menu .bg {opacity: 0.04; transition-delay: 0.3s;}
.overlay-menu .menu{list-style: none; padding: 0px; margin-left: 0px; margin-bottom: 0px;}

.overlay-menu .nav-menu > li {
    opacity: 0;
    transform: translate(50px, 0);
    -webkit-transform: translate3d(50px, 0px, 0);
    transition-delay: 0.6s;
    padding:17px 0px ;
    margin: 0px;
    text-align: right;
}
body.menu-open .overlay-menu .nav-menu li {
    transition: -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}
body .overlay-menu .nav-menu li.social-mobile{
    width: 100%;
}
body .overlay-menu .nav-menu li.social-mobile a{
    margin-left: 0.5rem;
}
body.menu-open #header .navbar-brand{opacity: 0;}

.overlay-menu .menu-other{display: flex; display: none;}
.overlay-menu .menu-other a{font-size: 24px; text-transform: none; font-weight: 500;}
.overlay-menu .menu-other > li{margin-right: 85px;}
.overlay-menu .menu-other > li:last-child{margin-right: 0px;}

body.menu-open{overflow: hidden !important;}
body.menu-open .overlay-menu .nav-menu > li:nth-last-of-type(1) {
    transition-delay: 0.3s;
}
body.menu-open .overlay-menu .nav-menu > li:nth-last-of-type(2) {
    transition-delay: 0.4s;
}
body.menu-open .overlay-menu .nav-menu >  li:nth-last-of-type(3) {
    transition-delay: 0.5s;
}
body.menu-open .overlay-menu .nav-menu > li:nth-last-of-type(4) {
    transition-delay: 0.6s;
}
body.menu-open .overlay-menu .nav-menu > li:nth-last-of-type(5) {
    transition-delay: 0.7s;
}
body.menu-open .overlay-menu .nav-menu > li:nth-last-of-type(6) {
    transition-delay: 0.8s;
}
body.menu-open .overlay-menu .nav-menu > li:nth-last-of-type(7) {
    transition-delay: 0.9s;
}
body.menu-open .overlay-menu .nav-menu > li:nth-last-of-type(8) {
    transition-delay: 1s;
}


body.menu-open .overlay-menu .menu.menu-other > li {
     transition-delay: 0.2s;
}

@keyframes scaleOut {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.navbar-toggler{
    border: 0px;  padding: 0;
    transition: var(--d-transition);
}

@media (max-width:767px) {
    @keyframes scaleOut {
        0% {
            opacity: 0;
            transform: scale(1.2);
        }
        to {
            opacity: 1;
            transform: scale(1.1);
        }
    }
}
@media screen and (min-width:1440px){
    .overlay-menu .main-menu-container ul {padding: 130px 60px 150px 97px; }
    .overlay-menu .nav-menu > li { padding: 20px 0px; }
        .overlay-menu .nav-menu li:after { top: 20px;}
        .overlay-menu .nav-menu li:before {height: 18px; top: 42px;}



}
@media screen and (min-width:1600px) {
    .overlay-menu {padding-top: 0px;}
}

@media screen and (min-width:1680px){
    .overlay-menu .nav-menu > li { padding: 19px 0px;}
    .overlay-menu .nav-menu a { font-size: 28px; line-height: 30px; }
    .overlay-menu .main-menu-container ul {padding: 130px 60px 180px 137px;    }
    








        

}
@media screen and (min-width:1900px){  
  .overlay-menu .nav-menu > li { padding: 30px 0px; }
    .overlay-menu .nav-menu a {font-size: 46px;}
} 
@media screen and (min-width:2500px){

}
@media (max-width:1399px) {
    .overlay-menu .menu > li{ padding: 8px 0px;}
    .overlay-menu .menu:not(.menu-other) a{font-size: 24px;}
    .overlay-menu .menu-other a{font-size: 18px;}
    .overlay-menu .menu-other > li:not(:last-child){    margin-right: 65px;}
}

@media (max-width:1199px) {
    .overlay-menu .menu > li{text-align: center;}

    
}
   
@media (max-width:991px) {
    body.menu-open #header .navbar-brand{opacity: 1;}
    .overlay-menu .menu-logo{left: -10%;}    
}
@media screen and (min-width:768px) and (max-width:979px){
     
}    
@media (max-width:767px) {
    .overlay-menu .main-menu-container ul {padding: 100px 20px 120px 20px; }
    .overlay-menu .menu:not(.menu-other) a{font-size: 18px;}
    .overlay-menu .menu-other a{font-size: 14px;}
    .overlay-menu .menu-other > li:not(:last-child){    margin-right: 20px;}
    .overlay-menu .copyright{font-size: 12px;    display: none;}
    .overlay-menu .nav-menu > li { padding: 9px 0px;}
    .overlay-menu .nav-menu a { font-size: 22px;}

    .overlay-menu .nav-menu li:after {width: 10px;  height: 10px; left: -20px; top: 12px;   }
    .overlay-menu .nav-menu li:before {height: 9px;left: -15px; top: 27px;}    

    .overlay-menu .menu-logo img { width: 184px;}





}
@media screen and (max-width: 480px) and (orientation : portrait) {

    .overlay-menu .nav-menu a { font-size: 25px;}
      .overlay-menu .nav-menu > li { padding: 17px 0px;}
}    
/*MENU*/


.navbar-toggler{
    border-radius: 0;
    padding: 0;
    width: 1.5625vw; min-width: 24px; aspect-ratio: 30/20;
}
.navbar-toggler:focus{outline: none;box-shadow: none;}


.navbar-toggler-icon {
    background: transparent; width: 100%; height: 100%;  cursor: pointer; transition: 0.3s ease all;
    position: relative;
    display: block;

}
.navbar-toggler-icon > span {
    display: block;
    width: 100%;
    height: 0px;
    border-radius: 0px;
    background-color: #035E3D;
    position: absolute;
    transition: 0.3s ease all;
    border-top: solid 2px #035E3D;
}

.navbar-toggler-icon > span:nth-of-type(1) {
    width:100%;
    top: 0;
    right: 0%;
}
.navbar-toggler-icon > span:nth-of-type(2) {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.navbar-toggler-icon > span:nth-of-type(3) {
    width: 100%;
    bottom: 0;
    right: 0;
}
.navbar-toggler-icon:hover > span {
    width: 100%;
    transition: 0.3s ease all;
    background-color: #F3EF88;
}

body.menu-open .navbar-toggler{color: #AFD678; background: transparent;}
body.menu-open .navbar-toggler .navbar-toggler-icon {
    margin: 0;
    width: 100%;
    height:  100%;
    transform: rotate(180deg) translateY(0%);
    transition: 0.3s ease all;
    opacity: 1;
}
body.menu-open .navbar-toggler .navbar-toggler-icon > span {
    width: 100%;
    transition: 0.3s ease all;
}
body.menu-open:not(.site_sticky) .navbar-toggler .navbar-toggler-icon > span
{
    border-color: #fff;
}
body.menu-open .navbar-toggler .navbar-toggler-icon > span:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open .navbar-toggler .navbar-toggler-icon > span:nth-child(2) {
    opacity: 0;
}
body.menu-open .navbar-toggler .navbar-toggler-icon > span:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

