*{
	font-family: "Comic Sans MS", "Comic Sans", cursive;
}
body{
	background-color: #fff;
}
.container{
	display: grid;
	grid-gap: 50px;
	grid-template-rows: 137px auto 120px;
	height: 100vh;
}

/**Header**/
.header{
	padding-top: 10px;
}
.header__img{
	float: left;
}

.header__img img{
	height: 137px;
	margin-left: 10px;
}

.nav{
	font-size: 18pt;
	float: right;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 500px;
	height: 137px;
}

.nav a{
	text-decoration: none;
	color: #000;
}

/**MAIN**/
.main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.main__div{
	display: flex;
	width: 90%;
	justify-content: center;
	/*border: 2px solid #000;*/
	font-size: 20pt;
}

.main__description{
	margin-bottom: 30px;
	font-size: 20pt;
	padding: 10px;
}

/**CONTACT**/
.contact{
	/*border: 2px solid #000;*/
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 10px 20px;
	background-color:#5b9bd5;
	flex-wrap: wrap;
}
.contacto_persona{
	display: flex;
	justify-content: center;
	padding: 0 20px 0 20px;
	min-width: max-content;
	font-size: 15pt;
	

}
/**-------------------separador------------------**/
.separador{
	background-color: #4b4f53;
	margin: 30px 0 30px 0;
	height: 5px;
	width: 90%;
	box-shadow: 1px 1px  #000;
}

/**-----------------SIGN IN-------------**/

.signIn{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	padding: 20px;
}
.signIn__div{
	width: 100%;
	display: flex;
	justify-content: center;
}
.signIn__text{
	font-size: 16pt;
	width: 12%;
	min-width: 100px;
}
.signIn__data{
	height: 35px;
	width: 20%;
}
.signIn__button-div{
	display: flex;
	justify-content: flex-end;
	width: 30%;
}
.signIn__button{
	height: 45px;
	padding: 5px;
}
/**----------------ICONO REGRESAR--------------------------------**/
.icono_contenedor{
	display:flex;
	width: 100%;
}
.icono_regresar{
	width: 50px;
	margin-left: 30px;
}
/**----------------AUDIOS, PLACES, VOCABULARY, MAIN------------**/
.audios, .places, .vocabulary,.menuPrincipal{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 0 50px;
	align-items: center;
}
.audios h1, .places h1, .vocabulary h1, .menuPrincipal h1{
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
}
.audios__options, .places__options, .vocabulary__options,.menuPrincipal__options{
	width: 200px;
	height: 280px;
	/*border: 2px solid #000;*/
	font-size: 18pt;
	margin: 0 20px 50px 20px;
	background-color: #5b9bd5;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.titulos{
	text-align: center;
	text-decoration: none;
	color: #000;
	background-color: aquamarine;
	align-self:flex-end;
	height: 29%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.audios__options img,.places__options img, .vocabulary__options img, .menuPrincipal__options img{
	text-align: center;
	text-decoration: none;
	color: #000;
	width: 100%;
	height: 71%;

}

/**-----------------Progreso------------**/

.progreso{
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, minmax(400px,1fr));
	grid-gap: 30px;
	padding: 0 50px;
	justify-self: center;
}
.progreso h1{
	text-align: center;
	margin-bottom: 50px;
	grid-column: 1 / 3;
	
}
.progreso__options{
	width: 400px;
	height: 150px;
	/*border: 2px solid #000;*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24pt;
	padding: 20px;
}


.progreso__options p{
	text-align: center;
}

.progreso__bar{
	width: 400px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24pt;
	padding: 20px;
}

/* Estilos para la barra de progreso */
 
 /* IE and EDGE */
 progress {
 	/* RESETS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 3px solid #000;
  
    width: 300px;
    height: 50px;
    border-radius: 25px;
    background-color: #c5e0b4;
    color: #5b9bd5;
}

/* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI DEL PROGRESS BAR */
progress::-webkit-progress-bar {
	background-color:  #c5e0b4;
    border-radius: 20px;
 }
 progress::-webkit-progress-value {
 	background-color: #5b9bd5;
 	border-radius: 20px;
 }
 
 /* MOZILLA FIREFOX */
 progress::-moz-progress-bar {
 	background-color: #5b9bd5;
 	border-radius: 20px;
 }


@media screen and (max-width: 1050px){
	.progreso{
		width: auto;
	}
}

@media screen and (max-width: 900px){
	.progreso{
		grid-template-columns: 1fr;
	}
	.progreso h1{
		grid-column: 1 / 2;
	}
	.progreso__options,.progreso__bar{
		width: auto;
	}
}