.arrow-down{
  width:60px;
  height:21px;
  margin:0 0 0 -16px;
  position:absolute;
  left:50%;
  bottom:0px;
  -webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
  
}

.arrow-down:hover{
   -webkit-animation-play-state: paused;
}

.left{
  position:absolute;
  height:5px;
  width:20px;
  background:#fcaf17;
  -webkit-transform:rotate(240deg);
  top:10px;
  left:10px;
  -webkit-border-radius:4px;
  -webkit-transform-origin:5px 50%;
  -webkit-animation: leftArrow 0.5s 1s infinite ease-out alternate;
}

.right{
  position:absolute;
  height:5px;
  width:20px;
  background:#4a2886;
  -webkit-transform:rotate(-60deg);
  top:10px;
  left:14px;
  -webkit-border-radius:4px;
  -webkit-transform-origin:5px 50%;
  -webkit-animation: rightArrow 0.5s 1s infinite ease-out alternate;
}




@-webkit-keyframes arrow{
  0% {
    bottom:0px;
  }
  100%{
    bottom:10px;
  }
}


@-webkit-keyframes leftArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(225deg);
  }
}

@-webkit-keyframes rightArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(-45deg);
  }
}