.navicon-button {
  display: inline-block;
  position: relative;
  padding: 33px 23px;
  -webkit-transition: 0.25s;
          transition: 0.25s;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: .8;
}
.navicon-button .navicon:before, .navicon-button .navicon:after {
  -webkit-transition: 0.25s;
          transition: 0.25s;
}
.navicon-button:hover {
  -webkit-transition: 0.5s;
          transition: 0.5s;
  opacity: 1;
}
.navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
  -webkit-transition: 0.25s;
          transition: 0.25s;
}
.navicon-button:hover .navicon:before {
  top: .555rem;
}
.navicon-button:hover .navicon:after {
  top: -.525rem;
}

.navicon {
  position: relative;
  width: 1.5em;
  height: .2125rem;
  background: #000;
  -webkit-transition: 0.5s;
          transition: 0.5s;
}
.navicon:before, .navicon:after {
  display: block;
  content: "";
  height: .2125rem;
  width: 1.5rem;
  background: #000;
  position: absolute;
  z-index: -1;
  -webkit-transition: 0.5s 0.25s;
          transition: 0.5s 0.25s;
}
.navicon:before {
  top: .425rem;
}
.navicon:after {
  top: -.455rem;
}

.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
  top: 0 !important;
}

.open .navicon:before,
.open .navicon:after {
  -webkit-transition: 0.5s;
          transition: 0.5s;
}



.open.x .navicon {
  background: transparent;
}

.open.x .navicon:before {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.open.x .navicon:after {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.open.plus {
  -webkit-transform: scale(0.75) rotate(45deg);
      -ms-transform: scale(0.75) rotate(45deg);
          transform: scale(0.75) rotate(45deg);
}