/*

En el siguiente CSS encontramos los estilos del Home Page 

*/



/*---------------------------------------- ELEMENTOS PORTADA ----------------------*/

.portada{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	max-width: none;
	overflow: hidden;
}

.portada img{
	position: absolute;
	left: -200px;	
	height: 50%;	
	z-index: 1;
}

.portada h1{
	position: absolute;
	color: var(--white);
	font-size: 10em;
	left: 300px;
}

.portada h1 span{
	color: var(--green);
}

.portada button{
	padding: 20px 50px;
	position: absolute;
	border: 1px solid var(--white);
	border-radius: 40px;
	transform: translateY(200px);
	background-color: rgba(255,255,255,0.2);
	font-size:1em;
}

.portada button:hover{
	letter-spacing: 1px;
	background-color: var(--green);
}


/*---------------------------------------- ELEMENTOS CUERPO TEXTO ----------------------*/


.cuerpoTexto>div:nth-child(2)>div{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 20px 0;
}

.cuerpoTexto>div:nth-child(2)>div div{	
	padding: 10px;
}

.cuerpoTexto>div:nth-child(2)>div:nth-child(even){
	flex-direction: row-reverse;
	text-align: end;
}


.cuerpoTexto>div:nth-child(2) div img{
	max-width: 300px;
}

.cuerpoTexto>div:nth-child(2) div p{	
	text-decoration: none;	
	color: var(--blue);
}

.cuerpoTexto>div:nth-child(2) h4{
	font-size: 2em;
	text-transform: uppercase;
}



/*-----------------------MEDIA QUERIES--------------------------*/


/*TABLET*/


@media only screen and (max-width: 1024px) {
	.portada img{
		left: -100px;
		height: 25%;
		z-index: 1;
	}

	.portada h1{
		font-size: 5em;
		left: 250px;
	}

	.cuerpoTexto>div:nth-child(2) div img {
		max-width: 200px;
	}
  
}


/*MOBILE*/


@media only screen and (max-width: 550px) {

	
	.portada img{
		left: -50px;
		height: 12.5%;
		z-index: 1;
	}

	.portada h1{
		font-size: 2.4em;
		left: 75px;
	}

	.cuerpoTexto>div h2{
		font-size: 2em;
	}


	.cuerpoTexto>div:nth-child(2) h4{
		font-size: 1.5em;
	}

	.cuerpoTexto>div:nth-child(2) div img {
		max-width: 150px;
	}

	.cuerpoTexto>div:nth-child(2)>div, .cuerpoTexto>div:nth-child(2)>div:nth-child(even){
		flex-direction: column;
		text-align: center;
	}
	
  
}