/*
 * HAMBURGER
 */

 .hamburger {
  position: fixed;
  z-index: 255;
  top: 1.1rem;
  right: 1rem;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  background: var(--hamburger-bg);
  font-size: 0;
  cursor: pointer;
  transition: background var(--hamburger-transition-time);
  @media screen and (min-width: 1400px) {
    display: none !important;
  }
  span {
    position: absolute;
    top: 46.875%;
    left: 18.75%;
    width: 62.5%;
    height: 3px;
    background-color: var(--hamburger-color);
    transition: background 0s var(--hamburger-transition-time);
    &:before,
    &:after {
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      transition-delay: var(--hamburger-transition-time), 0s;
      transition-duration: var(--hamburger-transition-time), var(--hamburger-transition-time);
    }
    &:before {
      top: -400%;
      transition-property: top, transform;
      background-color: var(--hamburger-color);
    }
    &:after {
      bottom: -400%;
      transition-property: bottom, transform;
      background-color: var(--hamburger-color);
    }
  }
}

.hamburger.active {
  span {
    background: none;
    &:before {
      top: 0%;
      transition-delay: 0s, var(--hamburger-transition-time);
      transform: rotate(45deg);
    }
    &:after {
      bottom: 0%;
      transition-delay: 0s, var(--hamburger-transition-time);
      transform: rotate(-45deg);
    }
  }
}