@charset "utf-8";
/*CSS Document*/

*{margin:0; padding: 0;}
img {width:100; height: auto}

body {width: 100%; margin: 0 auto; padding: 0 auto;
    font-family: "Fira Sans", Arial, sans-serif; color: #555555; font-size: 0.9em; font-weight: 500;}

.ancho {max-width: 70%; margin: 0 auto; padding-left: 1em; padding-right: 1em; position: relative; }

ul {margin: 0; padding:0;}

ul li{
    list-style: none;  
    margin-bottom: 0.5em; 
    border: 0.1em solid;
    color: #fff; 
}

body{
background-color:#e0e0e0;
}

/* ESTILOS PARA EL HEADER*/



header{
    min-height: 5em;
    max-height: 6em;
    background: #c7005c;
    padding-top: 1em;
    overflow: hidden;
}

    

.logo{
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content:flex-start;
justify-content:flex-start;
float:left;
height:2em;
}

.logo a{
color:#fff;
text-decoration:none;
margin-top:2em;
margin-left:1em;
}

.logo img{
max-height:6em;
margin-top:2em;
}

#menu,
#menu ul,
#menu ul li,
#menu ul li a,
#menu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


#menu #menu-button {
  display: none;
}



#menu ul{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-family: "roboto", sans-serif;
    padding-top: 2.3em;}


#menu ul li{
padding: 1em;
text-transform:uppercase;
text-decoration: none;
color:#fff;
}    




#menu ul li a{
text-decoration: none;
font-family: "Fira Sans";
color:#fff;
}

#menu ul li a:hover{
color:#bcbcbc;
}




#menu ul li a.active{
color:#000000;
}

/* ESTILOS PARA IMAGEN PRINCIPAL*/


#imagen-home{
background-image:url(img/imagen-header.jpg);
height:22em;
}

#titulo-imagen{
color:#fff;
padding-top:5em;
text-transform:uppercase;
}

#titulo-imagen p{
text-decoration:underline;
font-size: 1.5em;
padding:0.3em;
}

#titulo-imagen p.centro-educativo{
text-decoration:none;
font-size:1.5em;
}

#titulo-imagen h1{
font-size:3.5em;
}


#texto-imagen-home{
display:flex;
flex-direction: row;
    justify-content: space-around;

}

#suscripcion-newsletter{
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content: center;
align-items: center;
padding-top:2em;
padding-left:3em;
padding-right:3em;
padding-bottom:1em;
margin-top:1em;
margin-bottom:3em;
background-color:rgba(255, 255, 255, 0.43);
border-radius:1em;
}



.boton-descarga-home{
background-color:#00c17e;
padding:0.5em;
border-radius:0.3em;
margin-top:0.3em;
color:#fff;
text-transform:uppercase;
text-decoration: none;
text-align: center;
}


.boton-descarga-home:hover{
    background-color:#008859;}

h7,h6{
margin-top:0.5em;
color:#fff;
font-size:1em;
font-weight: 300;
text-align:center;
}


/* ESTILOS PARA CATEGORÍAS HOME*/


.categorias{
margin-top:1em;
margin-bottom:1em;
display:flex;
flex-direction:row;
justify-content:space-around;
align-content: center;
}

.categorias li{
width:15em;
padding-top:4em;
padding-bottom:4em;
padding-right:0.5em;
padding-left:1em;
    text-align:center;}

.categorias li.primaria{
background-color:rgba(199, 0, 92, 0.72);
}

.categorias li.primaria:hover{
background-color:rgba(199, 0, 92, 0.83);
}

.categorias li.secundaria{
background-color:rgba(199, 0, 92, 0.98);

}

.categorias li.secundaria:hover{
background-color:rgba(177, 0, 82, 0.98);

}
.categorias li.adultos{
background-color:rgba(199, 0, 184, 0.98);

}

.categorias li.adultos:hover{
background-color:rgba(157, 2, 145, 0.98);

}


.categorias li.mayores{
background-color:rgb(153, 0, 199);

}

.categorias li.mayores:hover{
background-color:rgb(109, 0, 142);

}

.categorias li a{
text-decoration: none;
text-transform: uppercase;
color:#fff;
}

/*ESTILOS PARA SECCIÓN CONTACTO*/

#contacto{
margin-top:1em;
margin-bottom:1em;
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: space-around;
align-items:center;
align-content:center;
}

