/* =========================================================
   MENU BURGER
========================================================= */

.menu-icon {
  width: 40px;
  height: 30px;
  display: block;
  cursor: pointer;
  position: relative;
}

.menu-icon .top,
.menu-icon .middle,
.menu-icon .bottom {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform-origin: center;
}

.menu-open .menu-icon .top {
  transform: translateY(10px) rotate(45deg);
}

.menu-open .menu-icon .middle {
  opacity: 0;
}

.menu-open .menu-icon .bottom {
  transform: translateY(-10px) rotate(-45deg);
}