/*** SLIDE IN ***/
@-webkit-keyframes SlideIn {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}

@keyframes SlideIn {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}

.SlideIn {
	-webkit-animation-name: SlideIn;
	animation-name: SlideIn;
}

@-webkit-keyframes SlideInRight {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}
	
@keyframes SlideInRight {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}

.SlideInRight {
	-webkit-animation-name: SlideInRight;
	animation-name: SlideInRight;
}

@-webkit-keyframes SlideInTop {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}
	
@keyframes SlideInTop {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}

.SlideInTop {
	-webkit-animation-name: SlideInTop;
	animation-name: SlideInTop;
}

@-webkit-keyframes SlideInBottom {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}
	
@keyframes SlideInBottom {
  0% {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
  }
  100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
  }
}

.SlideInBottom {
	-webkit-animation-name: SlideInBottom;
	animation-name: SlideInBottom;
}

/*** ROTATE IN ***/
@-webkit-keyframes RotateIn {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate(-200deg);
		transform: rotate(-200deg);
		opacity: 0;
	}
	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}
	
@keyframes RotateIn {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate(-200deg);
		transform: rotate(-200deg);
		opacity: 0;
	}
	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	  }
}

.RotateIn {
  -webkit-animation-name: RotateIn;
  animation-name: RotateIn;
}

@-webkit-keyframes RotateInCounter {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate(200deg);
		transform: rotate(200deg);
		opacity: 0;
	}
	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	}
}
	
@keyframes RotateInCounter {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate(200deg);
		transform: rotate(200deg);
		opacity: 0;
	}
	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		transform: none;
		opacity: 1;
	  }
}

.RotateInCounter {
  -webkit-animation-name: RotateInCounter;
  animation-name: RotateInCounter;
}

/*** FADE IN ***/
@-webkit-keyframes FadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes FadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.FadeIn {
	-webkit-animation-name: FadeIn;
	animation-name: FadeIn;
}

/*** FLIP IN **/
@-webkit-keyframes FlipIn {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
	}
	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

@keyframes FlipIn {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
	}
	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

