/* Mobile Nav - Hamburger menu */

/* Animate .nav-overlay background color from transparent to rgba(0, 0, 0, 0.5) */
.w-nav-overlay.overlay-open {
  animation-name: navOverlay;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.w-nav-overlay {
  animation-name: navOverlay;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

.nav-menu {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-menu::-webkit-scrollbar {
  display: none;
}

@keyframes navOverlay {
  from {
    background-color: transparent;
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

/* Animate hamburger menu to an x */

.menu-button_icon.menu-open > *:nth-child(1) {
  animation-name: hamburgerToX1;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.menu-button_icon.menu-open > *:nth-child(2) {
  animation-name: hamburgerToX2;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.menu-button_icon.menu-open > *:nth-child(3) {
  animation-name: hamburgerToX3;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes hamburgerToX1 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(5px) rotate(0);
  }
  100% {
    transform: translateY(5px) rotate(-45deg);
  }
}

@keyframes hamburgerToX2 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}

@keyframes hamburgerToX3 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-5px) rotate(0);
  }
  100% {
    transform: translateY(-5px) rotate(-45deg);
  }
}