.div-inicio{
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: 
		"barraSuperior barraSuperior"
		"titulo inicioSesion";
}

.div-barraSuperior{
	grid-area: barraSuperior;
	padding: 1% 2%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;	
}

.div-inicio-titulo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.h1-inicio-titulo{
	text-align: center;
	grid-area: titulo;
	font-size: 4em;
	font-family: Century;
	color: #EEEEE4;
	padding: 0 1%;
}

.div-inicio-titulo p{
	padding: 0 1%;
	text-align: center;
	grid-area: titulo;
	font-size: 1.1em;
}

.div-inicioSesion{
	grid-area: inicioSesion;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
.inicioSesion, .sesionIniciada{
	background-color: rgba(140, 100, 100, 0.5);
	width: 45%;
	height: 400px;
	padding: 3%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	font-weight: 500;
	color: black;
	border-radius: 10px;
	box-shadow: 3px 3px 6px 4px #1C1C1C;
}

.sesionIniciada{
	background-color: rgba(140, 100, 100, 0.5);
	width: 45%;
	height: 250px;
	padding: 2.5%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	color: #EEEEE4;
	border-radius: 10px;
	box-shadow: 3px 3px 6px 4px #1C1C1C;
	text-align: center;
}

.inicioSesion h1{
	font-size: 2.1em;
	text-align: center;
}

.inicioSesion label{
	font-size: 1.2em;
	font-weight: bold;
}

.inicioSesion input{
	width: 100%;
	height: 2.2em;
	padding: 1%;
	margin: 2% 0;
	border: solid;
	border-width: 2px;
	border-radius: 5px;
}

.boton-iniciarsesion{
	width: 45%;
}

.error{
	color: rgba(255, 150, 150);
}

.label-fallo-inicio{
	color: rgba(255, 150, 150);
	font-size: 1em;
	font-weight: 600;
	text-align: center;
}

@media(max-width: 1300px){
	.h1-inicio-titulo{
		font-size: 3em;
	}
	.div-inicio-titulo p{
		font-size: 1.05em;
	}
}

@media(max-width: 1000px){
	.inicioSesion, .sesionIniciada{
		width: 60%;
	}
}

@media(max-width: 800px){
	.div-inicio{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: 
			"barraSuperior"
			"titulo"
			"inicioSesion";
	}

	.inicioSesion, .sesionIniciada{
		width: 40%;
		height: 400px;
	}
}

@media(max-width: 600px){
	.inicioSesion, .sesionIniciada{
		width: 50%;
		height: 350px;
		padding: 3%;
	}
	.boton-iniciarsesion{
		width: 55%;
	}
	.h1-inicio-titulo{
		font-size: 2.5em;
	}
	.div-inicio-titulo p{
		font-size: 1.0em;
	}
}

@media(max-width: 500px){
	.inicioSesion, .sesionIniciada{
		width: 60%;
	}
	.inicioSesion h1{
		font-size: 1.9em;
	}
	.inicioSesion label{
		font-size: 1.1em;
	}
}