/***********************************************************************************************************************************/
/************************ 							/!\	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 ********************************************************************************************************************/
/***********************************************************************************************************************************/

.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;
	}
}

/*NOMADES PAPILLON*/

.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;
	}
}

/*NOMADES ENVIRONNEMENT*/

.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;
}

/*NOMADES MUSIQUE*/
.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;
}


/*CITROUILLE ENSORCELEE*/
.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;
}