header{ position: fixed; width: 100%; z-index: 5; width: var(--mainWidth); max-width: 100%; left: 50%; transform: translateX(-50%);}
header a.logo{ position: absolute; z-index: 2; left: 0; top: 0; padding: 35px 48px; }

main{ overflow-x: hidden; }
main > nav{
    position: fixed; top: 0; right: -320px; width: 320px; max-width: 100%; height: 100vh; padding: 100px 0 100px 50px; background: #111111; color: #fff; z-index: 4; 
    pointer-events: none; transition: 500ms ease-in-out;
    display: flex; align-items: center;
}
main > nav > ul{ display: block; font-size: 24px; max-height: 100%; padding-bottom: 50px; width: 100%; overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;  }
main > nav > ul > li + li{ margin-top: 22px; }
main > nav > ul > li span{ cursor: pointer; }

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

main > nav > ul > li ul { border-left: 2px solid #fff; padding-left: 15px; margin-left: 5px; line-height: 1; display: none; margin-bottom: 35px; }
main > nav > ul > li ul > li { margin-top: 20px; }

main > nav > ul > li span:hover,
main > nav > ul > li a:hover{ text-decoration: underline; }

header ul.burger{ display: flex; flex-direction: column; padding: 0 28px; height: 78px; border-radius: 50%; justify-content: center; gap: 8px; cursor: pointer; position: absolute; z-index: 10; top: 28px; right: 46px; }
header ul.burger li{ width: 22px; height: 5px; background-color: #fff; transition: .2s; }

body[data-menu=open] header ul.burger li:nth-child(2){ display: none; }
body[data-menu=open] header ul.burger li:nth-child(1){ transform: rotate(45deg); position: relative; top: 7px; }
body[data-menu=open] header ul.burger li:nth-child(3){ transform: rotate(-45deg); top: -6px; }
body[data-menu=open] main > nav{  pointer-events: unset; right: 0; }

nav div.language-selector{ display: flex; gap: 10px; font-size: 24px; position: absolute; bottom: 50px; left: 50px; }
nav div.language-selector a{ color: #545454; }
nav div.language-selector a.selected{ color: #fff; }

header.headroom--not-top ul.burger,
header.headroom--unpinned ul.burger,
header.headroom--not-top a.logo,
header.headroom--unpinned a.logo{ background-color: #111; transition: 500ms; }

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

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

@media (max-width: 1199px){

}

@media (max-width: 767px){


}

@media (max-width: 575px){

    header.headroom--not-top ul.burger,
    header.headroom--unpinned ul.burger,
    header.headroom--not-top a.logo,
    header.headroom--unpinned a.logo{ background-color: unset!important; }

    header.headroom--not-top,
    header.headroom--unpinned,
    header.headroom--not-top,
    header.headroom--unpinned{ background-color: #111; transition: 500ms; height: 80px; }

    header ul.burger{ right: 0; top: 0; }

    main > nav { right: -283px; width: 283px; }

    section.banner.hero div.wrapper { bottom: 50px; }

}   


/*img.hover{ animation: fadeInOut 10s infinite ease-in-out; }*/

@media (hover: hover) and (pointer:fine) {
 /*   img.hover{ animation: unset; }    */
}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}