@charset "utf-8";

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

/*PERFIL*/

.perfil{
    display: flex;
    justify-content: center;
    align-content: center;
}
.perfil img{
    width: 120px;
    margin-top: 1em;
}
.perfil h2{
    margin-top: 0.3em;
    font-family: 'Montserrat', serif;
    color: #192643;
}
.perfil h3{
    border-bottom: ;
    margin: 1.3em 0em 0em 0em;
    font-family: 'Montserrat', serif;
    font-size: 13px;
    color: #163B65;
    background-color: #A9D9D5;
    border-radius: 4px;
    border: none;
    padding: 0.4em 1.2em;
    text-align: center;
    display: inline-block;
    
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif;
    font-size: 14px;
   
}
.nivel{
     display: flex;
    justify-content: center;
    align-content: center;
    font-size: 13px;
    margin: 2em 0em 1em 1em;
    font-family: 'Montserrat', serif;
    font-size: 14px;
   
}
progress{
    display: flex;
    justify-content: center;
    width: 18em;
    height: 0.3em;
    margin: 0em 0em 0em 2.5em ;
    background-color: rgba(29, 101, 139, 0.17);
    border: 3px black;
    
    
}
.titulos{
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    margin-right: 0em;
    font-family: 'Montserrat', serif;
    font-size: 14px;
    text-align: center;
    line-height: 26px;
    
    

}
.titulo1{
    margin-left: 1em;
}
.titulo2{
    margin-right: 1em;
}
.titulo3{
    margin-right: 2em;
    
}
.ajustes{
    display: inline-block;
    margin: 2em 4em 0em 4em;
    background-color: #163B65;
    border: none;
    padding: 15px 32px;
    color: white;
    text-align: center;
    text-decoration: none;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
}
.ajustes a{
    padding: 0em 4.3em 0em 4.3em;
    color: white;
    font-family: 'Montserrat', serif;
}
.ajustes:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
#conectar{
     margin: 1em 0em 0em 4em;
    background-color: white;
    border: solid 1px #163B65;
    color: #1146d6;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', bold;
}
 #conectar:hover {
    background-color: #00AFA7;

     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    
}
#conectar a:hover{
    color:white;
    
} 
#conectar a{
    color:#163B65;
    
}  
.vistos {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #00AFA7;
    font-weight: bold;
    font-size: 1.3em;
    margin-top: 2em;
    
    
}
.insig {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #00AFA7;
    font-weight: 600;
    font-size: 1em;
    margin-left: 1em;
    margin-right: 1em;
    line-height: 25px;
    
    
}
#insignias img{
    width:auto;
    height: 105px;
    background: #F2F0F0;
    padding: 1em;
    
}
#insignias{
   margin-top: 2em;
    margin-bottom: 3em;
    text-align: center;
    
}

@media(min-width:1200px){
.perfil img{
    width: 150px;
    margin-top: 1em;
    margin-left: 0.3em;
}
.perfil h2{
    margin-top: 0.4em;
    margin-left: 0.8em;
    font-family: 'Montserrat', serif;
    color: #192643;
}
.perfil h3{
    margin: 1.7em 0em 0em 1em;
    font-family: 'Montserrat', serif;
    font-size: 15px;
    color: #163B65;
    background-color: #A9D9D5;
    border-radius: 4px;
    border: none;
    padding: 0.4em 1.2em;
    text-align: center;
    display: inline-block;
    
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
   
}
.nivel{
     display: flex;
    justify-content: center;
    align-content: center;
    font-size: 16px;
    margin: 2em 0em 1em 0em;
   
}
progress{
        position: relative;
    width: auto;
    height: 0.3em;
    margin: 0em 12em 0em 12em ;
    background-color: rgba(29, 101, 139, 0.17);
    border: 3px black;
     display: flex;
    justify-content: center;
    align-content: center;
    
    
}
    
    .insig {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #00AFA7;
    font-weight: 600;
    font-size: 1em;
    margin-left: 25em;
    margin-right: 25em;
    line-height: 25px;
    
    
}
    
.cantidades{
        margin-top: 1em;
    }
#librosterminados{
    padding-left:11em;
    
}
.titulo1{
    margin-left: 14em;
}
.titulo2{
    margin-right:  2em;
}
.titulo3{
    margin-right: 15em;
}
#botonesperfil{
        display: flex;
        justify-content: space-around;
        margin-top: 1em;
        
    }
    
    
  .ajustes{
    display: inline-block;
    margin: 0em 0em 0em 0em;
    background-color: #163B65;
    border: none;
    padding: 15px 32px;
    color: white;
    text-align: center;
    text-decoration: none;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
}
.ajustes a{
    padding: 0em 4.3em 0em 4.3em;
    color: white;
    font-family: 'Montserrat', serif;
}
.ajustes:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
#conectar{
     margin: 1em 0em 0em 2em;
    background-color: white;
    border: solid 1px #163B65;
    color: #1146d6;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', bold;
}
#conectar:hover {
    background-color: #00AFA7;

     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    
}
    #conectar a:hover{
    color:white;
    
}    
#conectar a{
    color:#163B65;
    
}    
    
    
    
    
#insignias{
     margin-bottom: 3em;
    margin-top: 2em;
      text-align: center;
    }
#insignias img{
    width:auto;
    height: 100px;
    background: #F2F0F0;
    padding: 1em;
    
    
}
    

}


/*PAG. INGRESO*/

.ingreso{
   background-color: #F2F0F0
    
}
.arriba{
    background-color:#F2F0F0;
    display: block;
 
}
img{
    width:100%;
}
#acumar{
     display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 2em;
}  
#acumar img{ 
    width: 6em;   
}
 #titulo p{
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 17px;
    font-family: 'Montserrat', serif;
    color: #777777;
    margin-bottom: 1.5em;
    text-align: center;
    
}
.datos{
    background-color:#F2F0F0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 0.3em;
    margin-left:  0.7em;
    margin-right:  0.7em;
    padding-bottom: 0em;
 
}
#ingreso h1{
    display: flex;
    justify-content: flex-start;
    font-family: 'Recoleta', serif;
    color: #192643;
    margin-bottom: 1em;
    }
