@charset "UTF-8";
.navicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: 0.25s;
  cursor: pointer;
  user-select: none;
  opacity: .8; }
  .navicon-button .navicon:before, .navicon-button .navicon:after {
    transition: 0.25s; }
  .navicon-button:hover {
    transition: 0.5s;
    opacity: 1; }
    .navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
      transition: 0.25s; }
    .navicon-button:hover .navicon:before {
      top: .825rem; }
    .navicon-button:hover .navicon:after {
      top: -.825rem; }

.navicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: #E7E6DD;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  border-radius: 2.5rem; }
  .navicon:before, .navicon:after {
    display: block;
    content: "";
    height: .3125rem;
    width: 2.5rem;
    background: #E7E6DD;
    position: absolute;
    z-index: -1;
    transition: 0.5s 0.25s;
    -webkit-transition: 0.5s 0.25s;
    -moz-transition: 0.5s 0.25s;
    -o-transition: 0.5s 0.25s;
    border-radius: 1rem; }
  .navicon:before {
    top: .625rem; }
  .navicon:after {
    top: -.625rem; }

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

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

/* Minus */
.open {
  transform: scale(0.75);
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  -o-transform: scale(0.75); }

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

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

nav {
  display: flex;
  justify-content: space-between;
  height: 4.5rem;
  background: #2A2A2A;
  text-align: right;
  border-radius: .5rem .5rem 0 0;
  padding: 0 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }

@font-face {
  font-family: 'Kite One';
  font-style: normal;
  font-weight: 400;
  src: local("Kite One"), local("KiteOne-Regular"), url(http://themes.googleusercontent.com/static/fonts/kiteone/v1/VNHoD96LpZ9rGZTwjozAOnYhjbSpvc47ee6xR_80Hnw.woff) format("woff"); }

/*# sourceMappingURL=menu-button-anim.css.map */