/* animation helico */

.imgHelico{
	position: absolute;
	top: 260px;
	right: 76%;

	width: 38px;
	height: 22px;
	margin: 2% auto;
	background: url('../images/anim/helicoFull2.png');
	-webkit-animation: playhelico 1s steps(6) infinite;
	-moz-animation: playhelico 1s steps(6) infinite;
	-ms-animation: playhelico 1s steps(6) infinite;
	-o-animation: playhelico 1s steps(6) infinite;
	animation: playhelico 1s steps(6) infinite;
}

.imgHelico:hover{
	width: 38px;
	height: 22px;
	margin: 2% auto;
	background: url('../images/anim/helicoFull2.png');
	
}

@-webkit-keyframes playhelico {
   100% { background-position: -228px; }
}
@-moz-keyframes playhelico {
   100% { background-position: -228px; }
}
@-ms-keyframes playhelico {
   100% { background-position: -228px; }
}
@-o-keyframes playhelico {
   100% { background-position: -228px; }
}
@keyframes playhelico {
   100% { background-position: -228px; }
}


/* //////////////  fin helico ////////////// */


/* animation mongolfiere petite */


.imgMongLittle{
	position: absolute;
	top: 119px;
	right: 9%;

	width: 43px;
	height: 53px;
	margin: 2% auto;
	background: url('../images/anim/mongolfiereLittle.png');
	-webkit-animation: playlitMong 2.5s steps(9) infinite;
	-moz-animation: playlitMong 2.5s steps(9) infinite;
	-ms-animation: playlitMong 2.5s steps(9) infinite;
	-o-animation: playlitMong 2.5s steps(9) infinite;
	animation: playlitMong 2.5s steps(9) infinite;
}

.imgMongLittle:hover{
	width: 43px;
	height: 53px;
	margin: 2% auto;
	background: url('../images/anim/mongolfiereLittle.png');
	
}

@-webkit-keyframes playlitMong {
   100% { background-position: -387px; }
}
@-moz-keyframes playlitMong {
   100% { background-position: -387px; }
}
@-ms-keyframes playlitMong {
   100% { background-position: -387px; }
}
@-o-keyframes playlitMong {
   100% { background-position: -387px; }
}
@keyframes playlitMong {
   100% { background-position: -387px; }
}

/* //////////////  fin mongol. petite ////////////// */


/* animation mongolfiere grande */

.imgMongBig{

	position: absolute;
	top: 186px;
	right: 15%;

	width: 57px;
	height: 69px;
	margin: 2% auto;
	background: url('../images/anim/bigMongolfiere.png');
	-webkit-animation: playbigMong 2.5s steps(9) infinite;
	-moz-animation: playbigMong 2.5s steps(9) infinite;
	-ms-animation: playbigMong 2.5s steps(9) infinite;
	-o-animation: playbigMong 2.5s steps(9) infinite;
	animation: playbigMong 2.5s steps(9) infinite;
}

.imgMongBig:hover{
	width: 57px;
	height: 69px;
	margin: 2% auto;
	background: url('../images/anim/bigMongolfiere.png');
	
}

@-webkit-keyframes playbigMong {
   100% { background-position: -513px; }
}
@-moz-keyframes playbigMong {
   100% { background-position: -513px; }
}
@-ms-keyframes playbigMong {
   100% { background-position: -513px; }
}
@-o-keyframes playbigMong {
   100% { background-position: -513px; }
}
@keyframes playbigMong {
   100% { background-position: -513px; }
}

/* //////////////  fin mongol. grande ////////////// */

/* animation contact */

.imgContact{
	width: 274.9px;
	height: 176px;
	margin: 30px 5px 0 25px;
	background: url('../images/anim/full-contact4.png');
	
}

.imgContact:hover{
	width: 274.9px;
	height: 176px;
	margin: 30px 5px 0 25px;
	background: url('../images/anim/full-contact4.png');
	-webkit-animation: playcontact 1.5s steps(16) infinite;
	-moz-animation: playcontact 1.5s steps(16) infinite;
	-ms-animation: playcontact 1.5s steps(16) infinite;
	-o-animation: playcontact 1.5s steps(16) infinite;
	animation: playcontact 1.5s steps(16) infinite;
}

