* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.button {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 3px;
  margin: 0 auto;
  padding-top: 12px;
  float: right;
  margin-top: 29px;
  margin-right: 2%;
  z-index: 99;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.menu-bar {
  display: block;
  position: relative;
  background: #fff;
  width: 30px;
  height: 2px;
  border-radius: 1px;
  transition: all 300ms;
  margin: 0 auto;
}

.bar1 {
  top: 0;
  animation: topbar-back 500ms;
  animation-fill-mode: both;
  animation-play-state: initial !important;
}

.bar2 { opacity: 1; }

.bar3 {
  bottom: 0;
  animation: bottombar-back 500ms;
  animation-fill-mode: both;
  animation-play-state: initial !important;
}

.menu-bar + .menu-bar {
  margin-top: 5px;
}

.toggled .bar1 {
  top: 25%;
  animation: topbar-x 500ms;
  animation-fill-mode: both;
}

.toggled .bar2 {
  opacity: 0;
}

.toggled .bar3 {
  bottom: 25%;
  animation: bottombar-x 500ms;
  animation-fill-mode: both;
}

@keyframes topbar-x {
  0% {
    top: 0;
    -webkit-transform: rotate(0deg);
  }

  45% {
    top: 25%;
    -webkit-transform: rotate(145deg);
  }

  75% {
    -webkit-transform: rotate(130deg);
  }

  100% {
    -webkit-transform: rotate(135deg);
  }
}

@keyframes topbar-back {
  0% {
    top: 25%;
    -webkit-transform: rotate(135deg);
  }

  45% {
    -webkit-transform: rotate(-10deg);
  }

  75% {
    -webkit-transform: rotate(5deg);
  }

  100% {
    top: 0;
    -webkit-transform: rotate(0);
  }
}

@keyframes bottombar-x {
  0% {
    bottom: 0;
    -webkit-transform: rotate(0deg);
  }

  45% {
    bottom: 25%;
    -webkit-transform: rotate(-145deg);
  }

  75% {
    -webkit-transform: rotate(-130deg);
  }

  100% {
    -webkit-transform: rotate(-135deg);
  }
}

@keyframes bottombar-back {
  0% {
    bottom: 25%;
    -webkit-transform: rotate(-135deg);
  }

  45% {
    -webkit-transform: rotate(10deg);
  }

  75% {
    -webkit-transform: rotate(-5deg);
  }

  100% {
    bottom: 0;
    -webkit-transform: rotate(0);
  }
}