/* keyframes ------------------------------------------------------ */
@keyframes gray-yellow-red
	{
         0%		{background-color: gray;}
         50%		{background-color: yellow;}
         100%		{background-color: red;}
         }
.animated.gray-yellow-red:hover
	{
         animation-name:	gray-yellow-red;	/* Name wie bei keyframes definiert */
         animation-delay:	0s;	/* Verzögerung der Animation */
         animation-direction:	normal;	/* [normal, alternate, alternate-revers, reverse]
         			mit alternate läuft die Animation beim zweiten Durchgang rückwärts ab */
         animation-duration:	1s;	/* Dauer der Animation */
         animation-fill-mode:	forwards;	/* was am Ende der Animation angezeigt werden soll
         			[none, forwards, backwards, both] */
         animation-iteration-count:	5;	/* Anzahl der Durchläufe [infinite = unendlich] */
         animation-timing-function:	ease; 	/* Beschleunigung oder Verzögerung
         			ease           - langsamer Beginn, dann schnell, zum Ende wieder langsam
                                                                      ease-in        - langsamer Beginn, dann schnell
                                                                      ease-out       - schneller Ablauf, zum Ende langsam
                                                                      ease-in-out
                                                                      linear         - konstante Geschwindigkeit während der gesamten Transition
                                                                      steps()
                                                                      cubic-bezier() - Definition einer eigenen Verlaufskurve
                                                                      */
         animation-play-state:	running;	/* Pausierenlassen der Animation [running, paused] */
         }
/* ---------------------------------------------------------------- */
@keyframes bounce
         {
         0%, 20%, 50%, 80%, 100%	{transform: translateY(0); }
         40%		{transform: translateY(-30px); }
         60%		{transform: translateY(-15px); }
         }