#ingreso h3{
   font-size: 17px;
   margin-top: 1em;
   padding-left: 0.3em;
    margin-bottom: 0.2em;
   font-family: 'Montserrat', serif;
    color: #192643;
}
#ingreso p{
    padding-left: 2em;
    font-family: 'Montserrat', serif;
    color: #a3a3a3;
}
#ingreso label{
    font-family: 'Montserrat', serif;
    font-size: 14px;
}
.caja {
    border: solid black;
    font-size: 14px;
    background-color: #e2e7ea;
    margin: 0.2em;
    border-color: #b5dbfc;
    padding: 1em;
    border-radius: 4px;
}
.cajamensaje {
    border: solid black;
    font-size: 14px;
    background-color: #e2e7ea;
    margin: 0.2em;
    border-color: #b5dbfc;
    padding: 4em 5em;
    border-radius: 4px;
}
ul li a {
    list-style-type:none;
    text-decoration: none;
    font-family: 'Montserrat', serif;
    color: #a3a3a3;
    font-size: 14px;
    
}
.recordar{
    margin-top: 1.5em;
    margin-bottom: 2.5em;
    margin-right: 0.5em;
}
.recuperar {
    list-style-type:none;
    text-decoration: none;
    margin-bottom: 2em;
}
.recuperar a{
    list-style-type:none;
    display: flex;
    justify-content: center;
}
.accederr {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
}
.accederr:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.accederr a{
    color:white;
   font-size: 16px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
.opcion1 {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
     margin-top: 2em;
    margin-bottom: 3em;
    float: left;
    margin-right: 4px;
}
.opcion1:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
   
}
.opcion1 a{
    color:white;
   font-size: 12px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
.opcion2 {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-top: 2em;
     margin-bottom: 3em;
    float: left;
    margin-left: 4px;
}
.opcion2:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.opcion2 a{
    color:white;
   font-size: 12px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}

/*PAG. PRINCIPAL*/

*{
   margin:0;
   padding:0;
   border:0;
}

.bodyprincipal{
    background-color:#F2F0F0;
    
}
header{
    background-color:#00AFA7;
   display: block;
}
main{
    background-color:#F2F0F0;
    padding-top: 1em;
    padding-bottom: 1em;
 
}
.logo img{
	display: block;
    width: 5em;
	
}
.librodelasemana{
    display:flex;
    flex-direction: row;
    border:none;
    background-color:#A9D9D5;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    justify-content: center;
}
#librosemanal{
justify-content: flex-start;
    margin-left: 1em;
}
#librosemanal img{
width:auto;
height: 230px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #A9D9D5;
white-space: nowrap;
 }   
#librito{
display:none;
}

#texto{
margin: 1em;
  text-align: left;
  line-height: 28px;
    width:auto;
height: 160px;
padding: 5px;
background: #A9D9D5;
    }
#texto h3{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #00AFA7;
    font-weight:bold;
  font-size:1.5em;
    margin-bottom: 0.5em
       
 }
#texto h2{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
font-weight:bold;
  font-size:1.3em;     
 }
#texto p{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
font-weight:lighter;
  font-size:0.7em;     
 }


@media(min-width:1085px){

 #librosemanal{
display:none;
}
  
 #librito{
justify-content: flex-start;
    margin-left: 1em;
     display: block;
}
#librito img{
width:auto;
height: 350px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #A9D9D5;
white-space: nowrap;
 }    
   
 #texto{
margin: 1em;
  text-align: left;
  line-height: 45px;
    width:auto;
height: 300px;
padding: 5px;
background: #A9D9D5;
    }
#texto h3{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #00AFA7;
    font-weight:bold;
  font-size:2.5em;
    margin-bottom: 0.5em;
       
 }
#texto h2{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
font-weight:bold;
  font-size:2em;
    margin-top: 0.6em;
 }
#texto p{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
font-weight:lighter;
  font-size:1.2em; 
    margin-bottom: 2em;
 }
   
    
 }



.biblio {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size:10px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-top: 0.3em;
}
.biblio:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.biblio a{
    color:white;
   font-size:10px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
#libros{
margin: 1em;
  text-align: left;
  line-height: 28px;
    }
#libros h3{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
    font-weight:bold;
  font-size:1.3em;
    margin-bottom: 0.5em;
    margin-top: 1em;
       
 }
#libros h2{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #B5B3B3;
font-weight:bold;
  font-size:1em;     
 }

/*scroll top 5*/

.top5{
width:auto;
height: 290px;
overflow-y: hidden;
overflow-x: auto;
background: #F2F0F0;
white-space: nowrap;
   
}
.top5 img{
width:auto;
height: 260px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #F2F0F0;
white-space: nowrap;
}
.top {
margin: 1em 1em 1em 1em;
}
.top{
  border: 1px solid #F2F0F0;
  border-radius: 4px; 
  padding: 5px; 
  width: 150px;width
}
.top:hover {
  box-shadow: 0 0 6px 3px #00AFA7;
}

/*scroll normales*/

.scroll-contenedor{
width:auto;
height: 200px;
overflow-y: hidden;
overflow-x: auto;
background: #F2F0F0;
white-space: nowrap;
    margin: 1em;
    margin-top: 0em;
}
.scroll-contenedor img{
width:auto;
height: 200px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #F2F0F0;
white-space: nowrap;
}

/*scroll más grande*/

.scroll-contenedorr{
width:auto;
height: 260px;
overflow-y: hidden;
overflow-x: auto;
background: #F2F0F0;
white-space: nowrap;
    margin: 1em;
    margin-top: 0em;
}
.scroll-contenedorr img{
width:auto;
height: 260px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #F2F0F0;
white-space: nowrap;
}
.nocticiadeldia{
    display:flex;
    border:none;
    background-color:#F7DE98;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
#nocticiadeldia{
justify-content: center;
    margin-left: 1.3em;
    margin-top: 2em;
    margin-right: 1.3em;
     margin-bottom: 1em;
     text-align: center;
}
#nocticiadeldia img{
width:auto;
height: 255px;
overflow-y: hidden;
overflow-x: auto;
background: #F7DE98;
white-space: nowrap;

 }   