@-webkit-keyframes playcontact {
   100% { background-position: -4399px; }
}
@-moz-keyframes playcontact {
   100% { background-position: -4399px; }
}
@-ms-keyframes playcontact {
   100% { background-position: -4399px; }
}
@-o-keyframes playcontact {
   100% { background-position: -4399px; }
}
@keyframes playcontact {
   100% { background-position: -4399px; }
}


/* //////////////  fin contact ////////////// */

/* animation contact Contact */

.imgContactC{
	width: 274.9px;
	height: 176px;
	margin-left: 10%;
	background: url('../images/anim/full-contact4.png');
	
}

.imgContactC:hover{
	width: 274.9px;
	height: 176px;
	margin-left: 10%;
	background: url('../images/anim/full-contact4.png');
	-webkit-animation: playcontactC 1.5s steps(16) infinite;
	-moz-animation: playcontactC 1.5s steps(16) infinite;
	-ms-animation: playcontactC 1.5s steps(16) infinite;
	-o-animation: playcontactC 1.5s steps(16) infinite;
	animation: playcontactC 1.5s steps(16) infinite;
}

@-webkit-keyframes playcontactC {
   100% { background-position: -4399px; }
}
@-moz-keyframes playcontactC {
   100% { background-position: -4399px; }
}
@-ms-keyframes playcontactC {
   100% { background-position: -4399px; }
}
@-o-keyframes playcontactC {
   100% { background-position: -4399px; }
}
@keyframes playcontactC {
   100% { background-position: -4399px; }
}


/* //////////////  fin contact Contact ////////////// */

/* animation experience */


.imgExp{
	width: 340px;
	height: 340px;
	/*margin: 30px 5px 0 5px;*/
	background: url('../images/anim/experienceBigFull.png');
	-webkit-animation: playExp 1.5s steps(15) infinite;
	-moz-animation: playExp 1.5s steps(15) infinite;
	-ms-animation: playExp 1.5s steps(15) infinite;
	-o-animation: playExp 1.5s steps(15) infinite;
	animation: playExp 1.5s steps(15) infinite;
}
.marginExperienceSection{
	position: absolute;
	top: 880px;
    left: 14%;
 	z-index: 3;
}

.imgExp:hover{
	width: 340px;
	height: 340px;
	/*margin: 30px 5px 0 5px;*/
	background: url('../images/anim/experienceBigFull.png');
	-webkit-animation: playExp 1.5s steps(15) infinite;
	-moz-animation: playExp 1.5s steps(15) infinite;
	-ms-animation: playExp 1.5s steps(15) infinite;
	-o-animation: playExp 1.5s steps(15) infinite;
	animation: playExp 1.5s steps(15) infinite;
}

@-webkit-keyframes playExp {
   100% { background-position: -5100px; }
}
@-moz-keyframes playExp {
   100% { background-position: -5100px; }
}
@-ms-keyframes playExp {
   100% { background-position: -5100px; }
}
@-o-keyframes playExp {
   100% { background-position: -5100px; }
}
@keyframes playExp {
   100% { background-position: -5100px; }
}
/* //////////////  fin experience ////////////// */


/* animation a propos */

.imgApropos{
	width: 247.4px;
	height: 217px;
	margin: 42px 22px 0 5px;
	background: url('../images/anim/apropos_waveFull.png');
}

.imgApropos:hover{
	width: 247.4px;
	height: 217px;
	margin: 42px 22px 0 5px;
	background: url('../images/anim/apropos_waveFull.png');
	-webkit-animation: playApropos 2s steps(20) infinite;
	-moz-animation: playApropos 2s steps(20) infinite;
	-ms-animation: playApropos 2s steps(20) infinite;
	-o-animation: playApropos 2s steps(20) infinite;
	animation: playApropos 2s steps(20) infinite;
}

