/***********************************************************************************************************************************/
/* ANIMATION : COTILLONS FESTIVITÉS ************************************************************************************************/
/***********************************************************************************************************************************/

#animation {
	width: 100%;
	height: 700px;
}

#animation > div.animation.festivite {
	-webkit-perspective: 1000;
	perspective: 1000; /* active le GPU du client */
}

#animation > div.animation.festivite > div.cotillon {
	position: absolute;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* active le GPU du client */
}

#animation > div.animation.festivite > div.cotillon > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#animation > div.animation.festivite > div.cotillon > .front {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden; /* active le GPU du client */
}

#animation > div.animation.festivite > div.cotillon > .back {
	background: -webkit-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
	background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
}

#animation > div.animation.festivite > div.cotillon.size-1 {
	width: 20px;
	height: 10px;
}

#animation > div.animation.festivite > div.cotillon.size-2 {
	width: 10px;
	height: 5px;
}

#animation > div.animation.festivite > div.cotillon.size-3 {
	width: 25px;
	height: 12px;
}

#animation > div.animation.festivite > div.cotillon.color-1 > div.front {
	background: -webkit-linear-gradient(top, #88bfe8 0%, #70b0e0 100%);
	background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%);
}

#animation > div.animation.festivite > div.cotillon.color-2 > div.front {
	background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
	background: linear-gradient(to bottom, #cdeb8e 0%,#a5c956 100%);
}

#animation > div.animation.festivite > div.cotillon.color-3 > div.front {
	background: -webkit-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
	background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%);
}

#animation > div.animation.festivite > div.cotillon.falling-1 {
	-webkit-animation-name: falling-1;
	animation-name: falling-1;
}

#animation > div.animation.festivite > div.cotillon.falling-2 {
	-webkit-animation-name: falling-2;
	animation-name: falling-2;
}

#animation > div.animation.festivite > div.cotillon.falling-3 {
	-webkit-animation-name: falling-3;
	animation-name: falling-3;
}

#animation > div.animation.festivite > div.cotillon.rotation-1 > div {
	-webkit-transform: rotateY(-10deg);
	transform: rotate(-10deg);
}

#animation > div.animation.festivite > div.cotillon.rotation-2 > div {
	-webkit-transform: rotateY(10deg);
	transform: rotate(10deg);
}

#animation > div.animation.festivite > div.cotillon.rotation-3 > div {
	-webkit-transform: rotateY(-20deg);
	transform: rotate(-20deg);
}

#animation > div.animation.festivite > div.cotillon.rotation-4 > div {
	-webkit-transform: rotateY(20deg);
	transform: rotate(20deg);
}

#animation > div.animation.festivite > div.cotillon.duration-15 { -webkit-animation-duration: 15s; animation-duration: 15s; }
#animation > div.animation.festivite > div.cotillon.duration-16 { -webkit-animation-duration: 16s; animation-duration: 16s; }
#animation > div.animation.festivite > div.cotillon.duration-17 { -webkit-animation-duration: 17s; animation-duration: 17s; }
#animation > div.animation.festivite > div.cotillon.duration-18 { -webkit-animation-duration: 18s; animation-duration: 18s; }
#animation > div.animation.festivite > div.cotillon.duration-19 { -webkit-animation-duration: 19s; animation-duration: 19s; }
#animation > div.animation.festivite > div.cotillon.duration-20 { -webkit-animation-duration: 20s; animation-duration: 20s; }
#animation > div.animation.festivite > div.cotillon.duration-21 { -webkit-animation-duration: 21s; animation-duration: 21s; }
#animation > div.animation.festivite > div.cotillon.duration-22 { -webkit-animation-duration: 22s; animation-duration: 22s; }
#animation > div.animation.festivite > div.cotillon.duration-23 { -webkit-animation-duration: 23s; animation-duration: 23s; }
#animation > div.animation.festivite > div.cotillon.duration-24 { -webkit-animation-duration: 24s; animation-duration: 24s; }
#animation > div.animation.festivite > div.cotillon.duration-25 { -webkit-animation-duration: 25s; animation-duration: 25s; }


/***********************************************************************************************************************************/
/* KEYFRAMES ***********************************************************************************************************************/
/***********************************************************************************************************************************/

@-webkit-keyframes falling-1 {
	0% { opacity: 0; margin-left: 150px; -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	2% { opacity: 1; } /* blink ou webkit : pour éviter le opacity 1 à 100% */
	20% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	40% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	60% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	80% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); opacity: 1; }
	98% { opacity: 0; }
	100% { opacity: 0; top: 600px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}

@keyframes falling-1 {
	0% { opacity: 0; margin-left: 150px; -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	2% { opacity: 1; } /* blink ou webkit : pour éviter le opacity 1 à 100% */
	20% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	40% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	60% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	80% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); opacity: 1; }
	98% { opacity: 0; }
	100% { opacity: 0; top: 600px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}

@-webkit-keyframes falling-2 {
	0% { opacity: 0; margin-left: -150px; -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	2% { opacity: 1; } /* blink ou webkit : pour éviter le opacity 1 à 100% */
	20% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	40% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	60% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	80% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); opacity: 1; }
	98% { opacity: 0; }
	100% { opacity: 0; top: 600px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}

@keyframes falling-2 {
	0% { opacity: 0; margin-left: -150px; -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	2% { opacity: 1; } /* blink ou webkit : pour éviter le opacity 1 à 100% */
	20% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	40% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	60% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	80% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); opacity: 1; }
	98% { opacity: 0; }
	100% { opacity: 0; top: 600px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}

@-webkit-keyframes falling-3 {
	0% { opacity: 0; margin-left: 100px; -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	2% { opacity: 1; } /* blink ou webkit : pour éviter le opacity 1 à 100% */
	20% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	40% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	60% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	80% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); opacity: 1; }
	98% { opacity: 0; }
	100% { opacity: 0; top: 600px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}

@keyframes falling-3 {
	0% { opacity: 0; margin-left: 100px; -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	2% { opacity: 1; } /* blink ou webkit : pour éviter le opacity 1 à 100% */
	20% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	40% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); }
	60% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
	80% { -webkit-transform: rotateX(1800deg); transform: rotateX(1800deg); opacity: 1; }
	98% { opacity: 0; }
	100% { opacity: 0; top: 600px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
}