/*START OF GLOBAL CLASSES*/
svg.ham {
  --icon-size: 8rem;
  width: var(--icon-size);
}
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.is-active .hamRotate {
  transform: rotate(45deg);
}
.is-active .hamRotate180 {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: var(--icon-blue);
  stroke-width:5.5;
  stroke-linecap: butt;
}
/*END OF GLOBAL CLASSES*/

/*ham8*/
.ham .top {
  stroke-dasharray: 40 160;
}
.ham .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 400ms;
}
.ham8 .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 400ms, stroke-dashoffset 400ms;
}
.is-active .ham .top {
  stroke-dashoffset: -64px;
}
.is-active .ham .middle {
    stroke-dashoffset: 0px !important;
  transform: rotate(90deg);
}
.is-active .ham .bottom {
  stroke-dashoffset: -64px;
}