#informacion-contacto{
padding:2em;
background-color:rgba(255, 255, 255, 0.42);
border-radius:1.3em;
}

#informacion-contacto h5{
font-size: 1.2em;
color:#c7005c;
}

#formulario-contacto{
display: flex;
flex-direction: column;
width:50%;
padding-bottom:1em;
}

#formulario-contacto label{
padding-top:1em;
padding-bottom:0.2em;
color:#c7005c;
}

#formulario-contacto input{
background-color:rgba(255, 255, 255, 0.42);
border:none;
padding:0.3em;
border-radius:0.3em;
}

#formulario-contacto input:hover{
background-color:#fff;
}

#formulario-contacto textarea{
background-color:rgba(255, 255, 255, 0.42);
border:none;
padding:0.3em;
border-radius:0.3em;
}

#formulario-contacto textarea:hover{
background-color:#fff;
}

#formulario-contacto input.form-button{
background-color:#00c17e;
    
}

#formulario-contacto input.form-button:hover{
background-color:rgb(0, 214, 140);
    
}

/* ESTILOS PARA FOOTER*/

#nota-dgpc{
font-size:0.7em;
background-color:#bcbcbc;
font-family:'Lato';
text-align: center;
padding:1em;
}

footer{
background-color:#272727;}

#contenido-footer{
display:flex;
flex-direction: row;
justify-content: space-between;
align-content:space-between;
}

#contenido-footer div{
margin-top:1em;    
width:15em;
padding:0.5em;
border-right: 1px solid #fff;
margin-bottom:1em;
}

#contenido-footer div h5{
color:#fff;
text-transform:uppercase;
}


#contenido-footer div p{
color:#fff;
font-size:0.8em;
font-weight: 300;
margin-bottom:1em;}


/* ESTILOS PARA SECCIÓN APPRENDE*/

#imagen-descarga{
background-image: url(img/fondo-app.jpg);
height:35em;
}

#descripcion-apprende{
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: space-around;
align-items: space-around;

}

#descripcion-app{
margin-top:3em;
}

#descripcion-app h2{
color:#fff;
font-weight: 400;
padding-top:1em;
padding-bottom:1em;
font-size:2em;
}

#descripcion-app ul li{
margin-left:1em;
border:none;
list-style:circle;
font-weight:300;
margin-bottom:1.8em;

}

#descripcion-app ul{
padding-bottom:1em;
}



.boton-descarga-apprende{
background-color:#00c17e;
padding:1em;
border-radius:0.3em;
color:#fff;
font-size:1.5em;
text-transform:uppercase;
text-decoration: none;
text-align: center;
}

.boton-descarga-apprende:hover{
background-color:#00ffa6;

}



/*FORM*/



/* menos de 100px */

@media screen and (max-width:1200px){

    .video{
    display:none;
    }   


}

/* ESTILOS PARA EL HEADER*/


#menu ul{
   font-size:0.8em;}




/* menos de 837px */

@media screen and (max-width:837px){
    
 /* ESTILOS PARA HEADER*/
   
#menu,
#menu ul,
#menu ul li,
#menu ul li a,
#menu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


#menu #menu-button {
  display: none;
}



#menu ul{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-around;
    align-content:space-around;
    font-family: "roboto", sans-serif;
    padding-top: 2.3em;}


#menu ul li{
padding: 1em;
text-transform:uppercase;
text-decoration: none;
color:#fff;
}    


.logo a{
visibility: hidden;
margin:-20px;
}