#escrito{
margin: 1em 1em 1em 1em;
  line-height: 28px;
    width:auto;
padding: 5px;
background: #F7DE98;
    justify-content: center;
    text-align: center;
    }
#escrito h3{
    font-family: 'Montserrat', sans-serif;
color: #038391;
    font-weight:bold;
  font-size:2.5em;
    margin-bottom: 0.5em;
    justify-content: center;
       
 }
#escrito h2{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:bold;
  font-size:1.3em; 
    justify-content: center;
 }
#escrito p{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:lighter;
  font-size:0.8em; 
    justify-content: center;
    margin-top: 0.5em;
 }
.completa {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-bottom: 2em;
}
.completa:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.completa a{
    color:white;
   font-size: 14px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}

/*NOTICIA DEL DÍA*/

.nocticiadeldiaaa{
    display:flex;
    border:none;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    justify-content: center;
    flex-direction: column;
    margin-left: 1em;
    margin-right: 1em;
    text-align: center;
}
#nocticiadeldiaaa{
justify-content: center;
    margin-top: 1em;
     margin-bottom: 1em;
     text-align: center;
}
#escritos{
margin: 3em 0em 1em 0em;
  line-height: 28px;
    width:auto;
    justify-content: center;
   
    }
#escritos h3{
    font-family: 'Montserrat', sans-serif;
color: #038391;
    font-weight:bold;
  font-size:2.6em;
    margin-bottom: 0.7em;
    justify-content: center;
       
 }
#escritos h2{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:bold;
  font-size:1.3em; 
    justify-content: center;
 }
#escritos p{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:lighter;
  font-size:1em; 
    justify-content: center;
    margin-top: 0.9em;
 }
#escritoss p{
    font-family: 'Montserrat', sans-serif;
color: #192643;
  font-size:1.2em; 
    justify-content: center;
    margin-top: 0.9em;
    line-height: 27px;
 }
.librosnoticia h3 {
		text-align: center;
		font-size: 19px;
    	margin-left: 1em;
         margin-right: 1em;
		margin-top: 2em;
        margin-bottom: 1em;
        color: #038391;
		font-weight: 700;
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: 12em;
         font-family: 'Montserrat', sans-serif;
         
         
       } 
.librosnoticia img {
		justify-content: center;
        transition: all .3s ease;
        margin-left: 1em;
        margin-right: 1em;
        width: 330px;
	}
.librosnoticia img:hover {
    border: solid #038391 5px;
}
.flip {background-color: transparent;
        perspective: 1000px;
        
    }
.flipcontenido { position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
        
    }
.flip:hover .flipcontenido {
    transform: rotateX(180deg);
}
.flipfrente, .flipdorso {
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;

}
.flipdorso {background-color: 

#038391;
      color:  #F2F0F0;
      transform: rotateX(180deg);
        padding: 5vw;
        position: absolute;
        top:0;
        text-align: left;
        overflow: auto;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
}


/*HEADER Y MENU*/

.contenedor {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0.5em;
}
header {
    position: sticky;
    top: 0;
    z-index: 5000;
}
header .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#logo {
    display: block;
    width: 3.5em;
}
#textlogo{
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right: 3em;
    padding-right:4em;}
header nav {
    color: white;
}
header nav a {
    color: #192643;
    padding: .5em 1em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
header nav .visible a {
    justify-content: flex-start;
    padding: 1em 0 1em 4em;
}
header nav a:hover {
    background-color: #04958e;
    color: white;
    box-shadow: 0 2px rgba(255, 255, 255, 0.2) inset, 0 -2px rgba(255, 255, 255, 0.2) inset;
}
#llamamenu {
    background-color: #049a93;
    color: white;
    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    display: flex;
    position: relative;
    z-index: 9999;
}
#llamamenu:hover {
    background-color: #028680;
}
#llamamenu i { 
    padding: 0;
    margin: auto;
}
header nav ul {
    background-color: #00AFA7;
    position: fixed;
    left: 30%;
    right: 0;
    top: -100%;
    height: 100vh;
    z-index: 9990;
    padding-top: 5em;
    transition: all .5s ease;
}
.visible {
    background-color: rgba(226, 171, 15, 0.97);
    top: 0em;
    transition: all .25s ease;
    height: 460px;
    border-radius: 0px 0px 0px 23px;
   
}
.paraLinks {
    height: 5em;
    width: 100%;
}


/*RESPONSIVE HEADER  */

@media(min-width: 360px) {
    
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:60px;
    }
    

}
@media (min-width: 400px) {
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:105px;
    }
}
@media (min-width: 430px){
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:105px;
    }
}
@media (min-width: 500px) {
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:200px;}
}
@media (min-width: 600px) {
     #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:300px;}
}
/*equivale a 640px */
@media (min-width: 40em) {
    
    #logo {
    display: block;
    }
    
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right: 10px;
    margin-left: 0.2em;
    }
    
    #llamamenu {
        display: none;
    }
    header nav ul {
        display: flex;
        flex-wrap: wrap;
        position: unset;
        height: auto;
        padding-top: 0;
    }

    header nav ul.visible {
        background-color: rgba(0,0,0,.35);
    }

    header nav .visible a {
        justify-content: center;padding: .5em 1em;
    }
}
@media (min-width: 812px){
  #logo {
    display: block;
   
    }
    
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-left: 0.2em;
    margin-right:40px;
    }
    }
@media (min-width: 930px){
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-left: 0.2em;
    margin-right:40px;
    }
    }
@media (min-width: 950px){
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-left: 0.2em;
    margin-right:45px;
    }
    }
@media (min-width:1100px){
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-left: 0.2em;
    margin-right:110px;
    }
    }