@-webkit-keyframes playApropos {
   100% { background-position: -4948px; }
}
@-moz-keyframes playApropos {
   100% { background-position: -4948px; }
}
@-ms-keyframes playApropos {
   100% { background-position: -4948px; }
}
@-o-keyframes playApropos {
   100% { background-position: -4948px; }
}
@keyframes playApropos {
   100% { background-position: -4948px; }
}

.imgBigApropos{
	width: 392px;
	height: 356px;
	/*margin: 30px 5px 0 5px;*/
	margin:0 auto;
	background: url('../images/anim/big_apropos_full.png');
	-webkit-animation: playAproposBig 2s steps(20) infinite;
	-moz-animation: playAproposBig 2s steps(20) infinite;
	-ms-animation: playAproposBig 2s steps(20) infinite;
	-o-animation: playAproposBig 2s steps(20) infinite;
	animation: playAproposBig 2s steps(20) infinite;
}

.marginAproposSection{
	position: absolute;
	top: 80px;
    right: 72%;
}

.imgBigApropos:hover{
	width: 392px;
	height: 356px;
	/*margin: 30px 5px 0 5px;*/
	margin:0 auto;
	background: url('../images/anim/big_apropos_full.png');
	-webkit-animation: playAproposBig 2s steps(20) infinite;
	-moz-animation: playAproposBig 2s steps(20) infinite;
	-ms-animation: playAproposBig 2s steps(20) infinite;
	-o-animation: playAproposBig 2s steps(20) infinite;
	animation: playAproposBig 2s steps(20) infinite;
}

@-webkit-keyframes playAproposBig {
   100% { background-position: -7945px; }
}
@-moz-keyframes playAproposBig {
   100% { background-position: -7945px; }
}
@-ms-keyframes playAproposBig {
   100% { background-position: -7945px; }
}
@-o-keyframes playAproposBig {
   100% { background-position: -7945px; }
}
@keyframes playAproposBig {
   100% { background-position: -7945px; }
}

/* //////////////  fin a propos ////////////// */

/* animation CV Fixe */

.imgCV{
	width: 257.9px;
	height: 181px;
	margin: 2px 49px 0 5px;
	background: url('../images/anim/animCVFull3.png');
	
}

.imgCV:hover{
	width: 257.9px;
	height: 181px;
	margin: 2px 49px 0 5px;
	background: url('../images/anim/animCVFull3.png');
	-webkit-animation: playCV 2s steps(12) infinite;
	-moz-animation: playCV 2s steps(12) infinite;
	-ms-animation: playCV 2s steps(12) infinite;
	-o-animation: playCV 2s steps(12) infinite;
	animation: playCV 2s steps(12) infinite;
}

@-webkit-keyframes playCV {
   100% { background-position: -3095px; }
}
@-moz-keyframes playCV {
   100% { background-position: -3095px; }
}
@-ms-keyframes playCV {
   100% { background-position: -3095px; }
}
@-o-keyframes playCV {
   100% { background-position: -3095px; }
}
@keyframes playCV {
   100% { background-position: -3095px; }
}

/* //////////////  fin CV fixe ////////////// */


/* animation CV infinite */

.imgCVInf{
	width: 257.9px;
	height: 181px;
	margin-right: 10%;
	/*margin: 2% auto;*/
	background: url('../images/anim/animCVFull3.png');
	-webkit-animation: playCVInf 2s steps(12) infinite;
	-moz-animation: playCVInf 2s steps(12) infinite;
	-ms-animation: playCVInf 2s steps(12) infinite;
	-o-animation: playCVInf 2s steps(12) infinite;
	animation: playCVInf 2s steps(12) infinite;
}

.imgCVInf:hover{
	width: 257.9px;
	height: 181px;
	margin-right: 10%;
	/*margin: 2% auto;*/
	background: url('../images/anim/animCVFull3.png');
	
}

@-webkit-keyframes playCVInf {
   100% { background-position: -3095px; }
}
@-moz-keyframes playCVInf {
   100% { background-position: -3095px; }
}
@-ms-keyframes playCVInf{
   100% { background-position: -3095px; }
}
@-o-keyframes playCVInf {
   100% { background-position: -3095px; }
}
@keyframes playCVInf {
   100% { background-position: -3095px; }
}