.FlipIn {
	-webkit-animation-name: FlipIn;
	animation-name: FlipIn;
	-webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes FlipInVertical {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes FlipInVertical {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.FlipInVertical {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
	-webkit-animation-name: FlipInVertical;
    animation-name: FlipInVertical;
}

/*** ARC IN ***/
@-webkit-keyframes ArcIn {
    0%   { opacity: 0; transform: scale(0.5,0.5) rotateY(90deg) translate(-200px,0px) }           
    100%   { opacity: 1; transform: scale(1,1) rotateY(0deg) translate(0px, 0px) }
}

@keyframes ArcIn {
    0%   {opacity: 0; transform: scale(0.5,0.5) rotateY(90deg) translate(-200px,0px) }           
    100%   {opacity: 1; transform: scale(1,1) rotateY(0deg) translate(0px, 0px)}
}
	
.ArcIn {
	-webkit-animation-name: ArcIn;
	animation-name: ArcIn;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

@-webkit-keyframes ArcInRight {
    0%   { opacity: 0; transform: scale(0.5,0.5) rotateY(90deg) translate(200px,0px) }           
    100%   { opacity: 1; transform: scale(1,1) rotateY(0deg) translate(0px, 0px) }
}

@keyframes ArcInRight {
    0%   {opacity: 0; transform: scale(0.5,0.5) rotateY(90deg) translate(200px,0px) }           
    100%   {opacity: 1; transform: scale(1,1) rotateY(0deg) translate(0px, 0px)}
}
	
.ArcInRight {
	-webkit-animation-name: ArcInRight;
	animation-name: ArcInRight;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

@-webkit-keyframes ArcInBottom {
    0%   { opacity: 0; transform: scale(0.5,0.5) rotateX(90deg) translate(0px,200px) }           
    100%   { opacity: 1; transform: scale(1,1) rotateX(0deg) translate(0px, 0px) }
}

@keyframes ArcInBottom {
    0%   {opacity: 0; transform: scale(0.5,0.5) rotateX(90deg) translate(0px,200px) }           
    100%   {opacity: 1; transform: scale(1,1) rotateX(0deg) translate(0px, 0px)}
}
	
.ArcInBottom {
	-webkit-animation-name: ArcInBottom;
	animation-name: ArcInBottom;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

@-webkit-keyframes ArcInTop {
    0%   { opacity: 0; transform: scale(0.5,0.5) rotateX(90deg) translate(0px,-200px) }           
    100%   { opacity: 1; transform: scale(1,1) rotateX(0deg) translate(0px, 0px) }
}

@keyframes ArcInTop {
    0%   {opacity: 0; transform: scale(0.5,0.5) rotateX(90deg) translate(0px,-200px) }           
    100%   {opacity: 1; transform: scale(1,1) rotateX(0deg) translate(0px, 0px)}
}
	
.ArcInTop {
	-webkit-animation-name: ArcInTop;
	animation-name: ArcInTop;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

/*** TADA ***/
@-webkit-keyframes Tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes Tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.Tada {
	-webkit-animation-name: Tada;
	animation-name: Tada;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	@-webkit-keyframes Shake {
	  0%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
	  }

	  10%, 30%, 50%, 70%, 90% {
		-webkit-transform: translate3d(-10px, 0, 0);
				transform: translate3d(-10px, 0, 0);
	  }

	  20%, 40%, 60%, 80% {
		-webkit-transform: translate3d(10px, 0, 0);
				transform: translate3d(10px, 0, 0);
	  }
	}

	@keyframes Shake {
	  0%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
	  }

	  10%, 30%, 50%, 70%, 90% {
		-webkit-transform: translate3d(-10px, 0, 0);
				transform: translate3d(-10px, 0, 0);
	  }

	  20%, 40%, 60%, 80% {
		-webkit-transform: translate3d(10px, 0, 0);
				transform: translate3d(10px, 0, 0);
	  }
	}

	.Shake {
	  -webkit-animation-name: Shake;
			  animation-name: Shake;
	}
	
	@-webkit-keyframes Swing {
	  20% {
		-webkit-transform: rotate3d(0, 0, 1, 15deg);
				transform: rotate3d(0, 0, 1, 15deg);
	  }

	  40% {
		-webkit-transform: rotate3d(0, 0, 1, -10deg);
				transform: rotate3d(0, 0, 1, -10deg);
	  }

	  60% {
		-webkit-transform: rotate3d(0, 0, 1, 5deg);
				transform: rotate3d(0, 0, 1, 5deg);
	  }

	  80% {
		-webkit-transform: rotate3d(0, 0, 1, -5deg);
				transform: rotate3d(0, 0, 1, -5deg);
	  }

	  100% {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
				transform: rotate3d(0, 0, 1, 0deg);
	  }
	}

	@keyframes Swing {
	  20% {
		-webkit-transform: rotate3d(0, 0, 1, 15deg);
				transform: rotate3d(0, 0, 1, 15deg);
	  }

	  40% {
		-webkit-transform: rotate3d(0, 0, 1, -10deg);
				transform: rotate3d(0, 0, 1, -10deg);
	  }

	  60% {
		-webkit-transform: rotate3d(0, 0, 1, 5deg);
				transform: rotate3d(0, 0, 1, 5deg);
	  }

	  80% {
		-webkit-transform: rotate3d(0, 0, 1, -5deg);
				transform: rotate3d(0, 0, 1, -5deg);
	  }

	  100% {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
				transform: rotate3d(0, 0, 1, 0deg);
	  }
	}

	 .Swing {
	  -webkit-transform-origin: top center;
		  -ms-transform-origin: top center;
			  transform-origin: top center;
	  -webkit-animation-name: Swing;
			  animation-name: Swing;
	}
	
	@-webkit-keyframes Bounce {
	  0%, 20%, 53%, 80%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
	  }

	  40%, 43% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -30px, 0);
				transform: translate3d(0, -30px, 0);
	  }

	  70% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -15px, 0);
				transform: translate3d(0, -15px, 0);
	  }

	  90% {
		-webkit-transform: translate3d(0,-4px,0);
				transform: translate3d(0,-4px,0);
	  }
	}

	@keyframes Bounce {
	  0%, 20%, 53%, 80%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
	  }

	  40%, 43% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -30px, 0);
				transform: translate3d(0, -30px, 0);
	  }

	  70% {
		-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
		-webkit-transform: translate3d(0, -15px, 0);
				transform: translate3d(0, -15px, 0);
	  }

	  90% {
		-webkit-transform: translate3d(0,-4px,0);
				transform: translate3d(0,-4px,0);
	  }
	}

	 .Bounce {
	  -webkit-animation-name: Bounce;
			  animation-name: Bounce;
	  -webkit-transform-origin: center bottom;
		  -ms-transform-origin: center bottom;
			  transform-origin: center bottom;
	}
	
	/** ELASTIC **/
	@-webkit-keyframes Elastic {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes Elastic {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.Elastic {
  -webkit-animation-name: Elastic;
   animation-name: Elastic;
}