@media (min-width: 1200px) {
    #logo {
        display: block;
        
    }
     #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:210px;}
}
@media (min-width: 1300px) {
    #logo {
        display: block;
        
    }
     #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:300px;}
}
@media (min-width: 1400px) {
     #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:400px;}
}
@media (min-width: 1500px) {
    #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:460px;}
}
@media (min-width: 1600px) {
    #logo {
        display: block;
        } 
        
     #textlogo{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    color:white;
    margin-right:460px;}
}


/*EXPLORAR*/
*{
   margin:0;
   padding:0;
   border:0;
}
.bodyprincipal{
    background-color:#F2F0F0;
    
}
header{
    background-color:#00AFA7;
   display: block;
}
{
       background-color:#F2F0F0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
 
}
.logo img{
	display: block;
    width: 5em;
	
}
#bienvenida{
margin: 1em;
  text-align: center;
  line-height: 28px;
    margin-top: 3em;
    }
#bienvenida h3{
    font-family: 'Recoleta', serif;
text-align: center;
color: #00AFA7;
    font-weight:bold;
  font-size:2.5em;
    margin-bottom: 1em
       
 }
#bienvenida h2{
    font-family: 'Recoleta', serif;
text-align: center;
color: #192643;
line-height: 33px;
font-weight:bold;
  font-size:1.7em;     
 }
#libross{
margin: 1em;
  text-align: center;
  line-height: 28px;
    }
#libross h3{
    font-family: 'Montserrat', sans-serif;
text-align: center;
color: #192643;
    font-weight:bold;
  font-size:1.3em;
    margin-bottom: 0.5em;
    margin-top: 2em;
       
 }
.buscador {
  margin: 1em;
  display: flex;
      background-color:#F2F0F0;
    display: flex;
    justify-content: center;

    align-items: center;
    text-align: center;
 
}
.buscador input {
  width: 21em;
  padding: 0.5em;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  color: #272E62;
  border-color: #00AFA7;
  border-style: solid;
  border-radius: 10px;
}
.buscador .search {
  background: #00AFA7;
  color: #272E62;
  padding: 0.5em;
  border-radius: 10px;
  margin-left: 0.5em;
}
.search img { 
  height: 1.5em;
  width: auto;
  text-align: center; 
}
#busquedas nav ul {
    display: flex;
    align-items: center;
     flex-direction: column;
}
#busquedas nav ul li{
    display: flex;
    justify-content: space-between;
    list-style-type:none;
    text-decoration: none;
    margin-top: 1.5em;
    
}
#busquedas nav ul li a {
    list-style-type:none;
    text-decoration: none;
    padding: 0.6em;
    color:#00AFA7;
    background-color: #B2E1DC;
    font-size: 1em;
    width: 20em;
    text-align: center;
    font-weight:bold;
    border-radius:30px 30px;
        
}
.busqueda:hover {
  box-shadow: 0 0 6px 3px #00AFA7;
    border-radius:30px 30px;
        box-sizing: content-box;
    
}
.todosg {
display: block;
    justify-content: center;

    align-items: center;
    text-align: center;
    
}
.todosg img{
width:auto;
height: 140px;
background: #F2F0F0;
padding: 0.5em;
    margin: 1em;
    
}
.generos:hover {
  box-shadow: 0 0 6px 3px #E2AB0F;
    box-sizing:border-box;
    border-radius: 80px 80px 80px 80px;
}

@media (min-width: 1300px) {
#busquedas nav{
    display:block;
    
    }
#busquedas nav ul {
    justify-content:center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items:stretch;
   
}
#busquedas li{ 
     display: inline-block;
     margin-right: 0.3em;
    }
#busquedas na ul li a{
    color:#00AFA7;
    background-color: #B2E1DC;
    font-size: 1em;
    width: 50em;
    text-align: center;
    font-weight:bold;
    border-radius:30px 30px;
    display: flex;
    justify-content: center;
    align-items: center;;
        
}
}
@media (min-width: 1500px) {
#busquedas nav{
    display:flex;
    
    }
#busquedas nav ul {
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: ;
   
}
#busquedas li{ 
     display: inline-block;
    
     margin:0.5em;

}
#busquedas na ul li a{
    color:#00AFA7;
    background-color: #B2E1DC;
    font-size: 1em;
    width: 50em;
    text-align: center;
    font-weight:bold;
    border-radius:30px 30px;
    display: flex;
    justify-content: center;
    align-items: center;;
        
}
}

/*COMENTARIOS*/

#contactt {
    text-align: center;
    }


#contactt h1{
    font-family: 'Recoleta', serif;
    color: #192643;
    margin-bottom: 0.5em;
    margin-top: 1em;
    font-size: 40px;
    text-align: center;
    }
.opiniones {
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
    font-size: 20px;
     font-family: 'Recoleta', serif;
    color: #192643;
    margin-left: 3em;
    margin-right: 3em;
}
#contactt h3{
   font-size: 17px;
   margin-top: 1.5em;
   padding-left: 0.3em;
    margin-bottom: 0.2em;
   font-family: 'Montserrat', serif;
    color: #192643;
}
#contactt p{
    padding-left: 2em;
    font-family: 'Montserrat', serif;
    color: #a3a3a3;
}
.caja {
    border: solid black;
    font-size: 14px;
    background-color: #e2e7ea;
    margin: 0.2em;
    border-color: #b5dbfc;
    padding: 1em;
    border-radius: 4px;
}
.enviar {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-top: 1.3em;
    margin-bottom: 2em;
}
.enviar:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.enviar a{
    color:white;
   font-size: 16px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}



.comentarios{
    display:flex;
    border:none;
    background-color:#cff0ee;
    padding-top: 1.2em;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    margin-bottom: 1em;
    
}
  
#comment{
    width:auto;
padding: 3px;
background: #cff0ee;
    justify-content: center;
    text-align: center;
    margin-left: 1em;
    margin-right: 1em;
    
    }
#comment h3{
    font-family: 'Montserrat', sans-serif;
color: #038391;
    font-weight:bold;
  font-size:1.7em;
    justify-content: center;
       
 }
#comment h2{
    font-family: 'Montserrat', sans-serif;
color: #192643;
  font-size:1em; 
    justify-content: center;
 }
