/* Cascade danimation, ajouter si plus d'éléments */
:nth-child(1) { --nth-child: 1; --nth-child-rand: 3}
:nth-child(2) { --nth-child: 2; --nth-child-rand: 1 }
:nth-child(3) { --nth-child: 3; --nth-child-rand: 2 }
:nth-child(4) { --nth-child: 4; --nth-child-rand: 5 }
:nth-child(5) { --nth-child: 5; --nth-child-rand: 7 }
:nth-child(6) { --nth-child: 6; --nth-child-rand: 4 }
:nth-child(7) { --nth-child: 7; --nth-child-rand: 9 }
:nth-child(8) { --nth-child: 8; --nth-child-rand: 8 }
:nth-child(9) { --nth-child: 9; --nth-child-rand: 6 }
:nth-child(10) { --nth-child: 10; --nth-child-rand: 12 }
:nth-child(11) { --nth-child: 11; --nth-child-rand: 14 }
:nth-child(12) { --nth-child: 12; --nth-child-rand: 10 }
:nth-child(13) { --nth-child: 13; --nth-child-rand: 11 }
:nth-child(14) { --nth-child: 14; --nth-child-rand: 13 }
:nth-child(15) { --nth-child: 15; --nth-child-rand: 17 }
:nth-child(16) { --nth-child: 16; --nth-child-rand: 18 }
:nth-child(17) { --nth-child: 17; --nth-child-rand: 15 }
:nth-child(18) { --nth-child: 18; --nth-child-rand: 16 }
:nth-child(19) { --nth-child: 19; --nth-child-rand: 20 }
:nth-child(20) { --nth-child: 20; --nth-child-rand: 19 }

/* 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 0.8s calc(0.2s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-bot 0.8s calc(0.2s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-bot 0.8s calc(0.2s * var(--nth-child))  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
.funkytext.play h1 span, .funkytext.play h2 span, .funkytext.play h3 span, .funkytext.play h4 span, .funkytext.play  span {
	animation: bouncein 0.4s calc( 0.2s * var(--nth-child-rand))  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
.funkytext h1 span, .funkytext span {
	opacity: 0;
	display: inline-block;
}
.boxin{
	overflow:hidden;
}
.boxin span{
	left: 100%;
}
.boxin.play img{
	animation: boxin-img 0.5s 1.5s 1 ALTERNATE ease-in-out forwards;
}
.boxin img{
	position: absolute;
	left: 100%;
}
.boxin.play span{
	animation: boxin-span 2s 1 ALTERNATE ease-in-out forwards;
}
@keyframes boxin-span {
	0% {
		left: 100%;
	}
	20%{
		left: 0%;
	}
	80%{
		left: 0%;
	}
	99.9%{
		left:-100%;
		opacity:1;
	}
	100%{
		left:0%;
		opacity:0;
	}	
}
@keyframes boxin-img {
	0% {
		left: 100%;
	}
	100%{
		left: 0%;
	}
}
@keyframes bouncein {
	0% {
		transform: scale(1, 1) translateY(100px);
		opacity: 0;
	}
	35% {
		transform: scale(0.8, 1.2) translateY(35px);
	}
	65% {
		transform: scale(1.2, 0.8) translateY(0px);
	}
	95% {
		transform: scale(0.9, 1.1) translateY(-10px);
	}
	100% {
		transform: scale(1, 1) translateY(0px);
		opacity: 1;
	}
}
.flashenter > *{
	opacity: 0;
	z-index: 4;
}
.flashenter.play > *{
	animation: flashenter 1.2s 1.75s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
.flashenter::after{
	display: block;
	content:"";
	position: absolute;
	top: 0;
	right: 0;
	width: 0%;
	height: 100%;
	background-color: var(--color1);
	z-index: 1;
}
.flashenter.play::after{
	animation: flashenterafter 1s 0.5s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
.flashenter::before{
	display: block;
	content:"";
	position: absolute;
	top: 0;
	right: 0;
	width: 0%;
	height: 100%;
	background-color: var(--color2);
	z-index: 2;
}
.flashenter.alt::before{
	background-color: var(--color5);
}
.flashenter.tri::before{
	background-color: var(--color4);
}
.flashenter.tri::after{
	background-color: var(--color1);
}
.flashenter.tri::after{
	background-color: var(--color3);
}
.flashenter.play::before{
	animation: flashenterafter 1s 0.75s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes flashenterafter{
	0% {
		width:0%;
	}
	100% {
		width:100%;
	}
}
@keyframes flashenter{
	0% {
		opacity: 0;
	}
	100% {
		opacity:1;
	}
}
/* FADEIN BOT */
.fadein-bot{
	opacity:0;
	-webkit-transform: translateY(150px);
    transform: translateY(150px);
    will-change: transform,opacity;
} 
.fadein-bot.play, .play .fadein-bot{
	-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);
	}
}