/*arrow*/
.arrow{
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;
  bottom: 1rem;
  margin: 0 auto;
  z-index: 10;
  width: 1.2rem;
  height: 0.9rem;
  background:url('../img/web-swipe-tip.png') no-repeat;
  background-size: 100% 100%;
  -webkit-animation: arrowMove 1s linear 0s infinite both;
    animation: arrowMove 1s linear 0s infinite both;
}
@-webkit-keyframes arrowMove {
    0% {
        opacity: 0;
        bottom: 1rem
    }
    1% {
        opacity: 1
    } 
    100% {
        opacity: 0;
        bottom: 2rem
    }
}


@keyframes arrowMove {
    0% {
        opacity: 0;
        bottom: 1rem
    }
    1% {
        opacity: 1
    }
    100% {
        opacity: 0;
        bottom: 2rem
    }
}