#comment p{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:lighter;
  font-size:0.7em; 
    justify-content: center;
 }




/*PAG. GÉNERO*/

*{
   margin:0;
   padding:0;
   border:0;
}

.bodyprincipal{
    background-color:#F2F0F0;
    
}
header{
    background-color:#00AFA7;
   display: block;
}
main{
    background-color:#F2F0F0;
    padding-top: 1em;
    padding-bottom: 1em;
 
}
.logo img{
	display: block;
    width: 5em;
	
}
#atras{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 2em;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
}
#atras h2{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #00AFA7;
  font-size:1.1em;
    text-decoration: underline;

}
.back{
    width:5%;
}
.librosgenero{
    display:flex;
    flex-direction: row;
    border:none;
    background-color:#cff0ee;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    justify-content: center;
}
#generolibro{
justify-content: flex-start;
    margin-left: 1em;
}
#generolibro img{
width:auto;
height: 230px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #cff0ee;
white-space: nowrap;
 }  
#generolibro img:hover {
    background-color:white;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    border-radius: 20px 20px 20px 20px;
    
}
#write{
margin: 1em;
  text-align: left;
  line-height: 22px;
    width:auto;
height: 160px;
padding: 5px;
background: #cff0ee;
    }
#write h2{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
font-weight:bold;
  font-size:1.1em; 
    margin-bottom: 0.7em;
 }
#write p{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
font-weight:lighter;
  font-size:0.7em;
     margin-bottom: 1.6em;
 }
.biblio {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size:10px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-top: 0.3em;
}
.biblio:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.biblio a{
    color:white;
   font-size:10px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}

@media (min-width: 1085px) {
    #atras{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
    margin-top: 1em;
    margin-left: 32em;
    margin-right: 32em;
}
#atras h2{
    font-family: 'Montserrat', sans-serif;
text-align: center;
color: #00AFA7;
  font-size:1.1em;
    text-decoration: underline;

}
    .back img{
    width:100%;
}
}




/*BIBLIOTECA*/
.bienvenido{
  margin-left: 1em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  text-align: left;
  line-height: 28px;
font-family: 'Recoleta', serif;
text-align: left;
   color: #00AFA7;
  font-size: 17px;
    display: flex;
    justify-content: center;
}
.libro{
    width: 40%;
    margin-left: 2em;
    margin-top: 3em;
    margin-bottom: 1em;
}
.playdelete{
    width:15%;
    margin-top: 0.5em;
    margin-left: 4.5em;
    margin-bottom: 2em;
    display:flex;
    align-items: center;
    justify-content: center;
}
.buscadorr {
  margin: 1em;
  display: flex;
    justify-content: center;
}
.buscadorr input {
  width: 40em;
  padding: 0.5em;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  color: #272E62;
  border-color: #00AFA7;
  border-style: solid;
  border-radius: 10px;
}
.buscadorr .search {
  background: #00AFA7;
  color: #272E62;
  padding: 0.5em;
  border-radius: 10px;
  margin-left: 0.5em;
}
.search img { 
  height: 1.5em;
  width: auto;
  text-align: center; 
}

@media(min-width: 498px) {
  .libro{
    width:25%;
    margin-left: 3em;
    margin-top: 3em1
    margin-bottom: 1em;
    }
.playdelete{
    width:10%;
    margin-top: 0.5em;
    margin-left: 5.4em;
    margin-bottom: 2em;
    display:flex;
    align-items:center;
    justify-content:center;
}
    
    }
@media(min-width:1100px) {
  .libro{
    width:15%;
    margin-left: 3em;
    margin-top: 3em1
    margin-bottom: 1em;
    }
.playdelete{
    width:5%;
    margin-top: 0.5em;
    margin-left: 7em;
    margin-bottom: 2em;
    display:flex;
    align-items:center;
}
    
    }




/*LIBRO EJEMPLO*/

.PrimeraParte{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    justify-items: center
    border:none;
    background-color:#A9D9D5;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#carouselExampleIndicators{
    width: 80%;
    margin-left: 5em;
}
.carousel-control-prev-icon{
    background-color: #038391;
}

@media(min-width:1100px){
    #carouselExampleIndicators{
    width: 20%;
    margin-left: 31.5em;
}
    #Botones img{
        width:30%;
    }
    .CambioIzquierdo{
        margin-left: 5em;}
    .CambioDerecho{
        width:80%;
        margin-right: 10em;
    }
   
}
@media(min-width:638px){
    #FotoLibro{
    width: 30%;
        
}
}
@media(min-width:1004px){
    #FotoLibro{
    width: 20%;
    }
    #Botones img{
        width: 50%;
    }
   
}

#Botones{
    width: 25%;
    display:flex;
    flex-direction: row;
    align-items: center;
    align-content: flex-start;
    margin: 0.5em;
}
.CambioIzquierdo{
    width: 45%;
    display:flex;
}
.Corazon{
    display:flex;
    padding-bottom: 20em;
    width: 30%;
}
.SegundaParte{

  text-align: left;
  line-height: 28px;
  display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
     font-family: 'Montserrat', sans-serif;
    
}

@media(min-width:1100px){
    .SegundaParte{
  text-align: left;
  line-height: 28px;
   display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
    }
    .puntuacion{
    margin-left: 0.6em;
    margin-right: 0.6em;
     display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
        
  }

.puntuacion img{
        width: 40%;
    }
    .CuartaParte{
        margin-left: 3.4em;
        margin-right: 17em;
    }
    .duracion{
        margin-left: 3.4em;
    }
    
    
    .textito{
      margin-top: 1em;
    margin-bottom: 0;
    color:#163B65;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size:1.5em;
    line-height: 25px;
        margin-left: 22em;
        margin-right: 22em;
    
}
    
    
}

.SegundaParte h2{
    font-family: 'Montserrat', sans-serif;
text-align: center;
color: #192643;
  font-size:2em;
    margin-bottom: 0.5em;
    margin-top: 1em;
    font-weight:bold;
 }
