/***********************************************************************************************************************************/
/************************ 							/!\	AVANT D'EDITER /!\									************************/
/************************ 									VOIR					   						************************/
/************************ 							www.dev.equideow.com/doc								************************/
/************************ 						        	  ET											************************/
/************************ 			dev.owlient.eu/wiki/index.php/Guide_Int%C3%A9gration_Equideow			************************/
/***********************************************************************************************************************************/

/***********************************************************************************************************************************/
/** ANIMATIONS GENERIC *************************************************************************************************************/
/***********************************************************************************************************************************/

/* HOMEPAGE ANIMATION ***************************/
/************************************************/

#animation {
	top: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 1;
}

#animation > div.animation {
	position: relative;
	width: 100%;
	height: 100%;
}

/* CSS3 Loader **********************************/
/* $this->widget->getLoader() *****************/
/************************************************/

#loader {
	position:relative;
	width: 40px;
	height: 40px;
	margin:15px auto;
	padding-left:3px;
	text-align:center;
	font-size:0;
}
#loader::before{
	content:"";
	display:block;
	width: 30px;
	height: 30px;
	border-radius:100%;
	border-left:3px solid transparent;
	border-right:3px solid transparent;
	border-bottom:3px solid transparent;
	border-top:3px solid #C2C069;
	animation: rotation .9s infinite linear;
	-o-animation: rotation .9s infinite linear;
	-ms-animation: rotation .9s infinite linear;
	-moz-animation: rotation .9s infinite linear;
	-webkit-animation: rotation .9s infinite linear;
	backface-visibility:hidden;
}
@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}


/***********************************************************************************************************************************/
/** animation-arrow-top-bottom *****************************************************************************************************/
/***********************************************************************************************************************************/

.animation-arrow-top-bottom{
	animation: arrow-top-bottom 0.5s alternate infinite;
	-o-animation: arrow-top-bottom 0.5s alternate infinite;
	-ms-animation: arrow-top-bottom 0.5s alternate infinite;
	-moz-animation: arrow-top-bottom 0.5s alternate infinite;
	-webkit-animation: arrow-top-bottom 0.5s alternate infinite;
}

@-o-keyframes arrow-top-bottom {
	from {transform:translate(0,0);}
	to {transform:translate(0,20px);}
}
@-ms-keyframes arrow-top-bottom {
	from {transform:translate(0,0);}
	to {transform:translate(0,20px);}
}
@-moz-keyframes arrow-top-bottom {
	from {transform:translate(0,0);}
	to {transform:translate(0,20px);}
}
@-webkit-keyframes arrow-top-bottom {
	from {transform:translate(0,0);}
	to {transform:translate(0,20px);}
}
@keyframes arrow-top-bottom {
	from {transform:translate(0,0);}
	to {transform:translate(0,20px);}
}


/***********************************************************************************************************************************/
/** RUMBLE *************************************************************************************************************************/
/***********************************************************************************************************************************/

.anim-rumble{
	animation: rumble .0625s 12 linear;
	-ms-animation: rumble .0625s 12 linear;
	-moz-animation: rumble .0625s 12 linear;
	-webkit-animation: rumble .0625s 12 linear;
}
@keyframes rumble {
    0% {transform: rotate(0deg);}
    25% {transform: translate(2px, 0px) rotate(-3deg);}
    50% {transform: translate(0px, -2px) rotate(0deg);}
    75% {transform: translate(-2px, 0px) rotate(3deg);}
    100% {transform: translate(0px, 2px) rotate(0deg);} 
}
@-ms-keyframes rumble {
    0% {-ms-transform: rotate(0deg);}
    25% {-ms-transform: translate(2px, 0px) rotate(-3deg);}
    50% {-ms-transform: translate(0px, -2px) rotate(0deg);}
    75% {-ms-transform: translate(-2px, 0px) rotate(3deg);}
    100% {-ms-transform: translate(0px, 2px) rotate(0deg);} 
}
@-moz-keyframes rumble {
    0% {-moz-transform: rotate(0deg);}
    25% {-moz-transform: translate(2px, 0px) rotate(-3deg);}
    50% {-moz-transform: translate(0px, -2px) rotate(0deg);}
    75% {-moz-transform: translate(-2px, 0px) rotate(3deg);}
    100% {-moz-transform: translate(0px, 2px) rotate(0deg);} 
}
@-webkit-keyframes rumble {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: translate(2px, 0px) rotate(-3deg);}
    50% {-webkit-transform: translate(0px, -2px) rotate(0deg);}
    75% {-webkit-transform: translate(-2px, 0px) rotate(3deg);}
    100% {-webkit-transform: translate(0px, 2px) rotate(0deg);} 
}


