.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{
/*	background-color: #143CBD;*/
	background-color: var(--main-color);
	grid-area: barraSuperior;
	padding: 0 2%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;	
}

.div-inicio-titulo{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: -50px;
	z-index: 1;
}

.div-inicio-titulo img{
	width: 20%;
	margin: 2% 0;
}

.h1-inicio-titulo{
	text-align: center;
	grid-area: titulo;
	font-size: 4em;
	font-family: Century;
/*	color: var(--main-text-color);*/
	padding: 0 1%;
}

.div-inicio-titulo p{
	padding: 0 1%;
	text-align: center;
	grid-area: titulo;
	font-size: 1.1em;
/*	color: var(--main-text-color);*/
}

.div-inicioSesion{
	grid-area: inicioSesion;
	display: flex;
	justify-content: center;
	align-items: center;
}

.inicioSesion{
	height: 400px;
}
	
.inicioSesion, .sesionIniciada{	
/*	background-color: #BFC9CA;*/
	background-color:  var(--third-color);
	color: var(--third-text-color);
/*	color: #101010;*/
/*	background-color: rgba(140, 100, 100, 0.5);*/
/*	background-color: rgba(191, 201, 200, 0.9);*/
	width: 50%;
	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: 50%;
	min-width: 300px;
/*	height: 250px;*/
	padding: 2.5% 2%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
/*	color: #EEEEE4;*/
	color: var(--third-text-color);
	border-radius: 10px;
	box-shadow: 3px 3px 6px 4px #1C1C1C;
	text-align: center;
}

.sesionIniciada h1{
	padding: 2% 0;
}

.sesionIniciada p{
	margin: 10% 1%;
}

.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;
}

.inicioSesion a,
.sesionIniciada a{
	color: var(--third-text-color);
}

.inicioSesion a:hover,
.sesionIniciada a:hover{
	color: var(--main-color);
}

.button{
	padding: 2.5% 3%;
}

.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";
	}

	.div-inicio-titulo{
		margin-top: 0;
	}

	.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;
	}
}