@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,600;0,700;0,800;1,400&display=swap');

/* -------------REGLAS MOBILE FIRST------------------ moto g4 */ 

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

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    font-family: 'Montserrat', sans-serif;
}

html{
    height: -webkit-fill-available;
}
img {
    max-width: 100%;
    height: auto;    
}

/*------- header------*/

.pantallanosotros{
    color: #0068FF;
    margin: 1.2em;
}

.contenedor {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-top: 0.5em;
}

.contenedor #menu{
    width: auto;
    margin: 0.4em 1em 0.4em 1em;
}

.contenedor .perfilicono{
    margin: 0.4em 0.5em 0.4em 1em;
    width: 12%;
}

.contenedor .titulo{
   text-align: center;
}

header div img{
    width: 80%;
}

header{
    width: 100%;

    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9000;

    padding-top: 0.5em;

    height: 13%;
    background-color: white;

}

header nav ul{
    background-color: #0066ffe3;
    padding: 2em;
    padding-top: 6em;

    text-align: center;

    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9000;

    right: 100%;
    width: 50%;

    transition: all .2s ease;
    visibility: hidden;
}

.visible{
    left: 0;

    transition: all .1s ease;
    visibility: visible;
}


header nav ul li a{
    color: white;
    font-weight: 400;
    font-size: 0.7em;
    line-height: 6em;
    
}

header li:hover{
    background-color: #0066ffc9;
}

#llamamenu {
    background-color: #0068FF;
    color: white;
    padding: 0.2em;
    padding-bottom: 0em;

    position: relative;
    z-index: 9999;
}

#llamamenu:hover{
    background-color: #1EDF7A;
}

#casa {
    background-color: #0068FF;
    color: white;
    padding: 0.2em;
    padding-bottom: 0em;
    margin-right: 0.5em;

    position: relative;
    z-index: 9999;
}

#casa:hover{
    background-color: #1EDF7A;
}

/*------- main ------*/
main{
    margin-top: 5em;
}

h2{
    font-size: 1.2em;
    font-weight: 600;
}

h3{
    font-size: 1em;
    font-weight: 600;
}

h4{
    font-size: 0.9em;
    color: #FF5B00;
}

p{
    font-weight: 300;
    font-size: 0.7em;
    padding-top: 1.4em;
}

.ruta{

    padding-top: 0.7em;
    padding-bottom: 0.3em;
    
    margin-left: 1em;
    margin-right: 1em;
}

.ruta p{
    color: #0068FF;
    font-size: 0.7em;
    font-weight:400;
}

.ruta p span{
    font-weight: 700;
}

.presentacion{
    padding: 1em;
}

.presentacion h2{
    color: #FF5B00;
}

.somos{
    padding-bottom: 1.5em;
    padding-top: 1em;
}

.objetivo{
    padding-bottom: 1.5em;
}

.integrante{
    display: flex;
    flex-wrap: nowrap;

    padding-left: 1em;
    padding-bottom: 1em;
    width: 100%;
}

.integrante img{
    width: calc(100% - 1em);
    border-radius: 100%;
}

.integranteimg {
    max-width: 20%;
}

.integrantetexto >h3{
    color: #0066ff;
}

.bajada{
    text-align: center;
    padding: 1.1em;
}

.bajada > h3 {
    padding-bottom: 0.5em;
    color: #FF5B00;
}

.bajada div{
    padding-top: 1.5em;
    padding-bottom: 1em;
}

.bajada div a{
    color:#1EDF7A; 
    font-weight: 700;      
    font-size: 0.9em;
    text-decoration: underline #1EDF7A;
}

.educacion {
    background-color: #cde1ff;    
    text-align: center;
    padding: 1em;
    
}
.educacion > h2{
    color: #0068FF;
    padding: 0.5em;
}

.educacion p{
    font-weight: 300;
    font-size: 0.7em;
    padding: 1.4em;
    text-align: left;
}

.educacionovedades{
    background-color: #cde1ff;    
    text-align: center;
    padding: 1em;
}

.educacionovedades > h2{
    color: #0068FF;
    text-align: left;
}

.educacionovedades p{
    font-weight: 300;
    font-size: 0.7em;
    padding: 1.4em;
    padding-left: 0em;
    text-align: left;
    color: black;
}

.educacionvideo{
    background-color: #ffffff;    
    text-align: center;
    padding: 1em;
}
.educacionvideo >h2{
    color: #FF5B00;
    text-align: left;
}

.educacionvideo p{
    font-weight: 300;
    font-size: 0.7em;
    padding: 1.4em;
    padding-left: 0em;
    text-align: left;
    color: black;
}

.educacionsumate{
    background-color: #0068FF;
    text-align: center;
    line-height: 1em;
}

.educacionsumate >h2{
    color: #1EDF7A;
    padding-top: 0.8em;
    padding-bottom: 0.2em;
    line-height: 0.4em;
}
.educacionsumate p{
    color: white;
    font-weight: 400;
    padding-bottom: 1.8em;
}

.sumate a{
    color: #1EDF7A;
    font-weight: 700;
    font-size: 0.9em;
    text-decoration: underline #1EDF7A;
}

.sumate{
    padding-bottom: 2.5em;
    padding-top: 0.5em;
}

.fecha{
    display: flex;
    align-items: center;
    justify-content: center;

    
    margin: auto;
    padding: 1em;
    padding-top: 2em;
}

.fecha div h3{
    color: white;
    font-weight:400;
    text-align: left;
}

#calendario{
    color: #1EDF7A;
    background-color: #0068FF;

    padding-right: 1em;
}

.catalogo{
    background-color: #0068FF;
    text-align: center;
    padding: 1em;
    
}

.catalogo >h2{
    color: #1EDF7A;
    padding-top: 0.8em;
    padding-bottom: 0.2em;
}
.catalogo p{
    color: white;
    font-weight: 400;
    padding-bottom: 1.8em;
}

.catalogo .descarga a{
    color: #1EDF7A;
    font-weight: 700;
    font-size: 0.9em;
    text-decoration: underline #1EDF7A;
}

.descarga{
    padding-bottom: 0.8em;
}

.generos ul li{
    text-decoration: none;
    border: 0.5em;
    border-style: solid;
    border-color: white;
    border-radius: 50em;
    border-width: 0.1em;
    height: 1.7em;
    width: 4.2em;
}

.generos ul li a{
    color: white;
    font-size: 0.6em;
    font-weight: 600;
    padding-right: 0.4em;
    padding-left: 0.4em;
}
.generos ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1em;
    list-style: none;
}

.curiosear{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    text-align: center;
    
    margin: auto;
}

.juan img{
    width: 100%;
    height: auto;
    
    margin-left: 0.5em;
    margin-right: 1em;
}