/***********************************************************************************************************************************/
/** SHAKE **************************************************************************************************************************/
/***********************************************************************************************************************************/

body.animation .anim-shake{
	animation: shake 0.2s alternate infinite;
	-o-animation: shake 0.2s alternate infinite;
	-ms-animation: shake 0.2s alternate infinite;
	-moz-animation: shake 0.2s alternate infinite;
	-webkit-animation: shake 0.2s alternate infinite;
}

@keyframes shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-o-keyframes shake {
	0% { -o-transform: translate(2px, 1px) rotate(0deg); }
	10% { -o-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -o-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -o-transform: translate(0px, 2px) rotate(0deg); }
	40% { -o-transform: translate(1px, -1px) rotate(1deg); }
	50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -o-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -o-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -o-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -o-transform: translate(2px, 2px) rotate(0deg); }
	100% { -o-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake {
	0% { -ms-transform: translate(2px, 1px) rotate(0deg); }
	10% { -ms-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
	40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
	50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
	100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes shake {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

/**** Sprite chapeaux magique *****/
.chapeau-sprite {
	z-index:99;
	width:300px;
	height:300px;
	position:relative;
	overflow:hidden;
}
.chapeau-sprite img {
	width:14400px;
	height:300px;
	overflow:hidden;
	position:absolute;
	-moz-animation-name: chapeau-horizontal;
    -moz-animation-duration: 2.4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(48);
	-webkit-animation-name: chapeau-horizontal;
    -webkit-animation-duration: 2.4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(48);
	animation-name: chapeau-horizontal;
    animation-duration: 2.4s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(48);
}
@-moz-keyframes chapeau-horizontal {
	0%   {left: 0px; }
	100%   {left: -14400px; }
}
@-webkit-keyframes chapeau-horizontal {
	0%   {left: 0px; }
	100%   {left: -14400px; }
}
@keyframes chapeau-horizontal {
	0%   {left: 0px; }
	100%   {left: -14400px; }
}

/**********************************************************************************************************************/
/** SNOW ANIMATION ****************************************************************************************************/
/**********************************************************************************************************************/
#animation.snow:before{
	content:'';
	display:block;
    background-color:transparent;
	background:
		url(/media/equideo/image/animations/snow/s1.png),
		url(/media/equideo/image/animations/snow/s2.png),
		url(/media/equideo/image/animations/snow/s3.png);
	height: 1110px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

@keyframes snow {
	0% {background-position: 0 0, 0 0, 0 0;}
	100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
	0% {background-position: 0 0, 0 0, 0 0;}
	100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes snow {
	0% {background-position: 0 0, 0 0, 0 0;}
	100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes snow {
	0% {background-position: 0 0, 0 0, 0 0;}
	100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}


/**********************************************************************************************************************/
/** ANIMATION-SHOW ****************************************************************************************************/
/**********************************************************************************************************************/

.animation-show{
	animation-name:onLoad;
	animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.75s;
    opacity:1;
}
@keyframes onLoad {
    0%{
    	opacity:0;
    }
    100%{
    	opacity:1;
    }
}


/***********************************************************************************************************************************/
/** ANIMATION-POP COMMON ***********************************************************************************************************/
/***********************************************************************************************************************************/

@keyframes popCommon {
    0%{
    	opacity:0;
    	transform:translate(0, 100px);
    }
    50%{
    	opacity:1;
    }
    90%{
    	transform:translate(0, -10px);
    }
    100%{
    	transform:translate(0);
    }
}

/** ANIM-POP-IN *******************************************************************************************************/
.anim-pop-in{
	animation-name:popCommon;
	animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: .75s;
}

/** ANIM-POP-OUT ******************************************************************************************************/
.anim-pop-out{
	animation-name:popCommon;
	animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: .75s;
    animation-direction: reverse;
}


/***********************************************************************************************************************************/
/** ANIMATION-POP TEXT *************************************************************************************************************/
/***********************************************************************************************************************************/

.anim-pop-text{
	animation: popText;
	animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: .25s;
}
@keyframes popText{
	from{ transform: scale(0); }
	to{ transform: scale(1); }
}
@-webkit-keyframes popText{
	from{ transform: scale(0); }
	to{ transform: scale(1); }
}
@-moz-keyframes popText{
	from{ transform: scale(0); }
	to{ transform: scale(1); }
}
@-ms-keyframes popText{
	from{ transform: scale(0); }
	to{ transform: scale(1); }
}


/***********************************************************************************************************************************/
/* ANIM-INTERACTABLE COMMON ********************************************************************************************************/
/***********************************************************************************************************************************/ 

/** ANIM-SCALE-IN ******************************************************************************************************************/
.anim-scale-in{
	animation-name:scaleCommon;
	animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: .75s;
}
@keyframes scaleCommon {
    0%{
    	transform:scale(0);
    }
    90%{
    	transform:scale(1.1);
    }
    100%{
    	transform:scale(1);
    }
}

/** ANIM-SCALE-TEXT ******************************************************************************************************************/
.anim-scale-text{
	animation-name:scaleCommon;
	animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: .75s;
}
@keyframes scaleCommon {
    0%{
    	transform:scale(1);
    }
    50%{
    	transform:scale(1.2);
    }
    100%{
    	transform:scale(1);
    }
}


/***********************************************************************************************************************************/
/* ANIM-INTERACTABLE  **************************************************************************************************************/
/***********************************************************************************************************************************/ 

/* note : class anim-interactable is for sowcle form inputs*/
.anim-interactable::after,
.button[data-anim="1"]::after{
	content:"";
	position: absolute;
	display: block;
	z-index: 0;
	left:0;
	top:-25px;
	width: 100%;
	height: 100px;
	border-radius: 33%;
	transform:scale(0);
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-ms-transform:scale(0);
	-o-transform:scale(0);
	transition:all .15s ease-in-out;
	-webkit-transition:all .15s ease-in-out;
	-moz-transition:all .15s ease-in-out;
	-ms-transition:all .15s ease-in-out;
	-o-transition:all .15s ease-in-out;
}
.anim-interactable:not(.disabled):hover::after,
.anim-interactable:not(.disabled):focus::after,
.button[data-anim="1"]:not(.disabled):hover::after,
.button[data-anim="1"]:not(.disabled):focus::after{
	border-radius: 20%;
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);	
}


/***********************************************************************************************************************************
/***********************************************************************************************************************************

##     ##  #######  ########   ######  ########  ######  ########  ########  #### ######## ########                  ###    ##    ## #### ##     ##    ###    ######## ####  #######  ##    ## 
##     ## ##     ## ##     ## ##    ## ##       ##    ## ##     ## ##     ##  ##     ##    ##                       ## ##   ###   ##  ##  ###   ###   ## ##      ##     ##  ##     ## ###   ## 
##     ## ##     ## ##     ## ##       ##       ##       ##     ## ##     ##  ##     ##    ##                      ##   ##  ####  ##  ##  #### ####  ##   ##     ##     ##  ##     ## ####  ## 
######### ##     ## ########   ######  ######    ######  ########  ########   ##     ##    ######      #######    ##     ## ## ## ##  ##  ## ### ## ##     ##    ##     ##  ##     ## ## ## ## 
##     ## ##     ## ##   ##         ## ##             ## ##        ##   ##    ##     ##    ##                     ######### ##  ####  ##  ##     ## #########    ##     ##  ##     ## ##  #### 
##     ## ##     ## ##    ##  ##    ## ##       ##    ## ##        ##    ##   ##     ##    ##                     ##     ## ##   ###  ##  ##     ## ##     ##    ##     ##  ##     ## ##   ### 
##     ##  #######  ##     ##  ######  ########  ######  ##        ##     ## ####    ##    ########               ##     ## ##    ## #### ##     ## ##     ##    ##    ####  #######  ##    ## 

***********************************************************************************************************************************
***********************************************************************************************************************************/

.horse-sprite-animation{
	background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-name: horse-sprite;
    animation-timing-function: steps(30);
    -webkit-animation-duration: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: horse-sprite;
    -webkit-animation-timing-function: steps(30);
}

@keyframes horse-sprite {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9000px top;
	}
}
@-webkit-keyframes horse-sprite {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9000px top;
	}
}

/*NOMADES*/

.horse-sprite-animation.capac{
	animation-name: horse-sprite-capac;
    animation-timing-function: steps(12);
    animation-duration: 2.4s;
    -webkit-animation-name: horse-sprite-capac;
    -webkit-animation-timing-function: steps(12);
    -webkit-animation-duration: 2.4s;
}
@keyframes horse-sprite-capac {
	0% {
   		background-position: left top;
	}
	100% {
	    background-position: -3600px top;
	}
}
@-webkit-keyframes horse-sprite-capac {
	0% {
   		background-position: left top;
	}
	100% {
	    background-position: -3600px top;
	}
}

.horse-sprite-animation.cochise{
	animation-name: horse-sprite-cochise;
    animation-timing-function: steps(21);
    animation-duration: 2.3s;
    -webkit-animation-name: horse-sprite-cochise;
    -webkit-animation-timing-function: steps(21);
    -webkit-animation-duration: 2.3s;
}
@keyframes horse-sprite-cochise {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6300px top;
	}
}
@-webkit-keyframes horse-sprite-cochise {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6300px top;
	}
}

.horse-sprite-animation.colomb{
	animation-name: horse-sprite-colomb;
    animation-timing-function: steps(28);
    animation-duration: 5.6s;
    -webkit-animation-name: horse-sprite-colomb;
    -webkit-animation-timing-function: steps(28);
    -webkit-animation-duration: 5.6s;
}
@keyframes horse-sprite-colomb {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8400px top;
	}
}
@-webkit-keyframes horse-sprite-colomb {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8400px top;
	}
}

