/* BOTÃO ABRIR MENU */
#abrir-menu{
    position:fixed;

    top:20px;
    left:20px;

    background:#111;
    color:white;

    border:none;

    padding:12px 15px;

    border-radius:8px;

    cursor:pointer;

    font-size:28px;

    z-index:2000;

    transition:0.3s;
}

#abrir-menu:hover{
    background:#333;
}

/* ESCONDER BOTÃO */
.escondido{
    display:none;
}

/* MENU LATERAL */
#menu-lateral{
    position:fixed;

    top:0;
    left:-280px;

    width:260px;
    height:100vh;

    background:#1a1a1a;

    color:white;

    transition:left 0.4s ease;

    z-index:1500;

    box-shadow:2px 0 10px rgba(0,0,0,0.5);

    font-family: 'Maquina-bold';
}

/* MENU ABERTO */
#menu-lateral.aberto{
    left:0;
}

/* TOPO MENU */
.topo-menu{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    border-bottom:1px solid #333;
}

/* TÍTULO */
.topo-menu h2{
    font-size:24px;
    font-family: 'Maquina-bolder';
}

/* BOTÃO FECHAR */
#fechar-menu{
    background:none;

    border:none;

    color:white;

    font-size:22px;

    cursor:pointer;
}

/* LISTA */
#menu-lateral ul{
    list-style:none;

    padding-top:20px;
}

/* LINKS */
#menu-lateral ul li a{
    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 20px;

    text-decoration:none;

    color:white;

    transition:0.3s;
}

/* HOVER LINKS */
#menu-lateral ul li a:hover{
    background:#333;

    padding-left:30px;
}

/* ÍCONES */
#menu-lateral ul li a i{
    font-size:20px;
}

/* RESPONSIVO */
@media(max-width:768px){

    #menu-lateral{
        width:220px;
    }

    #abrir-menu{
        font-size:24px;
    }

}