#menu ul li a{
text-decoration: none;
font-family: "Fira Sans";
color:#fff;
}

#menu ul li a:hover{
color:#bcbcbc;
}    
    
    

/* ESTILOS PARA IMAGEN PRINCIPAL*/


#imagen-home{
height:25em;
}

#titulo-imagen{
color:#fff;
padding-top:2em;
text-transform:uppercase;
}

#titulo-imagen p{
text-decoration:underline;
font-size: 1em;
padding:0.3em;
}

#titulo-imagen p.centro-educativo{
text-decoration:none;
font-size:1.5em;
}

#titulo-imagen h1{
font-size:3.5em;
}


}


/* menos de 760px */

@media screen and (max-width:760px){

/* ESTILOS PARA SECCIÓN APPRENDE*/


#imagen-apprende img{
height:15em;
margin-top:4em;
}

.boton-descarga-apprende{
font-size:1.3em;

}

@media screen and (max-width:1200px){
    
}
    
    
/* menos de 630px */

@media screen and (max-width:630px){
    
/* ESTILOS PARA SECCIÓN APPRENDE*/

    #imagen-descarga{
    display:none;
    }


#descripcion-app{
margin-top:2em;
}

#descripcion-app h2{
text-align: center;
color:#fff;
font-weight: 400;
padding-top:1em;
padding-bottom:1em;
font-size:1.5em;
}

#descripcion-app ul li{
text-align:center;
margin-left:1em;
border:none;
list-style:circle;
font-weight:300;
margin-bottom:1.8em;

}

#descripcion-app ul{
padding-bottom:1em;
}


.boton-descarga-apprende{
background-color:#00c17e;
margin:auto;
border-radius:0.3em;
color:#fff;
font-size:1.5em;
text-transform:uppercase;
text-decoration: none;
text-align: center;
}

.boton-descarga-apprende:hover{
background-color:#00ffa6;

}    


/* HEADER */

header{
    min-height: 5em;
    max-height: 16em;
    background: #c7005c;
    padding-top: 1em;
    overflow-y: visible;
    }


#menu{
    display:flex;
    flex-direction:column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin:auto;
    }


    
.logo{
display:flex;
flex-direction: row;
flex-wrap: wrap;
padding:1em;
padding-left:6em;
}    


#menu ul{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content: space-around;
    align-content: center;
    font-family: "roboto", sans-serif;
    padding-top: 2.3em;}


#menu ul li{
padding: 1em;
text-transform:uppercase;
text-decoration: none;
color:#fff;
z-index:1;
text-align: center;
}    


    
/* IMAGEN PRINCIPAL */

    
#texto-imagen-home{
display:flex;
flex-direction: column;
    justify-content: space-around;
}
    

#suscripcion-newsletter{
visibility: hidden;
}

    #titulo-imagen{
color:#fff;
padding-top:2em;
text-transform:uppercase;
}

#titulo-imagen p{
text-decoration:underline;
font-size: 0.7em;
padding:0.3em;
}

#titulo-imagen p.centro-educativo{
text-decoration:none;
font-size:1.5em;
}

#titulo-imagen h1{
    font-size:3.0em;}
  
    
/* CATEGORÍAS */

    
 .categorias{
margin-top:1em;
margin-bottom:1em;
display:flex;
flex-direction:column;
}   
    
.categorias li{
width:100%;
padding-top:4em;
padding-bottom:4em;
margin:auto;
text-align:center;}

/* FOOTER */
    
#contenido-footer{
display:flex;
flex-direction: column;
align-content:center;
}

#contenido-footer div{
margin-top:1em;    
width:100%;
padding:0.5em;
border-bottom: 1px solid #fff;
border-right:none;
}
}
    
}



/* menos de 410px */

@media screen and (max-width:410px){
    
    
/* DESCRIPCIÓN APPRENDE */
    
.boton-descarga-apprende{
font-size:1em;
}


    
}