.horse-sprite-animation.fidele{
	animation-name: horse-sprite-fidele;
    animation-timing-function: steps(21);
    animation-duration: 4.2s;
    -webkit-animation-name: horse-sprite-fidele;
    -webkit-animation-timing-function: steps(21);
    -webkit-animation-duration: 4.2s;
}
@keyframes horse-sprite-fidele {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6300px top;
	}
}
@-webkit-keyframes horse-sprite-fidele {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6300px top;
	}
}

.horse-sprite-animation.fortune{
	animation-name: horse-sprite-fortune;
    animation-timing-function: steps(12);
    animation-duration: 2.4s;
    -webkit-animation-name: horse-sprite-fortune;
    -webkit-animation-timing-function: steps(12);
    -webkit-animation-duration: 2.4s;
}
@keyframes horse-sprite-fortune {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -3600px top;
	}
}
@-webkit-keyframes horse-sprite-fortune {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -3600px top;
	}
}

.horse-sprite-animation.khan{
	animation-name: horse-sprite-khan;
    animation-timing-function: steps(22);
    animation-duration: 4.4s;
    -webkit-animation-name: horse-sprite-khan;
    -webkit-animation-timing-function: steps(22);
    -webkit-animation-duration: 4.4s;
}
@keyframes horse-sprite-khan {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6600px top;
	}
}
@-webkit-keyframes horse-sprite-khan {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6600px top;
	}
}
.horse-sprite-animation.patience{
	animation-name: horse-sprite-patience;
    animation-timing-function: steps(21);
    animation-duration: 6s;
    -webkit-animation-name: horse-sprite-patience;
    -webkit-animation-timing-function: steps(21);
    -webkit-animation-duration: 6s;
}
@keyframes horse-sprite-patience {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6300px top;
	}
}
@-webkit-keyframes horse-sprite-patience {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -6300px top;
	}
}

