.div-menu-horizontal {
     background-color:var(--navy);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-left:1em;
    padding-right:1em;
    width:100%;
}    

.div-menu-bar {
    max-width:var(--maxw);
    width:100%;
}    
    
.div-menu-vertical {
    display:none;
    width:100%;
}

.div-menu-list {
}

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

.form-inline {
    display:inline;
}










.input-button-navy,.button-menu-navy {
    background-color:var(--navy);
    border:none;
    color:white;
    font-family: 'EB Garamond';
    font-size:1.1em;
    padding:1em;
}

.input-button-navy:hover,.button-menu-navy:hover {
    background-color:var(--red);
}

.input-button-red,.button-menu-red {
    background-color:var(--red);
    border:none;
    color:white;
    font-family: 'EB Garamond';
    font-size:1.1em;
    padding:1em;
}

.input-button-red:hover,.button-menu-red:hover {
        background-color:white;
        color:var(--navy);
}

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

.span-menu {
    background: var(--navy);
    display: block;
    height: 0.25em;
    position: relative;
    width: 1.5em;
}

.span-menu::before, .span-menu::after{
    background: var(--navy);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .1s 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-navy {
    display:block;
    width:100%;
    background-color:var(--navy);
    height:2em;
}

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


.input-menu-check:checked ~ .div-menu-list {
    display:block;
}

.input-menu-check:checked ~ .div-menu-navy {
    display:none
}


@media only screen and (max-width: 725px) { 
    
.div-menu-horizontal {
    display:none;
}

.div-menu-vertical {
    display:block;
}

.input-button-navy, .input-button-red,.button-menu-navy,.button-menu-red {
    padding:0.25em;
    text-align:left;
    width:100%;
}

}