/* Animatied arrow
-------------------------------------------------------------------------*/
.button-wrapper {
  width: 100%;
  text-align: center;
  padding-top: 45px;
}
.arrow-button {
  cursor: pointer;
  width: 47px;
  height: 40px;
  margin: 0;
  border: none;
  background: none;
  position: relative;
}
.arrow-button:focus {
  outline: none;
}
.arrow-button:hover .line-a,
.arrow-button:hover .line-b {
  background: #949494;
}
.line-a {
  display: inline-block;
  width: 30px;
  height: 6px;
  background: #363636;
  position: absolute;
  left: 0;
  top: 13px;
  transform: rotate3d(0, 0, 1, 45deg);
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  -webkit-transition: background 0.5s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.line-b {
  display: inline-block;
  width: 30px;
  height: 6px;
  background: #363636;
  position: absolute;
  right: 0;
  top: 13px;
  transform: rotate3d(0, 0, 1, -45deg);
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  -webkit-transition: background 0.5s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.arrow-button.down .line-a {
  position: absolute;
  right: 0;
  top: 10px;
  animation-name: turnAdown;
  -webkit-animation-name: turnAdown;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  transform: rotate3d(0, 0, 1, 45deg);
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
}
.arrow-button.down .line-b {
  position: absolute;
  right: 0;
  top: 10px;
  animation-name: turnBdown;
  -webkit-animation-name: turnBdown;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  transform: rotate3d(0, 0, 1, -45deg);
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
}
.arrow-button.up .line-a {
  position: absolute;
  left: 0;
  top: 13px;
  animation-name: turnAup;
  -webkit-animation-name: turnAup;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  transform: rotate3d(0, 0, 1, -45deg);
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
}
.arrow-button.up .line-b {
  position: absolute;
  right: 0;
  top: 13px;
  animation-name: turnBup;
  -webkit-animation-name: turnBup;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  transform: rotate3d(0, 0, 1, 45deg);
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
}
/* Turn A down */
@keyframes turnAdown {
  0% {
    transform: rotate3d(0, 0, 1, -45deg);
    top: 10px;
  }
  50% {
    width: 26px;
  }
  100% {
    transform: rotate3d(0, 0, 1, 45deg);
    top: 13px;
  }
}
@-webkit-keyframes turnAdown {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    top: 10px;
  }
  50% {
    width: 26px;
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    top: 13px;
  }
}
/* Turn B down */
@keyframes turnBdown {
  0% {
    transform: rotate3d(0, 0, 1, 45deg);
    top: 10px;
  }
  50% {
    width: 26px;
  }
  100% {
    transform: rotate3d(0, 0, 1, -45deg);
    top: 13px;
  }
}
@-webkit-keyframes turnBdown {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    top: 10px;
  }
  50% {
    width: 26px;
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    top: 13px;
  }
}
/* turnAup */
@keyframes turnAup {
  0% {
    transform: rotate3d(0, 0, 1, 45deg);
    top: 13px;
  }
  50% {
    width: 26px;
  }
  100% {
    transform: rotate3d(0, 0, 1, -45deg);
    top: 10px;
  }
}
@-webkit-keyframes turnAup {
  0% {
    transform: rotate3d(0, 0, 1, 45deg);
    top: 13px;
  }
  50% {
    width: 26px;
  }
  100% {
    transform: rotate3d(0, 0, 1, -45deg);
    top: 10px;
  }
}
/* turnBup */
@keyframes turnBup {
  0% {
    transform: rotate3d(0, 0, 1, -45deg);
    top: 13px;
  }
  50% {
    width: 26px;
  }
  100% {
    transform: rotate3d(0, 0, 1, 45deg);
    top: 10px;
  }
}
@-webkit-keyframes turnBup {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    top: 13px;
  }
  50% {
    width: 26px;
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    top: 10px;
  }
}