.horse-sprite-animation.timide{
	animation-name: horse-sprite-timide;
    animation-timing-function: steps(32);
    animation-duration: 6.4s;
    -webkit-animation-name: horse-sprite-timide;
    -webkit-animation-timing-function: steps(32);
    -webkit-animation-duration: 6.4s;
}
@keyframes horse-sprite-timide {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9600px top;
	}
}
@-webkit-keyframes horse-sprite-timide {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9600px top;
	}
}

.horse-sprite-animation.cesar{
	animation-name: horse-sprite-cesar;
    animation-timing-function: steps(33);
    animation-duration: 1.3s;
    -webkit-animation-name: horse-sprite-cesar;
    -webkit-animation-timing-function: steps(33);
    -webkit-animation-duration: 1.3s;
}
@keyframes horse-sprite-cesar {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9900px top;
	}
}
@-webkit-keyframes horse-sprite-cesar {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9900px top;
	}
}
.horse-sprite-animation.harald{
	animation-name: horse-sprite-harald;
    animation-timing-function: steps(28);
    animation-duration: 8.4s;
    -webkit-animation-name: horse-sprite-harald;
    -webkit-animation-timing-function: steps(28);
    -webkit-animation-duration: 8.4s;
}
@keyframes horse-sprite-harald {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8400px top;
	}
}
@-webkit-keyframes horse-sprite-harald {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8400px top;
	}
}
.horse-sprite-animation.lucy{
	animation-name: horse-sprite-lucy;
    animation-timing-function: steps(14);
    animation-duration: 2.8s;
    -webkit-animation-name: horse-sprite-lucy;
    -webkit-animation-timing-function: steps(14);
    -webkit-animation-duration: 2.8s;
}
@keyframes horse-sprite-lucy {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4200px top;
	}
}
@-webkit-keyframes horse-sprite-lucy {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4200px top;
	}
}
.horse-sprite-animation.ramses{
	animation-name: horse-sprite-ramses;
    animation-timing-function: steps(33);
    animation-duration: 3.3s;
    -webkit-animation-name: horse-sprite-ramses;
    -webkit-animation-timing-function: steps(33);
    -webkit-animation-duration: 3.3s;
}
@keyframes horse-sprite-ramses {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9900px top;
	}
}
@-webkit-keyframes horse-sprite-ramses {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9900px top;
	}
}
.horse-sprite-animation.pionnier{
	animation-name: horse-sprite-pionnier;
    animation-timing-function: steps(24);
    animation-duration: 3.3s;
    -webkit-animation-name: horse-sprite-pionnier;
    -webkit-animation-timing-function: steps(24);
    -webkit-animation-duration: 3.3s;
}
@keyframes horse-sprite-pionnier {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -7200px top;
	}
}
@-webkit-keyframes horse-sprite-pionnier {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -7200px top;
	}
}
.horse-sprite-animation.apollon{
	animation-name: horse-sprite-apollon;
    animation-duration: 1.9s;
    animation-timing-function: steps(24);
    -webkit-animation-name: horse-sprite-apollon;
    -webkit-animation-duration: 1.9s;
    -webkit-animation-timing-function: steps(24);
}
@keyframes horse-sprite-apollon {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -7200px top;
	}
}
@-webkit-keyframes horse-sprite-apollon {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -7200px top;
	}
}


