/********/
/* MENU */
/********/

#menu{
    position: fixed;
    top: 0px;
    width: 100vw;
    height: 10vh;
    background-color: RGBA(23,45,59,1);
    z-index: 1001;
}
.menu-reduzido, .menu-reduzido .container-fluid, .menu-reduzido .row{
    height: 7vh!important;
}
.menu-reduzido img{
    max-width: 100px!important;
}
.menu-reduzido #login span{
    padding: 3px 30px!important;
}
#menu .container-fluid, #menu .row{
    align-items: center;
    height: 10vh;
}
#menu-logo {
    padding-left: 45px;
}
#menu-logo img{
    max-width: 160px;
    margin-top: -2px;
    cursor: pointer;
}
#menu-opcoes{
    padding-right: 45px;
    text-align: right;
    font-size: 13px;
}
#menu-opcoes a:first-of-type{
    margin-left: 0px;
}
#menu-opcoes a{
    margin-left: 50px;
    color: RGBA(194,202,199,0.8);
}
#menu-opcoes a:hover{
    color: RGBA(194,202,199,1);
}
#menu-icone{
    position: absolute;
    right: 30px;
    cursor: pointer;
    height: 32px;
    width: 30px;
    z-index: 1000;
}
#menu-icone-hamburguer{
    position: absolute;
    right: 30px;
    cursor: pointer;
    height: 32px;
    z-index: 100;
}
#menu-hamburguer{
    display: none;
}
#menu-hamburguer-label{
    margin: 0px;
}
#hamburguer{
    position: relative;
    display: block;
    background: RGBA(194,202,199,1);
    width: 25px;
    height: 2px;
    border-radius: 50px;
    transition: 0.5s ease-in-out;
}
#hamburguer::before, #hamburguer::after{
    position: absolute;
    display: block;
    background: RGBA(194,202,199,1);
    content: '';
    width: 100%;
    height: 100%;
    transition: 0.5s ease-in-out;
}
#menu-hamburguer:checked ~ #menu-hamburguer-label #hamburguer{
    transform: rotate(45deg);
}
#menu-hamburguer:checked ~ #menu-hamburguer-label #hamburguer:before{
    transform: rotate(90deg);
    top: 0;
}
#menu-hamburguer:checked ~ #menu-hamburguer-label #hamburguer:after{
    transform: rotate(90deg);
    bottom: 0;
}
#hamburguer:before{
    top: -8px;
}
#hamburguer:after{
    bottom: -8px;
}
#login{
    background: linear-gradient(45deg, rgba(173,206,128,1), rgba(43,102,86,1));
    border-radius: 25px;
    display: inline-block;
    padding: 2px;
    animation: 0.3s;
}
#login span{
    background: RGBA(23,45,59,1);
    color: RGBA(255,255,255,0.8);
    display: block;
    padding: 10px 30px;
    border-radius: 25px;
}
#login span:hover{
    color: RGBA(255,255,255,1);
}

/***************/
/* MENU MOBILE */
/***************/

#menu-mobile{
    position: fixed;
    top: 7vh;
    display: none;
    width: 100%;
    background-color: RGBA(0,28,41,1);
    z-index: 1000;
}
#menu-mobile-opcoes{
    padding: 25px;
    text-align: center;
}
#menu-mobile-opcoes li{
    padding-bottom: 20px;
}
#menu-mobile-opcoes li:last-of-type{
    padding-bottom: 0px;
}
#menu-mobile-opcoes a{
    color: RGBA(194,202,199,0.8);
    transition: 0.3s;
}
#menu-mobile-opcoes a:hover{
    color: RGBA(194,202,199,1);
}
#login-mobile{
    background: linear-gradient(45deg, rgba(173,206,128,1), rgba(43,102,86,1));
    border-radius: 25px;
    display: inline-block;
    padding: 2px;
    animation: 0.3s;
}
#login-mobile span{
    background: RGBA(0,28,41,1);;
    color: RGBA(255,255,255,0.8);
    display: block;
    padding: 10px 30px;
    border-radius: 25px;
    transition: 0.3s;
}
#login-mobile span:hover{
    color: RGBA(255,255,255,1);
}

/****************/
/* MEDIA SCREEN */
/****************/
@media screen and (max-width: 991px){  
    #menu, #menu .container-fluid, #menu .row{
        height: 10vh !important;
    }
    #menu-logo img{
        max-width: 100px;
    }
    #menu-logo {
        padding-left: 15px;
    }
    #menu-logo {
        text-align: center;
    }
    #menu-icone-hamburguer{
        top:18px;
    }
}

@media screen and (max-width: 375px){
    #menu, #menu .container-fluid, #menu .row{
        height: 7vh !important;
    }
    #menu-icone{
        right: 20px;
    }
    #menu-icone-hamburguer{
        right: 20px;
        top:20px;
    }

}