body[nav=open]{ overflow: hidden; }

header{ position: absolute; width: 100%; z-index: 3; }
header a.logo{ position: absolute; z-index: 2; left: 40px; top: 44px; }
header a.logo svg{ width: auto; height: 142px; }
header div.burger{ position: absolute; z-index: 2; right: 40px; top: 44px; }
header div.burger svg{ width: auto; height: 44px; }

header nav{
    display: grid; align-items: center; position: fixed; top: 0; right: 0; width: 768px; max-width: 100%; height: 100vh; padding: 50px;  background-color: var(--dark-green); color: var(--primary); text-align: center; z-index: -1; opacity: 0;
    overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: none;
}
header nav ul{ display: block; font-size: 30px; flex-wrap: wrap; }
header nav > ul > li{ display: block; margin: 1rem 0;  }

header nav ul > li ul { display: none; }
header nav ul > li.true ul { display: block; }

header nav > ul > li > a,
header nav > ul > li > span{ font-family: 'Volte Semibold'; font-size: 40px; cursor: pointer; display: inline-block; position: relative; }

body[nav=open] header nav{ z-index: 5; transition: opacity .5s; opacity: 1; pointer-events: unset; }

header nav span.x{ width: 44px; height: 44px; top: 44px; right: 40px; z-index: 1; }

@media (min-width: 1200px){
    
}

@media (min-width: 576px){
    
}

@media (max-width: 1199px){

}

@media (max-width: 767px){

    header a.logo{ left: 16px; top: 24px; }
    header a.logo svg{ height: 70px; }
    header div.burger{ right: 16px; top: 28px; }
    header div.burger svg{ height: 32px; }

    header nav span.x { width: 32px; height: 32px; top: 28px; right: 18px; }
    header nav { padding: 30px; }
    header nav ul { font-size: 20px; }
    header nav > ul > li > a,
    header nav > ul > li > span{ font-size: 30px; }





}



@media (max-width: 575px){

}