.horse-sprite-animation.athena{
	animation-name: horse-sprite-athena;
    animation-timing-function: steps(32);
    animation-duration: 1.6s;
    -webkit-animation-name: horse-sprite-athena;
    -webkit-animation-timing-function: steps(32);
    -webkit-animation-duration: 1.6s;
}
@keyframes horse-sprite-athena {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9600px top;
	}
}
@-webkit-keyframes horse-sprite-athena {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -9600px top;
	}
}
.horse-sprite-animation.dionysos{
	animation-name: horse-sprite-dionysos;
    animation-timing-function: steps(14);
    animation-duration: 0.6s;
    -webkit-animation-name: horse-sprite-dionysos;
    -webkit-animation-timing-function: steps(14);
    -webkit-animation-duration: 0.6s;
}
@keyframes horse-sprite-dionysos {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4200px top;
	}
}
@-webkit-keyframes horse-sprite-dionysos {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4200px top;
	}
}
.horse-sprite-animation.hades{
	animation-name: horse-sprite-hades;
    animation-timing-function: steps(15);
    animation-duration: 0.7s;
    -webkit-animation-name: horse-sprite-hades;
    -webkit-animation-timing-function: steps(15);
    -webkit-animation-duration: 0.7s;
}
@keyframes horse-sprite-hades {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4500px top;
	}
}
@-webkit-keyframes horse-sprite-hades {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4500px top;
	}
}


.horse-sprite-animation.poseidon{
	animation-name: horse-sprite-poseidon;
    animation-timing-function: steps(14);
    animation-duration: 0.6s;
    -webkit-animation-name: horse-sprite-poseidon;
    -webkit-animation-timing-function: steps(14);
    -webkit-animation-duration: 0.6s;
}
@keyframes horse-sprite-poseidon {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4200px top;
	}
}
@-webkit-keyframes horse-sprite-poseidon {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -4200px top;
	}
}
.horse-sprite-animation.zeus{
	animation-name: horse-sprite-zeus;
    animation-timing-function: steps(18);
    animation-duration: 1.8s;
    -webkit-animation-name: horse-sprite-zeus;
    -webkit-animation-timing-function: steps(18);
    -webkit-animation-duration: 1.8s;
}
@keyframes horse-sprite-zeus {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -5400px top;
	}
}
@-webkit-keyframes horse-sprite-zeus {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -5400px top;
	}
}

