/******************************************
TRANSITIONS AND STOP
*******************************************/
.cssanimations .a-fade-in { animation: fade-in 0.5s ease-in-out forwards; opacity: 0;}
.cssanimations .a-scale-up {animation: scale-up 0.5s ease-in-out forwards; transform: scale(0);}
.cssanimations .a-fade-in-and-scale-up {animation: fade-in-and-scale-up 0.5s ease-in-out forwards; transform: scale(0); opacity: 0;}
.cssanimations .a-fade-in-and-scale-down {animation: fade-in-and-scale-down 0.2s ease-in forwards; transform: scale(2); opacity: 0;}
.cssanimations .a-fade-in-and-move-from-left {animation: fade-in-and-move-from-left 0.5s ease-in-out forwards; transform: translateX(-30px); opacity: 0;}
.cssanimations .a-fade-in-and-move-from-right {animation: fade-in-and-move-from-right 0.5s ease-in-out forwards; transform: translateX(30px); opacity: 0;}
.cssanimations .a-fade-in-and-move-from-bottom {animation: fade-in-and-move-from-bottom 0.5s ease-in-out forwards; transform: translateY(30px); opacity: 0;}
.cssanimations .a-fade-in-and-move-from-top {animation: fade-in-and-move-from-top 0.5s ease-in-out forwards; transform: translateY(-30px); opacity: 0;}
.cssanimations .a-fade-in-and-shake { animation: fade-in-and-shake 0.82s cubic-bezier(.36,.07,.19,.97) both;  transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; opacity: 0;}
.cssanimations .a-fade-in-and-shake-vertical { animation: fade-in-and-shake-vertical 0.82s cubic-bezier(.36,.07,.19,.97) both;  transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; opacity: 0;}
.cssanimations .a-fade-in-and-rotate-and-scale {animation: fade-in-and-rotate-scale 0.5s ease-in-out forwards; transform: rotate(180deg) scale(0); opacity: 0;}
.cssanimations .a-show-and-move-from-bottom {animation: show-and-move-from-bottom 0.5s ease-in-out forwards;}

@keyframes fade-in-and-move-from-left {
	0% {opacity: 0; transform: translateX(-30px);}
	100% {opacity: 1; transform: translateX(0);}
}

@keyframes fade-in-and-move-from-right {
	0% {opacity: 0; transform: translateX(30px);}
	100% {opacity: 1; transform: translateX(0);}
}

@keyframes fade-in-and-move-from-bottom {
	0% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}

@keyframes fade-in-and-move-from-top {
	0% {opacity: 0; transform: translateY(-30px);}
	100% {opacity: 1; transform: translateY(0);}
}


@keyframes fade-in-and-scale-up {
	0% {opacity: 0; transform: scale(0);}
	100% {opacity: 1; transform: scale(1);}
}

@keyframes fade-in-and-scale-down {
	0% {opacity: 0; transform: scale(2);}
	100% {opacity: 1; transform: scale(1);}
}

@keyframes fade-in {
	0% {opacity: 0; }
	100% {opacity: 1; }
}

@keyframes scale-up {
	0% {transform: scale(0);}
	100% {transform: scale(1);}
}

@keyframes fade-in-and-shake {
	1% {opacity: 0;}
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0);  }
	30%, 50%, 70% {transform: translate3d(-4px, 0, 0); }
	40%, 60% {transform: translate3d(4px, 0, 0); }
	100% {opacity: 1;}
}

@keyframes fade-in-and-shake-vertical {
	1% {opacity: 0;}
	10%, 90% { transform: translate3d(0, -1px, 0); }
	20%, 80% { transform: translate3d(0, 2px, 0);  }
	30%, 50%, 70% {transform: translate3d(0, -1px, 0); }
	40%, 60% {transform: translate3d(0, 2px, 0); }
	100% {opacity: 1;}
}

@keyframes show-and-move-from-bottom {
	0% {opacity: 0; transform: translateY(30px); display: none;}
	1% {opacity: 0; transform: translateY(30px); display: block;}
	95% {opacity: 1; transform: translateY(10px);}
    100% {opacity: 1; transform: translateY(0); display: block;}
}

@keyframes fade-in-and-rotate-scale {
	0% {opacity: 0; transform: scale(0) rotate(180deg);}
	100% {opacity: 1; transform: scale(1) rotate(0);}
}


