@charset "UTF-8";
/* Change this to watch in slo-mo */
.navicon-button {
  display: inline-block;
  position: relative;
  padding: 1.0625rem 1.5rem;
  transition: 0.25s;
  cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
  opacity: 1;
}
.navicon-button .navicon:before, .navicon-button .navicon:after {
  transition: 0.25s;
}
.navicon-button:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
  transition: 0.25s;
}
.navicon-button:hover .navicon:after {
  top: -.825rem;
}
.navicon-button:hover .navicon:before {
  top: .825rem;
}

.navicon {
  position: relative;
/*  width: 2.0em; */
  width: 30px;
/*  height: .3125rem; */
  height: 4px;

  background: #fff;
  transition: 0.5s;
  border-radius: 2.5rem; 
}
.navicon:after, .navicon:before {
  display: block;
  content: "";
/*  height: .3125rem; */
  height: 4px;
/*  width: 2.0rem; */
  width: 30px;
  background: #fff;
  position: absolute;
  z-index: -1;
  transition: 0.5s 0.25s;
  border-radius: 1rem; 
}
.navicon:after {
  top: -.625rem;
}
.navicon:before {
  top: .625rem;
}

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

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

/* × and + */
.open.x .navicon {
  background: transparent;
}
.open.x .navicon:after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.open.x .navicon:before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}