/***********************************************************************************************************************************
/***********************************************************************************************************************************

 ######  #### ######## ########   #######  ##     ## #### ##       ##       ########    ######## ##    ##  ######   #######  ########   ######  ######## ##       ######## ######## 
##    ##  ##     ##    ##     ## ##     ## ##     ##  ##  ##       ##       ##          ##       ###   ## ##    ## ##     ## ##     ## ##    ## ##       ##       ##       ##       
##        ##     ##    ##     ## ##     ## ##     ##  ##  ##       ##       ##          ##       ####  ## ##       ##     ## ##     ## ##       ##       ##       ##       ##       
##        ##     ##    ########  ##     ## ##     ##  ##  ##       ##       ######      ######   ## ## ##  ######  ##     ## ########  ##       ######   ##       ######   ######   
##        ##     ##    ##   ##   ##     ## ##     ##  ##  ##       ##       ##          ##       ##  ####       ## ##     ## ##   ##   ##       ##       ##       ##       ##       
##    ##  ##     ##    ##    ##  ##     ## ##     ##  ##  ##       ##       ##          ##       ##   ### ##    ## ##     ## ##    ##  ##    ## ##       ##       ##       ##       
 ######  ####    ##    ##     ##  #######   #######  #### ######## ######## ########    ######## ##    ##  ######   #######  ##     ##  ######  ######## ######## ######## ######## 

***********************************************************************************************************************************
***********************************************************************************************************************************/

.horse-sprite-animation.squelette{
	 -webkit-animation-duration: 2.5s;
	 animation-duration: 2.5s;
}
.horse-sprite-animation.citrouille,
.horse-sprite-animation.epidemie,
.horse-sprite-animation.vampire{
	 -webkit-animation-duration: 2s;
	 animation-duration: 2s;
}



/***********************************************************************************************************************************
/***********************************************************************************************************************************

##    ##  #######  ##     ##    ###    ########  ########  ######                ########     ###    ########  #### ##       ##        #######  ##    ## 
###   ## ##     ## ###   ###   ## ##   ##     ## ##       ##    ##               ##     ##   ## ##   ##     ##  ##  ##       ##       ##     ## ###   ## 
####  ## ##     ## #### ####  ##   ##  ##     ## ##       ##                     ##     ##  ##   ##  ##     ##  ##  ##       ##       ##     ## ####  ## 
## ## ## ##     ## ## ### ## ##     ## ##     ## ######    ######     #######    ########  ##     ## ########   ##  ##       ##       ##     ## ## ## ## 
##  #### ##     ## ##     ## ######### ##     ## ##             ##               ##        ######### ##         ##  ##       ##       ##     ## ##  #### 
##   ### ##     ## ##     ## ##     ## ##     ## ##       ##    ##               ##        ##     ## ##         ##  ##       ##       ##     ## ##   ### 
##    ##  #######  ##     ## ##     ## ########  ########  ######                ##        ##     ## ##        #### ######## ########  #######  ##    ## 

***********************************************************************************************************************************
***********************************************************************************************************************************/

.horse-sprite-animation.atlas,
.horse-sprite-animation.azuree,
.horse-sprite-animation.aurore,
.horse-sprite-animation.citron,
.horse-sprite-animation.grand-sylvain,
.horse-sprite-animation.isabelle,
.horse-sprite-animation.machaon,
.horse-sprite-animation.morpho-bleu,
.horse-sprite-animation.monarque,
.horse-sprite-animation.vulcain,
.horse-sprite-animation.voilier-vert,
.horse-sprite-animation.sphinx,
.horse-sprite-animation.scribonia,
.horse-sprite-animation.greta,
.horse-sprite-animation.dynamine,
.horse-sprite-animation.zerynthia
{
	animation-name: horse-sprite-papillon;
    animation-timing-function: steps(24);
    animation-duration: 1s;
    -webkit-animation-name: horse-sprite-papillon;
    -webkit-animation-timing-function: steps(24);
    -webkit-animation-duration: 1s;
}
@keyframes horse-sprite-papillon {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -7200px top;
	}
}