.SegundaParte h3{
font-family: 'Montserrat', sans-serif;
text-align: center;
color: #B5B3B3;
font-weight:bold;
font-size:1.5em;         
 }
.escuchar {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-top: 1.3em;
    margin-bottom: 2em;

    
}
.escuchar:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.escuchar a{
    color:white;
   font-size: 16px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
.puntuacion{
    margin-left: 0.6em;
    margin-right: 0.6em;
     display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
.CuartaParte{
margin-left: 3em;
    margin-right: 3em;
  text-align: left;
  line-height: 28px;
  display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.CuartaParte h3{
    margin-bottom: 0;
    margin-top: 0.4em;
    color:#163B65;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    font-size: 1.3em;
    font-weight:bold;
}
#more {display: none;}
.textito{
      margin-top: 1em;
    margin-bottom: 0;
    color:#163B65;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size:1em;
    line-height: 23px;
    
}
.leermas{
    margin-top: 0.7em;
    margin-bottom: 1.5em;
    color:#E2AB0F;
    font-family: 'Montserrat', sans-serif, bold;
    text-align: left;
    font-size: 1em;
    font-weight: 600;
    
}
.dropbtn {
  background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-top: 1.3em;
    margin-bottom: 2em;
    font-family: 'Montserrat', sans-serif;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
#myInput {
  box-sizing: border-box;
  background-position: 14px 14px 14px 14px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 14px 14px 14px;
  border: none;
  border-bottom: 1px solid #ddd;
    font-family: 'Montserrat', sans-serif;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
  position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.dropdown-content {
  display: none;
  background-color: #f6f6f6;
  min-width: 14px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
    
}
.dropdown-content a {
  color: black;
  padding: 14px 14px 14px 14px;
  text-decoration: none;
  display: block;
    font-family: 'Montserrat', sans-serif;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
ul{
    list-style-type:none;
}



/*REPRODUCCION*/


#tituloreproduccion{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}
#tituloreproduccion h2{
    font-family: 'Montserrat', sans-serif;
text-align: left;
color: #192643;
  font-size:1.3em;
}
.botonesreproduccion{
    width:5%;
}
.compartir{
    width: 200%;
    display: flex;
}
.libror{
    width: 50%;
    margin-left: 5.5em;
    margin-right: 5.5em;
    margin-top: 1em;    
}
#botoneslibro1{
    width: 40%;
    margin-left: 4.3em;
    margin-top: 1em;
    
     display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}
#botoneslibro1 img{
        width: 70%;
        margin-left:3em;
    
     display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    } 
#elaudiocuento{
  display: flex;
    align-items: center;
    margin-top: 2em;
     margin-left: 2em;
    margin-right: 2em;
}


@media(min-width:1085px){
    #tituloreproduccion{
        width: 40%;
        display: flex;
        justify-items: center;
        margin-left: 25em;
    }
    .libror{
        width: 18%;
        margin-left: 35em;
    }
    #botoneslibro1 {
        width: 15%;
        margin-left: 33em;
         margin-top: 1em;
    
     display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    }
  #botoneslibro1 img{
        width: 50%;
        margin-left: 5em;
         margin-top: 1em;
    
     display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    }  
    
    #elaudiocuento{
    width: 50%;
    margin-top: 3em;
        margin-left: 20em;
 display: block;
    display: flex;
    justify-content:center;
        justify-items: center;
}

    }


/*VIDEO YOUTUBE*/

.video {
  width: 95%;
  height: 200px;
  margin: auto;
  display: block;
  border: none;
    margin-top: 4em;
}

.video-popup {
  display: none;
  width: 100%;
  height: 100vh;
  margin: auto;
  position: absolute;
  top: 0;
    
}
.popup-bg {
  width: 100%;
  height: 100vh;
  position: absolute;
}
.popup-content {
  background: #E2AB0F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: auto;
}
.popup-btn {
   background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5em;
      margin-bottom: 2em;
    margin-top: 2em;
}
.close-btn {
   background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 7.7em;
    margin-bottom: 4em;
    margin-top: 1em;
}
.popup-btn, .close-btn:hover {
 background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.popup-btn, .close-btn a{
    color:white;
   font-size: 16px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}

@media(min-width:1085px){

.video {
  width: 100%;
  height: 400px;
  margin: auto;
  display: block;
  border: none;
    margin-top: 4em;
}
    .video-popup {
  display: none;
  width: 100%;
  height: 100vh;
  margin: auto;
  position: absolute;
  top: 0;
    
}
.popup-btn{
   background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
     margin-left: 37em;
    margin-bottom: 2em;
    margin-top: 2em;
}
 .close-btn {
   background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 21em;
    margin-bottom: 3em;
    margin-top: 1em;
}   
    
.popup-btn, .close-btn:hover {
 background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.popup-btn, .close-btn a{
    color:white;
   font-size: 16px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
    
.popup-content {
  background:  #E2AB0F;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: auto;
}

}



/*CONTACTO*/

.allobjects{
    background-color:#F2F0F0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 0.3em;
    margin-left:  0.7em;
    margin-right:  0.7em;
    padding-bottom: 0em;
    text-align: center;
 
}
.bannerr img{
    width: 100%;
    }
#contactt h1{
    font-family: 'Recoleta', serif;
    color: #192643;
    margin-bottom: 0.5em;
    margin-top: 1em;
    font-size: 40px;
    }
.opiniones {
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
    font-size: 20px;
     font-family: 'Recoleta', serif;
    color: #192643;
    margin-left: 3em;
    margin-right: 3em;
}
#contactt h3{
   font-size: 17px;
   margin-top: 1.5em;
   padding-left: 0.3em;
    margin-bottom: 0.2em;
   font-family: 'Montserrat', serif;
    color: #192643;
}
#contactt p{
    padding-left: 2em;
    font-family: 'Montserrat', serif;
    color: #a3a3a3;
}
.caja {
    border: solid black;
    font-size: 14px;
    background-color: #e2e7ea;
    margin: 0.2em;
    border-color: #b5dbfc;
    padding: 1em;
    border-radius: 4px;
}
.enviar {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-top: 1.3em;
    margin-bottom: 2em;
}
.enviar:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.enviar a{
    color:white;
   font-size: 16px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
.dondeestamos h1{
    margin-bottom: 0.6em;
    display: flex;
    justify-content: center;
    font-size: 20px;
     font-family: 'Recoleta', serif;
    color: #192643;
}
#vias h1{
    margin-bottom: 0.3em;
    display: flex;
    justify-content: center;
    font-size: 20px;
     font-family: 'Recoleta', serif;
    color: #192643;
}
.correo {
    margin-bottom: 0.5em;
    display: flex;
    justify-content: center;
    font-size: 14px;
     font-family: 'Recoleta', serif;
    color: #192643;
}
.dondeestamos{
    margin-top: 1.5em;
    padding: 2em 1.9em ;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items:  center;
    text-align: center;
    margin-bottom: 3em;
    background-color:#cff0ee ;
}
.mapaacumar {
    display: flex;
    justify-content: center;
    border-radius: 30px;
    overflow-y: hidden;
    overflow-x: auto;
    background: #cff0ee;
    white-space: nowrap;
    width: auto;
    height: 300px;
}
.redes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
   }
