@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i';
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900';
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700';

*{ box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
	
}

body { background-color: lightgray;
background: rgba(43,216,193,1);
background: -moz-linear-gradient(top, rgba(43,216,193,1) 0%, rgba(63,140,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(43,216,193,1)), color-stop(100%, rgba(63,140,255,1)));
background: -webkit-linear-gradient(top, rgba(43,216,193,1) 0%, rgba(63,140,255,1) 100%);
background: -o-linear-gradient(top, rgba(43,216,193,1) 0%, rgba(63,140,255,1) 100%);
background: -ms-linear-gradient(top, rgba(43,216,193,1) 0%, rgba(63,140,255,1) 100%);
background: linear-gradient(to bottom, rgba(43,216,193,1) 0%, rgba(63,140,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2bd8c1', endColorstr='#3f8cff', GradientType=0 );
	
font-family: "trebuchet MS", arial, helvetica, sans-serif;
}



h1 {font-size: 0.8em;
	color: white;
	font-family: 'Open Sans', sans-serif;
	margin-top: 0.3em;
}


h2 { font-size: 0.9em;	
	color: white;
	font-family: 'Open Sans', sans-serif;
	padding: 0.55em;
text-align: center;}



h3 { font-size: 0.6em;
     font-family: 'Open Sans', sans-serif;
	text-align: justify;
	}


h4 { font-size: 2.5em;
	margin-right: 0.5em;
	color: white;
	
 }

h5{
  margin-top: 50px;
  text-align: center;
    color: white;
}

h7 { font-size: 1.em;
     font-family: 'Open Sans', sans-serif;
	text-align: justify;
	margin-bottom: 0.5em;
}

.ran { font-size: 1.2em;
font-family: 'Open Sans', sans-serif; 
	font-weight: 400;
	margin-bottom: 0.2em;
	
	

	}


h9 {font-size: 0.6em;
font-weight: 300;
	color: darkgrey;
	}




p { font-size: 12px;
	font-family: 'Open Sans', sans-serif; 
  	font-weight: 400;
	color: black;
	margin-right: 3em;
	margin-bottom: 0.3em;
	
	
}


.cursiva { font-style: italic;
color: blanchedalmond;
margin-top: 0.3em;
}

.medio {margin: auto;
	

}



.niveles { background-color: #FFC050;}

.icon-menu { font-size: 1.2em; 
color: white;
	}


.icon-down-open { color: white;
margin: auto;
	
}



.niveleslengua { background-color: #F64FA5;

color: white;}



.icon-right-open { font-size: .8em; 
color: white;
	display: flex;
	 }

.icon-left-open {font-size: 1.2em; 
color: white;
	margin-top: 0.1em;
	}

.icon-search {font-size: 1.2em; 
color: white;
display: flex;
	margin-left: 6.5em;
	   }




header, footer { background-color: dimgray;
	padding: 1.5em;
	width: 100%;
	display: flex;
	justify-content: space-between;

	
	
	 }



.temas { display: flex;}


.icon-home{ font-size: 1.4em; 
    color: white;
	margin-top: 0.4em;
	margin: auto; }


.icon-bell {font-size: 1.4em;
color: white;
margin-top: 0.4em;
margin: auto}

.icon-user { font-size: 1.4em;
color: white;
margin-top: 0.4em;
margin: auto;

}

.icon-star-empty { font-size: 1.4em;
color: white;
	font-style: normal;
}

.icon-comment-empty {font-size: 1.4em;
font-style: normal;}



.iconos { display: flex;
	font-size: 0.7em;
color: white;
	margin-left: -0.4em;
	
	
} 


.icon-attach { font-style: normal;
	margin-top: 0.4em; 
margin-bottom: 0.6em;
font-size: 0.8em;
	
	

}
	





#contenedor { 
margin: auto;
max-width: 75em;
min-height: 100vh;
width: 100vw;
	}

#contenedor { display: flex;
flex-direction: column;
justify-content: space-between; 

}



.opciones { 
	
	width: 100%;
     margin: auto;
	display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1; 	
background-color: grey;
 
}

.opcionesmate { width: 100%;
     margin: auto;
	display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1; 
background-color:#FFC050; }


.opcioneslengua { width: 100%;
     margin: auto;
	display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1; 
background-color: #F64FA5;}


ul{ display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
	
	}


li {flex: 1;
	display: flex;}


	



#menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(200,150,10,.8);
    height: 93.5vh;
    width: 60%;
    position: fixed;
    top: -100%;
    right: 0;
    transition: all 1s ease;
    z-index: 10;
}

#menulengua { display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(200,0,100,.8);
    height: 93.5vh;
    width: 60%;
    position: fixed;
    top: -100%;
    right: 0;
    transition: all 1s ease;
    z-index: 10;}

nav a:hover {
    color: purple;
}

#menu:target {
    top: 0;
    transition: all 1s ease;
}