/***********************************************************************************************************************************
/***********************************************************************************************************************************

##    ##  #######  ##     ##    ###    ########  ########  ######                ######## ##    ## ##     ## #### ########   #######  ##    ## ##    ## ######## ##     ## ######## ##    ## ######## 
###   ## ##     ## ###   ###   ## ##   ##     ## ##       ##    ##               ##       ###   ## ##     ##  ##  ##     ## ##     ## ###   ## ###   ## ##       ###   ### ##       ###   ##    ##    
####  ## ##     ## #### ####  ##   ##  ##     ## ##       ##                     ##       ####  ## ##     ##  ##  ##     ## ##     ## ####  ## ####  ## ##       #### #### ##       ####  ##    ##    
## ## ## ##     ## ## ### ## ##     ## ##     ## ######    ######     #######    ######   ## ## ## ##     ##  ##  ########  ##     ## ## ## ## ## ## ## ######   ## ### ## ######   ## ## ##    ##    
##  #### ##     ## ##     ## ######### ##     ## ##             ##               ##       ##  ####  ##   ##   ##  ##   ##   ##     ## ##  #### ##  #### ##       ##     ## ##       ##  ####    ##    
##   ### ##     ## ##     ## ##     ## ##     ## ##       ##    ##               ##       ##   ###   ## ##    ##  ##    ##  ##     ## ##   ### ##   ### ##       ##     ## ##       ##   ###    ##    
##    ##  #######  ##     ## ##     ## ########  ########  ######                ######## ##    ##    ###    #### ##     ##  #######  ##    ## ##    ## ######## ##     ## ######## ##    ##    ##    

***********************************************************************************************************************************
***********************************************************************************************************************************/

.horse-sprite-animation.abysses,
.horse-sprite-animation.sylve,
.horse-sprite-animation.atoll,
.horse-sprite-animation.wilderness,
.horse-sprite-animation.bush,
.horse-sprite-animation.foret,
.horse-sprite-animation.lande,
.horse-sprite-animation.estran,
.horse-sprite-animation.mangrove,
.horse-sprite-animation.marais,
.horse-sprite-animation.corail,
.horse-sprite-animation.steppe,
.horse-sprite-animation.taiga,
.horse-sprite-animation.toundra
{
	-webkit-animation-duration: 1.2s;
	 animation-duration: 1.2s;
}

.horse-sprite-animation.banquise{
	-webkit-animation-duration: 6s;
	 animation-duration: 6s;
}

.horse-sprite-animation.desert{
	-webkit-animation-duration: 3s;
	 animation-duration: 3s;
}

.horse-sprite-animation.savane{
	-webkit-animation-duration: 2.1s;
	 animation-duration: 2.1s;
}

/***********************************************************************************************************************************
/***********************************************************************************************************************************

##    ##  #######  ##     ##    ###    ########  ########  ######                ##     ## ##     ##  ######  ####  #######  ##     ## ######## 
###   ## ##     ## ###   ###   ## ##   ##     ## ##       ##    ##               ###   ### ##     ## ##    ##  ##  ##     ## ##     ## ##       
####  ## ##     ## #### ####  ##   ##  ##     ## ##       ##                     #### #### ##     ## ##        ##  ##     ## ##     ## ##       
## ## ## ##     ## ## ### ## ##     ## ##     ## ######    ######     #######    ## ### ## ##     ##  ######   ##  ##     ## ##     ## ######   
##  #### ##     ## ##     ## ######### ##     ## ##             ##               ##     ## ##     ##       ##  ##  ##  ## ## ##     ## ##       
##   ### ##     ## ##     ## ##     ## ##     ## ##       ##    ##               ##     ## ##     ## ##    ##  ##  ##    ##  ##     ## ##       
##    ##  #######  ##     ## ##     ## ########  ########  ######                ##     ##  #######   ######  ####  ##### ##  #######  ######## 

***********************************************************************************************************************************
***********************************************************************************************************************************/