/* //////////////  fin CV infinite ////////////// */

/* animation Réalisation */

.imgRealisation{
	/*position: absolute;
	top: 260px;
	right: 76%;*/

	width: 408.2px;
	height: 217px;
	/*margin: 2% auto;*/
	background: url('../images/anim/animeralisation_2_mediumFull2.png');
}

.imgRealisation:hover{
	width: 408.2px;
	height: 217px;
	/*margin: 2% auto;*/
	background: url('../images/anim/animeralisation_2_mediumFull2.png');
	-webkit-animation: playRealisation 2s steps(15) infinite;
	-moz-animation: playRealisation 2s steps(15) infinite;
	-ms-animation: playRealisation 2s steps(15) infinite;
	-o-animation: playRealisation 2s steps(15) infinite;
	animation: playRealisation 2s steps(15) infinite;
}

@-webkit-keyframes playRealisation {
   100% { background-position: -6123px; }
}
@-moz-keyframes playRealisation {
   100% { background-position: -6123px; }
}
@-ms-keyframes playRealisation {
   100% { background-position: -6123px; }
}
@-o-keyframes playRealisation {
   100% { background-position: -6123px; }
}
@keyframes playRealisation {
   100% { background-position: -6123px; }
}


/* //////////////  fin Réalisation ////////////// */

/* animation Réalisation Section*/

.imgRealisationSection{
	/*position: absolute;
	top: 260px;
	right: 76%;*/

	width: 546.13px;
	height: 300px;
	/*margin: 2% auto;*/
	background: url('../images/anim/animeralisation_2_BigFull2.png');
	-webkit-animation: playRealisationSection 2s steps(15) infinite;
	-moz-animation: playRealisationSection 2s steps(15) infinite;
	-ms-animation: playRealisationSection 2s steps(15) infinite;
	-o-animation: playRealisationSection 2s steps(15) infinite;
	animation: playRealisationSection 2s steps(15) infinite;
}

.imgRealisationSection:hover{
	width: 546.13px;
	height: 300px;
	/*margin: 2% auto;*/
	background: url('../images/anim/animeralisation_2_BigFull2.png');
}

@-webkit-keyframes playRealisationSection {
   100% { background-position: -8447px; }
}
@-moz-keyframes playRealisationSection {
   100% { background-position: -8447px; }
}
@-ms-keyframes playRealisationSection {
   100% { background-position: -8447px; }
}
@-o-keyframes playRealisationSection {
   100% { background-position: -8447px; }
}
@keyframes playRealisationSection {
   100% { background-position: -8447px; }
}


/* //////////////  fin Réalisation ////////////// */

/* animation bateau */

.imgBoat{
	width: 155.9px;
	height: 150px;
	margin: 0 auto;
	background: url('../images/anim/animboatFull5.png');
	-webkit-animation: playBoat 2s steps(23) infinite;
	-moz-animation: playBoat 2s steps(23) infinite;
	-ms-animation: playBoat 2s steps(23) infinite;
	-o-animation: playBoat 2s steps(23) infinite;
	animation: playBoat 2s steps(23) infinite;
}

.imgBoat:hover{
	width: 155.9px;
	height: 150px;
	margin: 0 auto;
	background: url('../images/anim/animboatFull5.png');
	
}

@-webkit-keyframes playBoat {
   100% { background-position: -3586px; }
}
@-moz-keyframes playBoat {
   100% { background-position: -3586px; }
}
@-ms-keyframes playBoat {
   100% { background-position: -3586px; }
}
@-o-keyframes playBoat {
   100% { background-position: -3586px; }
}
@keyframes playBoat {
   100% { background-position: -3586px; }
}

/* //////////////  fin CV INFINITE ////////////// */

/* animation bouteille */

.imgbouteille{
	width: 83px;
	height: 112px;
	margin: 2% auto;
	background: url('../images/anim/bouteilleFull3.png');
	-webkit-animation: playbouteille 3.5s steps(27) infinite;
	-moz-animation: playbouteille 3.5s steps(27) infinite;
	-ms-animation: playbouteille 3.5s steps(27) infinite;
	-o-animation: playbouteille 3.5s steps(27) infinite;
	animation: playbouteille 3.5s steps(27) infinite;
}