.animated.bounce:hover
         {
	animation-name: 	bounce;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceIn
	{
         0% 		{ opacity: 0; transform: scale(.3); }
         50% 		{ opacity: 1; transform: scale(1.05); }
         70% 		{ transform: scale(.9); }
         100% 		{ transform: scale(1); }
	}
.animated.bounceIn:hover
	{
         animation-name: 	bounceIn;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceInDown
	{
         0% 		{ opacity: 0; transform: translateY(-2000px); }
         60% 		{ opacity: 1; transform: translateY(30px); }
         80% 		{ transform: translateY(-10px); }
         100% 		{ transform: translateY(0); }
	}
.animated.bounceInDown:hover
	{
         animation-name: 	bounceInDown;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceInLeft
	{
         0% 		{ opacity: 0; transform: translateX(-2000px); }
         60% 		{ opacity: 1; transform: translateX(30px); }
         80% 		{ transform: translateX(-10px); }
         100% 		{ transform: translateX(0); }
	}
.animated.bounceInLeft:hover
	{
         animation-name: 	bounceInLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceInRight
	{
         0% 		{ opacity: 0; transform: translateX(2000px); }
         60% 		{ opacity: 1; transform: translateX(-30px); }
         80% 		{ transform: translateX(10px); }
         100% 		{ transform: translateX(0); }
	}
.animated.bounceInRight:hover
	{
         animation-name: 	bounceInRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceInUp
	{
         0% 		{ opacity: 0; transform: translateY(2000px); }
         60% 		{ opacity: 1; transform: translateY(-30px); }
         80% 		{ transform: translateY(10px); }
         100% 		{ transform: translateY(0); }
	}
.animated.bounceInUp:hover
	{
         animation-name: 	bounceInUp;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceOut
	{
         0% 		{ transform: scale(1); }
         25% 		{ transform: scale(.95); }
         50% 		{ opacity: 1; transform: scale(1.1); }
         100% 		{ opacity: 0; transform: scale(.3); }
	}
.animated.bounceOut:hover
	{
         animation-name: 	bounceOut;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceOutDown
	{
         0% 		{ transform: translateY(0); }
         20% 		{ opacity: 1; transform: translateY(-20px); }
         100% 		{ opacity: 0; transform: translateY(2000px); }
	}
.animated.bounceOutDown:hover
	{
         animation-name: 	bounceOutDown;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceOutLeft
	{
         0% 		{ transform: translateX(0); }
         20% 		{ opacity: 1; transform: translateX(20px); }
         100% 		{ opacity: 0; transform: translateX(-2000px); }
	}
.animated.bounceOutLeft:hover
	{
         animation-name: 	bounceOutLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceOutRight
	{
         0% 		{ transform: translateX(0); }
         20% 		{ opacity: 1; transform: translateX(-20px); }
         100% 		{ opacity: 0; transform: translateX(2000px); }
	}
.animated.bounceOutRight:hover
	{
         animation-name: 	bounceOutRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes bounceOutUp
	{
         0% 		{ transform: translateY(0); }
         20% 		{ opacity: 1; transform: translateY(20px); }
         100% 		{ opacity: 0; transform: translateY(-2000px); }
	}
.animated.bounceOutUp:hover
	{
         animation-name: 	bounceOutUp;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeIn
	{
         0% 		{ opacity: 0; }
	100% 		{ opacity: 1; }
         }
.animated.fadeIn:hover
	{
         animation-name: 	fadeIn;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInDown
	{
         0% 		{ opacity: 0; transform: translateY(-20px); }
         100% 		{ opacity: 1; transform: translateY(0); }
	}
.animated.fadeInDown:hover
	{
         animation-name: 	fadeInDown;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInDownBig
	{
         0% 		{ opacity: 0; transform: translateY(-2000px); }
         100% 		{ opacity: 1; transform: translateY(0); }
	}
.animated.fadeInDownBig:hover
	{
         animation-name: 	fadeInDownBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInLeft
	{
         0% 		{ opacity: 0; transform: translateX(-20px); }
         100% 		{ opacity: 1; transform: translateX(0); }
	}
.animated.fadeInLeft:hover
	{
         animation-name: 	fadeInLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInLeftBig
	{
         0% 		{ opacity: 0; transform: translateX(-2000px); }
         100% 		{ opacity: 1; transform: translateX(0); }
	}
.animated.fadeInLeftBig:hover
	{
         animation-name: 	fadeInLeftBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInRight
	{
         0% 		{ opacity: 0; transform: translateX(20px); }
         100% 		{ opacity: 1; transform: translateX(0); }
	}
.animated.fadeInRight:hover
	{
         animation-name: 	fadeInRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInRightBig
	{
         0% 		{ opacity: 0; transform: translateX(2000px); }
         100% 		{ opacity: 1; transform: translateX(0); }
	}
.animated.fadeInRightBig:hover
	{
	animation-name: 	fadeInRightBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInUp
	{
         0% 		{ opacity: 0; transform: translateY(20px); }
         100% 		{ opacity: 1; transform: translateY(0); }
	}
.animated.fadeInUp:hover
	{
         animation-name: 	fadeInUp;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeInUpBig
	{
         0% 		{ opacity: 0; transform: translateY(2000px); }
         100% 		{ opacity: 1; transform: translateY(0); }
	}
.animated.fadeInUpBig:hover
	{
         animation-name: 	fadeInUpBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOut
	{
         0% 		{ opacity: 1; }
	100% 		{ opacity: 0; }
         }
.animated.fadeOut:hover
	{
         animation-name: 	fadeOut;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutDown
	{
         0% 		{ opacity: 1; transform: translateY(0); }
         100% 		{ opacity: 0; transform: translateY(20px); }
	}
.animated.fadeOutDown:hover
	{
         animation-name: 	fadeOutDown;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutDownBig
	{
         0% 		{ opacity: 1; transform: translateY(0); }
         100% 		{ opacity: 0; transform: translateY(2000px); }
	}
.animated.fadeOutDownBig:hover
	{
         animation-name: 	fadeOutDownBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutLeft
	{
         0% 		{ opacity: 1; transform: translateX(0); }
         100% 		{ opacity: 0; transform: translateX(-20px); }
	}

.animated.fadeOutLeft:hover
	{
         animation-name: 	fadeOutLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutLeftBig
	{
         0% 		{ opacity: 1; transform: translateX(0); }
         100% 		{ opacity: 0; transform: translateX(-2000px); }
	}
.animated.fadeOutLeftBig:hover
	{
         animation-name:	fadeOutLeftBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutRight
	{
         0% 		{ opacity: 1; transform: translateX(0); }
         100% 		{ opacity: 0; transform: translateX(20px); }
	}
.animated.fadeOutRight:hover
	{
         animation-name: 	fadeOutRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutRightBig
	{
         0% 		{ opacity: 1; transform: translateX(0); }
         100% 		{ opacity: 0; transform: translateX(2000px); }
	}
.animated.fadeOutRightBig:hover
	{
         animation-name: 	fadeOutRightBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutUp
	{
         0% 		{ opacity: 1; transform: translateY(0); }
         100% 		{ opacity: 0; transform: translateY(-20px); }
	}
.animated.fadeOutUp:hover
	{
         animation-name: 	fadeOutUp;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes fadeOutUpBig
	{
         0% 		{ opacity: 1; transform: translateY(0); }
         100% 		{ opacity: 0; transform: translateY(-2000px); }
	}
.animated.fadeOutUpBig:hover
	{
         animation-name: 	fadeOutUpBig;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes flash
         {
         0%, 50%, 100%         	{ opacity: 1; }
         25%, 75%         	{ opacity: 0; }
         }
.animated.flash:hover
         {
	animation-name: 	flash;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes flip
	{
         0% 		{ transform: perspective(400px) translateZ(0) rotateY(0) scale(1); animation-timing-function: ease-out; }
         40% 		{ transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); animation-timing-function: ease-out; }
         50% 		{ transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; }
         80% 		{ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); animation-timing-function: ease-in; }
         100% 		{ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); animation-timing-function: ease-in; }
	  }
.animated.flip:hover
	{
         backface-visibility: 	visible !important;
         animation-name: 	flip;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes flipInX
	{
	0% 		{ transform: perspective(400px) rotateX(90deg);       opacity: 0;    }
         40% 		{ transform: perspective(400px) rotateX(-10deg);    }
         70% 		{ transform: perspective(400px) rotateX(10deg);    }
         100% 		{ transform: perspective(400px) rotateX(0deg);        opacity: 1;    }
	}
.animated.flipInX:hover
	{
         backface-visibility: 	visible !important;
         animation-name: 	flipInX;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes flipInY
	{
         0% 		{ transform: perspective(400px) rotateY(90deg);       opacity: 0;    }
         40% 		{ transform: perspective(400px) rotateY(-10deg);    }
         70% 		{ transform: perspective(400px) rotateY(10deg);    }
         100% 		{ transform: perspective(400px) rotateY(0deg);        opacity: 1;    }
	}
.animated.flipInY:hover
	{
         backface-visibility: 	visible !important;
         animation-name: 	flipInY;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes flipOutX
	{
         0% 		{ transform: perspective(400px) rotateX(0deg);        opacity: 1;    }
         100% 		{ transform: perspective(400px) rotateX(90deg);       opacity: 0;    }
	}
.animated.flipOutX:hover
	{
	animation-name: 	flipOutX;
         backface-visibility: 	visible !important;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes flipOutY
	{
         0% 		{ transform: perspective(400px) rotateY(0deg);        opacity: 1;    }
         100% 		{ transform: perspective(400px) rotateY(90deg);       opacity: 0;    }
	}
.animated.flipOutY:hover
	{
         backface-visibility: 	visible !important;
         animation-name: 	flipOutY;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes hinge
	{
         0% 		{ transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
         20%, 60% 		{ transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
         40% 		{ transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
         80% 		{ transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
         100% 		{ transform: translateY(700px); opacity: 0; }
	}

.animated.hinge:hover
	{
         animation-name: 	hinge;
	animation-duration: 	2s;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes lightSpeedIn
	{
         0% 		{ transform: translateX(100%) skewX(-30deg); opacity: 0; }
         60% 		{ transform: translateX(-20%) skewX(30deg); opacity: 1; }
         80% 		{ transform: translateX(0%) skewX(-15deg); opacity: 1; }
         100% 		{ transform: translateX(0%) skewX(0deg); opacity: 1; }
	}
.animated.lightSpeedIn:hover
	{
	animation-name: 	lightSpeedIn;
	animation-timing-function: 	ease-out;
         animation-duration: 	0.5s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes lightSpeedOut
	{
         0% 		{ transform: translateX(0%) skewX(0deg); opacity: 1; }
         100% 		{ transform: translateX(100%) skewX(-30deg); opacity: 0; }
         }
.animated.lightSpeedOut:hover
	{
	animation-name: 	lightSpeedOut;
	animation-timing-function: 	ease-in;
	animation-duration: 	0.25s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes pulse
	{
         0% 		{ transform: scale(1); }
         50% 		{ transform: scale(1.1); }
         100% 		{ transform: scale(1); }
	}
.animated.pulse:hover
	{
	animation-name: 	pulse;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes pulse2
	{
         0%		{transform: scale3d(1, 1, 1); }
         50%		{transform: scale3d(5, 5, 5); }
         100%		{transform: scale3d(1, 1, 1); }
         }
.animated.pulse2:hover
	{
         animation-name:	pulse2;
         animation-duration: 	5s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rollIn
	{
         0% 		{ opacity: 0; transform: translateX(-100%) rotate(-120deg); }
         100% 		{ opacity: 1; transform: translateX(0px) rotate(0deg); }
	}

.animated.rollIn:hover
	{
	animation-name: 	rollIn;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rollOut
	{
         0% 		{ opacity: 1; transform: translateX(0px) rotate(0deg); }
         100% 		{ opacity: 0; transform: translateX(100%) rotate(120deg); }
	}
.animated.rollOut:hover
	{
	animation-name: 	rollOut;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateIn
	{
         0% 		{ transform-origin: center center; transform: rotate(-200deg); opacity: 0; }
         100% 		{ transform-origin: center center; transform: rotate(0); 	   opacity: 1; }
	}
.animated.rotateIn:hover
	{
         animation-name: 	rotateIn;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateInDownLeft
	{
         0% 		{ transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; }
         100% 		{ transform-origin: left bottom; transform: rotate(0); 	opacity: 1; }
	}
.animated.rotateInDownLeft:hover
	{
         animation-name: 	rotateInDownLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateInDownRight
	{
         0% 		{ transform-origin: right bottom; transform: rotate(90deg); opacity: 0; }
         100% 		{ transform-origin: right bottom; transform: rotate(0); 	opacity: 1; }
	}
.animated.rotateInDownRight:hover
	{
         animation-name: 	rotateInDownRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateInUpLeft
	{
         0% 		{ transform-origin: left bottom; transform: rotate(90deg); 	opacity: 0; }
         100% 		{ transform-origin: left bottom; transform: rotate(0); 	opacity: 1; }
	}
.animated.rotateInUpLeft:hover
	{
         animation-name: 	rotateInUpLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateInUpRight
	{
         0% 		{ transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; }
         100% 		{ transform-origin: right bottom; transform: rotate(0); 	 opacity: 1; }
	}
.animated.rotateInUpRight:hover
	{
         animation-name: 	rotateInUpRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateOut
	{
         0% 		{ transform-origin: center center; transform: rotate(0); 	  opacity: 1; }
         100% 		{ transform-origin: center center; transform: rotate(200deg); opacity: 0; }
	}
.animated.rotateOut:hover
	{
         animation-name: 	rotateOut;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateOutDownLeft
	{
         0% 		{ transform-origin: left bottom; transform: rotate(0); 	opacity: 1; }
         100% 		{ transform-origin: left bottom; transform: rotate(90deg); 	opacity: 0; }
	}
.animated.rotateOutDownLeft:hover
	{
         animation-name: 	rotateOutDownLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateOutDownRight
	{
	0% 		{ transform-origin: right bottom; transform: rotate(0); 	 opacity: 1; }
         100% 		{ transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; }
	}
.animated.rotateOutDownRight:hover
	{
	animation-name: 	rotateOutDownRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateOutUpLeft
	{
         0% 		{ transform-origin: left bottom; transform: rotate(0); 	opacity: 1; }
         100% 		{ transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; }
	}
.animated.rotateOutUpLeft:hover
	{
         animation-name: 	rotateOutUpLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes rotateOutUpRight
	{
         0% 		{ transform-origin: right bottom; transform: rotate(0); 	opacity: 1; }
         100% 		{ transform-origin: right bottom; transform: rotate(90deg); opacity: 0; }
	}
.animated.rotateOutUpRight:hover
	{
         animation-name: 	rotateOutUpRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes shake
         {
         0%, 100%         	{ transform: translateX(0); }
         10%, 30%, 50%, 70%, 90%	{ transform: translateX(-10px); }
         20%, 40%, 60%, 80%	{ transform: translateX(10px); }
         }
.animated.shake:hover
         {
	animation-name: 	shake;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes slideInDown
	{
         0% 		{ opacity: 0; transform: translateY(-2000px); }
         100% 		{ transform: translateY(0); }
	}
.animated.slideInDown:hover
	{
         animation-name: 	slideInDown;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes slideInLeft
	{
         0% 		{ opacity: 0; transform: translateX(-2000px); }
         100% 		{ transform: translateX(0); }
	}
.animated.slideInLeft:hover
	{
         animation-name: 	slideInLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes slideInRight
	{
         0% 		{ opacity: 0; transform: translateX(2000px); }
         100% 		{ transform: translateX(0); }
	}
.animated.slideInRight:hover
	{
         animation-name: 	slideInRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes slideOutLeft
	{
         0% 		{ transform: translateX(0); }
         100% 		{ opacity: 0; transform: translateX(-2000px); }
	}
.animated.slideOutLeft:hover
	{
         animation-name: 	slideOutLeft;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes slideOutRight
	{
         0% 		{ transform: translateX(0); }
         100% 		{ opacity: 0; transform: translateX(2000px); }
	}
.animated.slideOutRight:hover
	{
         animation-name: 	slideOutRight;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes slideOutUp
	{
         0% 		{ transform: translateY(0); }
         100% 		{ opacity: 0; transform: translateY(-2000px); }
	}
.animated.slideOutUp:hover
	{
         animation-name: 	slideOutUp;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes swing
	{
         20% 		{ transform: rotate(15deg); }
         40% 		{ transform: rotate(-10deg); }
         60% 		{ transform: rotate(5deg); }
         80% 		{ transform: rotate(-5deg); }
         100% 		{ transform: rotate(0deg); }
	}
.animated.swing:hover
	{
	transform-origin: 	top center;
	animation-name: 	swing;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes tada
         {
         0%		{ transform: scale(1); }
         10%, 20%         	{ transform: scale(0.9) rotate(-3deg); }
         30%, 50%, 70%, 90%         	{ transform: scale(1.1) rotate(3deg); }
         40%, 60%, 80%         	{ transform: scale(1.1) rotate(-3deg); }
         100%         	{ transform: scale(1) rotate(0); }
         }
.animated.tada:hover
         {
	animation-name: 	tada;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
@keyframes wobble
	{
         0% 		{ transform: translateX(0%); }
         15% 		{ transform: translateX(-25%) rotate(-5deg); }
         30% 		{ transform: translateX(20%) rotate(3deg); }
         45% 		{ transform: translateX(-15%) rotate(-3deg); }
         60% 		{ transform: translateX(10%) rotate(2deg); }
         75% 		{ transform: translateX(-5%) rotate(-1deg); }
         100% 		{ transform: translateX(0%); }
	}
.animated.wobble:hover
	{
	animation-name: 	wobble;
         animation-duration: 	1s;
         animation-fill-mode: 	both;
         }
/* ---------------------------------------------------------------- */
a.buttontest1
	{
         background-color:	#93be27;
         transition:	background-color 5s ease-out;
         }
a.buttontest1:hover, a.buttontest1:focus
	{
         background-color:	red;
         }
/* ---------------------------------------------------------------- */