/* MENU */

.hamburger-menu-wrapper {background:transparent; padding: 1rem;display: inline-flex; align-items: center; justify-content: center; position:absolute; top:2rem; right:5rem;  z-index: 99999; }
.hamburger-menu-wrapper.bounce-effect { /*animation: bounce 0.3s ease 1;*/ }

.menu-overlay {transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  display: none;  position: fixed;  top: 0;  bottom: 0;  right: 0;  left: 0;  background: rgba(0, 0, 0, 0.9); width:100%; height: 100vh;  z-index: 1111;}

.menu { width:100%; position: absolute;  top:0;  right: 0;  text-align: center;}
.hamburger-menu {  border: 0;  margin: 0 auto;  display: block;  position: relative;  overflow: hidden;  padding: 0;  width: 4rem;  height:4rem;   font-size: 0;  text-indent: -9999px;  cursor: pointer;
  z-index: 9999;  cursor: pointer;  background: transparent;}
.menu-list {  display: none;  position: absolute;  width: 100%; max-width:var(--container); top:20rem; left:50%; transform: translateX(-50%);  text-align: left;  z-index: 9999;}
.menu-list h1{padding:0 0 5rem 0; float: none; position: relative; top: auto; left: auto;}
.menu-list ul{display: flex; gap:2rem}
.menu-list ul li{flex:1}
.menu-list ul li > a{font-weight: bold; font-size: 3rem; color:#fff}
.menu-sub dd{}
.menu-sub dd a{color: #C6D2D6;  text-decoration: none;  font-size: 1.8rem;  display: inline-block;  padding: 1rem 0;  transition: all 0.5s ease; position: relative;}

.menu-sub dd a:hover{color:#fff}
.hamburger-menu:focus { outline: none; }
.hamburger-menu span {  display: block;  position: absolute;  top: 17px;  left: 5px;  right: 5px;  height: 2px;  background:#fff}
.hamburger-menu span:before, .hamburger-menu span:after {  position: absolute;  display: block;  left: 0;  width: 100%;  height: 2px; background:#fff;  content: "";
}
.hamburger-menu span:before { top: -7px; }
.hamburger-menu span:after { bottom: -7px; }
.hamburger-menu span:before, .hamburger-menu span:after {  transition-duration: 0.3s, 0.3s;  transition-delay: 0.3s, 0s;}
.hamburger-menu span:before { transition-property: top, transform; }
.hamburger-menu span::after { transition-property: bottom, transform; }
.hamburger-menu.active span { background: none; }
.hamburger-menu.active span:before {  top: 0; transform: rotate(225deg); background: #fff;}
.hamburger-menu.active span:after {  bottom: 0; transform: rotate(135deg); background: #fff}
.hamburger-menu.active span:before, .hamburger-menu.active span:after { transition-delay: 0s, 0.3s; }
 @keyframes 
bounce {  0% {
  transform: rotate(0);  
  }
  45% {
  transform: rotate(15deg);
  }
  90% {
  transform: rotate(-7deg);
  }
  100% {
  transform: rotate(0);
  }
}

@media all and (max-width:1023px){
  .menu{display:none}

}