.imgbouteille:hover{
	width: 83px;
	height: 112px;
	margin: 2% auto;
	background: url('../images/anim/bouteilleFull3.png');
	
}

@-webkit-keyframes playbouteille {
   100% { background-position: -2241px; }
}
@-moz-keyframes playbouteille {
   100% { background-position: -2241px; }
}
@-ms-keyframes playbouteille {
   100% { background-position: -2241px; }
}
@-o-keyframes playbouteille {
   100% { background-position: -2241px; }
}
@keyframes playbouteille {
   100% { background-position: -2241px; }
}

/* //////////////  fin bouteille ////////////// */


/* animation vague */

.imgVague{
	width: 263px;
	height: 212px;
	margin: 2% auto;
	background: url('../images/anim/vagueFull3.png');
	-webkit-animation: playVague 3s steps(15) infinite;
	-moz-animation: playVague 3s steps(15) infinite;
	-ms-animation: playVague 3s steps(15) infinite;
	-o-animation: playVague 3s steps(15) infinite;
	animation: playVague 3s steps(15) infinite;
}

.imgVague:hover{
	width: 263px;
	height: 212px;
	margin: 2% auto;
	background: url('../images/anim/vagueFull3.png');
	
}

@-webkit-keyframes playVague {
   100% { background-position: -3960px; }
}
@-moz-keyframes playVague {
   100% { background-position: -3960px; }
}
@-ms-keyframes playVague {
   100% { background-position: -3960px; }
}
@-o-keyframes playVague {
   100% { background-position: -3960px; }
}
@keyframes playVague {
   100% { background-position: -3960px; }
}

/* //////////////  fin vague ////////////// */



/* animation crabesEmail */

.imgcrabeEmail{
	width: 133.2px;
	height: 104px;
	background: url('../images/anim/crabeEmailFull.png');
	-webkit-animation: playcrabeEmail 2.5s steps(9) infinite;
	-moz-animation: playcrabeEmail 2.5s steps(9) infinite;
	-ms-animation: playcrabeEmail 2.5s steps(9) infinite;
	-o-animation: playcrabeEmail 2.5s steps(9) infinite;
	animation: playcrabeEmail 2.5s steps(9) infinite;
}

.imgcrabeEmail:hover{
	width: 133.2px;
	height: 104px;
	background: url('../images/anim/crabeEmailFull.png');
	
}

@-webkit-keyframes playcrabeEmail {
   100% { background-position: -1199px; }
}
@-moz-keyframes playcrabeEmail {
   100% { background-position: -1199px; }
}
@-ms-keyframes playcrabeEmail {
   100% { background-position: -1199px; }
}
@-o-keyframes playcrabeEmail {
   100% { background-position: -1199px; }
}
@keyframes playcrabeEmail {
   100% { background-position: -1199px; }
}

/* //////////////  fin crabesEmail ////////////// */



/* animation crabes */

.imgcrabe{
	width: 123.3px;
	height: 107px;
	background: url('../images/anim/crabeFull.png');
	-webkit-animation: playcrabe 2.5s steps(7) infinite;
	-moz-animation: playcrabe 2.5s steps(7) infinite;
	-ms-animation: playcrabe 2.5s steps(7) infinite;
	-o-animation: playcrabe 2.5s steps(7) infinite;
	animation: playcrabe 2.5s steps(7) infinite;
}

.imgcrabe:hover{
	width: 123.3px;
	height: 107px;
	background: url('../images/anim/crabeFull.png');
	
}

@-webkit-keyframes playcrabe {
   100% { background-position: -863px; }
}
@-moz-keyframes playcrabe {
   100% { background-position: -863px; }
}
@-ms-keyframes playcrabe {
   100% { background-position: -863px; }
}
@-o-keyframes playcrabe {
   100% { background-position: -863px; }
}
@keyframes playcrabe {
   100% { background-position: -863px; }
}

/* //////////////  fin crabes ////////////// */