/* 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 }
:nth-child(11) { --nth-child: 11 }
:nth-child(12) { --nth-child: 12 }
:nth-child(13) { --nth-child: 13 }
:nth-child(14) { --nth-child: 14 }
:nth-child(15) { --nth-child: 15 }
:nth-child(16) { --nth-child: 16 }
:nth-child(17) { --nth-child: 17 }
:nth-child(18) { --nth-child: 18 }
:nth-child(19) { --nth-child: 19 }
:nth-child(20) { --nth-child: 20 }
:nth-child(21) { --nth-child: 21 }
:nth-child(22) { --nth-child: 22 }
:nth-child(23) { --nth-child: 23 }
:nth-child(24) { --nth-child: 24 }
:nth-child(25) { --nth-child: 25 }
:nth-child(26) { --nth-child: 26 }

/* 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.2s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-bot 1.2s calc(0.2s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-bot 1.2s calc(0.2s * var(--nth-child))  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
.marker-fadein > div.marker{
	opacity: 0;
}
.marker-fadein.play > div.marker{
	-webkit-animation: fadein-marker 1.2s calc(0.2s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-marker 1.2s calc(0.2s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-marker 1.2s calc(0.2s * var(--nth-child))  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes fadein-marker{
	0% {
		-webkit-transform:translate(-50%, -150px);
    	transform: translate(-50%, -150px);
		opacity:0;
	}
	100% {
		-webkit-transform: translate(-50%, 0px);
		transform: translate(-50%, 0px);
		opacity: 1;
	}
}
/* 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);
	}
}
.toplinefromleft.play::before{
	display: block;
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	background-color: var(--grismoyen);
	width: 0;
	animation: scaleWidth 0.8s 1.2s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
.toplinefromleftafter.play::after{
	display: block;
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	background-color: var(--grismoyen);
	width: 0;
	animation: scaleWidth 0.8s 1.2s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}

.single_boite.play::after {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: var(--grismoyen);
    width: 0;
    animation: scaleWidth 0.8s 1.2s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}

@keyframes scaleWidth {
	 0% {
		width: 0%;
	}
	100%{
		width: 100%;
	}
}
.leftlinefrombot.play::before{
	display: block;
	content:"";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	background-color: var(--grismoyen);
	height: 0;
	animation: scaleHeight 0.8s 1.2s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}


@keyframes scaleHeight {
	 0% {
		height: 0%;
	}
	100%{
		height: 100%;
	}
}
.rightlinefromtop.play::after{
	display: block;
	content:"";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	background-color: var(--grismoyen);
	height: 0;
	animation: scaleHeight 0.8s 1.2s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
.botlinefromleft.play::after{
	display: block;
	content:"";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: var(--grismoyen);
	width: 0;
	animation: scaleWidth 0.8s 1.2s  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}