/******************************************
DELAY
*******************************************/
.cssanimations .a-delay-1 {animation-delay: 0.1s;}
.cssanimations .a-delay-2 {animation-delay: 0.2s;}
.cssanimations .a-delay-3 {animation-delay: 0.3s;}
.cssanimations .a-delay-4 {animation-delay: 0.4s;}
.cssanimations .a-delay-5 {animation-delay: 0.5s;}
.cssanimations .a-delay-6 {animation-delay: 0.6s;}
.cssanimations .a-delay-7 {animation-delay: 0.7s;}
.cssanimations .a-delay-8 {animation-delay: 0.8s;}
.cssanimations .a-delay-9 {animation-delay: 0.9s;}
.cssanimations .a-delay-10 {animation-delay: 1s;}
.cssanimations .a-delay-11 {animation-delay: 1.1s;}
.cssanimations .a-delay-12 {animation-delay: 1.2s;}
.cssanimations .a-delay-13 {animation-delay: 1.3s;}
.cssanimations .a-delay-14 {animation-delay: 1.4s;}
.cssanimations .a-delay-15 {animation-delay: 1.5s;}
.cssanimations .a-delay-16 {animation-delay: 1.6s;}
.cssanimations .a-delay-17 {animation-delay: 1.7s;}
.cssanimations .a-delay-18 {animation-delay: 1.8s;}
.cssanimations .a-delay-19 {animation-delay: 1.9s;}
.cssanimations .a-delay-20 {animation-delay: 2s;}
.cssanimations .a-delay-21 {animation-delay: 2.1s;}
.cssanimations .a-delay-22 {animation-delay: 2.2s;}
.cssanimations .a-delay-23 {animation-delay: 2.3s;}
.cssanimations .a-delay-24 {animation-delay: 2.4s;}
.cssanimations .a-delay-25 {animation-delay: 2.5s;}

/******************************************
INDEX
*******************************************/
.a-index-1 {z-index: 1;}
.a-index-2 {z-index: 2;}
.a-index-3 {z-index: 3;}
.a-index-4 {z-index: 4;}
.a-index-5 {z-index: 5;}
.a-index-6 {z-index: 6;}
.a-index-7 {z-index: 7;}
.a-index-8 {z-index: 8;}
.a-index-9 {z-index: 9;}
.a-index-10 {z-index: 10;}
.a-index-11 {z-index: 11;}
.a-index-12 {z-index: 12;}
.a-index-13 {z-index: 13;}
.a-index-14 {z-index: 14;}
.a-index-15 {z-index: 15;}
.a-index-16 {z-index: 16;}
.a-index-17 {z-index: 17;}
.a-index-18 {z-index: 18;}
.a-index-19 {z-index: 19;}
.a-index-20 {z-index: 20;}
.a-index-21 {z-index: 21;}
.a-index-22 {z-index: 22;}
.a-index-24 {z-index: 24;}
.a-index-25 {z-index: 25;}
.a-index-26 {z-index: 26;}
.a-index-27 {z-index: 27;}
.a-index-28 {z-index: 28;}
.a-index-29 {z-index: 29;}
.a-index-30 {z-index: 30;}
/******************************************
INFINITE
*******************************************/
.cssanimations .a-toggle-scale {animation: toggle-scale 1s ease-in-out infinite; transform: scale(1);}


@keyframes toggle-scale {
	0% {transform: scale(1);}
    50% {transform: scale(1.05);}
}

/******************************************
CUSTOM
*******************************************/
.cssanimations .a-propeller { animation: propeller 0.5s infinite;}

@keyframes propeller {
	0% { transform: rotate(0);}
	100% {transform: rotate(360deg);}
}


.cssanimations .a-fly { animation: fly 4s ease-in-out infinite;}


@keyframes fly {
	0% { transform: translate(0,0);}
	50% { transform: translate(0,10px);}
}

.cssanimations .a-move-form-left-to-right { animation: move-form-left-to-right 7s linear infinite;}

@keyframes move-form-left-to-right {
	0% { transform: translate(-100px,0); opacity: 1;}
	78% { transform: translate(1300px,0); opacity: 1;}
	79% { transform: translate(1300px,0); opacity: 0;}
	80% { transform: translate(-100px,0); opacity: 0;}
	100% { transform: translate(-100px,0); opacity: 0;}
}