.arrow span img{
    width: 35px;
}


.rotate-n span img {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  width: 35px;
}
.rotate-n_l span img {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  width: 15px;
}
.rotate-nne span img {
  -webkit-transform: rotate(203deg);
  transform: rotate(203deg);
  width: 35px;
}
.rotate-nne_l span img {
  -webkit-transform: rotate(203deg);
  transform: rotate(203deg);
  width: 15px;
}
.rotate-ne span img {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  width: 35px;
}
.rotate-ne_l span img {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  width: 15px;
}
.rotate-ene span img {
  -webkit-transform: rotate(248deg);
  transform: rotate(248deg);
  width: 35px;
}
.rotate-ene_l span img {
  -webkit-transform: rotate(248deg);
  transform: rotate(248deg);
  width: 15px;
}
.rotate-e span img {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  width: 35px;
}
.rotate-e_l span img {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  width: 15px;
}
.rotate-ese span img {
  -webkit-transform: rotate(293deg);
  transform: rotate(293deg);
  width: 35px;
}
.rotate-ese_l span img {
  -webkit-transform: rotate(293deg);
  transform: rotate(293deg);
  width: 15px;
}
.rotate-se span img {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  width: 35px;
}
.rotate-se_l span img {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  width: 15px;
}
.rotate-sse span img {
  -webkit-transform: rotate(338deg);
  transform: rotate(338deg);
  width: 35px;
}
.rotate-sse_l span img {
  -webkit-transform: rotate(338deg);
  transform: rotate(338deg);
  width: 15px;
}
.rotate-s span img {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  width: 35px;
}
.rotate-s_l span img {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  width: 15px;
}
.rotate-sso span img {
  -webkit-transform: rotate(23deg);
  transform: rotate(23deg);
  width: 35px;
}
.rotate-sso_l span img {
  -webkit-transform: rotate(23deg);
  transform: rotate(23deg);
  width: 15px;
}
.rotate-so span img {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 35px;
}

.rotate-so_l span img {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 15px;
}

.rotate-oso_l span img {
  -webkit-transform: rotate(68deg);
  transform: rotate(68deg);
  width: 15px;
}
.rotate-oso span img {
  -webkit-transform: rotate(68deg);
  transform: rotate(68deg);
  width: 35px;
}


.rotate-o span img {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 35px;
}
.rotate-o_l span img {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 15px;
}
.rotate-ono span img {
  -webkit-transform: rotate(113deg);
  transform: rotate(113deg);
  width: 35px;
}
.rotate-ono_l span img {
  -webkit-transform: rotate(113deg);
  transform: rotate(113deg);
  width: 15px;
}
.rotate-no span img {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 35px;
}
.rotate-no_l span img {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 15px;
}
.rotate-nno span img {
  -webkit-transform: rotate(158deg);
  transform: rotate(158deg);
  width: 35px;
}
.rotate-nno_l span img {
  -webkit-transform: rotate(158deg);
  transform: rotate(158deg);
  width: 15px;
}


.arrow .rotate-n span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animaten 2s infinite;
}
.arrow .rotate-n_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animaten 2s infinite;
}
  .arrow .rotate-nne span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatenne 2s infinite;
}
.arrow .rotate-nne_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatenne 2s infinite;
  }
.arrow .rotate-ne span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatene 2s infinite;
}
.arrow .rotate-ne_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatene 2s infinite;
  }
.arrow .rotate-ene span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatee 2s infinite;
}
.arrow .rotate-ene_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatee 2s infinite;
}
.arrow .rotate-e span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatee 2s infinite;
}
.arrow .rotate-e_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatee 2s infinite;
}
.arrow .rotate-ese span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatese 2s infinite;
}
.arrow .rotate-ese_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatese 2s infinite;
}
.arrow .rotate-se span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatese 2s infinite;
}
.arrow .rotate-se_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatese 2s infinite;
}
.arrow .rotate-sse span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatese 2s infinite;
}
.arrow .rotate-sse_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animatese 2s infinite;
}

.arrow .rotate-s span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animates 2s infinite;
}
.arrow .rotate-s_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animates 2s infinite;
}

.arrow .rotate-sso span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateso 2s infinite;
}
.arrow .rotate-sso_l span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateso 2s infinite;
}
.arrow .rotate-so span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateso 2s infinite;
}
.arrow .rotate-so_l span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateso 2s infinite;
}
.arrow .rotate-oso span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateo 2s infinite;
}
.arrow .rotate-oso_l span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateo 2s infinite;
}

.arrow .rotate-o span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateo 2s infinite;
}
.arrow .rotate-o_l span {
  display: block;
  width: 25px;
  height: 25px;
  animation: animateo 2s infinite;
}
.arrow .rotate-ono span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animateno 2s infinite;
}
.arrow .rotate-ono_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animateno 2s infinite;
}
.arrow .rotate-no span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animateno 2s infinite;
}
.arrow .rotate-no_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animateno 2s infinite;
}
.arrow .rotate-nno span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animateno 2s infinite;
}
.arrow .rotate-nno_l span{
  display: block;
  width: 25px;
  height: 25px;
  animation: animateno 2s infinite;
}

@keyframes animaten{
   
     0%{
        opacity: 0;
        transform:translate(00px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(00px,20px);
    }
}
@keyframes animatenne {
    0%{
        opacity: 0;
        transform:translate(10px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(-10px,20px);
    }
}
@keyframes animatene {
    0%{
        opacity: 0;
        transform:translate(20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(-20px,20px);
    }
}

@keyframes animateene {
    0%{
        opacity: 0;
        transform:translate(20px,10px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(-20px,15px);
    }
}


@keyframes animatee {
    0%{
        opacity: 0;
        transform:translate(20px,00px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(-20px,00px);
    }
}
@keyframes animateese {
    0%{
        opacity: 0;
        transform:translate(20px,20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(-20px,00px);
    }
}
@keyframes animatese {
    0%{
        opacity: 0;
        transform:translate(20px,20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(-20px,-20px);
    }
}
@keyframes animatesse {
    0%{
        opacity: 0;
        transform:translate(20px,20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(3.3px,16.6px);
    }
}
@keyframes animates {
    0%{
        opacity: 0;
        transform:translate(00px,20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(00px,-20px);
    }
}
@keyframes animatesso {
    0%{
        opacity: 0;
        transform:translate(-20px,20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(-3.3px,16.6px);
    }
}
@keyframes animateso {
    0%{
        opacity: 0;
        transform:translate(-20px,20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(20px,-20px);
    }
}
@keyframes animateoso {
    0%{
        opacity: 0;
        transform:translate(-20px,10px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(20px,-10px);
    }
}
@keyframes animateo {
    0%{
        opacity: 0;
        transform:translate(-20px,0px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(20px,0px);
    }
}
@keyframes animateono {
    0%{
        opacity: 0;
        transform:translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(20px,20px);
    }
}

@keyframes animateno {
    0%{
        opacity: 0;
        transform:translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(20px,20px);
    }
}

@keyframes animatenno {
    0%{
        opacity: 0;
        transform:translate(-10px,20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:translate(10px,-20px);
    }
}
