#home-wrapper{
    height: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

#menu-lateral-wrapper{
    max-width: 35rem;
    min-width: 30rem;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    background: linear-gradient(#06599b, #ac3335);
    color: #fff;
}

.logo-wrapper{
    margin: 2.5rem 1rem;
    text-align: center;
}

#menu-mobile{
    display: none;
    position: absolute;
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 3rem;
    outline: none;
}

#img-logo{
    max-width: 25rem;
    filter: drop-shadow(0 .5rem 1rem rgba(0, 10, 20, .5));
}

#menu-lateral{
    flex: 1;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    margin-top: 4rem;
}

#menu-lateral .botao-lateral{
    width: 100%;
    display:  block;
    padding: 1.5rem 2rem;
    background: none;
    border: none;
    border-right: solid .5rem transparent;
    border-bottom: solid .1rem rgba(255, 255, 255, .05);
    border-radius: 0;
    color: #fff;
    font-size: 1.8rem;
    text-align: left;
    outline: none;
}

#menu-lateral .botao-lateral.selected{
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .3);
    border-bottom: solid .1rem transparent;
}

#menu-lateral .botao-lateral i{
    margin-right: 1.5rem;
}

.usuario-wrapper{
    background: rgba(0, 0, 0, .2);
    padding: 2rem;
    font-size: 1.5rem;
    margin-top: 5rem;
}

.usuario-wrapper #logoff{
    background: none;
    padding: 0;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    text-decoration: underline;
    outline: none;
}


@media screen and (max-width: 768px){
    #menu-lateral-wrapper{
        max-width: 100%;
        max-height: 5rem;
        overflow: hidden;
        transition: .5s;
    }

    #menu-lateral-wrapper.aberto{
        max-height: 100%;
    }

    #menu-lateral-wrapper.aberto .logo-wrapper{
        background: none;
    }

    .logo-wrapper{
        background: linear-gradient(#06599b, #1a548e);
        padding: 1.5rem;
        margin: -1rem -1rem 0 -1rem;
        transition: .5s;
    }

    #img-logo{
        max-width: 13rem;
        margin-top: -.5rem;
        filter: drop-shadow(0 .3rem .5rem rgba(0, 10, 20, .5));
    }

    #menu-lateral{
        margin-top: 0;
    }

    #menu-mobile{
        display: block;
    }
}