#menulengua:target {
    top: 0;
    transition: all 1s ease;
}



#menulengua1 { display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(200,0,100,.8);
    height: 93.5vh;
    width: 40%;
    position: fixed;
    top: -100%;
    left: 0;
    transition: all 1s ease;
    z-index: 10;}

nav a:hover {
    color: purple;
}

#menulengua1:target {
    top: 0;
    transition: all 1s ease;
}











#menumatematica { display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(200,150,10,.8);
    height: 93.5vh;
    width: 40%;
    position: fixed;
    top: -100%;
    left: 0;
    transition: all 1s ease;
    z-index: 10;}

nav a:hover {
    color: purple;
}

#menumatematica:target {
    top: 0;
    transition: all 1s ease;
}





.volver { font-size: 1.em;
font-weight: 700;

color: orange}


.volver2 { font-size: 1.em;
font-weight: 700;

color: blue;}

#perfiles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(20,100,100,.8);
    height: 93.5vh;
    width: 60%;
    position: fixed;
    top: -100%;
    right: 0;
    transition: all 1s ease;
    z-index: 10;
}


#perfiles:target {
    top: 0;
    transition: all 1s ease;
}



.vacio {background-color: }



.cajadois { display: flex;
	flex:1;
	border: solid 1px #FFC050;
	align-items: center;
	margin-bottom: 0.3em;
	padding: 0.3em;
	background-color: antiquewhite;
}

.cajalengua { display: flex;
	flex:1;
	border: solid 1px #F64FA5;
	align-items: center;
	margin-bottom: 0.3em;
	padding: 0.3em;
	background-color: antiquewhite;
}

.cajaranking { display: flex;
flex:1;
border: solid 1px rgba(0, 0, 0, 0.3);
align-items: center;
margin-bottom: 0.3em;
padding: 0.3em;
	background-color: indianred;
	margin-top: 0.3em;
	
	
}
 

small { text-align: center;
color: white;
	display: flex;
	justify-content: center;
	
	
}

.rubros {  margin-top: 1.3em;
	text-align: center;
	font-size: 0.8em;
	color: white;
	justify-content: center;
	align-content: center;
	margin-bottom: 2em;

}


.color1 { color: #FFC050;
background-color: white;
border: solid 3px;
	border-radius: 20px;
	margin-bottom: 0.3em;
	margin-top: 0.3em;
	font-size: 1.3em;
	
} 

.color2 { color:#02B582;
background-color: white;
border: solid 3px;
	border-radius: 20px;
	margin-bottom: 0.3em;
margin-top: 1em;
	font-size: 1.3em;
	
}


.color3 {color:#F64FA5;
background-color: white;
border: solid 3px;
	border-radius: 20px;
	margin-bottom: .3em;
margin-top: 0.3em;
	font-size: 1.3em;
	
}


.color4 {color: #3F8CFF;
background-color: white;
border: solid 3px;
	border-radius: 20px;
	margin-bottom: 0.3em;
margin-top: 1em;
	font-size: 1.3em;
	
}


.color5 { color: #595385;
background-color: white;
border: solid 3px;
	border-radius: 20px;
	margin-bottom: 0.3em;
margin-top: 1em;
	font-size: 1.3em;
	
}


.color6 { color:  #05D182; 
background-color: white;
border: solid 3px;
	border-radius: 20px;
	margin-bottom: 0.3em;
margin-top: 1em;
	font-size: 1.3em;
	
}






.cajita {display: flex;
        flex: 1;
}

.cajita2 { display: flex;
flex-direction: column;
margin-left: 1em;
}



.modulo{display: flex;
justify-content: space-between;
	align-items: center;
	flex: 1;
	border: solid 3px rgba(0, 0, 0, 0.2);
}

.modulo2 { 	display: flex;
align-items: center;
	flex: 1;
	border: solid 3px #FFC050;
	margin-top: 0.2em;
	
}


.modulo3 { display: flex;
justify-content: space-between;
	align-items: center;
	flex: 1;
	border: solid 3px #FFC050;
margin-top: 0.2em; }




.redes { display: flex;
flex-direction: column;
	margin-top: -1.6em;
	margin-right: 5.8em;
	
	
	
}

.redes2 { display: flex;
flex-direction: column; 
margin-left: 0.4em;
	margin-top: -0.7em;

}

.redes3 {
	 display: flex;
flex-direction: column; 
margin-left: 0.4em;
	margin-top: 0.6em;
	
}


