.label-menu {
    cursor: pointer;
    position:absolute;
    right:2em;
    top:3em;
}

.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;

    
    
}