.navicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625em 1.5em;
  opacity: .8;
  filter: alpha(opacity=80);
  cursor: pointer;
  -webkit-transition: 0.25s;
     -moz-transition: 0.25s;
       -o-transition: 0.25s;
          transition: 0.25s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.navicon-button .navicon:before, 
.navicon-button .navicon:after {
  -webkit-transition: 0.25s;
     -moz-transition: 0.25s;
       -o-transition: 0.25s;
          transition: 0.25s;
}

.navicon-button:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

.navicon {
  display: block;
  position: relative;
  width: 2.5em;
  height: 0.3125em;
  background: #E7E6DD;
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
  -webkit-border-radius: 2.5em;
     -moz-border-radius: 2.5em;
          border-radius: 2.5em;
}

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

.navicon:before {
  top: 0.625em;
}

.navicon:after {
  top: -0.625em;
}

.navicon-button:hover .navicon:before,
.navicon-button:hover .navicon:after {
  -webkit-transition: 0.25s;
     -moz-transition: 0.25s;
       -o-transition: 0.25s;
          transition: 0.25s;
}

.navicon-button:hover .navicon:before {
  top: 0.825em;
}

.navicon-button:hover .navicon:after {
  top: -0.825em;
}

.open .navicon:before,
.open .navicon:after {
  top: 0 !important;
}

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

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

/* Arrows */
.open.larr .navicon:before, .open.larr .navicon:after,
.open.rarr .navicon:before,
.open.rarr .navicon:after,
.open.uarr .navicon:before,
.open.uarr .navicon:after {
  width: 1.5em;
}
.open.larr .navicon:before,
.open.rarr .navicon:before,
.open.uarr .navicon:before {
  -webkit-transform: rotate(35deg);
     -moz-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
       -o-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transform-origin: left top;
     -moz-transform-origin: left top;
      -ms-transform-origin: left top;
       -o-transform-origin: left top;
          transform-origin: left top;
}
.open.larr .navicon:after,
.open.rarr .navicon:after,
.open.uarr .navicon:after {
  -webkit-transform: rotate(-35deg);
     -moz-transform: rotate(-35deg);
      -ms-transform: rotate(-35deg);
       -o-transform: rotate(-35deg);
          transform: rotate(-35deg);
  -webkit-transform-origin: left bottom;
     -moz-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
       -o-transform-origin: left bottom;
          transform-origin: left bottom;
}

.open.uarr {
  -webkit-transform: scale(0.75) rotate(90deg);
     -moz-transform: scale(0.75) rotate(90deg);
      -ms-transform: scale(0.75) rotate(90deg);
       -o-transform: scale(0.75) rotate(90deg);
          transform: scale(0.75) rotate(90deg);
}

/* Arrows */
.open.rarr .navicon:before {
  -webkit-transform: translate(1em, 0) rotate(-35deg);
     -moz-transform: translate(1em, 0) rotate(-35deg);
      -ms-transform: translate(1em, 0) rotate(-35deg);
       -o-transform: translate(1em, 0) rotate(-35deg);
          transform: translate(1em, 0) rotate(-35deg);
  -webkit-transform-origin: right top;
     -moz-transform-origin: right top;
      -ms-transform-origin: right top;
       -o-transform-origin: right top;
          transform-origin: right top;
}
.open.rarr .navicon:after {
  -webkit-transform: translate(1em, 0) rotate(35deg);
     -moz-transform: translate(1em, 0) rotate(35deg);
      -ms-transform: translate(1em, 0) rotate(35deg);
       -o-transform: translate(1em, 0) rotate(35deg);
          transform: translate(1em, 0) rotate(35deg);
  -webkit-transform-origin: right bottom;
     -moz-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
       -o-transform-origin: right bottom;
          transform-origin: right bottom;
}

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

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