.menu-multilevel-underLayer{
display:block;
position:fixed;
top:0;
bottom:0;
left:100%;
right:0;
background-color:#BE9C56;
opacity:.7;
transition:all .2s ease-in-out;
z-index:100000;
}

.menu-multilevel-close{
display:block;
text-align:right;
padding:15px;
}

.menu-multilevel-close-button{
position:relative;
display:inline-block;
width:22px;
height:22px;
cursor:pointer;
}

.menu-multilevel-close-button::before{
content:"";
position:absolute;
top:10px;
left:0;
width:22px;
height:2px;
background-color:rgb(157, 2, 2);
overflow:hidden;
transform:rotate(45deg);
}

.menu-multilevel-close-button::after{
content:"";    
position:absolute;
left:10px;
width:2px;
height:22px;
background-color:rgb(157, 2, 2);
overflow:hidden;
transform:rotate(45deg);
}

.menu-multilevel{
display:block;
position:fixed;
top:0;
bottom:0;
left:100%;
right:0;
z-index:100001;
overflow-y:auto;
transition:all .35s ease-in;
background:#f9f9f9;
}

.nav-active .menu-multilevel{
left:0;
}

.nav-active .menu-multilevel-underLayer{
left:0;
}

.submenu-active{
display:block !important;
}

.menu-multilevel ul{
display:static;
list-style-type:none;
margin:0;
padding:0;
transition:all .3s ease-in-out; 
}

.menu-multilevel a{
transition:all .3s ease-in-out;
}

.menu-multilevel li{
display:block;
}

.menu-multilevel ul span,
.menu-multilevel ul i{
display:block;
}

/*--- Menu 1º Nível  ---*/
.menu-multilevel .menu-1{
background:#f9f9f9;
font-size:1rem;
}

/*--- Submenus  ---*/
.menu-multilevel .menu-1 ul{
display:none;
font-size:.9375rem;
padding:0;
}

/*--- Itens ---*/
.menu-multilevel ul li{
border-bottom:1px solid #eee;
}

.menu-multilevel ul li:first-child{
border-top:1px solid #eee;
}

.menu-multilevel ul li:last-child{
border-bottom:0;
}

/*--- Links ---*/
.menu-multilevel a{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
align-items:center;
text-decoration:none;
}

.menu-multilevel .menu-1-item a{
color:#f1f1f1;
height:50px;
line-height:50px;
padding:0 15px 0 20px;
}

.menu-multilevel .menu-1-item a:hover{
color:#000;
background:transparent;
}	

.menu-multilevel .menu-2-item a{
color:#f1f1f1;
padding:0 15px 0 30px;
height:46px;
line-height:46px;
}

.menu-multilevel .menu-2-item a:hover{
color:#000;
}

/*--- Seta  ---*/
.menu-multilevel .submenu > a::after{
content:"";
display: inline-block;
width: 0;
height: 0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #aaa;
margin-left:5px;
overflow:hidden;
}

/*--- Ícones ---*/
.menu-multilevel .menu-1-item > a span i{
color:#333;
height:50px;
line-height:50px;
margin-right:12px;
}

.menu-multilevel .menu-2-item a span i{
color:#333;
height:46px;
line-height:46px;
margin-right:12px;
}

@media(min-width:992px){
    .menu-multilevel-close{
    display:none;
    }

    .menu-multilevel {
        display: flex;
        justify-content: center; /* Alinhado ao centro */
        position: absolute;
        height: 100%;
        width: 100%; /* Ajusta para que o menu ocupe toda a largura */
        top: 0;
        left: 0;
        right: 0;
        overflow-y: initial;
        background: transparent;
        padding-top: 25px;
    }

    .menu-multilevel li{
    position:relative;
    }

    .menu-multilevel-underLayer,
    .nav-active .menu-multilevel-underLayer{
    display:none;
    }

    /*--- Menus ---*/
    .nav-active .menu-multilevel{
    left:auto;
    }

    .menu-multilevel .menu-1,
    .nav-active .menu-multilevel .menu-1{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    white-space:nowrap;
    list-style-type:none;
    background:transparent;
    text-align:left;
    height:100%;
    font-size:.875rem;
    }

    .menu-multilevel .menu-1 ul{
    display:none;
    position:absolute;
    min-width:160px;
    width:auto;
    padding:8px 10px;
    white-space:nowrap;
    background:#fff;
    border:1px solid #e5e5e5;
    box-shadow:3px 3px 5px 0 rgba(0,0,0,0.18);
    font-size:.875rem;
    }

    .menu-multilevel .menu-2{
    z-index:101;
    }

    .menu-multilevel .menu-3{
    z-index:102;
    }

    .menu-multilevel .menu-4{
    z-index:103;
    }

    .menu-multilevel .menu-3,
    .menu-multilevel .menu-4{
    top:5px;
    left:calc(100% - 5px);
    }	

    /*--- Itens ----*/
    .menu-multilevel ul li{
    border-bottom:1px solid #eee;
    }

    .menu-multilevel ul li:first-child{
    border-top:0;
    }

    .menu-multilevel ul li:last-child{
    border-bottom:0;
    }

    .menu-multilevel .menu-1-item,
    .menu-multilevel .menu-1-item:first-child,
    .menu-multilevel .menu-1-item:last-child{
    display:inline-block;
    border:0;
    }

    /*--- Links ---*/
    .menu-multilevel .menu-1-item > a,
    .menu-multilevel .menu-1-item > a:active,
    .menu-multilevel .menu-1-item > a:visited{
    color:#f1f1f1;
    height:34px;
    line-height:34px;
    padding:0 10px;
    vertical-align:middle;
    transition:all .3s ease-in-out;
    }

    .menu-multilevel .menu-1-item > a:hover{
    color:#000;
    background-color:#f5f5f5;
    }

    .menu-multilevel .menu-2-item a{
    color:#f1f1f1;
    height:38px;
    line-height:38px;
    padding:0 10px;
    }

    .menu-multilevel .menu-2-item a:hover{
    color:#000;
    background-color:#eee;
    }

    /*--- Ícones ---*/
    .menu-multilevel .menu-1-item > a span i{
    color:#333;
    height:38px;
    line-height:38px;
    }
    
    .menu-multilevel .menu-2-item a span i{
    color:#333;
    height:38px;
    line-height:38px;
    } 
}

@media(min-width:1200px){
    .menu-multilevel .menu-1{
    font-size:.9375rem;
    }
}