.flor img{
    width: 70%;
    height: auto;
}

.hoja img{
    width: 70%;
    height: auto;  
}

.progreso >h2{
    text-align: center;
    color: #FF5B00;
    padding-bottom: 0.5em;
}

.progreso {
    background-color: #e3eeffb0;
    padding: 1em;
}


.visitar a{
    color: #1EDF7A;
    font-weight: 700;
    font-size: 0.9em;  
    text-decoration: underline #1EDF7A;
}

.visitar{
    text-align: center;
    padding: 1em;
    padding-bottom: 2em;
}

figure img{
    
    display: block;
}

.cuentouno figure{
    position: relative;
    overflow: hidden;

    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em; 
}

.cuentouno figcaption{

    font-weight: 700;
    font-size: 1em;
    text-align: center;
    color: white;
    background-color: #ff5900a8;
    position: absolute;
    width: calc(100% - 2em);
    top:calc(100% - 3.1em);
    padding: 0.5em;
        
}

.cuentouno figcaption >span{
    font-size: 0.8em;
    font-weight: 500;
}

.nosotros img{
    display: block;
}

.nosotros figure{
    position: relative;
    overflow: hidden;

    padding-top: 0em;
    padding-left: 1em;
    padding-right: 1em; 
}

.nosotros figcaption{
    font-weight: 700;
    font-size: 1.3em;
    text-align: center;
    color: #ff5900;
    background-color: #ffffffa8;
    position: absolute;
    width: calc(100% - 1.35em);
    top:calc(86% - 0.5em);
    padding: 0.3em;
}

.novedades img {
    display: block;
}

.autores{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    background-color: #e3eeff;
    margin: 1em;
}

.autoresnov{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    background-color: #e3eeff;
    margin: 1em;
}

.autores .texto{
    padding-left: 0.5em;
    width: calc(100% - 9em);
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;    

    background-color: #e3eeff;
}

.autores .texto >h4{
    
    line-height:1em;
    padding-top: 0.2em;
    padding-bottom: 0.5em;
}

