/* Cascade danimation, ajouter si plus d'éléments */
:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }
:nth-child(4) { --nth-child: 4 }
:nth-child(5) { --nth-child: 5 }
:nth-child(6) { --nth-child: 6 }
:nth-child(7) { --nth-child: 7 }
:nth-child(8) { --nth-child: 8 }
:nth-child(9) { --nth-child: 9 }
:nth-child(10) { --nth-child: 10 }

/* Animation des éléments interne du conteneur */
.content-fadein > *{
	opacity:0;
	-webkit-transform: translateY(150px);
    transform: translateY(150px);
}
.content-fadein.play > *{
	-webkit-animation: fadein-bot 1.2s calc(0.5s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-bot 1.2s calc(0.5s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-bot 1.2s calc(0.5s * var(--nth-child))  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}

/* FADEIN BOT */
.fadein-bot{
	opacity:0;
	-webkit-transform: translateY(150px);
    transform: translateY(150px);
    will-change: transform,opacity;
} 
.fadein-bot.play{
	-webkit-animation: fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes fadein-bot{
	0% {
		-webkit-transform:translateY(150px);
    	transform: translateY(150px);
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity: 1;
	}
}

/* FADEIN TOP */
.fadein-top{
	opacity:0;
	-webkit-transform: translateY(150px);
    transform: translateY(150px);
    will-change: transform,opacity;
}
.fadein-top.play{
	-webkit-animation: fadein-top 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-top 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-top 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes fadein-top{
	0% {
		-webkit-transform:translateY(-150px);
    	transform: translateY(-150px);
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity: 1;
	}
}
/* FADE IN LEFT RIGHT */
.fadein-left, .fadein-right{
	opacity: 0;
}
.fadein-left.play {
  -webkit-animation: fadeInLeft 0.4s 0s 1 ALTERNATE ease-in-out forwards;
  -moz-animation:    fadeInLeft 0.4s 0s 1 ALTERNATE ease-in-out forwards;
  -o-animation:      fadeInLeft 0.4s 0s 1 ALTERNATE ease-in-out forwards;
  animation:         fadeInLeft 0.4s 0s 1 ALTERNATE ease-in-out forwards;
}
.fadein-right.play {
  -webkit-animation: fadeInRight 0.4s 0s 1 ALTERNATE ease-in-out forwards;
  -moz-animation:    fadeInRight 0.4s 0s 1 ALTERNATE ease-in-out forwards;
  -o-animation:      fadeInRight 0.4s 0s 1 ALTERNATE ease-in-out forwards;
  animation:         fadeInRight 0.4s 0s 1 ALTERNATE ease-in-out forwards;
}
@-webkit-keyframes fadeInLeft {
	 0% {
	 opacity: 0;
	 -webkit-transform: translateX(-20px);
	}
	99% {
	 opacity: 1;
	 -webkit-transform: translateX(0);
	}
	 100% {
	 opacity: 1;
	 -webkit-transform: none;
	}
}
@keyframes fadeInLeft {
	 0% {
	 opacity: 0;
	 -webkit-transform: translateX(-20px);
	 transform: translateX(-20px);
	}
	99% {
	 opacity: 1;
	 transform: translateX(0px);
	 -webkit-transform: translateX(0);
	}
	 100% {
	 opacity: 1;
	 transform: none;
	 -webkit-transform: none;
	}
}
@-webkit-keyframes fadeInRight {
	 0% {
	 opacity: 0;
	 -webkit-transform: translateX(20px);
	}
	 100% {
	 opacity: 1;
	 -webkit-transform: translateX(0);
	}
}
@keyframes fadeInRight {
	 0% {
	 opacity: 0;
	 -webkit-transform: translateX(20px);
	 transform: translateX(20px);
	}
	 100% {
	 opacity: 1;
	 -webkit-transform: translateX(0);
	 transform: translateX(0);
	}
}
@keyframes pop-out{
	0% {
		width: 0px;
		height: 0px;
		transform: translate(-0px, 0px) rotate(0deg);
	}
	100% {
		width: 20px;
		height: 20px;
		transform: translate(-10px, -10px) rotate(-360deg);
	}
}