.redes ul{
    display: flex;
    align-items: center;
    margin-left: 20px;
    list-style: none;
}
.red a{
    background-color: transparent;
}
.redes div ul li{
    list-style: none;
    padding-left: 10px;
    padding-right: 30px;
    
}
.tutorial i{
    font-size:36px;
    color:#00AFA7;
    margin-top:0em;
    margin-right: 0.3em;
    margin-bottom:0em;
}
.facebookcontacto i{
    font-size:36px;
    color:#00AFA7;
    margin-top:0em;
    margin-right: 0.3em;
    margin-bottom:0em;
}
 .twitter i {
    font-size:36px;
    color:#00AFA7;
    margin-top:0em;
    margin-right: 0.3em;
    margin-bottom:0em;}
.instagram i{
    font-size:36px;
    color:#00AFA7;
   margin-top:0m;
   margin-right: 0.3em;
    margin-bottom:0em;
}

@media(min-width:460px){
.dondeestamos{
    padding: 2em 5em ;
    
}
}
@media(min-width:560px){
.dondeestamos{
    padding: 2em 9em ;
    }
}
@media(min-width:660px){
.dondeestamos{
    padding: 2em 12em ;
    
    }}
@media(min-width:760px){
.dondeestamos{
    padding: 2em 15em ;
    
    }}
@media(min-width:860px){
.dondeestamos{
        padding: 2em 18em ;
    }

}
@media(min-width:960px){
.dondeestamos{
    padding: 2em 21em ;}
    
}
@media(min-width:1060px){
.dondeestamos{
    padding: 2em 24em ;}
    }
@media(min-width:1160px){
.dondeestamos{
    padding: 2em 28em ;}
    }
@media(min-width:1260px){
.dondeestamos{
    padding: 2em 29em ;}
    }
@media(min-width:1360px){
.dondeestamos{
    margin-top: 1.5em;
    padding: 2em 33em ;
    display: flex;
    justify-content:space-between;
    flex-direction: column;
    align-items:  center;
    text-align: center;
    margin-bottom: 3em;
    background-color:#cff0ee ;}
}
@media(min-width:1460px){
.dondeestamos{
    margin-top: 1.5em;
    padding: 2em 35.1em ;
    display: flex;
    justify-content:space-between;
    flex-direction: column;
    align-items:  center;
    text-align: center;
    margin-bottom: 3em;
    background-color:#cff0ee ;}
.mapaacumar {
    display: flex;
    justify-content: center;
    border-radius: 30px;
    overflow-y: hidden;
    overflow-x: auto;
    background: #cff0ee;
    white-space: nowrap;
    width: auto;
    height: 300px;
}
}
@media(min-width:1560px){
.dondeestamos{
    margin-top: 1.5em;
    padding: 2em 38.5em ;
    display: flex;
    justify-content:space-between;
    flex-direction: column;
    align-items:  center;
    text-align: center;
    margin-bottom: 3em;
    background-color:#cff0ee ;
}
.dondeestamos h1{
        font-size: 25px;
    margin-bottom: 1em;
        
    }  
.mapaacumar {
    display: flex;
    justify-content: center;
    border-radius: 30px;
    overflow-y: hidden;
    overflow-x: auto;
    background: #cff0ee;
    white-space: nowrap;
    width: auto;
    height: 300px;
}}
@media(min-width:1660px){
.dondeestamos{
    padding: 2em 41.2em ;}
    }

/*ACTIVIDADES*/

*{
   margin:0;
   padding:0;
   border:0;
}

.bodyprincipal{
    background-color:#F2F0F0;
    
}
header{
    background-color:#00AFA7;
   display: block;
}
main{
    background-color:#F2F0F0;
    padding-top: 1em;
    padding-bottom: 1em;
 
}
.logo img{
	display: block;
    width: 5em;
	
}
.acti{
    display:flex;
    border:none;
    background-color:#cff0ee;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-bottom: 2em;
    
}
#activia{
justify-content: center;
    margin-left: 1.3em;
    margin-top: 2em;
    margin-right: 1.3em;
     margin-bottom: 1em;
     text-align: center;
}
#activia img{
width:auto;
height: 255px;
overflow-y: hidden;
overflow-x: auto;
background: #cff0ee;
white-space: nowrap;

 }   
#escritou{
margin: 1em 1em 1em 1em;
  line-height: 28px;
    width:auto;
padding: 5px;
background: #cff0ee;
    justify-content: center;
    text-align: center;
    }
#escritou h3{
    font-family: 'Montserrat', sans-serif;
color: #038391;
    font-weight:bold;
  font-size:2.1em;
    margin-bottom: 0.5em;
    justify-content: center;
       
 }
#escritou h2{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:bold;
  font-size:1.2em; 
    justify-content: center;
 }
#escritou p{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:lighter;
  font-size:0.8em; 
    justify-content: center;
    margin-top: 0.5em;
 }
