/* =====================================================
   MENU LATERAL - MONYS IMPORTS
===================================================== */

/* Overlay */

#monys-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

/* ===================================================== */

/* Painel */

#monys-side-menu{

    position:fixed;

    top:0;

    left:-340px;

    width:320px;

    height:100vh;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:15px 0 40px rgba(0,0,0,.18);

    transition:.35s;

    z-index:9999;

    overflow-y:auto;

}

/* ===================================================== */

/* Menu aberto */

#monys-side-menu.active{

    left:0;

}

#monys-overlay.active{

    opacity:1;

    visibility:visible;

}

/* ===================================================== */

/* Cabeçalho */

.monys-menu-header{

    padding:35px 30px;

    border-bottom:1px solid rgba(0,0,0,.08);

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* Logo */

.monys-menu-header h2{

    margin:0;

    font-size:22px;

    font-weight:800;

    color:#222;

}

/* ===================================================== */

/* Botão fechar */

.monys-menu-close{

    border:none;

    background:none;

    font-size:32px;

    cursor:pointer;

    color:#555;

    transition:.25s;

}

.monys-menu-close:hover{

    transform:rotate(90deg);

    color:#ff2d95;

}

/* ===================================================== */

/* Navegação */

.monys-menu-nav{

    padding:20px 0;

}

.monys-menu-nav ul{

    list-style:none;

    margin:0;

    padding:0;

}

.monys-menu-nav li{

    margin:0;

}

/* ===================================================== */

/* Categoria */

.menu-title{

    padding:20px 30px 10px;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#999;

    font-weight:700;

}

/* ===================================================== */

/* Links */

.monys-menu-nav a{

    display:block;

    padding:16px 30px;

    color:#333;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.monys-menu-nav a:hover{

    background:#fff0f7;

    color:#ff2d95;

    padding-left:40px;

}

/* ===================================================== */

/* Responsivo */

@media(max-width:768px){

    #monys-side-menu{

        width:290px;

        left:-310px;

    }

}