html {
	animation: noScroll 4.1s linear 0s;
}
#firstLoadLogoDiv
{
	position: absolute;
	z-index: 104;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
}
#onloadLogo
{
	max-width: 100vw;
	transition: transform 0.5s;
	transform: translateY(-10vh);

	animation: logoOpac 4s linear 0s;
	animation-fill-mode: forwards;                  /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/
}
#firstloadRideaux
{
	position: fixed;
	z-index: 200;
	height: 100vh;
	width: 100vw;

	background-color: rgba(250, 250, 250, 1);
	animation: backGroundOpac 0.5s linear 3s;
	animation-fill-mode: forwards;                  /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/
}
#rideauNoir
{
	position: absolute;
	z-index: 101;
	height: 200vh;
	width: 100vw;
	transform: skewY(-20deg);

	background-color: rgba(0, 0, 0, 1);
	bottom: -250vh;
	right: 0px;

	animation: monte 3s linear 0.25s;
	animation-fill-mode: forwards;                  /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/
}
#rideauBlanc
{
	position: absolute;
	z-index: 103;
	height: 400vh;
	width: 100vw;
	transform: skewY(-50deg);

	background-color: rgba(200, 200, 200, 1);
	top: -550vh;
	right: 0px;

	animation: descend 3s ease-out 1.25s;
	animation-fill-mode: forwards;                  /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/
}
#rideauRouge
{
	position: absolute;
	z-index: 102;
	height: 100vh;
	width: 150vw;
	transform: skewX(50deg);

	background-color: rgba(153, 16, 41, 1);
	bottom: 0vh;
	left: -300vw;

	animation: versDroite 3s ease-in 1.5s;
	animation-fill-mode: forwards;                  /*Laisser afficher tel qu'a la fin de l'animation, sans remettre les dimension initiales*/
}



/*rideau noir*/
@keyframes monte {
	0%{bottom: -250vh}
	7%{bottom: -200vh}
	14%{bottom: -180vh}
	25%{bottom: -150vh}
	35%{bottom: -50vh}
	90%{bottom: -50vh}
}
/*rideau blanc*/
@keyframes descend {
	0%{top: -550vh}	
	25%{top: -300vh}
	50%{top: -300vh}
	75%{top: -300vh;
		background-color: rgba(250, 250, 250, 1);}
	100%{top: 400vh;
		background-color: rgba(250, 250, 250, 0.75);}
}
/*rideau rouge*/
@keyframes versDroite {
	0% {left: -200vw;}
	20% {left: -78vw;}
	50% {left: -78vw;
		background-color: rgba(153, 16, 41, 1);}
	100% {left: 300vw;
		background-color: rgba(153, 16, 41, 0.25);}
}
/*logo NeverMind*/
@keyframes logoOpac {
	0%{opacity: 0;}
	25%{opacity: 1;}
	50%{opacity: 1;}
	75%{opacity: 1;}
	85%{transform: translateY(0vh) scale(1);}
	100%{opacity: 0;
		transform: translateY(-40vh) scale(0.8);}
}
/*div parent des rideaux, qui au début cache le site, en arrière plan*/
@keyframes backGroundOpac {
	from {background-color: rgba(250, 250, 250, 1);}
	to {background-color: rgba(250, 250, 250, 0);}
}
/* bloquer le scroll pdt l'animation */
@keyframes noScroll {
	0%{overflow: hidden;}
	99%{overflow: hidden;}
	100%{overflow: visible;}
}

/*----------------Media Query------------------*/
@media screen and (orientation: portrait) {
	html {
	animation: noScroll 3.1s linear 0s;
	}

	#onloadLogo
	{
		transform: translateY(-15vh);

		animation: logoOpac 2.5s linear 0s;	/*durée réduite*/
		animation-fill-mode: forwards;
	}
	#rideauNoir
	{
		transform: skewY(-20deg);

		animation: monte 2.0s linear 0.25s;		/*durée réduite*/
		animation-fill-mode: forwards;
	}
	#rideauBlanc
	{
		z-index: 102;
		height: 300vh;
		width: 300vw;
		transform: skewY(-20deg);

		animation: descend 2.0s ease-out 0.25s;		/*durée réduite*/
		animation-fill-mode: forwards;
	}
	#rideauRouge
	{
		z-index: 103;
		height: 300vh;
		width: 300vw;
		transform: skewX(30deg);

		left: -500vw;

		animation: versDroite 2.0s ease-in 0.5s;		/*durée réduite*/
		animation-fill-mode: forwards;
	}

	/*rideau noir*/
	@keyframes monte {
		0%{bottom: -250vh}
		14%{bottom: -210vh}
		25%{bottom: -160vh}
		35%{bottom: -160vh}
		85%{bottom: -210vh}
	}
	/*rideau blanc*/
	@keyframes descend {
		0%{top: -400vh}	
		25%{top: -200vh}
		50%{top: -200vh}
		75%{top: -185vh;
			background-color: rgba(250, 250, 250, 1);}
		100%{top: 400vh;
			background-color: rgba(250, 250, 250, 0.75);}
	}
	/*rideau rouge*/
	@keyframes versDroite {
		0% {left: -500vw;}
		20% {left: -400vw;}
		50% {left: -400vw;
			background-color: rgba(153, 16, 41, 1);}
		100% {left: 500vw;
			background-color: rgba(153, 16, 41, 0.25);}
	}
}