/*CORES*/

:root{
    --azulEscuro: #122859;
    --azulPadrao: #164194;
    --azulClaro-1: #1348BA;
    --azulClaro-2: #0F59E6;
    --laranjaEscuro: #BF340F;
    --laranjaPadrao: #E84910;
    --laranjaClaro-1: #F5631A;
    --laranjaClaro-2: #F8833F;
}

/*NAVEGAÇÃO*/

div.nav{
    background-color: var(--azulPadrao);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    height: 50px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#navbar{
    display: flex;
}
a img.logo{
    height: 25px;
    margin: 5px 15px 0 15px;
}
ul.menu{
    list-style: none;
    display: flex;
}
.menu li{
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    display: flex;
    height: 100%;
}
.menu li a{
    text-decoration: none;
    color: #ffffff;
    align-self: center;
}
/* navegação */

/*BOTÃO MENU***********/
#nav-menu{ /*Esconde a navegação.*/
    display: block;
    position: absolute;
    width: fit-content;
    top: 49px; /*Mesma distânica da altura do #HEADER.*/
    right: 0; /*Right ou Left não vi diferença.*/
    background-color: var(--azulClaro-1);
    height: 0;
    transition: .6s;
    z-index: 1;
    visibility: hidden;
    overflow-y: hidden; /*Esconde o Menu junto com fundo.*/
}
#nav-menu li{
    height: 60px;
    background-color: transparent;
    border-bottom: 1px solid var(--azulPadrao);
}
#nav-menu li:hover{
    background-color: var(--laranjaClaro-1);
}
#navbar.active #nav-menu{ /*Precisa configurar JavaScript.*/
    height: 100vh;
    visibility: visible;
    overflow-y: auto; /*Quando tiver muitos elementos no Menu de Navegação, ele criará uma barra de scrow.*/
}
#nav-menu a{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 0;
    text-align: center;
}
#btn-mobile{
    display: flex;
    border: none;
    background: none;
    color: #ffffff;
    cursor: pointer;
    gap: 20px;
    padding: 17px 15px;
    font-size: 16px;
}
#hamburguer{
    border-top: 3px solid;
    width: 20px;
}
#hamburguer::after, #hamburguer::before{
    content: '';
    display: block;
    width: 20px;
    height: 3px;
    background-color: currentColor;
    margin-top: 5px;
    transition: .3s;
    position: relative;
}
/*Quando o Hmeburguer estiver ativo, tranformar emum X.
São os próximos 3 passos:*/
#navbar.active #hamburguer{
    border-top-color: transparent;
}
#navbar.active #hamburguer::before{
    transform: rotate(135deg);
}
#navbar.active #hamburguer::after{
    transform: rotate(-135deg);
    top: -7.8px; /*Distância para o X ficar centralizado.*/
}

@media only screen and (max-width: 1060px) {
    img.logo{
        height: 20px;
    }
}

@media only screen and (max-width: 640px) {
    #nav-menu{
        width: 100%;
    }
    a img.logo{
        height: 20px;
    }
}