.horse-sprite-animation.hip-hop,
.horse-sprite-animation.rnb,
.horse-sprite-animation.reggae,
.horse-sprite-animation.metal,
.horse-sprite-animation.country,
.horse-sprite-animation.opera,
.horse-sprite-animation.jazz,
.horse-sprite-animation.funk,
.horse-sprite-animation.punk-rock,
.horse-sprite-animation.electro,
.horse-sprite-animation.chef-orchestre,
.horse-sprite-animation.blues
{
	-webkit-animation-duration: 1.2s;
	 animation-duration: 1.2s;
}

/***********************************************************************************************************************************
/***********************************************************************************************************************************

##    ##  #######  ##     ##    ###    ########  ########  ######                 ######   ########  ########  ######   ######  
###   ## ##     ## ###   ###   ## ##   ##     ## ##       ##    ##               ##    ##  ##     ## ##       ##    ## ##    ## 
####  ## ##     ## #### ####  ##   ##  ##     ## ##       ##                     ##        ##     ## ##       ##       ##       
## ## ## ##     ## ## ### ## ##     ## ##     ## ######    ######     #######    ##   #### ########  ######   ##        ######  
##  #### ##     ## ##     ## ######### ##     ## ##             ##               ##    ##  ##   ##   ##       ##             ## 
##   ### ##     ## ##     ## ##     ## ##     ## ##       ##    ##               ##    ##  ##    ##  ##       ##    ## ##    ## 
##    ##  #######  ##     ## ##     ## ########  ########  ######                 ######   ##     ## ########  ######   ######  

***********************************************************************************************************************************
***********************************************************************************************************************************/

.horse-sprite-animation.centaure, /* 14 400 px*/
.horse-sprite-animation.chimere,
.horse-sprite-animation.gorgone,
.horse-sprite-animation.harpie,
.horse-sprite-animation.sphynx,
.horse-sprite-animation.typhon{
	animation-timing-function: steps(48);
	animation-duration: 2s;
	animation-name: horse-sprite-48;
	-webkit-animation-name: horse-sprite-48;
	}
@keyframes horse-sprite-48 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -14400px top;
	}
}
@-webkit-keyframes horse-sprite-48 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -14400px top;
	}
}
.horse-sprite-animation.cerbere{  /* 21 600 px*/
	animation-timing-function: steps(72);
	-webkit-animation-timing-function: steps(72);
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	animation-name: horse-sprite-72;
	-webkit-animation-name: horse-sprite-72;
}
@keyframes horse-sprite-72 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -21600px top;
	}
}
@-webkit-keyframes horse-sprite-72 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -21600px top;
	}
}
.horse-sprite-animation.echidna, /* 16 200 px*/
.horse-sprite-animation.faune{
	animation-timing-function: steps(54);
	-webkit-animation-timing-function: steps(54);
	-webkit-animation-duration: 2.3s;
	animation-duration: 2.3s;
	animation-name: horse-sprite-55;
	-webkit-animation-name: horse-sprite-55;
}
@keyframes horse-sprite-55 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -16200px top;
	}
}
@-webkit-keyframes horse-sprite-55 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -1600px top;
	}
}
.horse-sprite-animation.minotaure{ /* 8 700 px*/
	animation-timing-function: steps(29);
	-webkit-animation-timing-function: steps(29);
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	animation-name: horse-sprite-29;
	-webkit-animation-name: horse-sprite-29;
}
@keyframes horse-sprite-29 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8700px top;
	}
}
@-webkit-keyframes horse-sprite-29 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -8700px top;
	}
}
.horse-sprite-animation.scylla{ /*13 500 px*/
	animation-timing-function: steps(45);
	-webkit-animation-timing-function: steps(45);
	-webkit-animation-duration: 1.875s;
	animation-duration: 1.875s;
	animation-name: horse-sprite-45;
	-webkit-animation-name: horse-sprite-45;
}
@keyframes horse-sprite-45 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -13500px top;
	}
}
@-webkit-keyframes horse-sprite-45 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -13500px top;
	}
}
.horse-sprite-animation.sirene{ /* 21 000 px*/
	animation-timing-function: steps(70);
	-webkit-animation-timing-function: steps(70);
	-webkit-animation-duration: 2.9s;
	animation-duration: 2.9s;
	animation-name: horse-sprite-70;
	-webkit-animation-name: horse-sprite-70;
}
@keyframes horse-sprite-70 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -21000px top;
	}
}
@-webkit-keyframes horse-sprite-70 {
	0% {
   	 	background-position: left top;
	}
	100% {
	    background-position: -21000px top;
	}
}