.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  z-index: 4;
}

.hamRotate.active {
  transform: rotate(45deg);
}

.hamRotate180.active {
  transform: rotate(180deg);
}

.hline {
  fill: none;
  transition:
    stroke-dasharray 1200ms,
    stroke-dashoffset 1200ms;
  stroke: #000;
  /* stroke: #fff; */
  /* stroke: #000; */
  stroke-width: 4.5;
  stroke-linecap: butt;
}

.ham4 .top {
  stroke-dasharray: 40 121;
}

.ham4 .bottom {
  stroke-dasharray: 40 121;
}

.ham4.active .top {
  stroke-dashoffset: -68px;
}

.ham4.active .bottom {
  stroke-dashoffset: -68px;
}

.ham8 .top {
  stroke-dasharray: 40 160;
}

.ham8 .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 900ms;
}

.ham8 .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition:
    transform 900ms,
    stroke-dashoffset 900ms;
}

.ham8.active .top {
  stroke-dashoffset: -64px;
}

.ham8.active .middle {
  /* //stroke-dashoffset: -20px; */
  transform: rotate(90deg);
}

.ham8.active .bottom {
  stroke-dashoffset: -64px;
}