:root{ --white: #f9f9f9; --black: #36383F; --proapegreen: #006453; --proapedarkgreen: #00362b; } /* variables*/
.header{ background-color: var(--proapegreen); box-shadow: 1px 1px 5px 0 var(--proapegreen); width: 100%; position: fixed; top: 0; z-index: 1049; }
/* Nav menu */
.nav{ width: 100%; height: 100%; position: fixed; background-color: #006453; overflow: hidden; }
ul.menu { list-style: none; padding-left: 0; width: 100%; }
.menu a{ display: block; padding: 15px 20px; color: var(--white); }
.menu a:hover{ background-color: var(--proapedarkgreen); }
.nav{ max-height: 0; transition: max-height .05s ease-out; }
a.logo {padding: 0 2em;}
/* Menu Icon */
.hamb{ cursor: pointer; float: right; padding: 20px 20px; }/* Style label tag */
.hamb-line { background: var(--white); display: block; height: 2px; position: relative; width: 24px; } /* Style span tag */
.hamb-line::before,
.hamb-line::after { background: var(--white); content: ''; display: block; height: 100%; position: absolute; transition: all .1s ease-out; width: 100%; }
.hamb-line::before { top: 5px; }
.hamb-line::after { top: -5px; }

.side-menu { display: none; } /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav { max-height: 100%; z-index: 1049; left: 0; border-radius: 0; display: block; overflow: scroll; }
.side-menu:checked ~ header { }
.side-menu:checked ~ nav > ul > li > a { font-size: 1.4rem !important; border-right: none; }
.side-menu:checked ~ .hamb .hamb-line { background: transparent; }
.side-menu:checked ~ .hamb .hamb-line::before { transform: rotate(-45deg); top:0; }
.side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top:0; }
/* Responsiveness */
@media (min-width: 768px) {
    .nav { max-height: none; top: 0; position: relative; float: right; /*width: fit-content; */ width: calc(100% - 106px); background-color: transparent; display: flex; justify-content: space-between; }
    ul.menu { width: auto; }
    .menu li { float: left; margin-right: 1.4em; }
    .menu a { padding: 10px 0; }
    .menu a:hover { background-color: transparent; color: var(--proapegreen); }
    .hamb { display: none; }
    .side-menu:not(:checked) ~ nav > ul > li > a[href="#faq"] { border-right: 1px solid white; }
}