/* menu big modal */

            
.menu_emergent{
    position: fixed; top: 0; left: 100%; z-index: 11; width: 100%; height: 100%; background: #0d0d0d; display: flex; 
    align-items: center; justify-content: start; overflow: hidden; transition: all 0.5s ease-in-out; z-index: 999; }

.menu_emergent.Visibl{ left: 10%; }
.menu_emergent.Visibl + .headerScroll{ background: none; top:0 !important; }
.menu_emergent > div{ padding:40px 80px; width: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; z-index: 1; }
.menu_emergent .Menu a img{ width: 21px; height: auto; margin-right: 13px; }
.menu_emergent > div a{ opacity: 0;  text-decoration: none; color: #fff; margin: 4px 0px; } 
.menu_emergent > div a.active{ color: #8a8a8a; font-weight: 200 !important; }
.menu_emergent .Taggers img{ width: 17px; margin-right: 8px; opacity: 0.6; }
.menu_emergent .Taggers{ padding: 12px 0px; align-items: center; display: flex; font-size: 1.2rem !important; }
.menu_emergent .socials {
    position: absolute;
    z-index: 11;
    width: calc(90% - 160px);
    display: flex;
    align-items: center;
    justify-content: start;
    bottom: 0;
    list-style: none;
    flex-direction: row;
    opacity: 0;
    left: 0;
    padding: 80px !important;
    transition: all 0.5s 1s ease-in-out;
    z-index: 1;
}
.menu_emergent.Visibl .socials{
    opacity: 1;
}
.menu_emergent .socials img{
    width: 30px;
    height: auto;
    margin-right: 20px;
}
    
.menu_emergent .socials li{ margin-left:0px }
.menu_emergent .socials li a{ display: block; }
.menu_emergent .socials li img{ width: 50px; opacity: 1; }      

.menu_emergent_backdrop {
    position: fixed; z-index: 11; top: 0; right: 0; height: 100%; width: 0%; background: #000000e6; opacity: 0;
    transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); }

.menu_emergent_MarkerP { 
    position: fixed;
    top: 41px;
    color: #FFF;
    z-index: 9999;
    font-size: 20px;
    letter-spacing: 2px;
    cursor: default;
    font-weight: 300;
    left: calc(100% - 360px);
    transition: all 0.5s ease-in-out;
}

.addMarker{ left: calc(10% + 84px); opacity:0.6 }

.menu_emergent_btn_black{  
    opacity: 1;
    position: fixed;
    width: 38px;
    height: auto;
    top: 35px;
    right: 40px;
    cursor: pointer;
    z-index: 99999;
    background: #000;
    border-radius: 999px;
    filter: invert(1);
}

.lineGlobe{
    top: 90px;
    right: 58px;
    height: 80px;
    width: 1px;
    position: fixed;
    background: #ffffff41;
    z-index: 9;
}

.menu_emergent_closeBtn { position: fixed; width: 24px; height: auto; top: 35px; display: block;
    right: -55px; cursor: pointer; z-index: 99999; filter: invert(0); transition: all 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55); }

.closeBtn_show{ right: 50px; }
.ShowUpMenu{ opacity: 1; width: 100%; }

/* Animation for menu items */
    .menu_emergent.Visibl > div a { position: relative; opacity: 0; transform: translateX(60px); animation: fadeInLeft 0.5s ease-out forwards; font-size: 4rem; font-weight: 100; padding: 15px 0px; }

/* Delay for sequential animation */
    .menu_emergent.Visibl > div a:nth-child(1) { animation-delay: 0.5s; }
    .menu_emergent.Visibl > div a:nth-child(2) { animation-delay: 0.6s; }
    .menu_emergent.Visibl > div a:nth-child(3) { animation-delay: 0.7s; }
    .menu_emergent.Visibl > div a:nth-child(4) { animation-delay: 0.8s; }
    .menu_emergent.Visibl > div a:nth-child(5) { animation-delay: 0.9s; }
    .menu_emergent.Visibl > div a:nth-child(6) { animation-delay: 0.6s; }
    .menu_emergent.Visibl > div a:nth-child(7) { animation-delay: 0.7s; }
    .menu_emergent.Visibl > div a:nth-child(8) { animation-delay: 0.8s; }
    .menu_emergent.Visibl > div a:nth-child(9) { animation-delay: 0.9s; }
    .menu_emergent.hiding > div a { animation: fadeOutLeft 0.5s ease-out forwards; opacity:1; transform: translateX(0px); }

/* Reverse delays to make items disappear in reverse order */
    .menu_emergent.hiding > div a:nth-child(1) { animation-delay: 0.8s; }
    .menu_emergent.hiding > div a:nth-child(2) { animation-delay: 0.7s; }
    .menu_emergent.hiding > div a:nth-child(3) { animation-delay: 0.6s; }
    .menu_emergent.hiding > div a:nth-child(4) { animation-delay: 0.5s; }
    .menu_emergent.hiding > div a:nth-child(5) { animation-delay: 0.4s; }
    .menu_emergent.hiding > div a:nth-child(6) { animation-delay: 0.3s; }
    .menu_emergent.hiding > div a:nth-child(7) { animation-delay: 0.2s; }
    .menu_emergent.hiding > div a:nth-child(8) { animation-delay: 0.1s; }
    .menu_emergent.hiding > div a:nth-child(9) { animation-delay: 0s; }

    .menu_emergent.Visibl > div a.active,
    .menu_emergent.Visibl > div a:hover{
        opacity: 0.6 !important;
    }

    .menu_emergent.Visibl > div a:hover:before,
    .menu_emergent.Visibl > div a.active:before{
        content: "";
        position: absolute;
        left: -80px;
        width: 1px;
        height: 100%;
        background: #fff;
        top: 0;
    }

    .menu_emergent video{ position: absolute; z-index: -1; opacity: 0; top: 0;
        left: 0; object-fit: cover; width: 100%; height: 100%; transition: all 2s ease-in-out; }

    .menu_emergent.Visibl video{ opacity: 0.2; }


    @media (max-width: 900px) {
        .menu_emergent_MarkerP{
            display: none;
        }
        .menu_emergent.Visibl > div a {
            font-size: 2rem;
        }
        .menu_emergent > div {
            padding: 40px 40px;
        }
        .menu_emergent.Visibl > div a:hover:before {
            display: none;
        }
        .menu_emergent.Visibl {
            left: 25% !important;
        }
        .menu_emergent .socials {
            padding: 42px !important;
        }
        canvas {
            display: none;
        }
    }

    @media (max-width: 1500px) {
        canvas {
            right: -14%;
            bottom: -7%;
        }
    }
    
    @keyframes fadeInLeft {
        from { opacity: 0;  transform: translateX(60px); }
        to {  opacity: 1; transform: translateX(0); }
    }

    @keyframes fadeOutLeft {
        from {  opacity: 1; transform: translateX(0); }
        to { opacity: 0; transform: translateX(60px); }
    }


    canvas{
        position: absolute;
        z-index: 0;
        right: 0;
        bottom: 0;
    }

    
    @media (max-width: 900px) {
        .menu_emergent video{
            display: none;
        }
    }