.label-menu {
    cursor: pointer;
    position:absolute;
    right:1em;
    top:3.5em;
}

.input-menu-check {
    display:none;
}

.span-menu {
    background: white;
    display: block;
    height: 0.25em;
    position: relative;
    width: 1.5em;
}

.span-menu::before, .span-menu::after{
    background: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .25s ease-out;
    width: 100%;
}
.span-menu::before {
    top: 0.5em;
}
.span-menu::after {
    top: -0.5em;
}


.input-menu-check:checked ~ .label-menu .span-menu::before { 
    transform: rotate(-45deg); top:0;
} 

.input-menu-check:checked ~ .label-menu .span-menu::after { 
    transform: rotate(45deg); top:0;
} 

.input-menu-check:checked ~ .label-menu .span-menu { 
    background: transparent; 
}


.div-menu-list {
    display:none;
}



/*
.input-menu-check:checked ~ .div-header-vertical {
       display:grid;
         grid-template-columns:auto;
    justify-items:center;

    row-gap:1em;
    padding:1.5em 0 1.5em 0;

    
    
}
*/

.input-menu-check:checked ~ .nav-vertical {
       display:grid;
         grid-template-columns:auto;
    justify-items:center;

    row-gap:1em;
    padding:1.5em 0 1.5em 0;

    
    
}

@media only screen and (max-width:700px){.label-menu {top:3.50em;}}
@media only screen and (max-width:680px){.label-menu {top:3.41em;}}
@media only screen and (max-width:660px){.label-menu {top:3.32em;}}
@media only screen and (max-width:640px){.label-menu {top:3.23em;}}
@media only screen and (max-width:620px){.label-menu {top:3.14em;}}
@media only screen and (max-width:600px){.label-menu {top:3.05em;}}
@media only screen and (max-width:580px){.label-menu {top:2.96em;}}
@media only screen and (max-width:560px){.label-menu {top:2.87em;}}
@media only screen and (max-width:540px){.label-menu {top:2.78em;}}
@media only screen and (max-width:520px){.label-menu {top:2.69em;}}
@media only screen and (max-width:500px){.label-menu {top:2.60em;}}
@media only screen and (max-width:480px){.label-menu {top:2.51em;}}
@media only screen and (max-width:460px){.label-menu {top:2.42em;}}
@media only screen and (max-width:440px){.label-menu {top:2.33em;}}
@media only screen and (max-width:420px){.label-menu {top:2.24em;}}
@media only screen and (max-width:400px){.label-menu {top:2.15em;}}
@media only screen and (max-width:380px){.label-menu {top:2.06em;}}
@media only screen and (max-width:360px){.label-menu {top:1.97em;}}
@media only screen and (max-width:340px){.label-menu {top:1.88em;}}
@media only screen and (max-width:320px){.label-menu {top:1.79em;}}