/* Tutorial de Youtube:
https://www.youtube.com/watch?v=peVc8Gv0870 */

.animado {
	opacity: 0;
	transition: all 1.2s;
}
.a1 {
	transition-delay: 0;
}
.a2 {
	transition-delay: 0.5s;
}
.a3 {
	transition-delay: 1s;
}
.a4 {
	transition-delay: 1.5s;
}
.a5 {
	transition-delay: 2s;
}
.a6 {
	transition-delay: 2.5s;
}
.a7 {
	transition-delay: 3s;
}



.ani-mover-Izq-Der {
	opacity: 0;
	transition: all 0;
}
.mover-Izq-Der {
	animation: aniMoverIzqDer 1s;
}
@keyframes aniMoverIzqDer{
	0%{
		transform: translateX(-30px);
	}
	100%{
		transform: translateX(0);
	}
}



.ani-mover-Der-Izq {
	opacity: 0;
	transition: all 4s;
}
.mover-Der-Izq {
	animation: aniMoverDerIzq 1s;
}
@keyframes aniMoverDerIzq{
	0%{
		transform: translateX(30px);
	}
	100%{
		transform: translateX(0);
	}
}



@media only screen and (min-width: 320px) and (max-width: 767px) {
	.animado {
		opacity: 1;
		transition: all 0;
	}
	.a1 {
		transition-delay: 0;
	}
	.a2 {
		transition-delay: 0;
	}
	.a3 {
		transition-delay: 0;
	}
	.a4 {
		transition-delay: 0;
	}
	.a5 {
		transition-delay: 0;
	}
	.a6 {
		transition-delay: 0;
	}

	.ani-mover-Izq-Der {
		opacity: 1;
		transition: all 0;
	}
	.mover-Izq-Der {
		animation: aniMoverIzqDer 0;
	}

	.ani-mover-Der-Izq {
		opacity: 1;
		transition: all 0;
	}
	.mover-Der-Izq {
		animation: aniMoverDerIzq 0;
	}
	
}