.completa {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-bottom: 2em;
}
.completa:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.completa a{
    color:white;
   font-size: 14px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
.nocticiadeldia{
    display:flex;
    border:none;
    background-color:#F7DE98;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
#nocticiadeldia{
justify-content: center;
    margin-left: 1.3em;
    margin-top: 2em;
    margin-right: 1.3em;
     margin-bottom: 1em;
     text-align: center;
}
#nocticiadeldia img{
width:auto;
height: 255px;
overflow-y: hidden;
overflow-x: auto;
background: #F7DE98;
white-space: nowrap;

 }   
#escrito{
margin: 1em 1em 1em 1em;
  line-height: 28px;
    width:auto;
padding: 5px;
background: #F7DE98;
    justify-content: center;
    text-align: center;
    }
#escrito h3{
    font-family: 'Montserrat', sans-serif;
color: #038391;
    font-weight:bold;
  font-size:2.5em;
    justify-content: center;
       
 }
.completa {
    background-color: #163B65;
    border: none;
    color: white;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
     -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 4px;
    font-family: 'Montserrat', serif bold;
    margin-bottom: 2em;
}
.completa:hover {
    background-color: #00AFA7;
    color: #ffffff;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.completa a{
    color:white;
   font-size: 14px;
      font-family: 'Montserrat', serif;
    color: #fdfdfd;  
}
.vis {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #00AFA7;
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 1em;
    margin-top: 2em;
    
    
}

@media(min-width:1400px){
.otras{
    display: flex;
    justify-content: space-between;
    margin: 1em 3em;
    
   } 
.acti1,.acti2,.acti3{
    padding: 0.5em 1.3em;
    margin-top: 1em;
     margin-bottom: 2em;
    
}  
}
@media(min-width:1500px){
.otras{
    display: flex;
    justify-content: space-between;
    margin: 1em 3em;
    
   } 
.acti1,.acti2,.acti3{
    padding: 0.5em 2em;
    margin-top: 1em;
     margin-bottom: 2em;
    
}  
}
@media(min-width:1600px){
.otras{
    display: flex;
    justify-content: space-between;
    margin: 1em 3em;
    
   } 
.acti1,.acti2,.acti3{
    padding: 0.5em 3em;
    margin-top: 1em;
     margin-bottom: 2em;
    
}  
}


/*ACTIVIDAD JUNIO*/

*{
   margin:0;
   padding:0;
   border:0;
}

.bodyprincipal{
    background-color:#F2F0F0;
    
}
header{
    background-color:#00AFA7;
   display: block;
}
main{
    background-color:#F2F0F0;
    padding-top: 1em;
    padding-bottom: 1em;
 
}
.logo img{
	display: block;
    width: 5em;
	
}
.acti{
    display:flex;
    border:none;
    background-color:#cff0ee;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 2em;
}
#activia{
justify-content: center;
    margin-left: 1.3em;
    margin-top: 2em;
    margin-right: 1.3em;
     margin-bottom: 1em;
     text-align: center;
}
#activia img{
width:auto;
height: 255px;
overflow-y: hidden;
overflow-x: auto;
background: #cff0ee;
white-space: nowrap;

 }   
#escritouu{
margin: 1em 2em 1em 2em;
  line-height: 23px;
    width:auto;
padding: 5px;
background: #cff0ee;
    justify-content: center;
    text-align: center;
    }
#escritouu h3{
    font-family: 'Montserrat', sans-serif;
color: #038391;
    font-weight:bold;
  font-size:2.1em;
    margin-bottom: 0.5em;
    justify-content: center;
    margin-bottom: 1.3em;
       
 }
#escritouu h2{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:bold;
  font-size:1.2em; 
    justify-content: center;
    margin-bottom: 1em;
    margin-top: 1em;
 }
#escritouu p{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:lighter;
  font-size:0.8em; 
    justify-content: center;
    margin-top: 0.5em;
 }



/*scroll actividades*/

.scrolea{
width:auto;
height: 260px;
overflow-y: hidden;
overflow-x: auto;
background: #F2F0F0;
white-space: nowrap;
    margin: 1em;
    margin-top: 0em;
}
.scrolea img{
width:auto;
height: 260px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #F2F0F0;
white-space: nowrap;
}
.scrolea img:hover {
    background-color:#E2AB0F;;
    color: #ffffff;
   
    border-radius: 50px 50px 50px 50px;
    
}

@media(min-width:1085px){
#escritouu{
margin: 1em 18em 1em 18em;
  line-height: 23px;
    width:auto;
padding: 5px;
background: #cff0ee;
    justify-content: center;
    text-align: center;
    }
#escritouu h3{
    font-family: 'Montserrat', sans-serif;
color: #038391;
    font-weight:bold;
  font-size:2.1em;
    margin-bottom: 0.5em;
    justify-content: center;
    margin-bottom: 1.3em;
       
 }
#escritouu h2{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:bold;
  font-size:1.2em; 
    justify-content: center;
    margin-bottom: 1em;
    margin-top: 1em;
 }
#escritouu p{
    font-family: 'Montserrat', sans-serif;
color: #192643;
font-weight:lighter;
  font-size:0.8em; 
    justify-content: center;
    margin-top: 0.5em;
 }

 .scrolea{
width:auto;
height: 260px;
overflow-y: hidden;
overflow-x: auto;
background: #F2F0F0;
white-space: nowrap;
    margin: 1em;
    margin-top: 0em;
     justify-content: center;
     display: flex;
}
.scrolea img{
width:auto;
height: 260px;
overflow-y: hidden;
overflow-x: auto;
padding: 5px;
background: #F2F0F0;
white-space: nowrap;
}   
    
    
}



/*FOOTER*/

footer {
    background-color: #E2AB0F;   
}

footer p{
    background-color: #E2AB0F;
     font-family: 'Montserrat', sans-serif;
    padding: 1.5em;
    font-size: 10px;
    color: white;
    line-height: 14px;
}
.subir {
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding-top: 1em;
     font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    font-size: 20px;

}

.subir:hover {
    text-decoration: underline;   
}