.autores .texto p{
    
    line-height:1em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.autoresnov .textonovedad{
    padding-left: 0.5em;
    width: calc(100% - 11em);
    
    display: flex;
    flex-direction: column;
    justify-content:flex-start;    

    background-color: #e3eeff;
}

.autoresnov .textonovedad >h4{
    
    line-height:1.2em;
    padding-top: 0em;
    padding-bottom: 0.5em;
    font-size: 1.1em;
}

.autores .imagen{
    width: 50%;
}

.autores img {
    display: block;
}

.autoresnov .imagennov{
    width: 50%;
}

.autoresnov img {
    display: block;
}

.autoresaudio {
    background-color: #e3eeff;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

.comparti{
    border: 0.5em;
    border-style: solid;
    border-color: #FF5B00;
    border-radius: 50em;
    border-width: 0.1em;
    height: 1.7em;
    width: 4.2em;
    margin-top: 2.5em;
}

.comparti a{
    color: #FF5B00;
    font-size: 0.6em;
    font-weight: 600;
    padding-right: 0.4em;
    padding-left: 0.7em;
}

.escucha a{
    color: #1EDF7A;
    font-weight: 700;
    font-size: 0.9em;  
    text-decoration: underline #1EDF7A;
}

.escucha{
    text-align: center;
    padding: 1em;
    padding-bottom: 2em;
    padding-top: 0.5em;
    background-color: #e3eeff;
}

/*------ video------*/

.contenedorvideo{
    position: relative;
    width: 100vw;
    margin: 0;
    height: 0;
    padding-bottom: 56.25%;
}

.contenedorvideo iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.suscribite{
    text-align: center;
    padding: 2em;
    background-color: #FF5B00;
    color: white;
}

.formulario{
    text-align: left;
    padding-top: 1em;
    font-weight: 900;
   
}

.formulario p{
    background-color: rgba(255, 255, 255, 0.198);
    border-radius: 50em;
    padding: 1em;
}

/*------- perfil ------*/


.perfil .perfilmariana img {
   
    border-radius: 15em; border: 0.4em solid #0068FF; 
    background-size: contain; background-position-x: right; background-position-y: center;
    margin-bottom: 1em; width: 8em; height: 8em; position: absolute ; 
    bottom:0em; left: 1.5em; }

.perfil .fondo-perfil {

background-color: #0068FF ; width: 100%; height: 6em;}

.perfil .perfilmariana { display: flex; 
    flex-direction: row; height: 5em; position: relative;
margin-bottom: 1em;}

.perfil .perfilmariana .nombre-perfil 
{margin-top: 1em; margin-left: 11em; }

.perfil .perfilmariana .nombre-perfil h2
{ font-size: 0.8em; }

.perfil .perfilmariana .nombre-perfil h3
{ font-size: 0.8em; font-weight: 400;}


 .perfil .botonesperfil {display: flex; flex-direction: row;
  width: 100%; justify-content: space-around; padding: 0 3em }



.perfil .botonesperfil .guardados {
    height: 2em; border-radius: 14em; border: 0.2em solid #0068FF;  
padding: 0.7em; display: flex; justify-content: center; align-items: center;}



.perfil .botonesperfil .editarperfil {
    border-radius: 14em; border: 0.2em solid #0068FF;  padding: 0.7em; 
    display: flex; justify-content: center; align-items: center;
height: 2em;}



.perfil .hijos {

    display: flex; flex-direction: row; width: 90%; margin-top: 1em;}

.perfil .hijos .iconomas {
display: flex;
    height: 1em; width: 1em; border-radius: 0.5em; color: #FF5B00; border: 0.1em solid #FF5B00; font-size: 1.5em;
    justify-content: center; align-items: center;  margin-left: 1em;}


.perfil .iconos-carrusel { display: flex; flex-direction: row;}

.perfil .iconos-carrusel img {
    height: 7em; width: 7em; padding-top: 1.5em; color:#FF5B00; }


.perfil .hijos .juan {
display: flex;
flex-grow: 1; border-bottom: 0.3em solid #FF5B00 ;  justify-content: center; align-items: flex-end; padding-bottom: 0.3em; color: #FF5B00 ;
}

.perfil .hijos .julieta {
display: flex;
    flex-grow: 1; border-bottom: 0.1em solid #FF5B00 ; justify-content: center; 
    align-items: flex-end; padding-bottom: 0.5em;
}

.perfil .hijos .julieta .texto-julieta {  color: #FF5B00; font-weight: 300; }



.perfil .iconos-carrusel { display: flex; flex-direction: row; width: 100%; justify-content: space-between;}

/*------- perfil cursos ------*/


.perfil .lista-cursos {

padding: 2em; color: #0068FF; }

.perfil .lista-cursos h3 {  font-size: 1.5em;
    font-weight: 600;}
.perfil .lista-cursos .dia { font-size: 1.1em ;color: rgb(58, 55, 55);
padding-top: 0.3em; }

/*------- 01------*/
.perfil .lista-cursos .curso { margin-bottom: 2.5em; padding-bottom: 2em; border-bottom: 0.2em solid #0068FF;}

.perfil .lista-cursos .curso .porcentaje {
    width: 3em;
    height: 3em;
}

.perfil .lista-cursos .curso .barra-porcentaje-cursada .barra-porcentaje {
    width: 12em;
    height: 1.5em;
}
.perfil .lista-cursos .curso .forma-porcentaje .barra-porcentaje-cursada  {
    display: flex;
    flex-direction: column;
    margin-left: 0.5em;
}

.perfil .lista-cursos .curso .forma-porcentaje {
    display: flex; 
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
} 

.perfil .lista-cursos .curso {
    padding-top: 1em; padding-bottom: 2em;}

.perfil .lista-cursos .curso h5 
{ color: #1EDF7A;} 

.perfil .lista-cursos .curso .ver-más a{ 
    display: flex; justify-content:center; align-items: center;
    color: #1EDF7A;
    font-weight: 700;
    font-size: 0.9em;
    text-decoration: underline #1EDF7A; 
    width: 7em; height: 2em; margin-top: 1.5em; font-size: 1em;
margin: auto;
}



/*------- 02------*/

.perfil .lista-cursos .curso2 { margin-bottom: 2.5em; padding-bottom: 2em; border-bottom: 0.2em solid #0068FF;}

.perfil .lista-cursos .curso2 .porcentaje 
{ display: flex;  justify-content: center; align-items: center; 
border-radius: 3em ;border: 0.2em solid #0068FF; color: #0068FF ;
height: 3em; width: 3em; }

.perfil .lista-cursos .curso2 .forma-porcentaje {display: flex; 
    justify-content: space-between; align-items: left;
height: 3em; width: 21em;} 

.perfil .lista-cursos .curso2 .forma-porcentaje-de-cursada {
    padding-top: 1em; padding-bottom: 2em;}

.perfil .lista-cursos .curso2 .forma-porcentaje-de-cursada h5 
{ margin-left: 6em; color: #1EDF7A; margin-top: 0%;} 


.perfil .lista-cursos .curso2 .ver-más { 
    display: flex; justify-content:center; align-items: center;
    border-radius: 1.5em; color: #FF5B00; border: 0.2em solid #1EDF7A; 
    width: 7em; height: 2em; margin-top: 1.5em; font-size: 1em;
margin: auto; 
}


/*------- 03------*/

.perfil .lista-cursos .curso3 { margin-bottom: 2.5em; padding-bottom: 2em;}

.perfil .lista-cursos .curso3 .porcentaje 
{ display: flex;  justify-content: center; align-items: center; 
border-radius: 3em ;border: 0.2em solid #0068FF; color: #0068FF ;
height: 3em; width: 3em; }

.perfil .lista-cursos .curso3 .forma-porcentaje {display: flex; 
    justify-content: space-between; align-items: left;
height: 3em; width: 21em;} 

.perfil .lista-cursos .curso3 .forma-porcentaje-de-cursada {
    padding-top: 1em; padding-bottom: 2em;}

.perfil .lista-cursos .curso3 .forma-porcentaje-de-cursada h5 
{ margin-left: 6em; color: #1EDF7A; margin-top: 0%;} 


.perfil .lista-cursos .curso3 .ver-más { 
    display: flex; justify-content:center; align-items: center;
    border-radius: 1.5em; color: #FF5B00; border: 0.2em solid #FF5B00; 
    width: 7em; height: 2em; margin-top: 1.5em; font-size: 1em;
margin: auto;
}

/*------- perfil lecturas ------*/

.perfil .lista-lecturas .lectura1 {padding-bottom: 3em; padding-top: 2em;
display: flex; flex-direction: row; margin-right: 1.5em;}

.perfil .lista-lecturas .lectura1 .l01 {

 width: 9em; height: 100%;
border-radius: 0.7em; border: 0.2em solid rgb(139, 214, 236); 
background-size: contain; margin-left: 1em; margin-right: 1em;}


.perfil .lista-lecturas .lectura2 
{padding-bottom: 3em; display: flex; flex-direction: row; margin-right: 1.5em;}

.perfil .lista-lecturas .curso
{display: none;}
 
.perfil .lista-lecturas .lectura2 .l02 
{width: 9em; height: 100%;
border-radius: 0.7em; border: 0.2em solid rgb(139, 214, 236); 
background-size: contain; margin-left: 1em; margin-right: 1em;}

.perfil .lista-lecturas .lectura3 
{padding-bottom: 3em; display: flex; flex-direction: row; 
    margin-right: 1.5em;}

.perfil .lista-lecturas .lectura3 .l03 
{width: 9em; height: 100%;
    border-radius: 0.7em; border: 0.2em solid rgb(139, 214, 236); 
    background-size: contain; margin-left: 1em; margin-right: 1em;}


.perfil .lista-lecturas .lectura4 {padding-bottom: 3em; padding-top: 2em;
        display: flex; flex-direction: row; margin-right: 1.5em;}
        
.perfil .lista-lecturas .lectura4 .l04 {
        
         width: 9em; height: 100%;
        border-radius: 0.7em; border: 0.2em solid rgb(139, 214, 236); 
        background-size: contain; margin-left: 1em; margin-right: 1em;}



.perfil .lista-lecturas .porcentaje-de-lectura { margin-top: 1em;
display: flex; flex-direction: row; align-items: center;justify-content: space-between;}

.perfil .lista-lecturas .porcentaje-de-lectura h5 
{color: #1EDF7A; font-size: 0.8em;}

.perfil .lista-lecturas h4
{color: #FF5B00; font-size: 0.9em; font-weight: 400; margin-top: 0.5em;}

.perfil .lista-lecturas .porcentaje-de-lectura .numero 
{ padding: 0%; color: #1EDF7A; font-size: 0.8em; font-weight: 700;}

.perfil .lista-lecturas .texto-lectura1 img
{ height: 1.5em; width: 21em; margin: 0%; padding: 0%;} 


.perfil .lista-lecturas .texto-lectura2 img
{ height: 1.5em; width: 21em; margin: 0%; padding: 0%;} 


.perfil .lista-lecturas .texto-lectura3 img
{ height: 1.5em; width: 21em; margin: 0%; padding: 0%;} 

.perfil .lista-lecturas .texto-lectura4 img
{ height: 1.5em; width: 21em; margin: 0%; padding: 0%;} 

/*------- perfil notas ------*/


.perfil .comentario1 .docente-comentario1

{ display: flex; flex-direction: center; width: 100%; 
justify-content: space-between; align-items: center;}



.perfil .comentario1 .docente-comentario1 img 
{width: 6em; height: 6em;}

.perfil .comentario1 .docente-comentario1 h5
{font-size: 0.7em; font-weight: normal;  color: rgb(124, 198, 248);}

.perfil .comentario1 .icono-comentario1 .iconos-comentarios1
{display: flex; flex-direction: row; margin-top: 0.5em; margin-left: 0.5em;}

.perfil .comentario1 .icono-comentario1 .iconos-comentarios1 i
{margin-left: 0.25em; color: #0068FF;}


.perfil .comentario1 .icono-comentario1 .comentario-seño1 
{margin-left: 0.5em; margin-right: 0.5em;  padding: 0.5em; font-size: 0.9em; font-weight: normal;
    border-radius: 0.7em; border: 0.2em solid rgb(124, 198, 248);}

.perfil .comentario1 .docente-comentario1

{ display: flex;  width: 100%; 
justify-content: space-around; 
padding-top: 2em; color: #0068FF;font-size: 1.3em; }




.perfil .comentario2 .docente-comentario2

{ display: flex;  width: 100%; 
justify-content: space-around; align-items: center;}



.perfil .comentario2 .docente-comentario2 img 
{width: 6em; height: 6em;}

.perfil .comentario2 .docente-comentario2 h5
{font-size: 0.7em; font-weight: normal;  color: rgb(124, 198, 248);}

.perfil .comentario2 .icono-comentario2 .comentario-seño2 
{margin-left: 0.5em; margin-right: 0.5em;  padding: 0.5em; font-size: 0.9em; font-weight: normal;
border-radius: 0.7em; border: 0.2em solid rgb(124, 198, 248);}

.perfil .comentario2 .icono-comentario2 .iconos-comentarios2
{display: flex; flex-direction: row; margin-top: 0.5em; margin-left: 0.5em;}

.perfil .comentario2 .icono-comentario2 .iconos-comentarios2 i
{margin-left: 0.25em; color: #0068FF;}

.perfil .comentario2 .docente-comentario2

{ display: flex;  width: 100%; 
justify-content: space-around; 
padding-top: 2em; color: #0068FF;font-size: 1.3em; }





/*------- perfil agenda/calendario ------*/



.perfil .noviembre img
{height: 30em;}

.perfil .noviembre h2
{margin-top: 1.7em; text-align: center}

.perfil .noviembre .reciclaje-de-juguetes
{ background-size: contain; border-radius: 0.7em ;background-color: rgb(124, 198, 248, 0.637);
    margin-bottom: 2em; margin-left: 1.3em; margin-right: 1.3em; margin-top: 2em; padding: 1em;}

.perfil .noviembre .reciclaje-de-juguetes h5 
  {font-size: 1.4em; font-weight: normal; color: #0068FF ; 
    border-bottom: 0.1em solid #0068FF;}


.perfil .noviembre .mi-primer-plantita
{ background-size: contain; border-radius: 0.7em ;background-color: rgba(124, 198, 248, 0.637);
    margin-bottom: 2em; margin-left: 1.3em; margin-right: 1.3em; margin-top: 2em; padding: 1em;}

.perfil .noviembre .mi-primer-plantita h5 
      {font-size: 1.4em; font-weight: normal; color: #0068FF ; 
        border-bottom: 0.1em solid #0068FF;}

.perfil .noviembre .jardineria1
{ background-size: contain; border-radius: 0.7em ;background-color: rgba(124, 198, 248, 0.637);
    margin-bottom: 2em; margin-left: 1.3em; margin-right: 1.3em; margin-top: 2em; padding: 1em;}
      
 .perfil .noviembre .jardineria1 h5 
            {font-size: 1.4em; font-weight: normal; color: #0068FF ; 
              border-bottom: 0.1em solid #0068FF;}

.perfil .noviembre .fin-de-curso 
{ background-size: contain; border-radius: 0.7em ;background-color: rgba(124, 198, 248, 0.637);
    margin-bottom: 2em; margin-left: 1.3em; margin-right: 1.3em; margin-top: 2em; padding: 1em;}
            
.perfil .noviembre .fin-de-curso  h5 
                  {font-size: 1.4em; font-weight: normal; color: #0068FF ; 
                    border-bottom: 0.1em solid #0068FF;}
                      

.calendario {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0.75em;
}

.calendario .dia {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    border: 0.05em solid #FFFFFF;
}

.calendario .numero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    color: #FFFFFF;
    border: 0.05em solid #FFFFFF;
    background-color: #0068FF;
}

.calendario .seleccionado {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    color: #0068FF;
    border: 0.05em solid #FFFFFF;
    background-color: #3EFF94;
}

.calendario .fila {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 21em;
}

.noviembre .titulo-mes {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    width: 100%;
}


.perfil .titulo-mes img
{width: 1em; height: 1em;}


.noviembre .mes {
    margin-left: 1em;
    margin-right: 1em;
}



/*----- Biblioteca ------*/


.fondobiblioteca{
    background-color:#cde1ff;
}

.galeria{
    background-color:#FFFFFF;
    padding-bottom:2em;
    max-width:75em;
    margin-left:auto;
    margin-right:auto;
}

.galeria .boton a{
    color:#1EDF7A; 
    font-weight: 700;      
    font-size: 0.9em;
    text-decoration: underline #1EDF7A;
}

.slider{
    position:relative;
    height: 50vh;
}

.slider__slide{
    display:none;
}

.slider .slider__slide img{
    object-fit: cover;
    width:100%;
    height:50vh;
}

.prev,
.next{
    cursor: pointer;
    position: absolute;
    top: 0;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px 24px;
    color:#0068FF;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 50%;
    left: .5em;
}

.next {
    left:unset;
    right: .5em;
}

.prev:hover,
.next:hover{
    background-color:#cde1ff;
}

.slider__text{
    background: black;
    color:white;
    padding: 1em;
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
    font-weight:bold;
}

.galeria .slider__dots{
    text-align: center;
    padding-top: .5em;
}

.slider__dots--dot{
    cursor:pointer;
    height: 1em;
    width: 1em;
    margin: 2px;
    background-color: gray;
    border-radius: 50%;
    display:inline-block;
    transition: background-color 0.6s ease;
}

.active,
.slider__dots--dot:hover{
    background-color: green;
}

.fade{
    animation-name: name;
    animation-duration: 1s;
}

@keyframes fade{
    from{
        opacity:0.4;
    }
    to{
        opacity: 1;
    }
}

.galeria {
    text-align: center;
}

.galeria p{
    line-height: 0.6em;
}

.galeria .descripcion{
    padding-bottom: 0.8em;
    padding-top: 0.3em;
}

.galeria .slider__slide .figure {
    width: 100%;
}

.galeria .slider__slide .img{
    width: 90%;
    height: auto;
    margin: auto;
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
}

.galeria .slider_text{
    padding-top: 2em;
    padding-bottom: 1.5em;

}


.galeria > h2{
    font-size: 1.4em;
    color: #FF5B00;
}

.valoracion{
    width: 100%;
}

.valoracion img{
    width: 45%;
    height: auto;
    margin: auto;
    display: block;
    padding: 0.5em;
}

.boton{
    padding-top: 0.5em;
    padding-bottom: 1.3em;
   
}

.boton a{

    display: flex; justify-content:center; align-items: center; 
    border-radius: 1.5em; color: #0068FF; border: 0.2em solid #0068FF; 
    width: 7em; height: 2em; margin-top: 1.5em; font-size: 1em; 
    margin: auto;
}


.aviso {
    background-color: #cde1ff;    
    text-align: center;
    padding: 1em;
}

.aviso > h2{
    color: #0068FF;
    padding: 0.5em;
}

.aviso p{
    font-weight: 300;
    font-size: 0.7em;
    padding: 1.4em;
    text-align: left;
}

.informacion a{
    display: flex; justify-content:center; align-items: center;
    border-radius: 1.5em; color: #0068FF; border: 0.2em solid #0068FF; 
    width: 7em; height: 2em; margin-top: 1.5em; font-size: 1em; margin: auto;
}





/*----- Biblioteca libro1 -------*/

.libro1 .libro1-portada .informacion-libro1
{margin: 1em;}

.libro1-imagen-titulo 
{ background-color: rgba(124, 198, 248, 0.568);
padding: 1em; border-radius: 0.5em; margin: 0.5em; text-align: center; 
margin-bottom: 2em;}

.libro1-imagen-titulo h2
{padding-top: 0.5em;}

.libro1-imagen-titulo .informacion-libro1
{display: none;}



.libro1 .sinopsis
{margin: 1em;}

.libro1 .datos-libro1
{ margin: 1em;}

.libro1 .boton a{
    color: #1EDF7A;
    font-weight: 700;
    font-size: 0.9em;
    text-decoration: underline #1EDF7A;
}

.libros-similares
{ background-color: #0068FF; padding: 1em;}

.libros-similares h3
{margin-bottom: 1.5em; text-align: center; color: #FFFFFF;}

.libros-similares .libro2

{ margin-bottom: 2em; margin-bottom: 2em;}

.libros-similares .libro2 h4
{text-align: center; color: #FFFFFF;font-weight: 300;}


.libro2 .boton-libro 
{text-align: center; margin-top: 0.3em; margin-bottom: 1em;}

.libro2 .boton-libro a{
    display: flex; justify-content:center; align-items: center; 
    border-radius: 1.5em; color: #ffffff; border: 0.2em solid #ffffff; 
    width: 7em; height: 2em; margin-top: 2em; font-size: 1em; 
    margin: auto;
}

.libros-similares .libro3

{ margin-bottom: 2em; margin-bottom: 2em;}

.libros-similares .libro3 h4
{text-align: center; color: #FFFFFF; font-weight: 300;}

.libro3 .boton-libro 
{text-align: center; margin-top: 0.3em; margin-bottom: 1em;}

.libro3 .boton-libro a{
    display: flex; justify-content:center; align-items: center; 
    border-radius: 1.5em; color: #ffffff; border: 0.2em solid #ffffff; 
    width: 7em; height: 2em; margin-top: 2em; font-size: 1em; 
    margin: auto;
}


.libros-similares .libro4

{ margin-bottom: 2em; margin-bottom: 2em;}

.libros-similares .libro4 h4
{text-align: center; color: #FFFFFF; font-weight: 300;}

.libro4 .boton-libro 
{text-align: center; margin-top: 0.3em; margin-bottom: 1em;}

.libro4 .boton-libro a{
    display: flex; justify-content:center; align-items: center; 
    border-radius: 1.5em; color: #ffffff; border: 0.2em solid #ffffff; 
    width: 7em; height: 2em; margin-top: 2em; font-size: 1em; 
    margin: auto;
}

.libros-similares .libro5

{ margin-bottom: 2em; margin-bottom: 2em;}

.libros-similares .libro5 h4
{text-align: center; color: #FFFFFF; font-weight: 300;}

.libro5 .boton-libro 
{text-align: center; margin-top: 0.3em; margin-bottom: 1em;}

.libro5 .boton-libro a{
    display: flex; justify-content:center; align-items: center; 
    border-radius: 1.5em; color: #ffffff; border: 0.2em solid #ffffff; 
    width: 7em; height: 2em; margin-top: 2em; font-size: 1em; 
    margin: auto;
}

/* -------------Iniciar sesión------------------*/
/* -------------Logo y texto------------------*/ 
#reconectate{
    display: block; 

}

.textomarca {
    text-align: center;
    margin: auto;
}


.logoiniciarsesion{
    margin: auto;
    margin-top: 3em;
    margin-bottom: 1em;
    width: 60%;
}

#reconectate h1{
    color: rgb(0, 89, 255);
    font-size: 1.4em;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    border-bottom: 1px solid rgb(0, 89, 255);
    height: 75px;
    max-width: 270px;
    margin: 20px auto 0 auto;
    font-weight: 400;
    

}

#reconectate p {
    
    font-size: 0.7em;
    margin: 0em 0em 2em 0em;
    margin-left: auto;
    margin-right: auto;
    max-width: 25em;
    text-align: center;
    font-family: 'Montserrat', sans-serif;

}


/* -------------Ingresar datos------------------*/

 .datos li{
    list-style:none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
    
    
 }

 .datos {
    padding: 1em 0 1em 0em;
 }

 .datos li{
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #bcd1ff;
    border-radius: 1.6em;
    width: 17em;
    max-width: 40em;
    height: 2.7em;
 }

 .datos p {
    font-size: 0.9em;
    text-align: left;
    padding: 0.9em 0 0 1em ;
    opacity: 70%;
    color: rgb(0, 54, 172);
 }

 .boton{
   text-align: center;
   border: none;
 }

 .boton a {
    border: none;
 }

 .boton img {

    width: 5.5em;
}

.registrate {
    display: flex;
    justify-content: center;
    align-items:baseline;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    margin-bottom: 1em;
}

.registrate a {
    color: rgb(255, 94, 0);
    text-decoration: none;
    font-weight:700;
    font-size: 0.7em;
}

/* --------------------------- Cursos cortos/largos -------------------------*/

/* ---------- Encabezado ------------*/
.tituloactividades{
    padding: 1em;
    background-color: #cde1ff;
    text-align: center;
}

.tituloactividades h2 {
    color: #0068FF;
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.6em;
    text-transform: uppercase;
} 

.tituloactividades h3{
    font-weight: 300;
    font-size: 0.8em;
    margin-top: 0.5em;
    color: black;
    margin-bottom: 0.7em;
}

/* ---------- cursos ------------*/

.cursos img {
    display: block;
    margin: auto;
    
}

.largo {
    border-bottom:solid 2px rgb(0, 17, 255);
    background-color: rgb(239, 240, 255);
}

.corto {
    background-color: rgb(255, 239, 236);
}

.largo h3 {
    text-transform: uppercase;
    text-align: center;
    color: rgb(0, 17, 255);
    margin: 1em;
}

.corto h3{
    color: tomato;
    text-transform: uppercase;
    text-align: center;
    margin: 1em;
}

.textocursos {
    visibility: hidden;
}

/*----- footer -------*/


footer .redes img {
    max-width: 18%;
    height: auto;}

footer {
   display: none;
}

.reconecta {
    max-width: 20%;
    margin: auto;
    padding-top: 1em;
}

.redes{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.redes a{
    padding: 0em;
}

.parrafo{
    color: white;
    font-weight:900;
}

.derechos{
    color: white;
    font-weight: 400;
    font-size: 0.7em;
    padding: 2em;
    padding-top: 1em;
}


footer {
    background-color: rgb(0, 81, 255);
    margin-top: 2em;
      
}

.acumar img{
    width: 55%;
    margin: 1px auto 0.7em auto;
    padding-top: 1em;
}

.redesiniciosesion ul {
    margin: 1.2em 1.4em 0 1.4em;
    display: flex;
    justify-content: space-between;
}

.redesiniciosesion li {

    list-style: none;
}

.redesiniciosesion img{
    width: 35%;
}

.contactoiniciosesion p {
    color: white;
    text-align: center;
    margin-bottom: 2em;
    font-size: 0.8em;
    font-family: 'Montserrat', sans-serif;
}

.aclaraciones {
    background-color: blue;
    color: white;
    font-size: 0.6em;
    text-align: center;
    padding: 1em;
    font-family: 'Montserrat', sans-serif;
}

/* --------------------------- REGLAS DESKTOP -------------------------*/

/* ---------- Dispositivos 600 px de ancho / tablets ----------------*/

@media screen and (min-width: 600px) {

/*------header -------*/

header{
    height: 6em;
}

header nav ul li a{
    font-size: 0.9em;
    line-height: 6.5em;
}

.perfilicono{
    
    margin-right: 2em;
}

.perfilicono img{
    width: 50%;
}

.titulo{
    margin-left: 2em;
}

.menu-btn{
    margin-left: 3em;
}


/*------ main -------*/

h2{
    font-size: 1.5em;
}

h3{
    font-size: 1.2em;
}

h4{
    font-size: 1.2em;
}

p{
    font-size: 1.2em;
}

.bajada div a{
    font-size: 1.2em;
}

.catalogo .descarga a{
    font-size: 1.2em;
}

.educacion p{
    font-size: 1.2em;
}

.generos ul li a{
    font-size: 0.8em;
    
}

.generos ul li{
    margin-right:2em;
    margin-left: 2em;
    height: 1.8em;
    width: 8em;
}

.suscribite p{
    font-size: 1.2em;
}

.visitar a{
    font-size: 1.2em;
}

.autores .texto{
    
    width: calc(50% - 0.5em);
    
}

.autores .imagen{
    width: calc(50% - 0.5em);
}

.autores .texto{
    padding-left: 1em;
    line-height: 2em;
}

.cuentouno figcaption{
    width: calc(100% - 1.5em);
    top:calc(100% - 6em);
    padding: 2em;
    font-size: 1.5em;
}

.cuentouno figcaption >span{
    font-size: 1em;
    font-weight: 500;
}

.nosotros figcaption{
    font-size: 2.3em;
    width: calc(100% - 0.91em);
    top:calc(98% - 2em);
    padding: 0.5em;
}

.calendario .fila {
    width: 42em;
}

.calendario .dia {
    width: 6em;
    height: 6em;
}

.calendario .numero {
    width: 6em;
    height: 6em;
}

.calendario .seleccionado {
    width: 6em;
    height: 6em;
}


/* ------ Biblioteca Libro 01 ----- */

.libro1 .libro1-portada
{display: flex; flex-direction: row; justify-content: space-between}


.libro1 .libro1-portada .libro1-imagen-titulo { width: 60%;}

.libro1 .informacion-libro1
{display:initial ;}

.libros-2-3 
{display: flex; flex-direction: row; justify-content: space-between;} 

.libros-4-5 
{display: flex; flex-direction: row; justify-content: space-around;} 


.libros-2-5 img
{height: 23em;}


/* ------ Perfil ----- */

.perfil .lista-cursos .curso
{background-color:rgba(124, 198, 248, 0.24) ; border-radius: 2em;
padding: 2em;}

.perfil .lista-cursos

{ display: flex; flex-direction: row; justify-content: space-between;}


.perfil .talleres-noviembre .reciclaje-de-juguetes
{width: 50em;}

.perfil .talleres-noviembre .mi-primer-plantita
{width: 50em;}

.perfil .talleres-noviembre .jardineria1
{width: 50em;}

.perfil .talleres-noviembre .fin-de-curso
{width: 50em;}


.perfil .talleres-mensuales1-2
{display: flex; flex-direction: row; justify-content: space-around;}


.perfil .talleres-mensuales3-4
{display: flex; flex-direction: row; justify-content: space-around;}


.perfil .lista-lecturas .curso
{display: initial; padding-top: 0%;}


/* ------ Perfil lecturas----- */


.perfil .lista-lecturas .lectura1 .l01 {width: 19em;} 

.perfil .lista-lecturas .lectura1 { flex-direction: column; align-items: center;}

.perfil .lista-lecturas .lectura1 .texto-lectura1 
{ margin: 2em; width: 18em; }

.perfil .lista-lecturas .lectura1 .texto-lectura1 img
{height: 2em; width: 21em;}


.perfil .lista-lecturas .lectura2 .l02 {width: 19em;} 

.perfil .lista-lecturas .lectura2 { flex-direction: column; align-items: center;}

.perfil .lista-lecturas .lectura2 .texto-lectura2 
{ margin: 2em; width: 18em; }

.perfil .lista-lecturas .lectura2 .texto-lectura2 img
{height: 2em; width: 21em;}



.perfil .lista-lecturas .lectura3 .l03 {width: 19em;} 

.perfil .lista-lecturas .lectura3 { flex-direction: column; align-items: center;}

.perfil .lista-lecturas .lectura3 .texto-lectura3 
{ margin: 2em; width: 18em; }

.perfil .lista-lecturas .lectura3 .texto-lectura3 img
{height: 2em; width: 21em;}


.perfil .lista-lecturas .lectura4 .l04 {width: 19em;} 

.perfil .lista-lecturas .lectura4 { flex-direction: column; align-items: center;}

.perfil .lista-lecturas .lectura4 .texto-lectura4 
{ margin: 2em; width: 18em; }

.perfil .lista-lecturas .lectura4 .texto-lectura4 img
{height: 2em; width: 21em;}

/* -------------Iniciar sesión------------------*/ 
    /* -------------Logo y texto------------------*/ 
   
    .logoiniciarsesion{
        margin: auto;
        margin-top: 2em;
        margin-bottom: 2em;
        width: 35%;
    }

    #reconectate h1{
        font-size: 1.5em;
        border-bottom: 2px solid rgb(0, 89, 255);
        height: 45px;
        max-width: 370px;

    }

    #reconectate p {
        margin: 0.7em 0em 1.8em 0em;
        margin-left: auto;
        margin-right: auto;
        max-width: 28em;
        font-size: 0.8em;
    }


    /* -------------Ingresar datos------------------*/

    .datos li{
        font-size: 0.8em;
        
        
     }

     .datos {
        padding: 2.9em 0 2em 0em;
     }

     .datos li{
        width: 25em;
     }


     .boton{
       text-align: center;
       border: none;
     }

     .boton img {

        width: 5em;
    }

    .registrate {
        font-size: 0.6em;
        margin-bottom: 2em ;
  
    }

    .registrate a {
        font-weight:700;
        font-size: 1.2em;
    }

    /* -------------footer------------------*/
    
    .reconecta {
        max-width: 15%;
        margin: auto;
        padding-top: 1em;
    }

    .redes img{
        width: 5%;    
        padding-top: 1em;
    }

    .derechos{
        font-size: 0.8em;
    }

    .acumar img{
        width: 40%;
    }

    .redesiniciosesion ul {
        margin: 2em 5.5em 0 5.5em;
    }

    .redesiniciosesion img{
        width: 30%;
    }

    .contactoiniciosesion p {
        color: white;
        text-align: center;
        margin: 1em;
        margin-bottom: 2em;
        font-size: 0.9em;
    }

    .aclaraciones {
        font-size: 0.6em;
        padding: 1.8em 5em 1.8em 5em;
    }



/* --------------------------- Cursos cortos/largos -------------------------*/

/* ---------- Encabezado ------------*/
.tituloactividades{
    padding: 1em;
    background-color: #cde1ff;
    text-align: center;
}

.tituloactividades h2 {
    color: #0068FF;
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 0.6em;
    text-transform: uppercase;
} 

.tituloactividades h3{
    font-weight: 300;
    font-size: 0.9em;
    margin-top: 0.5em;
    color: black;
    margin-bottom: 0.7em;
}

/* ---------- cursos ------------*/

.cursos img {
    width: 100%;
    padding: 3em 3em 0 3em;
    display: block;
    margin: auto;

    
}

.cursos p {
    display: block;
    font-size: 0.8em;
    padding: 0 7em 2em 7em;
    text-align: center;
}

}

/* ---------- Dispositivos 992 px de ancho / desktops ----------------*/

@media screen and (min-width: 992px) {

/*-----header-----*/

#llamamenu{
    display: none;
}

header nav ul{
    visibility: visible;
}

.autoresaudio{
    display: flex;
    flex-direction: row;
}

.autores .texto h4{
    padding-top: 1em;
}

.autores .texto{
    width: calc(100% - 1em);
    padding-left: 1.2em;
    
}

.autores .imagen{
    width: 80%;
    padding-top: 1em;
}

.contenedor{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content:flex-start;
}

.celular{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header nav ul{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center; 
    justify-content:space-between; 

    position: relative;
    top: auto;
    right: auto;
    height: 5em;

    width: 100%;
    padding-top: 2em;

    margin-left: -1em;
    margin-right: 1.2em;
}

header{
    width: 100%;
}

header nav ul li{
    padding:1.5em;
    margin-left: 0em;
}

.perfilicono{
    display: none;
}

#casa{
    display: none;
}

/*------main------*/

.ruta{
    margin-top: 5em;
}

.muestra{
    display: flex;
    flex-direction: row;
    align-items: center;

    margin-top: 5.5em;
}

.educacion{
    padding-left: 5em;
    padding-right: 5em;
}
.educacionsumate{
    background-color: #e1edff;
}

.educacionsumate >p{
    color: black;
}

.educacionsumate h2{
    color: rgb(255, 94, 0);
}

.fecha div h3{
    color: #0068FF;
}

#calendario{
    background-color: #e1edff;
}

.catalogo{
    padding-left: 5em;
    padding-right: 5em;
}

.cuentouno{
    padding-left: 5.5em;
    padding-right: 5.5em;
}

.mascuentos{
    display: flex;
    flex-direction: row;
}

.autoresnov {
    margin-left: 6em;
 }
 
 .textonovedad{
     max-width: 50%;
 }

.autores{
    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: flex-start;
    
    width: 100%;
}


.progreso{
    padding-left: 5em;
    padding-right: 5em;
}

.suscribite{
    padding-left: 5em;
    padding-right: 5em;

}

.conocenos{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content:flex-start;
    flex-wrap: wrap;
}

.integrante{
    display: flex;
    flex-wrap: wrap;

    padding-left: 1em;
    padding-bottom: 1em;
    width: 50%;
}

.integrante img{
    width: calc(100% - 1em);
    border-radius: 100%;
}

.integranteimg {
    max-width: 20%;
}

.integrantetexto >h3{
    color: #0066ff;
}

.perfil .comentarios {
    display: flex;
    flex-direction: row;
}
.perfil .comentarios .comentario1 {
    margin-right: 2em;
}
.perfil .comentarios .comentario2 {
    margin-left: 2em;
}

.calendario .fila {
    width: 56em;
}

.calendario .dia {
    width: 8em;
    height: 8em;
}

.calendario .numero {
    width: 8em;
    height: 8em;
}

.calendario .seleccionado {
    width: 8em;
    height: 8em;
}

/* ------ Biblioteca Libro 01 ----- */


.libro1 .libro1-portada .libro1-imagen-titulo { width: 70%;}

.libro1 .libro1-portada .libro1-imagen-titulo img 
{padding-bottom: 2em;}

.libro1 .sinopsis-datos
{display: flex; flex-direction: row; align-items: center; margin: 2em;}


 .libro1 .libros-similares
 {margin: 0%;}



/* ------ Perfil lecturas----- */


.perfil .lista-lecturas .lectura1
{padding-top: 0mm;}
.perfil .lista-lecturas .lectura2
{padding-top: 0mm;}

.perfil .lista-lecturas .lectura1-2
{display: flex; justify-content: space-around; flex-direction: row ;
align-items: flex-start; margin-top: 2em;}



.perfil .lista-lecturas .lectura4
{padding-top: 0mm;}


.perfil .lista-lecturas .lectura3-4
{display: flex; justify-content: space-around; flex-direction: row ;
align-items: flex-start; margin-top: 2em;}


/* -------------Iniciar sesion------------------*/
/* -------------Logo y texto------------------*/ 
   
.logoiniciarsesion{
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    width: 27%;
}

#reconectate h1{
    font-size: 1.6em;
    height: 50px;
    max-width: 380px;

}

#reconectate p {
    margin: 1em 0em 3em 0em;
    margin-left: auto;
    margin-right: auto;
    max-width: 28em;
    font-size: 0.8em;
}

/* -------------Ingresar datos------------------*/

 .datos li{
    font-size: 0.9em;
    
    
 }

 .datos {
    padding: 2.5em 0 3.5em 0em;
 }

 .datos li{
    width: 28em;
 }


 .boton{
   text-align: center;
 }

 .boton img {

    width: 4.5em;
}

.registrate {
    font-size: 0.7em;
    margin-bottom: 4em ;
    margin-top: 2.5em;

}

/* -------------footer------------------*/


footer {
    display: block;
    margin-top: 0em;
}

.contactoiniciosesion{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.grupo{
    display: flex;
    flex-direction: column;
}

.derechos{
    font-size: 0.8em;
}

.acumar img{
    width: 50%;
    margin-top: 2em;
}

.redesiniciosesion ul {
    margin: 2em 5.5em 0 5.5em;
}

.redesiniciosesion img{
    width: 25%;
}

.contactoiniciosesion p {
    margin: 1em auto 2.3em auto;
    font-size: 0.9em;
}

.aclaraciones {
    font-size: 0.5em;
    padding: 2.5em 5em 2.5em 5em;
}

.contacto{
    display: flex;
    flex-direction: row;
    justify-content:space-between;

    align-items: center;
    margin: auto;
}

.redes{
    display: flex;
    flex-direction: row;

    padding-top: 2em;
}

.redes a img{
    padding-right: 0.2em;
    padding-left: 0.2em;
    width: 11em;
}

.reconecta{
    width: 100%;
}

.reconecta img{
    width: 5em;
    padding-top: 1em;
}

.parrafo p{
    text-align:center;
    font-size: 0.8em;
}

* --------------------------- Cursos cortos/largos -------------------------*/

/* ---------- Encabezado ------------*/
.tituloactividades{
    padding: 1em;
    background-color: #cde1ff;
    text-align: center;
}

.tituloactividades h2 {
    color: #0068FF;
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 1.3em;
    text-transform: uppercase;
} 

.tituloactividades h3{
    font-weight: 300;
    font-size: 0.9em;
    margin-top: 0.5em;
    color: black;
    margin-bottom: 0.7em;
}

/* ---------- cursos ------------*/
.cursos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.largo {
    border-bottom:solid 0px rgb(0, 17, 255);
    background-color: transparent;
}

.corto {
    background-color: transparent;
}

.cursos img {
    width: 80%;
    padding: 1;
    display: block;
    margin: auto;
}

.cursos p {
    display: block;
    font-size: 0.8em;
    max-width: 35em;
    text-align: center;
    margin-left: 2em ;
}

.largo h3 {
    border-bottom:solid 2px rgb(0, 17, 255);
    width: 300px;
    height: 2em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.corto h3 {
    border-bottom:solid 2px rgb(255, 72, 0);
    width: 300px;
    height: 2em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.textocursos {
    visibility: visible;
}
}

@media screen and (min-width: 1920px) {

    main{
        margin-left: 10em;
        margin-right: 10em;
    }

    .contenedor{
        width: 100%;
    }

    /* -------------Iniciar sesion------------------*/
    /* -------------Logo y texto------------------*/ 
   
    .logoiniciarsesion{
        margin: 2em auto 2em auto;
        width: 27%;
    }

    #reconectate {
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items: flex-start;
        margin: 0 35em 0 35em;
    }

    .textomarca{
        text-align: left;
    }

    #reconectate h1{
        font-size: 1.3em;
        height: 35px;
        max-width: 310px;
    }

    #reconectate p {
        margin: 0em 0em 1em 0em;
        margin-left: auto;
        margin-right: auto;
        max-width: 28em;
        font-size: 0.7em;
        text-align: left;
    }

/* -------------Ingresar datos------------------*/

 .datos li{
    font-size: 0.8em;
 }

 .datos {
    padding: 2.5em 0 1em 0em;
 }

 .datos li{
    width: 28em;
 }


 .boton{
    margin-bottom: 1em;
    text-align: center;
 }

 .boton img {
    width: 5em;
}

.registrate {
    font-size: 0.7em;
    margin-bottom: 4em ;
}

/*-------- cuentos -------*/

.educacion{
    padding-left: 15em;
    padding-right: 15em;
}

.catalogo{
    padding-left: 15em;
    padding-right: 15em;
}

.cuentouno{
    padding-left: 10em;
    padding-right: 10em;
}

.autores .texto p{
    padding-left: 1.2em;
}

.autores .texto h4{
    padding-left: 1.2em;
    padding-top: 1em;
}


.progreso{
    padding-left: 30em;
    padding-right: 30em;
}

.autoresnov .imagennov{
    width: 30%;
    margin: auto;
}

/*------ video------*/

.contenedorvideo{
    position: relative;
    width: 80vw;
    margin: 0;
    height: 0;
    padding-bottom: 56.25%;

    margin-left: 2em;
}

.contenedorvideo iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

/* -------------footer------------------*/

footer{
    margin-left: 10em;
    margin-right: 10em;
}

.acumar img{
    width: 15%;
    margin: 1px auto 0.7em auto;
}

.redesiniciosesion ul {
    margin: 2em 35em 0 35em;
}

.redesiniciosesion img{
    width: 25%;
}

.contactoiniciosesion p {
    color: white;
    text-align: center;
    margin: 0em auto 1.5em auto;
    font-size: 0.9em;
}

.aclaraciones {
    font-size: 0.6em;
    padding: 2.5em 20em 2.5em 20em;
}
    

}