:root{
	--blanco: rgba(254,254,254,1);
	--negro: rgba(0,0,0,0.99);
	--marron: #a55a1d;
	--verde: #009a22;
}

html,body{
	overflow: hidden;
		
	

}

*{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 10px;
}

.contenedor{
	position: relative;
	transition: transform 1s ease;
	overflow: hidden;
	scroll-behavior: none;
	max-height: 300vh;
}

.botones{
	position: fixed;
	width: 20px;
	height: 160px;
	margin-top: -80px;
	top: 50%;
	right: 50px;
	z-index: 100;
}
.boton{
	cursor: pointer;
	width: 15px;
	height: 15px;
	margin-top: 8px;
	border-radius: 18px;
	background-color: rgba(255,255,255,0.5);
}
.cursor{
	background-color: #ccc;
}


p, a, h1, h2, h3 {
	color: var(--blanco);
	text-decoration: none;
	transition: all 0.2s ease-in;
}

a:hover{
	color: var(--negro);
	transition: all 0.2s ease-out;
}
/*************Header*************/
header{
	width: 100%;
	min-height: 10vh;
	display: grid;
	grid-template-columns: 0.2fr 0.8fr ;
	z-index: 99;
	position: fixed;

	
}
.logo{
	display: flex;
	justify-content: center;
	align-items: center;
}


.imgLogo{
	width: 100px;
	image-rendering: url("/img/HUEVOS LA GLORIA NEGRO.png");	
}
.menu{
	display: flex;
	justify-content: flex-end;
	vertical-align: center;
	align-items: center;
	margin: 0 2rem;
}
.menu nav ul{
	list-style: none;
	display: inline-flex;
}
.menu .nav ul li{
	margin: 2rem;
}
.menu .nav ul li a{
	font-size: 2rem;
	text-transform: uppercase;
}
.menu .social ul li{
	margin: 1rem;
}
/*************Colores de Fondo************/
.marron{
	background-color: var(--marron);
}
.verde{background-color: var(--verde);}
/*********Extructura sección***********/

.seccion{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow:hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 'contenido foto';
}

.info{
	width: 100%;
	height: 100vh;
	overflow-y: hidden;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.imgContainer{
	max-width: 100%;
	overflow: hidden;
	gird-area: 'foto';

}
.imagen{
	height:100%;
	width: 100%;
}

/***************Cabecera****************/

.cabecera .info{
	padding-left: 5rem;
	align-items: center;
}
.cabecera .info h2{
	font-size: 5rem;
	color: var(--blanco);
	text-transform: uppercase;
	font-weight: 400;
	z-index: 80;
}
.cabecera .info h3{
	color: var(--blanco);
	font-size: 3.5rem;
	text-transform: uppercase;
	font-weight: 400;
	z-index: 80;
}

/**************Porque********************/

#porque .info{
	padding: 0 5rem;
	align-items: flex-start;
}
#porque .info h2{
	
	font-size: 5rem;
	color: var(--blanco);
	text-transform: uppercase;
	font-weight: 400;
	z-index: 80;
}
#porque .info p,i{
	font-size: 2rem;
	font-weight: 200;
	z-index: 80;
	text-align: justify;
}




/***************Footer******************/
footer{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background-image: url("fondo.png");
	background-size: cover;
	
}
footer .gridFooter{
	display: grid;
	grid-template-columns: 1fr 1fr;

	grid-template-areas: 'huevo formulario';
						 
}
/*************Huevo****************/
footer .gridFooter .huevo{
	width: 100%;
	height: 100%;
	grid-area: 'huevo';
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
footer .gridFooter .huevo img {
	width: 50%;
	transform: scale(0.8);
}
footer .gridFooter .huevo p,span {
	font-size: 6rem;
	text-transform: uppercase;
}

footer .gridFooter .huevo p::before{
	content: "¡";
	font-size:8rem;
	color: var(--blanco);
	font-weight: 800;
}

footer .gridFooter .huevo p::after{
	content: "!";
	font-size:8rem;
	color: var(--blanco);
	font-weight: 800;
}


/***************Formulario************/
footer .gridFooter .formulario {
	width: 80%;
	height: 80%;
	background-color: rgba(20,20,20,0.5);
	grid-area: 'formulario';
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 5rem ;
	margin-right: 0;
}
footer .gridFooter .formulario p{
	width: 80%;
	font-size: 2rem;
	padding-top: 2rem;
}
footer .gridFooter .formulario form{
	width: 90%;
	padding-bottom: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;	
}

footer .gridFooter .formulario form input{
	font-size: 2.5rem;
	color: var(--blanco);
	background-color: rgba(254,254,254,0.2);
	padding: 1rem;
	width: 90%;
	margin-top: 2rem;
	border: 3px solid rgba(254,254,254,.8);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:border-box;
	transition: 0.2s all ease-in;
}
footer .gridFooter .formulario form input:hover{
	background-color: rgba(25,25,25,0.2);
	transition: 0.2s all ease-in;
}



footer .gridFooter .formulario form textarea{
	font-size: 2rem;
	color: var(--blanco);
	background-color: rgba(254,254,254,0.2);
	padding: 1rem;
	min-width: 90%;
	width: 90%;
	max-width: 90%;
	height: 70%; 
	margin-top: 2rem;
	border: 3px solid rgba(254,254,254,.8);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:border-box;
}

.footer{
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer p{
	font-size: 2rem;
}
.footer a{ 
	font-size: 2rem;
}



/*PANTALLLA DE CARGA*/
#pantallaCarga{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background-color: var(--marron);
}

.carga{
	width: 10rem;
	height: 10rem;
	border:2rem solid var(--blanco);
	border-top: 2rem solid #ccc;

	border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin:auto;
	
	animation: girar 0.8s linear infinite;
}

@keyframes girar{
	form{ transform: rotate(0deg); }
	to{ transform:rotate(360deg); }
}