/* original
.text{
	font-family: 'arial black';
	font-size: 60px;
	text-align: center;
	padding: 0;
	margin: 0;
	margin-left: 50%;
	transform: translateX(-200%);
	opacity: 0;
	animation: slide-in-anim 1.5s ease-out forwards;
}

@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	60% {
		transform: translateX(-45%);
	}
	75% {
		transform: translateX(-52%);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%);
	}
}
*/
/**************************** slide 1 ***********************/
.slide1{
	font-family: 'arial black';
	color:#000;
	font-size: 60px;
	text-align: center;
	padding: 0;
	margin-left: 50%;
	margin-top: 5%;
	position: absolute;
	transform: translateX(200%);
	vertical-align: middle;
	opacity: 0;
	animation: slide-in-anim 1.5s ease-in forwards;
	-webkit-text-fill-color: white; /* Will override color (regardless of order) */
  	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: black;
}

.slide1_p{
	font-family: 'arial black';
	color: #000;
	font-size: 25px;
	text-align: center;
	padding: 0;
	margin: 0;
	transform: translateY(50%);
	opacity: 0;
	animation: slide-in-animationp 1.5s ease-out forwards;
}
@keyframes slide-in-anim {
	20% { opacity: 0; }
	60% { transform: translateX(0%); }
	75% { transform: translateX(20%); }
	100% { transform: translateX(-50%);opacity: 1; }
}
@keyframes slide-in-animationp {
	20% { opacity: 0; }
	60% { transform: translateX(-45%); transform: translateY(350%); }
	75% { transform: translateX(-50%); transform: translateY(350%); }
	100% {  transform: translateX(0%); transform: translateY(350%); opacity: 1; }
}
/**************************** slide 1 ***********************/

/**************************** slide 2 ***********************/
.slide2{
	font-family: 'arial black';
	color:#000;
	font-size: 60px;
	text-align: center;
	padding: 0;
	margin-left: 50%;
	margin-top: 5%;
	position: absolute;
	transform: translateX(200%);
	opacity: 0;
	animation: slide-in-anim2 1.5s ease-in forwards;
	
	-webkit-text-fill-color: white; /* Will override color (regardless of order) */
  	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: black;
}

.slide2_p{
	font-family: 'arial black';
	color: #000;
	font-size: 25px;
	text-align: center;
	transform: translateX(-50%);
	margin-left: 0;
	margin-top: 15%;
	position: absolute;
	opacity: 0;
	animation: slide-in-animationp2 1.5s ease-in forwards;
}
@keyframes slide-in-anim2 {
	20% { opacity: 0; }
	60% { transform: translateX(-45%); }
	75% { transform: translateX(-50%); }
	100% { transform: translateX(-50%); opacity: 1; }
}
@keyframes slide-in-animationp2 {
	20% { opacity: 0; }
	70% { transform: translateX(70%); }
	85% { transform: translateX(85%); }
	90% { transform: translateX(90%); }
	100% {  transform: translateX(100%); opacity: 1; }
}
/**************************** slide 2 ***********************/

/**************************** slide 3 ***********************/
.slide3{
	font-family: 'arial black';
	color:#000;
	font-size: 60px;
	text-align: center;
	margin-left: 50%;
	margin-top: 0;
	position: absolute;
	transform: translateX(-50%);
	opacity: 0;
	animation: slide-in-anim3 3s ease-in forwards;
	-webkit-text-fill-color: white; /* Will override color (regardless of order) */
  	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: black;
}

.slide3_p{
	font-family: 'arial black';
	color: #000;
	font-size: 25px;
	text-align: center;
	margin-top: 5%;
	transform: translateY(100%);
	opacity: 0;
	animation: slide-in-animationp3 3s ease-out forwards;
}
@keyframes slide-in-anim3 {
	10% { opacity: 0; }
	20% { transform: translateX(-50%); opacity: 0.0; }
	30% { transform: translateX(-50%); opacity: 0.0;}
	40% { transform: translateX(-50%); opacity: 0.0; }
	50% { transform: translateX(-50%); opacity: 0.1; }
	60% { transform: translateX(-50%); opacity: 0.3; }
	70% { transform: translateX(-50%); opacity: 0.5; }
	80% { transform: translateX(-50%); opacity: 0.7; }
	90% { transform: translateX(-50%); opacity: 0.8; }
	100% { transform: translateX(-50%); opacity: 1; }
}
@keyframes slide-in-animationp3 {
	10% { opacity: 0; }
	20% { transform: translateY(250%); opacity: 0.0; }
	30% { transform: translateY(250%); opacity: 0.0;}
	40% { transform: translateY(250%); opacity: 0.0; }
	50% { transform: translateY(250%); opacity: 0.1; }
	60% { transform: translateY(250%); opacity: 0.3; }
	70% { transform: translateY(250%); opacity: 0.5; }
	80% { transform: translateY(250%); opacity: 0.7; }
	90% { transform: translateY(250%); opacity: 0.8; }
	100% { opacity: 1; transform: translateY(250%); }
}
/**************************** slide 3 ***********************/

/**************************** slide 4 ***********************/
.slide4{
	font-family: 'arial black';
	color:#000;
	font-size: 60px;
	text-align: center;
	padding: 0;
	margin: 0;
	margin-top:5%;
	margin-left: 50%;
	transform: translateX(-200%);
	position: absolute;
	vertical-align: middle;
	opacity: 0;
	animation: slide-in-anim 2.5s ease-in forwards;
	-webkit-text-fill-color: white;
  	-webkit-text-stroke-width: 2px;
  	-webkit-text-stroke-color: black;
}
.slide4_p{
	font-family: 'arial black';
	color: #000;
	font-size: 25px;
	text-align: center;
	padding: 0;
	margin: 0;
	/*margin-left: 25%;*/
	transform: translateY(50%);
	opacity: 0;
	animation: slide-in-animationp 1.5s ease-out forwards;
}
@keyframes slide-in-anim4 {
	20% { opacity: 0; }
	60% { transform: translateX(-45%); }
	75% { transform: translateX(-52%); }
	100% { transform: translateX(-50%); opacity: 1; }
}
@keyframes slide-in-animationp4 {
	20% { opacity: 0; }
	60% { transform: translateY(-45%); transform: translateY(350%); }
	75% { transform: translateY(-52%); transform: translateY(350%); }
	100% { transform: translateY(0%); transform: translateY(350%);opacity: 1; }
}
/**************************** slide 4 ***********************/