/*
 * [ y o r e A n i m a t o r ]
 * [ -- Custom Animations -- ]
**/

/* ~ 2 colors animation */
.color-change-2x {
	-webkit-animation: color-change-2x 2s linear infinite alternate both;
	        animation: color-change-2x 2s linear infinite alternate both;
}
@-webkit-keyframes color-change-2x {
  0% { background: #19dcea; }
  100% { background: #b22cff; }
}
@keyframes color-change-2x {
  0% { background: #19dcea; }
  100% { background: #b22cff; }
}
/* ~ 3 colors animation */
.color-change-3x {
	-webkit-animation: color-change-3x 4s linear infinite alternate both;
	        animation: color-change-3x 4s linear infinite alternate both;
}
@-webkit-keyframes color-change-3x {
  0% { background: #19dcea; }
  50% { background: #b22cff; }
  100% { background: #ea2222; }
}
@keyframes color-change-3x {
  0% { background: #19dcea; }
  50% { background: #b22cff; }
  100% { background: #ea2222; }
}
/* ~ 4 colors animation */
.color-change-4x {
	-webkit-animation: color-change-4x 6s linear infinite alternate both;
	        animation: color-change-4x 6s linear infinite alternate both;
}
@-webkit-keyframes color-change-4x {
  0% { background: #19dcea; }
  33.3333% { background: #b22cff; }
  66.666% { background: #ea2222; }
  100% { background: #f5be10; }
}
@keyframes color-change-4x {
  0% { background: #19dcea; }
  33.3333% { background: #b22cff; }
  66.666% { background: #ea2222; }
  100% { background: #f5be10; }
}

/* ~ 5 colors animation */
.color-change-5x {
	-webkit-animation: color-change-5x 8s linear infinite alternate both;
	        animation: color-change-5x 8s linear infinite alternate both;
}
@-webkit-keyframes color-change-5x {
  0% { background: #19dcea; }
  25% { background: #b22cff; }
  50% { background: #ea2222; }
  75% { background: #f5be10; }
  100% { background: #3bd80d; }
}
@keyframes color-change-5x {
  0% { background: #19dcea; }
  25% { background: #b22cff; }
  50% { background: #ea2222; }
  75% { background: #f5be10; }
  100% { background: #3bd80d; }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* ~ Vibrate */
.vibrate-1{-webkit-animation:vibrate-1 .3s linear infinite both;animation:vibrate-1 .3s linear infinite both}
@-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}

/* ~ Shake - bottom */
.shake-bottom{-webkit-animation:shake-bottom .8s cubic-bezier(.455,.03,.515,.955) both;animation:shake-bottom .8s cubic-bezier(.455,.03,.515,.955) both}
@-webkit-keyframes shake-bottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@keyframes shake-bottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}

/* ~ Shake : top */
.shake-top{-webkit-animation:shake-top .8s cubic-bezier(.455,.03,.515,.955) both;animation:shake-top .8s cubic-bezier(.455,.03,.515,.955) both}
@-webkit-keyframes shake-top{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@keyframes shake-top{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}

/* ~ Pulsate - heartbeat */
.heartbeat{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}
@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

/* ~ Flip - horizontal - top */
/* .flip-horizontal-top{-webkit-animation:flip-horizontal-top .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-horizontal-top .4s cubic-bezier(.455,.03,.515,.955) both} */
/* @-webkit-keyframes flip-horizontal-top{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}}@keyframes flip-horizontal-top{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}} */

/* ~ Flip - horizontal - bottom */
/* .flip-horizontal-bottom{-webkit-animation:flip-horizontal-bottom .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-horizontal-bottom .4s cubic-bezier(.455,.03,.515,.955) both} */
/* @-webkit-keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}} */

/* ~ Flip - vertical - left */
/* .flip-vertical-left{-webkit-animation:flip-vertical-left .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-vertical-left .4s cubic-bezier(.455,.03,.515,.955) both} */
/* @-webkit-keyframes flip-vertical-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}@keyframes flip-vertical-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}} */

/* ~ Flip - vertical - right */
/* .flip-vertical-right{-webkit-animation:flip-vertical-right .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-vertical-right .4s cubic-bezier(.455,.03,.515,.955) both} */
/* @-webkit-keyframes flip-vertical-right{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}}@keyframes flip-vertical-right{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}} */

/* ~ Shadow - drop - center */
.shadow-drop-center{-webkit-animation:shadow-drop-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-center .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-center{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 0 20px 0 rgba(0,0,0,.35)}}@keyframes shadow-drop-center{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 0 20px 0 rgba(0,0,0,.35)}}

/* ~ Shadow - drop - left/right */
.shadow-drop-lr{-webkit-animation:shadow-drop-lr .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-lr .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-lr{0%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}100%{box-shadow:-12px 0 20px -12px rgba(0,0,0,.35),12px 0 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-lr{0%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}100%{box-shadow:-12px 0 20px -12px rgba(0,0,0,.35),12px 0 20px -12px rgba(0,0,0,.35)}}

/* ~ Shadow - drop - top/bottom */
.shadow-drop-tb{-webkit-animation:shadow-drop-tb .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-tb .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-tb{0%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}100%{box-shadow:0 -12px 20px -12px rgba(0,0,0,.35),0 12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-tb{0%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}100%{box-shadow:0 -12px 20px -12px rgba(0,0,0,.35),0 12px 20px -12px rgba(0,0,0,.35)}}

/* ~ Shadow - drop - top/left */
.shadow-drop-tl{-webkit-animation:shadow-drop-tl .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-tl .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-tl{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:-12px -12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-tl{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:-12px -12px 20px -12px rgba(0,0,0,.35)}}

/* ~ Shadow - drop - top/right */
.shadow-drop-tr{-webkit-animation:shadow-drop-tr .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-tr .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-tr{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:12px -12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-tr{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:12px -12px 20px -12px rgba(0,0,0,.35)}}

/* ~ Shadow - drop - bottom/right */
.shadow-drop-br{-webkit-animation:shadow-drop-br .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-br .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-br{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:12px 12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-br{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:12px 12px 20px -12px rgba(0,0,0,.35)}}

/* ~ Shadow - drop - bottom/left */
.shadow-drop-bl{-webkit-animation:shadow-drop-bl .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-bl .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-bl{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:-12px 12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-bl{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:-12px 12px 20px -12px rgba(0,0,0,.35)}}

/* ~ Shadow - drop - bottom */
.shadow-drop-bottom{-webkit-animation:shadow-drop-bottom .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-bottom .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-bottom{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-bottom{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 12px 20px -12px rgba(0,0,0,.35)}}

/* ~ Shadow - drop - top */
.shadow-drop-top{-webkit-animation:shadow-drop-top .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-top .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes shadow-drop-top{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 -12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-top{0%{box-shadow:0 0 0 0 transparent}100%{box-shadow:0 -12px 20px -12px rgba(0,0,0,.35)}}

/* ~ Bounce - top */
.bounce-top {
	-webkit-animation: bounce-top 0.5s steps(2, end) alternate forwards;
	        animation: bounce-top 0.5s steps(2, end) alternate forwards;
}
@-webkit-keyframes bounce-top{
	0% {
		-webkit-transform: translateY(0px);
					  transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: translateY(-5px);
			      transform: translateY(-5px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
		opacity: 1;
	}
	24%{ opacity:1 }
	40%{
		-webkit-transform:translateY(-3px);
						transform:translateY(-3px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in
	}
	65%{
		-webkit-transform:translateY(-2.5px);
						transform:translateY(-2.5px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in
	}
	82%{
		-webkit-transform:translateY(-2px);
						transform:translateY(-2px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in;
	}
	93%{
		-webkit-transform:translateY(-0.5px);
						transform:translateY(-0.5px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in
	}
	25%,55%,75%,87%{
		-webkit-transform:translateY(0);
						transform:translateY(0);
		-webkit-animation-timing-function:ease-out;
						animation-timing-function:ease-out
	}
	100%{
		-webkit-transform:translateY(0);
						transform:translateY(0);
		-webkit-animation-timing-function:ease-out;
						animation-timing-function:ease-out;
		opacity:1
	}
}
@keyframes bounce-top{
	0% {
		-webkit-transform: translateY(0px);
					  transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: translateY(-5px);
			      transform: translateY(-5px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
		opacity: 1;
	}
	24%{ opacity:1 }
	40%{
		-webkit-transform:translateY(-3px);
						transform:translateY(-3px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in
	}
	65%{
		-webkit-transform:translateY(-2.5px);
						transform:translateY(-2.5px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in
	}
	82%{
		-webkit-transform:translateY(-2px);
						transform:translateY(-2px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in;
	}
	93%{
		-webkit-transform:translateY(-0.5px);
						transform:translateY(-0.5px);
		-webkit-animation-timing-function:ease-in;
						animation-timing-function:ease-in
	}
	25%,55%,75%,87%{
		-webkit-transform:translateY(0);
						transform:translateY(0);
		-webkit-animation-timing-function:ease-out;
						animation-timing-function:ease-out
	}
	100%{
		-webkit-transform:translateY(0);
						transform:translateY(0);
		-webkit-animation-timing-function:ease-out;
						animation-timing-function:ease-out;
		opacity:1
	}
}