/* Arrow Bounce Right */

@-webkit-keyframes arrowBounceRight {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
}

@-moz-keyframes arrowBounceRight {
    0%,
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        transform: translateX(5px);
    }
}

@-o-keyframes arrowBounceRight {
    0%,
    100% {
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);
    }
}

@keyframes arrowBounceRight {
    0%,
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(5px);
        -moz-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);
    }
}


/* Spin Circle */

@-webkit-keyframes spinCircle {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-moz-keyframes spinCircle {
    0% {
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-o-keyframes spinCircle {
    0% {
        -webkit-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes spinCircle {
    0% {
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}


/* Floating Arrrow */

@-webkit-keyframes floatingArrow {
    25% {
        opacity: 1
    }
    33.3% {
        opacity: .7;
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
    66.6% {
        opacity: .4;
        -webkit-transform: translateY(-7px);
        transform: translateY(-7px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-11px) scale(.7);
        transform: translateY(-11px) scale(.7)
    }
}

@-moz-keyframes floatingArrow {
    25% {
        opacity: 1
    }
    33.3% {
        opacity: .7;
        -webkit-transform: translateY(-3px);
        -moz-transform: translateY(-3px);
        transform: translateY(-3px)
    }
    66.6% {
        opacity: .4;
        -webkit-transform: translateY(-7px);
        -moz-transform: translateY(-7px);
        transform: translateY(-7px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-11px) scale(.7);
        -moz-transform: translateY(-11px) scale(.7);
        transform: translateY(-11px) scale(.7)
    }
}

@-o-keyframes floatingArrow {
    25% {
        opacity: 1
    }
    33.3% {
        opacity: .7;
        -webkit-transform: translateY(-3px);
        -o-transform: translateY(-3px);
        transform: translateY(-3px)
    }
    66.6% {
        opacity: .4;
        -webkit-transform: translateY(-7px);
        -o-transform: translateY(-7px);
        transform: translateY(-7px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-11px) scale(.7);
        -o-transform: translateY(-11px) scale(.7);
        transform: translateY(-11px) scale(.7)
    }
}

@keyframes floatingArrow {
    25% {
        opacity: 1
    }
    33.3% {
        opacity: .7;
        -webkit-transform: translateY(-3px);
        -moz-transform: translateY(-3px);
        -o-transform: translateY(-3px);
        transform: translateY(-3px)
    }
    66.6% {
        opacity: .4;
        -webkit-transform: translateY(-7px);
        -moz-transform: translateY(-7px);
        -o-transform: translateY(-7px);
        transform: translateY(-7px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-11px) scale(.7);
        -moz-transform: translateY(-11px) scale(.7);
        -o-transform: translateY(-11px) scale(.7);
        transform: translateY(-11px) scale(.7)
    }
}


/* Blink */

@-webkit-keyframes blink {
    0% {
        -webkit-opacity: 1.0;
    }
    50% {
        -webkit-opacity: 0.0;
    }
    100% {
        -webkit-opacity: 1.0;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

@keyframes blink {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

.blink {
    -webkit-animation: blink 1s infinite linear;
    -moz-animation: blink 1s infinite linear;
    -o-animation: blink 1s infinite linear;
    animation: blink 1s infinite linear;
}


/* Shake Anim */

@-webkit-keyframes shake-anim {
    0%,
    100%,
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }
    10%,
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20%,
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
}

@-moz-keyframes shake-anim {
    0%,
    100%,
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -moz-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
    10%,
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        -moz-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20%,
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        -moz-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
}

@-o-keyframes shake-anim {
    0%,
    100%,
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -o-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
    10%,
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        -o-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20%,
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        -o-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
}

@keyframes shake-anim {
    0%,
    100%,
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -moz-transform: rotate(0) scale(1) skew(1deg);
        -o-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
    10%,
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        -moz-transform: rotate(-25deg) scale(1) skew(1deg);
        -o-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20%,
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        -moz-transform: rotate(25deg) scale(1) skew(1deg);
        -o-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
}

.shake-anim {
    -webkit-animation: shake-anim 1s infinite ease-in-out;
    -moz-animation: shake-anim 1s infinite ease-in-out;
    -o-animation: shake-anim 1s infinite ease-in-out;
    animation: shake-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}
