/*All Animations Starts Here*/
@keyframes rotate {
    0% {
        @include transform(rotate(0deg))
    }
    100% {
        @include transform(rotate(360deg))
    }
}
@-webkit-keyframes rotate {
    0% {
        @include transform(rotate(0deg))
    }
    100% {
        @include transform(rotate(360deg))
    }
}
@-moz-keyframes rotate {
    0% {
        @include transform(rotate(0deg))
    }
    100% {
        @include transform(rotate(360deg))
    }
}
@keyframes rev-rotate {
    0% {
        @include transform(rotate(0deg))
    }
    100% {
        @include transform(rotate(-360deg))
    }
}
@-webkit-keyframes rev-rotate {
    0% {
        @include transform(rotate(0deg))
    }
    100% {
        @include transform(rotate(-360deg))
    }
}
@-moz-keyframes rev-rotate {
    0% {
        @include transform(rotate(0deg))
    }
    100% {
        @include transform(rotate(-360deg))
    }
}
@keyframes righTLeft {
    0% {
        right: 0;
        @include transform(translateX(100%));
    }
    100% {
        right: 100%;
        @include transform(translateX(0));
    }
}
@-webkit-keyframes righTLeft {
    0% {
        right: 0;
        @include transform(translateX(100%));
    }
    100% {
        right: 100%;
        @include transform(translateX(0));
    }
}
@-moz-keyframes righTLeft {
    0% {
        right: 0;
        @include transform(translateX(100%));
    }
    100% {
        right: 100%;
        @include transform(translateX(0));
    }
}
@keyframes lefTRight {
    0% {
        left: 0;
        @include transform(translateX(-100%));
    }
    100% {
        left: 100%;
        @include transform(translateX(0));
    }
}
@-webkit-keyframes lefTRight {
    0% {
        left: 0;
        @include transform(translateX(-100%));
    }
    100% {
        left: 100%;
        @include transform(translateX(0));
    }
}
@-moz-keyframes lefTRight {
    0% {
        left: 0;
        @include transform(translateX(-100%));
    }
    100% {
        left: 100%;
        @include transform(translateX(0));
    }
}
@keyframes zigZag {
    0% {
        @include transform(rotate(0deg)translate(-10px, -10px));
    }
    20% {
        @include transform(rotate(360deg)translate(-100px, -100px));
    }
    40% {
        @include transform(rotate(0deg)translate(100px, 100px));
    }
    60% {
        @include transform(rotate(360deg)translate(10px, 10px));
    }
    80% {
        @include transform(rotate(0deg)translate(70px, 70px));
    }
    100% {
        @include transform(rotate(360deg)translate(-10px, -10px));
    }
}

@keyframes outer-ripple {
    0% {
      transform: scale(1);
      filter: alpha(opacity=50);
      opacity: 0.5;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      -webkit-filter: alpha(opacity=50); }
    80% {
      transform: scale(1.5);
      filter: alpha(opacity=0);
      opacity: 0;
      -webkit-transform: scale(2.5);
      -moz-transform: scale(2.5);
      -ms-transform: scale(2.5);
      -o-transform: scale(2.5); }
    100% {
      transform: scale(3.5);
      filter: alpha(opacity=0);
      opacity: 0;
      -webkit-transform: scale(3.5);
      -moz-transform: scale(3.5);
      -ms-transform: scale(3.5);
      -o-transform: scale(3.5); } }
@-webkit-keyframes outer-ripple {
0% {
    transform: scale(1.5);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5); }
80% {
    transform: scale(3.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5); }
100% {
    transform: scale(4.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(4.5);
    -moz-transform: scale(4.5);
    -ms-transform: scale(4.5);
    -o-transform: scale(4.5); } }
@-moz-keyframes outer-ripple {
0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-filter: alpha(opacity=50); }
    80% {
    transform: scale(1.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5); }
    100% {
    transform: scale(3.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5); } }
/* inner ripple */
@keyframes inner-ripple {
0% {
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); }
30% {
    transform: scale(2);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2); }
100% {
    transform: scale(2.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5); } }
@-webkit-keyframes inner-ripple {
0% {
    transform: scale(2);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2); }
30% {
    transform: scale(2.5);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5); }
100% {
    transform: scale(3.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5); } }
@-moz-keyframes inner-ripple {
0% {
    transform: scale(2);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2); }
30% {
    transform: scale(2.5);
    filter: alpha(opacity=50);
    opacity: 0.5;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5); }
100% {
    transform: scale(3.5);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
    -ms-transform: scale(3.5);
    -o-transform: scale(3.5); } }

@keyframes rotate2 {
    0% {
        @include transform(translate(-50%, -50%)rotate(0deg));
    }
    100% {
        @include transform(translate(-50%, -50%)rotate(1440deg));
    }
}
@keyframes zigZag2 {
    0% {
        @include transform(rotate(0deg)translate(-10px, -10px));
    }
    20% {
        @include transform(rotate(360deg)translate(-10px, -10px));
    }
    40% {
        @include transform(rotate(0deg)translate(10px, 10px));
    }
    60% {
        @include transform(rotate(360deg)translate(10px, 10px));
    }
    80% {
        @include transform(rotate(0deg)translate(10px, 10px));
    }
    100% {
        @include transform(rotate(360deg)translate(-10px, -10px));
    }
}
@keyframes upDown {
    0% {
        @include transform(translateY(-20px));
    }
    100% {
        @include transform(translateY(20px));
    }
}
@-webkit-keyframes upDown {
    0% {
        @include transform(translateY(-20px));
    }
    100% {
        @include transform(translateY(20px));
    }
}
@-moz-keyframes upDown {
    0% {
        @include transform(translateY(-20px));
    }
    100% {
        @include transform(translateY(20px));
    }
}
/*All Animation Ends Here*/