/* CSS Document */

@keyframes particle1{
	  
	/*
		left/right : 0
		bottom : -72px
	*/
	
	0%{
		bottom: 0px;
		opacity: 0;
	}
	
	15%{
		bottom: -72px;
		opacity: 0.25;
		right : 0px;
	}
	
	30%{
		opacity: 1;
		
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -450px;
		opacity: 0;
		right : -75px;
	}
	
}

@keyframes particle2{
	
	/*
		left/right : 10px
		bottom : -130px
	*/
	
	0%{
		bottom: -20px;
		opacity: 0;
	}
	
	15%{
		bottom: -130px;
		opacity: 0.4;
		right : 10px;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -540px;
		opacity: 0;
		right : -100px;
	}
	
}

@keyframes particle3{ /*bottom: -99px; */
	
	/*
		left/right : 0
		bottom : -99px
	*/
	
	0%{
		bottom: 10px;
		opacity: 0;
	}
	
	15%{
		bottom: -99px;
		opacity: 0.25;
		left : 0px;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -482px;
		opacity: 0;
		left : -70px;
	}
	
}

@keyframes particle4{ /*bottom: -161px; */
	
	/*
		left/right : 10px
		bottom : -161px
	*/
	
	0%{
		bottom: -40px;
		opacity: 0;
	}
	
	15%{
		bottom: -161px;
		opacity: 0.4;
		left : 10px;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -580px;
		opacity: 0;
		left : -105px;
	}
	
}


@keyframes particle5{ /*bottom: -240px; */
	
	/*
		left/right : 103px
		bottom : -240px
	*/
	
	0%{
		bottom: -120px;
		opacity: 0;
	}
	
	15%{
		bottom: -150px;
		opacity: 0.4;
		left : 103px;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -425px;
		opacity: 0;
		left : 100px;
	}
	
}


@keyframes particle6{ /*bottom: -240px; */
	
	/*
		left/right : 75px
		bottom : -380px
	*/
	
	0%{
		bottom: -120px;
		opacity: 0;
	}
	
	15%{
		opacity: 0.4;
		left : 75px;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -625px;
		opacity: 0;
		left : 75px;
	}
	
}


@keyframes barre_point1{ /*bottom: -240px; */
	
	/*
		left/right : 75px
		bottom : -380px
	*/
	
	0%{
		bottom: -220px;
		opacity: 0;
	}
	
	15%{
		opacity: 0.4;
		left : 75px;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -725px;
		opacity: 0;
		left : 75px;
	}
	
}

@keyframes barre_point2{ /*bottom: -240px; */
	
	/*
		left/right : 75px
		bottom : -380px
	*/
	
	0%{
		bottom: -220px;
		opacity: 0;
	}
	
	15%{
		opacity: 0.4;
		left : 190px;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -725px;
		opacity: 0;
		left : 190px;
	}
	
}




@keyframes cercle_ext1{
	
	/*
		left/right : 78
		bottom : -410px
	*/
	
	0%{
		bottom: 0px;
	}
	
	15%{
		bottom: -200px;
		right : 78px;
	}
	
	60%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -500px;
		opacity: 0;
		right : 68px;
	}
	
	
}


@keyframes cercle_ext2{
	
	/*
		left/right : 50px
		bottom : -300px
	*/
	
	0%{
		bottom: 0px;
	}
	
	15%{
		bottom: -150px;
		left : 50px;
	}
	
	60%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -450px;
		opacity: 0;
		left : 40px;
	}
	
	
}



@keyframes mouvement_fusee{
	
	0%{
		top: -72px;
		right: 5%; /* 10 */
	}
	
	25%{
		top: -65px;
		right: 4.5%; /* 9.5 */
	}
	
	50%{
		top: -76px;
		right: 5.2%; /* 10.2 */
	}
	
	75%{
		top: -68px;
		right: 6%; /* 11 */
	}
	
	100%{
		top: -72px;
		right: 5%; /* 10 */
	}
	
}

@keyframes mouvement_fusee2{
	
	0%{
		top: 22.5%;
		right: 10%; /* 10 */
	}
	
	25%{
		top: 22.8%;
		right: 9.5%; /* 9.5 */
	}
	
	50%{
		top: 21.8%;
		right: 10.2%; /* 10.2 */
	}
	
	75%{
		top: 22.3%;
		right: 11%; /* 11 */
	}
	
	100%{
		top: 22.5%;
		right: 10%; /* 10 */
	}
	
}