.verde { 
	border: solid 3px;
	border-radius: 50%;
	width: 4em;

}


.perfil { border: solid 3px rgba(1000, 100, 1000, 0.4);
border-radius: 50%;
background-color: antiquewhite;}

.verderanking { border: solid 3px rgba(0, 0, 0, 0.4);
	
	border-radius: 50%;
	width: 6em;
background-color: white;
}


.joaquin {  margin-bottom: 3em;
	border: solid 3px rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	width: 4em;
margin-top: -6.4em; 
}



.ayuda { font-size: 0.6em;
margin-top: 0.5em;
	color: white;
	background-color: #FFC050;
	width: 6em;
	border-radius: 5px;
	border: solid 3px rgba(0, 0, 0, 0.2);
	margin-bottom: 0.3em;
	 
}

.ayudalengua { font-size: 0.6em;
margin-top: 0.5em;
	color: white;
	background-color: #F64FA5;
	width: 6em;
	border-radius: 5px;
	border: solid 3px rgba(0, 0, 0, 0.2);
	margin-bottom: 0.3em;
	 
}



.videoresponsive iframe { 
	width: 90%;
 margin-top: 0.4em;
 	
}


.curso{
  margin-top: 20px;
font-size: 0.90em;
    color: white;
      }



a {
  text-decoration: none;
	font-family: 'Open Sans', sans-serif;
}


li a {color: white;
    display: flex;
  text-align: center ;
  justify-content: center;
	align-items: center;
	padding: 0.5em;
	flex: 1;
	
	}


.apoyo { background-color: #3F8CFF;
	border: solid 7px rgba(0, 0, 0, 0.2);
	
}

.talleres {background-color: #2BD8C0;
	border: solid 7px rgba(0, 0, 0, 0.2);

} 

.mate {
    background-color: #FFC050;
   text-align: center;
	margin-bottom: 0.3em;
	border: solid 7px rgba(0, 0, 0, 0.2);
	
	}

.biologia {
    background-color: #02B582;
    width: 100%;
	margin: auto;
	text-align: center;
	margin-bottom: 0.3em;
	border: solid 7px rgba(0, 0, 0, 0.2);
}




.lengua {
    background-color: #F64FA5;
    width: 100%;
	margin:auto;
	
	text-align: center;
	margin-bottom: 0.3em;
	border: solid 7px rgba(0, 0, 0, 0.2);
	
}


.historia {
    background-color: #3F8CFF;
    width: 100%;
	margin: auto;
	
	text-align: center;
	margin-bottom: 0.3em;
	border: solid 7px rgba(0, 0, 0, 0.2);
	
}


.ingles {
    background-color: #595385;
    width: 100%;
	margin: auto;
	text-align: center;
	margin-bottom: 0.3em;
	border: solid 7px rgba(0, 0, 0, 0.2);
	
}


.Quimica {
background-color: #05D182;
	
    width: 100%;
	margin:auto;
	
	text-align: center;
	margin-bottom: 0.3em;
	border: solid 7px rgba(0, 0, 0, 0.2);
}


.elemento {
    flex: 1;
	border: solid 5px rgba(0, 0, 0, 0.2);
	
}


.uno {background-color: #054A9E;

	}

.dos  {background-color: #0657CC;}

.tres{ background-color: #136DFD;}

.botones a { padding: 2.5em;
	
}



.boton {
background-color: #ff964b;
border-radius: 5px;

}


.registro {background-color: #ff964b;
border-radius: 5px;
margin-top: 0.6em;}



input {
    font-size: 13px;
    margin-right: 2em;
margin-top: 20px;

}


input[type="text"] {
    margin: 10px 0;
    margin-top: 100px;
    background: #fff;
    border: 1px solid #ccc;
    color: #777;
    display: block;
    max-width: 100%;
    outline: none;
    padding: 7px 8px;
	min-width: 100%;
	

}

input[type="password"] {
    margin: 10px 0;
    background: #fff;
    border: 1px solid #ccc;
    color: #777;
    display: block;
    max-width: 100%;
    outline: none;
    padding: 7px 8px;
    margin-top: 20px;
	min-width: 100%;
	
}


input[type="pregunta"] {
   
    background: #fff;
    border: 1px solid #ccc;
    color: #777;
    width: 100%;
    outline: none;
    padding: 7px 8px;
	margin-top: -0.3em;
	
	
	
 
}


.articulos { display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1; }

article figure {
	overflow: hidden;
	max-width: 100%;
	margin: auto;
    margin-top: 50px;

	}




img {
	height: auto;
	}





.vos {

	max-width: 15vw;
	border: solid 3px rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	margin-left: 0.3em;
	
}



footer a { margin: auto;
	
}