section#menu {
    margin-bottom:75px;
}

section#menu nav {
    position:fixed;
    top:0;
    left:0;
    z-index:10;
    width:100%; 
    height:75px; 
    background:var(--pallete-white);
    box-shadow:0 1px 10px 1px rgba(0,0,0,0.5) ;
}

section#menu nav img {
    position:absolute;
    height:90%; 
    margin:5px 5px 5px 1vw;
    animation: slide-from-left 1s ease-out;
}

section#menu nav div {
    position:absolute;
    height:100%;
    top:0;
    right:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    color: var(--pallete-black);
    font-size:32px;
    font-weight:600;
    transform:translateX(5px);  
}

section#menu nav div i {    
    cursor:pointer;    
    animation: show-with-zoomIn 0.35s ease-out;    
}

section#menu div#menu-background{
    position:fixed;
    width:100%;
    height:100%;
    z-index:5;
    background-color:rgba(0,0,0,0.95);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;    
    overflow-y: auto;
}

.show-anim {
    animation: show 0.5s ease-out;
    animation-fill-mode: forwards;
}

.hide-anim {
    animation: hide 0.25s ease-out;
    animation-fill-mode: forwards;
}

section#menu div#menu-background::-webkit-scrollbar {
    width: 10px;               
}

section#menu div#menu-background::-webkit-scrollbar-track {
    background: var(--pallete-white);        
}

section#menu div#menu-background::-webkit-scrollbar-thumb {
    background-color: var(--pallete-grey);    
    border-radius: 10px;       
    border: 3px solid var(--pallete-grey);  
}

section#menu div#menu-header{
    width:100%;  
    background-color:rgba(32,96,206,0.95);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 66%);
    padding-bottom:75px;
    animation: show 0.5s ease-out;
}

section#menu div#menu-identification{
    width:100%;
}

div#menu-identification > button {
    width:auto;
}

div#menu-identification > div#image {
    width:164px;
    height:164px;
    border:4px solid var(--pallete-white);
    border-radius:50%;
    margin:25px 5px 0px 5px;
    background-position: center;
    background-size: contain;
    background-color:var(--pallete-grey);
    box-shadow:0 0 10px 0px black;
    animation: zoomIn 0.35s ease-out;
}

div#menu-identification > div#greeting{
    color:white;
    text-align:center;
    font-weight:600;
    font-size:25px;
    margin:25px 0px; 
    text-shadow:0 0 5px black;
    animation: show 0.5s ease-out;
}

section#menu div#menu-options {
    position:absolute;
    z-index:10;    
    background:var(--pallete-white);
    width:100%; 
    height:calc(100vh - 75px);
    /*Aumentar o valor de min-height em 50px para cada novo item do menu*/
    min-height:275px;
    max-width:500px;    
    padding:0px 0px;    
    box-shadow:0 0 25px 0px #555;    
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.open-anim {
    animation: slide-from-right 0.25s ease-out;
    animation-fill-mode: forwards;
}

.close-anim {
    animation: slide-to-right 0.25s ease-out;
    animation-fill-mode: forwards;
}

div#menu-options #options-container {
    width:100%;  
    height:100%;
    overflow-y:hidden;
    border-top:1px solid var(--pallete-grey);    
}

#options-container a {
    color:var(--pallete-black);
}

div#menu-options div.option {
    --text-transform: scale(1,1);
    position:relative;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:50px;
    font-weight:600;
    text-align:center; 
    border-bottom:1px solid var(--pallete-grey);
    
}

div#menu-options div.option:hover{
    color:var(--pallete-white);
    background-color:var(--pallete-red);
    border-bottom:1px solid var(--pallete-white);
    --text-transform: scale(1.1,1.1); 
}

div.option i {
    position:absolute;
    top:13;
    left:25px;
    font-size:24px;
    transform: var(--text-transform);
    transition: transform 0.5s ease-in-out;
}

div.option div {
    transform: var(--text-transform);
    transition: transform 0.5s ease-in-out;
}

@media only screen and (max-width:500px) {
    section#menu div#menu-options {
        width:100%;
        height:100%;
    }
}