@keyframes barre_bleup_int1{ /*bottom: -240px; */
	
	/*
		left/right : 138px
		bottom : -650px
	*/
	
	0%{
		bottom: -215px;
		opacity: 0;
	}
	
	15%{
		opacity: 0.4;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -1060px;
		opacity: 0;
	}
	
}


@keyframes cercle_bleup_int1{ /*bottom: -240px; */
	
	/*
		left/right : 138px
		bottom : -650px
	*/
	
	0%{
		bottom: 50px;
		opacity: 0;
	}
	
	15%{
		opacity: 0.4;
	}
	
	30%{
		opacity: 1;
	}
	
	
	50%{
		opacity: 1;
	}
	
	90%{
		opacity: 0;
	}
	
	100%{
		bottom: -745px;
		opacity: 0;
	}
	
}


@keyframes fumee_anim{
	
	0%{
		transform: rotateX(0deg);
	}
	
	25%{
		transform: rotateX(-30deg);
	}
	
	50%{
		transform: rotateX(0deg);
	}
	
	75%{
		transform: rotateX(30deg);
	}
	
	100%{
		transform: rotateX(0deg);
	}
	
}

/*** ANIMATION DE NUAGE ***/

@keyframes animate{
	
	0%{
		right: -260px;
	}
	
	100%{
		right: calc( 100% + 260px);
	}
	
}


@keyframes animate2{
	
	0%{
		
	}
	

	
	100%{
		right: calc( 60% + 260px);
		top: calc(200% + 69px);
	}
	
}

/*** ANIMATION DES ÉTOILES ***/

@keyframes etoile_scintillant{
	
	0%{
		transform: scale(1);
	}
	
	25%{
		transform: scale(0.6);
	}
	
	50%{
		transform: scale(0.9);
	}
	
	75%{
		transform: scale(1.10);
	}

	100%{
		transform: scale(1);
	}
	
}

/*** ANIMATION DES ÉLÉMENTS DE L'ÉTAPE 6 ***/
@keyframes flotte_fuse_espace{
	
	0%{
		transform: scale(1) rotateZ(4deg) translateX(0) translateY(0);
	}
	
	33%{
		transform: scale(0.98) rotateZ(6deg) translateX(6px) translateY(6px);
	}
	
	66%{
		transform: scale(0.98) rotateZ(5deg) translateX(-6px) translateY(-6px);
	}

	100%{
		transform: scale(1) rotateZ(4deg) translateX(0px) translateY(0px);
	}
	
}



@keyframes float {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px) rotateZ(7.5deg);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(-40px) rotateZ(8.5deg);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px) rotateZ(7.5deg);
	}
}

@keyframes float_spin {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translateY(0px) rotateZ(0deg);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translateY(-40px) rotateZ(180deg);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translateY(0px) rotateZ(360deg);
	}
}



@media screen and (min-width: 981px){ /***********   MIN-WIDTH: 981px   *************/
	
	@keyframes mouvement_fusee{
	
		0%{
			top: -72px;
			right: 5%; /* 10 */
		}

		25%{
			top: -65px;
			right: 4.5%; /* 9.5 */
		}

		50%{
			top: -76px;
			right: 5.2%; /* 10.2 */
		}

		75%{
			top: -68px;
			right: 6%; /* 11 */
		}

		100%{
			top: -72px;
			right: 5%; /* 10 */
		}

	}
	
	
} /***********  FIN MIN-WIDTH: 981px   *************/


@media screen and (min-width: 1600px){ /***********   MIN-WIDTH: 1600px   *************/
	
	@keyframes mouvement_fusee{
	
		0%{
			top: -72px;
			right: 10%; /* 10 */
		}

		25%{
			top: -65px;
			right: 9.5%; /* 9.5 */
		}

		50%{
			top: -76px;
			right: 10.2%; /* 10.2 */
		}

		75%{
			top: -68px;
			right: 11%; /* 11 */
		}

		100%{
			top: -72px;
			right: 10%; /* 10 */
		}

	}
	
	
} /***********  FIN MIN-WIDTH: 1600px   *************/