:root{
	--color-primario: #f73;
	--color-claro: #fff;
	--color-secundario: #343434;
}


*{

	font-family: Montserrat, sans-serif;
}



body{
	
	
}

.body{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(12, 1fr);
	width: 100%;
	height: 100vh;
	margin: auto;
	padding: 0;
	

}	

.grid-item{
	
}

.header{
	background: linear-gradient(to right,Var(--color-claro), Var(--color-primario));
	grid-column: 1/ span 1;
	grid-row: 1/ span 1;
	display: flex;
	align-content: center;
	/*border-top: 10px solid var(--color-secundario);*/
	animation-name: cambiarGradiente;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;


}


.header__nav{
	display: inline-block;
	align-self: center;
	margin-left: 120px;
	font-weight: 100;
	font-size: 20px;
	

}
	.header__nav-ul {
		list-style: none;
	}

	.header__nav-li {
		display: inline-block;
		text-decoration: none;
		padding: 2px 15px;

		

	}
	.header__nav-a {
		text-decoration: none;
		color: var(--color-secundario);
		
	}


.header__div-img{
	display: inline-block;
	margin-left: auto;


}

.header__navResponsive{
	display: none;
}



.inicio{
	/*background-color: var(--color-secundario);*/
	/*background-image: url(vistas/imagenes/Fondo_pagina_infox4.JPG);*/
	/*background-size: 100% 100%;*/
	grid-column: 1 / span 1;
	grid-row: 2 / span 10;
	display: flex;
	align-content: center;
	justify-content: space-around;
	flex-direction: row;
	/*flex-wrap: wrap;*/



}



.inicio__div{

	background-color: #fff;
	opacity: 0.85;
	border: 1px solid var(--color-primario);
	border-radius: 1em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 60px 60px;
	padding: 20px;
	
	

}

.inicio__div-p{
	color: var(--color-secundario);
	align-self: center;
	padding: 10px;
	font-size: 24px;
	 text-align: center;
	 font-weight: 3px;
}

.inicio__div-p2{
	color: var(--color-secundario);
	align-self: center;
	padding: 10px;
	padding-top: 15px;
	font-size: 22px;
	 text-align: center;
}

.inicio__div-i{
	color: var(--color-primario);
	width: 20px;
	height: 20px;
	align-self: center;
	padding: 20px;
	padding-left: 10px;


}

.inicio__div-a{
	color: var(--color-primario);
	text-decoration: none;

}

.inicio__div-img{
	

}



.footer{
	background: linear-gradient(to right,Var(--color-claro), Var(--color-primario));
	grid-column: 1/ span 1;
	grid-row: 12/ span 1;
	animation-name: cambiarGradiente;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	/*border-bottom: 10px solid var(--color-secundario);*/

}

.footer__div{
	margin-left: auto;
	justify-content: center;
	align-self: center;
	margin-right: auto;
}

.footer__div-i{
	display: inline-block;
	margin: 5px;
}

.footer__div-p{
	display: inline-block;
	margin: 5px;
}


@keyframes cambiarGradiente{
	0%{
		background: linear-gradient(to right,Var(--color-claro),Var(--color-claro),Var(--color-claro),Var(--color-claro), Var(--color-claro));
		
	}

	15%{
		background: linear-gradient(to right,Var(--color-claro),Var(--color-claro),Var(--color-claro),Var(--color-claro), Var(--color-primario));
		
	}

	25%{
		background: linear-gradient(to right,Var(--color-claro),Var(--color-claro),Var(--color-claro),Var(--color-primario), Var(--color-primario));
		
	}

	50%{
		background: linear-gradient(to right,Var(--color-claro),Var(--color-claro),Var(--color-primario),Var(--color-primario), Var(--color-primario));
		
	}

	75%{
		background: linear-gradient(to right,Var(--color-claro),Var(--color-primario),Var(--color-primario),Var(--color-primario), Var(--color-claro));
		
	}

	100%{
		background: linear-gradient(to right,Var(--color-claro),Var(--color-primario),Var(--color-primario),Var(--color-primario), Var(--color-claro));	
		
	}

}


@media screen and (max-width: 900px){
	
	.body{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 12fr 6fr 1fr;
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0;
	

	}

	.header{
		grid-column: 1/ span 1;
		grid-row: 1/ span 1;
	}

	.inicio{
		grid-column: 1/ span 1;
		grid-row: 2/ span 1;
		border: 3px solid green;

		
		
	}



@media screen and (max-width: 500px){
	.inicio{
		flex-direction: column;
	}

	

		
	.footer{
		grid-column: 1/ span 1;
		grid-row: 4/ span 1;
	}



}