* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}



.hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
}

.hero h1 {
	font-size: 100px;
}

.hero p {
	font-size: 24px;
}


.contenedor img {
	width: 100%;
	height: 500px;
	overflow: hidden;
	margin-bottom: 40px;
	border-radius: 5px;
	

	opacity: 0;
	transform: scale(0.9);
	transition: .7s ease-in-out all;
}

.contenedor img.izquierda {
	transform: translateX(-100px);
}

.contenedor img.derecha {
	transform: translateX(100px);
}

.contenedor img.visible {
	opacity: 1;
	transform: scale(1) translateX(0);
}