delicious-hamburgers/dist/hamburgers.css

Beautiful SASS powered hamburger menu toggle buttons

/*!
 * delicious-hamburgers
 * @description Beautiful SASS powered hamburger menu toggle buttons
 * @author kapoko <17455539+kapoko@users.noreply.github.com>
 * @link https://github.com/kapoko/delicious-hamburgers
 */
button.hamburger {
  height: 50px;
  width: 50px;
}

div.hamburger {
  height: 50px;
  width: 50px;
}
div.hamburger > .inner {
  top: 50%;
}

.hamburger {
  background-color: transparent;
  border: 0 transparent solid;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  opacity: 1;
  overflow: visible;
  padding: 5px;
  text-transform: none;
  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger:hover {
  background-color: transparent;
  opacity: 1;
}
.hamburger:hover span.bar {
  background-color: #000;
}
.hamburger:hover > .inner:nth-child(1)::before, .hamburger:hover > .inner:nth-child(1)::after, .hamburger:hover > .inner:nth-child(2)::before, .hamburger:hover > .inner:nth-child(2)::after, .hamburger:hover > .inner:nth-child(3)::before, .hamburger:hover > .inner:nth-child(3)::after,
.hamburger:hover span.bar:nth-child(1)::before,
.hamburger:hover span.bar:nth-child(1)::after,
.hamburger:hover span.bar:nth-child(2)::before,
.hamburger:hover span.bar:nth-child(2)::after,
.hamburger:hover span.bar:nth-child(3)::before,
.hamburger:hover span.bar:nth-child(3)::after {
  background-color: #000;
}
.hamburger.active {
  background-color: transparent;
}
.hamburger.active span.bar {
  background-color: #000;
}
.hamburger.active > .inner:nth-child(1)::before, .hamburger.active > .inner:nth-child(1)::after, .hamburger.active > .inner:nth-child(2)::before, .hamburger.active > .inner:nth-child(2)::after, .hamburger.active > .inner:nth-child(3)::before, .hamburger.active > .inner:nth-child(3)::after,
.hamburger.active span.bar:nth-child(1)::before,
.hamburger.active span.bar:nth-child(1)::after,
.hamburger.active span.bar:nth-child(2)::before,
.hamburger.active span.bar:nth-child(2)::after,
.hamburger.active span.bar:nth-child(3)::before,
.hamburger.active span.bar:nth-child(3)::after {
  background-color: #000;
}
.hamburger > .inner {
  margin: 0;
  margin-top: -1px;
  position: relative;
  width: 100%;
}
.hamburger span.bar {
  background-color: #000;
  border-radius: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
}
.hamburger span.bar:nth-child(1) {
  top: -10px;
}
.hamburger span.bar:nth-child(3) {
  top: 10px;
}
.hamburger:focus {
  outline: 0;
}

.hamburger--default.active span.bar {
  top: 0;
}
.hamburger--default.active span.bar:nth-child(1) {
  transform: rotate(45deg);
}
.hamburger--default.active span.bar:nth-child(2) {
  display: none;
}
.hamburger--default.active span.bar:nth-child(3) {
  transform: rotate(-45deg);
}

.hamburger--criss-cross > .inner::before, .hamburger--criss-cross > .inner::after {
  background-color: #000;
  border-radius: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
  opacity: 0;
  transform-origin: 0 50%;
  transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--criss-cross > .inner::before {
  transform: rotate(45deg) translate3d(-5.8578643763px, -14.1421356237px, 0) scaleX(0);
}
.hamburger--criss-cross > .inner::after {
  transform: rotate(-45deg) translate3d(-5.8578643763px, 14.1421356237px, 0) scaleX(0);
  transition-delay: 0.1s;
}
.hamburger--criss-cross span.bar {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--criss-cross span.bar:nth-child(1) {
  transition-delay: 0.33s;
}
.hamburger--criss-cross span.bar:nth-child(2) {
  transition-delay: 0.36s;
}
.hamburger--criss-cross span.bar:nth-child(3) {
  transition-delay: 0.39s;
}
.hamburger--criss-cross.active > .inner::before, .hamburger--criss-cross.active > .inner::after {
  opacity: 1;
}
.hamburger--criss-cross.active > .inner::before {
  transform: rotate(45deg) translate3d(-5.8578643763px, -14.1421356237px, 0);
  transition-delay: 0.4s;
}
.hamburger--criss-cross.active > .inner::after {
  transform: rotate(-45deg) translate3d(-5.8578643763px, 14.1421356237px, 0);
  transition-delay: 0.5s;
}
.hamburger--criss-cross.active span.bar {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  width: 50%;
}
.hamburger--criss-cross.active span.bar:nth-child(1) {
  transition-delay: 0s;
}
.hamburger--criss-cross.active span.bar:nth-child(2) {
  transition-delay: 0.2s;
}
.hamburger--criss-cross.active span.bar:nth-child(3) {
  transition-delay: 0.1s;
}

.hamburger--apple > .inner {
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--apple span.bar {
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--apple span.bar:nth-child(1) {
  top: 0;
  transform: translate3d(0, -8px, 0);
}
.hamburger--apple span.bar:nth-child(2) {
  top: 0;
  transform: translate3d(0, 8px, 0);
}
.hamburger--apple span.bar:nth-child(3) {
  display: none;
}
.hamburger--apple.active > .inner {
  transform: rotate(90deg) translate3d(1px, -1px, 0);
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--apple.active span.bar {
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0.15s;
}
.hamburger--apple.active span.bar:nth-child(1) {
  transform: rotate(45deg) translate3d(0, 0, 0);
}
.hamburger--apple.active span.bar:nth-child(2) {
  transform: rotate(-45deg) translate3d(0, 0, 0);
}

.hamburger--arrow > .inner,
.hamburger--arrow-right > .inner {
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--arrow span.bar,
.hamburger--arrow-right span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 0.1s;
}
.hamburger--arrow span.bar:nth-child(1),
.hamburger--arrow-right span.bar:nth-child(1) {
  transform-origin: 100% 0;
}
.hamburger--arrow span.bar:nth-child(2),
.hamburger--arrow-right span.bar:nth-child(2) {
  transform-origin: 0 0;
}
.hamburger--arrow span.bar:nth-child(3),
.hamburger--arrow-right span.bar:nth-child(3) {
  transform-origin: 100% 100%;
}
.hamburger--arrow.active > .inner,
.hamburger--arrow-right.active > .inner {
  transform: rotate(180deg) translate3d(0, -2px, 0);
}
.hamburger--arrow.active span.bar,
.hamburger--arrow-right.active span.bar {
  transition-delay: 0s;
}
.hamburger--arrow.active span.bar:nth-child(1),
.hamburger--arrow-right.active span.bar:nth-child(1) {
  transform: rotate(45deg) scaleX(0.4) translate3d(19.4454364826px, 7.7781745931px, 0);
}
.hamburger--arrow.active span.bar:nth-child(2),
.hamburger--arrow-right.active span.bar:nth-child(2) {
  transform: scaleX(0.95);
}
.hamburger--arrow.active span.bar:nth-child(3),
.hamburger--arrow-right.active span.bar:nth-child(3) {
  transform: rotate(-45deg) scaleX(0.4) translate3d(19.4454364826px, -7.7781745931px, 0);
}

.hamburger--arrow > .inner,
.hamburger--arrow-right > .inner {
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--arrow span.bar,
.hamburger--arrow-right span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 0.1s;
}
.hamburger--arrow span.bar:nth-child(1),
.hamburger--arrow-right span.bar:nth-child(1) {
  transform-origin: 100% 0;
}
.hamburger--arrow span.bar:nth-child(2),
.hamburger--arrow-right span.bar:nth-child(2) {
  transform-origin: 0 0;
}
.hamburger--arrow span.bar:nth-child(3),
.hamburger--arrow-right span.bar:nth-child(3) {
  transform-origin: 100% 100%;
}
.hamburger--arrow.active > .inner,
.hamburger--arrow-right.active > .inner {
  transform: rotate(180deg) translate3d(0, -2px, 0);
}
.hamburger--arrow.active span.bar,
.hamburger--arrow-right.active span.bar {
  transition-delay: 0s;
}
.hamburger--arrow.active span.bar:nth-child(1),
.hamburger--arrow-right.active span.bar:nth-child(1) {
  transform: rotate(45deg) scaleX(0.4) translate3d(19.4454364826px, 7.7781745931px, 0);
}
.hamburger--arrow.active span.bar:nth-child(2),
.hamburger--arrow-right.active span.bar:nth-child(2) {
  transform: scaleX(0.95);
}
.hamburger--arrow.active span.bar:nth-child(3),
.hamburger--arrow-right.active span.bar:nth-child(3) {
  transform: rotate(-45deg) scaleX(0.4) translate3d(19.4454364826px, -7.7781745931px, 0);
}

.hamburger--arrow-right span.bar:nth-child(1) {
  transform-origin: 0 0;
}
.hamburger--arrow-right span.bar:nth-child(2) {
  transform-origin: 100% 0;
}
.hamburger--arrow-right span.bar:nth-child(3) {
  left: 0;
  transform-origin: 0 100%;
}
.hamburger--arrow-right.active > .inner {
  transform: rotate(-180deg) translate3d(0, -2px, 0);
}
.hamburger--arrow-right.active span.bar:nth-child(1) {
  transform: rotate(-45deg) scaleX(0.4) translate3d(-19.4454364826px, 7.7781745931px, 0);
}
.hamburger--arrow-right.active span.bar:nth-child(2) {
  transform: scaleX(0.95);
}
.hamburger--arrow-right.active span.bar:nth-child(3) {
  transform: rotate(45deg) scaleX(0.4) translate3d(-19.4454364826px, -7.7781745931px, 0);
}

.hamburger--spin > .inner {
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--spin span.bar {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}
.hamburger--spin span.bar:nth-child(1) {
  top: 0;
  transform: rotate(0deg) translate3d(0, -10px, 0);
  transform-origin: 40% 50%;
}
.hamburger--spin span.bar:nth-child(3) {
  top: 0;
  transform: rotate(0deg) translate3d(0, 10px, 0);
  transform-origin: 40% 50%;
}
.hamburger--spin.active > .inner {
  transform: rotate(180deg) translate3d(0, -2px, 0);
}
.hamburger--spin.active span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s, opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--spin.active span.bar:nth-child(1) {
  transform: rotate(135deg) translate3d(-6.8284271247px, -2.8284271247px, 0);
}
.hamburger--spin.active span.bar:nth-child(2) {
  opacity: 0;
  transform: rotate(45deg);
}
.hamburger--spin.active span.bar:nth-child(3) {
  transform: rotate(45deg) translate3d(-1.1715728753px, -2.8284271247px, 0);
}

.hamburger--collapse span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
}
.hamburger--collapse span.bar::before {
  background-color: #000;
  border-radius: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--collapse span.bar:nth-child(1), .hamburger--collapse span.bar:nth-child(3) {
  background: none;
  top: 0;
}
.hamburger--collapse span.bar:nth-child(1) {
  transform: translate3d(0, -10px, 0);
}
.hamburger--collapse span.bar:nth-child(3) {
  transform: translate3d(0, 10px, 0);
}
.hamburger--collapse.active span.bar {
  transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--collapse.active span.bar:nth-child(1), .hamburger--collapse.active span.bar:nth-child(3) {
  transform: translate3d(0, 0, 0);
}
.hamburger--collapse.active span.bar:nth-child(1)::before, .hamburger--collapse.active span.bar:nth-child(3)::before {
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0.15s;
}
.hamburger--collapse.active span.bar:nth-child(1)::before {
  transform: rotate(135deg);
}
.hamburger--collapse.active span.bar:nth-child(2) {
  opacity: 0;
}
.hamburger--collapse.active span.bar:nth-child(3)::before {
  transform: rotate(45deg);
}

.hamburger--minimal span.bar {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s;
}
.hamburger--minimal span.bar:nth-child(1) {
  top: -8px;
}
.hamburger--minimal span.bar:nth-child(2) {
  top: 8px;
}
.hamburger--minimal span.bar:nth-child(3) {
  display: none;
}
.hamburger--minimal.active span.bar {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--minimal.active span.bar:nth-child(1) {
  transform: translate3d(0, 8px, 0);
}
.hamburger--minimal.active span.bar:nth-child(2) {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

.hamburger--dive span.bar {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--dive span.bar:nth-child(1) {
  top: 0;
  transform: translate3d(0, -8px, 0);
}
.hamburger--dive span.bar:nth-child(2) {
  top: 0;
  transform: translate3d(0, 8px, 0);
}
.hamburger--dive span.bar:nth-child(3) {
  display: none;
}
.hamburger--dive.active span.bar:nth-child(1) {
  transform: rotate(135deg);
}
.hamburger--dive.active span.bar:nth-child(2) {
  transform: rotate(45deg);
}

.hamburger--stack span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
}
.hamburger--stack span.bar:nth-child(1), .hamburger--stack span.bar:nth-child(3) {
  background: none;
  top: 0;
}
.hamburger--stack span.bar:nth-child(1)::before, .hamburger--stack span.bar:nth-child(3)::before {
  background-color: #000;
  border-radius: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--stack span.bar:nth-child(1) {
  transform: translate3d(0, -10px, 0);
}
.hamburger--stack span.bar:nth-child(3) {
  transform: translate3d(0, 10px, 0);
}
.hamburger--stack.active span.bar {
  transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--stack.active span.bar:nth-child(1), .hamburger--stack.active span.bar:nth-child(3) {
  transform: translate3d(0, 0, 0);
}
.hamburger--stack.active span.bar:nth-child(1)::before, .hamburger--stack.active span.bar:nth-child(3)::before {
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1) 0.15s;
}
.hamburger--stack.active span.bar:nth-child(1)::before {
  transform: rotate(45deg);
}
.hamburger--stack.active span.bar:nth-child(2) {
  opacity: 0;
}
.hamburger--stack.active span.bar:nth-child(3)::before {
  transform: rotate(-45deg);
}

.hamburger--converge span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--converge span.bar:nth-child(1) {
  top: 0;
  transform: translate3d(0, -10px, 0);
}
.hamburger--converge span.bar:nth-child(2) {
  opacity: 1;
  transform-origin: 20% 50%;
}
.hamburger--converge span.bar:nth-child(3) {
  top: 0;
  transform: translate3d(0, 10px, 0);
}
.hamburger--converge.active span.bar {
  top: 0;
}
.hamburger--converge.active span.bar:nth-child(1) {
  transform: rotate(135deg);
}
.hamburger--converge.active span.bar:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}
.hamburger--converge.active span.bar:nth-child(3) {
  transform: rotate(-135deg);
}

.hamburger--twist span.bar {
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--twist span.bar:nth-child(1) {
  top: 0;
  transform: rotate(0deg) translate3d(0, -10px, 0);
}
.hamburger--twist span.bar:nth-child(2) {
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
}
.hamburger--twist span.bar:nth-child(3) {
  top: 0;
  transform: rotate(0deg) translate3d(0, 10px, 0);
  transform-origin: 40% 50%;
}
.hamburger--twist.active span.bar:nth-child(1) {
  transform: rotate(45deg);
}
.hamburger--twist.active span.bar:nth-child(2) {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--twist.active span.bar:nth-child(3) {
  transform: rotate(-225deg) translate3d(-6.8284271247px, -2.8284271247px, 0);
}

.hamburger--magnetic span.bar {
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}
.hamburger--magnetic span.bar:nth-child(1), .hamburger--magnetic span.bar:nth-child(2) {
  background: none;
  top: 0;
}
.hamburger--magnetic span.bar:nth-child(1)::before, .hamburger--magnetic span.bar:nth-child(2)::before {
  background-color: #000;
  border-radius: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--magnetic span.bar:nth-child(1) {
  transform: translate3d(0, -8px, 0);
}
.hamburger--magnetic span.bar:nth-child(2) {
  transform: translate3d(0, 8px, 0);
}
.hamburger--magnetic span.bar:nth-child(3) {
  display: none;
}
.hamburger--magnetic.active span.bar {
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--magnetic.active span.bar:nth-child(1), .hamburger--magnetic.active span.bar:nth-child(2) {
  transform: translate3d(0, 0, 0);
}
.hamburger--magnetic.active span.bar:nth-child(1)::before, .hamburger--magnetic.active span.bar:nth-child(2)::before {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--magnetic.active span.bar:nth-child(1)::before {
  transform: rotate(45deg);
}
.hamburger--magnetic.active span.bar:nth-child(2)::before {
  transform: rotate(-45deg);
}

.hamburger--chop span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--chop span.bar:nth-child(1) {
  top: 0;
  transform: translate3d(0, -10px, 0);
}
.hamburger--chop span.bar:nth-child(2) {
  opacity: 1;
  transform-origin: 15% 50%;
}
.hamburger--chop span.bar:nth-child(3) {
  top: 0;
  transform: translate3d(0, 10px, 0);
}
.hamburger--chop.active span.bar {
  top: 0;
}
.hamburger--chop.active span.bar:nth-child(1) {
  transform: rotate(45deg);
}
.hamburger--chop.active span.bar:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}
.hamburger--chop.active span.bar:nth-child(3) {
  transform: rotate(-45deg);
}

.hamburger--parallel span.bar {
  transform: scaleX(1) translate3d(0, 0, 0);
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--parallel span.bar:nth-child(1) {
  top: -8px;
}
.hamburger--parallel span.bar:nth-child(2) {
  top: 8px;
}
.hamburger--parallel span.bar:nth-child(3) {
  display: none;
}
.hamburger--parallel:hover span.bar:nth-child(1) {
  transform: scaleX(0.85) translate3d(15%, 0, 0);
}
.hamburger--parallel:hover span.bar:nth-child(2) {
  transform: scaleX(0.85) translate3d(-15%, 0, 0);
}
.hamburger--parallel.active span.bar {
  top: 0;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--parallel.active span.bar:nth-child(1) {
  transform: rotate(-45deg);
}
.hamburger--parallel.active span.bar:nth-child(2) {
  transform: rotate(45deg);
}

.hamburger--vertical > .inner {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--vertical span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.15s;
}
.hamburger--vertical span.bar:nth-child(1) {
  top: 0;
  transform: translate3d(0, -8px, 0);
  transform-origin: -125% 50%;
}
.hamburger--vertical span.bar:nth-child(2) {
  top: 0;
  transform: translate3d(0, 8px, 0);
  transform-origin: -125% 50%;
}
.hamburger--vertical span.bar:nth-child(3) {
  display: none;
}
.hamburger--vertical.active > .inner {
  transform: rotate(90deg) translate3d(1px, -1px, 0);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--vertical.active span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}
.hamburger--vertical.active span.bar:nth-child(1) {
  transform: rotate(-45deg) translate3d(-20.5025253169px, 49.4974746831px, 0);
}
.hamburger--vertical.active span.bar:nth-child(2) {
  transform: rotate(45deg) translate3d(-20.5025253169px, -49.4974746831px, 0);
}

.hamburger--push {
  overflow: hidden;
}
.hamburger--push > .inner {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--push > .inner::before, .hamburger--push > .inner::after {
  background-color: #000;
  border-radius: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
  top: -55px;
}
.hamburger--push > .inner::before {
  transform: rotate(45deg);
}
.hamburger--push > .inner::after {
  transform: rotate(-45deg);
}
.hamburger--push.active > .inner {
  transform: translate3d(0, 55px, 0);
}

.hamburger--flatten span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--flatten.active span.bar:nth-child(1) {
  transform: translate3d(0, 10px, 0);
}
.hamburger--flatten.active span.bar:nth-child(3) {
  transform: translate3d(0, -10px, 0);
}

.hamburger--simple span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--simple span.bar:nth-child(1) {
  top: 0;
  transform: translate3d(0, -8px, 0);
}
.hamburger--simple span.bar:nth-child(2) {
  top: 0;
  transform: translate3d(0, 8px, 0);
}
.hamburger--simple span.bar:nth-child(3) {
  display: none;
}
.hamburger--simple.active span.bar:nth-child(1) {
  transform: rotate(-45deg) translate3d(0, 0, 0);
}
.hamburger--simple.active span.bar:nth-child(2) {
  transform: rotate(45deg) translate3d(0, 0, 0);
}

.hamburger--shelf span.bar {
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s;
}
.hamburger--shelf span.bar:nth-child(1) {
  top: 0;
  transform: translate3d(0, -10px, 0);
}
.hamburger--shelf span.bar:nth-child(2) {
  transform: scaleX(0.5);
  transform-origin: 0 50%;
}
.hamburger--shelf span.bar:nth-child(3) {
  top: 0;
  transform: scaleX(0.75) translate3d(0, 10px, 0);
  transform-origin: 0 50%;
}
.hamburger--shelf:hover span.bar:nth-child(2) {
  transform: scaleX(1);
}
.hamburger--shelf:hover span.bar:nth-child(3) {
  transform: scaleX(1) translate3d(0, 10px, 0);
}
.hamburger--shelf.active span.bar {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--shelf.active span.bar:nth-child(1) {
  transform: rotate(45deg) translate3d(0, 0, 0);
}
.hamburger--shelf.active span.bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger--shelf.active span.bar:nth-child(3) {
  transform: rotate(-45deg) translate3d(-5.8578643763px, 14.1421356237px, 0);
}