/*arrow right*/
@-webkit-keyframes arrow-left-before {
    0% {transform: translate(0%) rotate(-45deg);}
    40% {transform: translate(250%) rotate(-45deg);}
    50% {transform: translate(250%, 200%) rotate(-45deg);}
    55% {transform: translate(-250%, 200%) rotate(-45deg);}
    60% {transform: translate(-250%, 0%) rotate(-45deg);}
}
@keyframes arrow-left-before {
    0% {transform: translate(0%) rotate(-45deg);}
    40% {transform: translate(250%) rotate(-45deg);}
    50% {transform: translate(250%, 200%) rotate(-45deg);}
    55% {transform: translate(-250%, 200%) rotate(-45deg);}
    60% {transform: translate(-250%, 0%) rotate(-45deg);}
}
@-webkit-keyframes arrow-left-after {
    0% {transform: translate(0%) rotate(45deg);}
    40% {transform: translate(250%) rotate(45deg);}
    50% {transform: translate(250%, 200%) rotate(45deg);}
    55% {transform: translate(-250%, 200%) rotate(45deg);}
    60% {transform: translate(-250%, 0%) rotate(45deg);}
}
@keyframes arrow-left-after {
    0% {transform: translate(0%) rotate(45deg);}
    40% {transform: translate(250%) rotate(45deg);}
    50% {transform: translate(250%, 200%) rotate(45deg);}
    55% {transform: translate(-250%, 200%) rotate(45deg);}
    60% {transform: translate(-250%, 0%) rotate(45deg);}
}

/*arrow right*/
@-webkit-keyframes arrow-down-before {
    0% {transform: translate(0%) rotate(45deg);}
    40% {transform: translate(0%, 250%) rotate(45deg);}
    50% {transform: translate(250%, 250%) rotate(45deg);}
    55% {transform: translate(250%, -250%) rotate(45deg);}
    60% {transform: translate(0%, -250%) rotate(45deg);}
}
@keyframes arrow-down-before {
    0% {transform: translate(0%) rotate(45deg);}
    40% {transform: translate(0%, 250%) rotate(45deg);}
    50% {transform: translate(250%, 250%) rotate(45deg);}
    55% {transform: translate(250%, -250%) rotate(45deg);}
    60% {transform: translate(0%, -250%) rotate(45deg);}
}
@-webkit-keyframes arrow-down-after {
    0% {transform: translate(0%);}
    40% {transform: translate(0%, 250%) rotate(-45deg);}
    50% {transform: translate(250%, 250%) rotate(-45deg);}
    55% {transform: translate(250%, -250%) rotate(-45deg);}
    60% {transform: translate(0%, -250%) rotate(-45deg);}
}
@keyframes arrow-down-after {
    0% {transform: translate(0%) rotate(-45deg);}
    40% {transform: translate(0%, 250%) rotate(-45deg);}
    50% {transform: translate(250%, 250%) rotate(-45deg);}
    55% {transform: translate(250%, -250%) rotate(-45deg);}
    60% {transform: translate(0%, -250%) rotate(-45deg);}
}

/*spin*/
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/*hand*/
@-webkit-keyframes hand {
    from { left: 65px; }
    to { left: 70px; }
}
@keyframes hand {
    from {left: 65px;}
    to {left: 70px;}
}