@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

a{
	text-decoration: none;
    color: black;
}

img{
    width: 100%;
    height: 100%;
}


/* Mobile First */

/* Página Principal */

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 50px;
    background-color: rgba(255, 255, 255, 0.4); ;
    border-radius: 20px;
    color: white;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    margin-top: 5px;
    margin-bottom: auto;   
}

.material-icons-text {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size:20px;
    margin-right: 0.5em;
    color: white;
}

.material-icons-categorias{
	font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size:30px;
}

body{
    font-family: 'Roboto', sans-serif;
    background-color: rgb(255, 231, 124);
}

main {
    margin-top: 60px;
}

#barramenu{
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 2.2em;
    padding-right: 2.2em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    background-color:rgb(245, 177, 76);
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
    top:0;
}

#barramenu a i:hover{
	cursor: pointer;
	color: #f1b97a;
	
}

#logo {
    width: 10em;
    border-radius: 5px;
    margin-top: auto;
    margin-bottom: auto;
	object-fit:fill;
}


header h1{
    text-transform: capitalize;
    font-weight: 500;
    text-align: center;
}

/*  Menu */
header nav a {
    color: grey;
    margin: 10px;
    background-color: rgba(255, 231, 124,0.4);
    border-radius: 1em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    
}

header nav .visible a {
    justify-content:center;
}

header nav a:hover {
    color: #6b6a64;
    text-decoration: underline;
}

/* LLama menu */
#botonmenu {
    background-color: rgba(255, 255, 255, 0.4); 
    border-radius: 30px;
    color: white;
    cursor: pointer;
    height: 0em;
    width: 0em;
    display: flex;
    position: relative;
    z-index: 9998;
}


header nav ul {
    background-color: #F9F9F9;
    position: fixed;
    left: 0;
    right: 0;
    top: -100%;
    height: 100vh;
    transition: all .5s ease;
}


.visible {
    background-color: whitesmoke;
    border-radius: 20px;
    top: 60px;
    transition: all .25s ease;
}


#menu button{
    width: 30px;
    background-repeat: no-repeat;
    background-position: center;
}


#menu nav{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu li{
    list-style-type: none;
    font-size: 20px;
}

#menuresponsive {
    display: none;
}

/* Slider */

/* Slideshow containebr */

.slideshow-container{
    max-width: 1000px;
    position:relative;
    margin:auto;
   }

.mySlides{
    display:none;
}

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

.next{
    right:0;
    border-radius:3px 0 0 3px;
}

.prev:hover, .next:hover{
    background-color:rgba(0,0,0,0.8);
}

.text{
    color:#f2f2f2;
    font-size:15px;
    padding:8px 12px;
    position:absolute;
    bottom:8px;
    width:100%;
    text-align:center;
}
   
.numbertext{
    color:#f2f2f2;
    font-size:12px;
    padding:8px 12px;
    position:absolute;
    top:0;
}

.fade{
    -webkit-animation-name:fade;
    -webkit-animation-duration:1.5s;
    animation-name:fade;
    animation-duration:1.5s;
}
   
@-webkit-keyframes fade{
    from{opacity:.4}
    to{opacity:1}
}
   
@keyframes fade{
    from{opacity:.4}
    to{opacity:1}
}

/* fin slider noticias  */

/* Grupos */
#grupos {
    margin-left: 0.5em;
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    overflow-x: scroll; 
}


#grupos .gruposunidos {
    width: 100%;
    height: auto;
    padding: 1em;
    flex-direction: column;
    text-align: left;
    background-color: #c5c497; 
    border-radius: 1em; 
    margin-right: 2em; 
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
} 

.gruposunidos p{
    font-size: 0.8em;
    margin: 0.5em 0 0.5em 0;
}

.gruposunidos h4{
    color: black;
    font-size: 1em;
    margin: 0.5em 0 0.5em 0.1em;
}

main .gruposunidos figure{
    width: 15em;
    height: 10em;
}

main .gruposunidos img{
    width: 100%;
    border-radius: 0.5em; 
}

/* Mis libros*/
#ml #librospp {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}

#ml #librospp .mislibros {
    margin: 0em 0.5em 1em 1em;
    font-size: 0.8em;
    font-weight: 600;
    background-color: #c5c497; 
    border-radius: 1em; 
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136)
}

#librospp .mislibros figure{
    width: 12em;
    height: 18em;
    margin: 0.5em;
    
}

#librospp .mislibros figure img{
    width: 100%;
    border-radius:1em;
}

#librospp .mislibros h5{
    font-size: 12px;
    margin: 0.3em 0.3em;
    font-weight: bold; 
    text-align: center; 
    color: black;
}

h2{
    color: black;
    font-size: 17px; 
    font-weight: bold;
    margin: 2em 1em 1em 1em;
}

/*Actividades*/
#botondiscover{
    display:none
}

#porcentajedes #botonact{
    background-color: rgb(5, 34, 5);
    width: 5em;
    margin-left: 0.5em;
    border-radius: 1em;
}

#desafiosflex #imgact img{
    width: 100%;  
    border-radius: 1em;   
}

#desafiosflex #imgact{
    width: 8em;
    height: 7em;
    margin-top: 0.3em;
    margin-left: 10px;
    margin-bottom: 5px;
}

#porcentajedes #span{
    font-size: 12px;
}

#porcentajedes p{
    font-size: 12px;
}

#asistireindexwebapp {
    width: 5em;
    margin-top: 0.4em;
    margin-left: 0.2em;
    padding-left: 0em;
    padding-right: 0.3em;
    margin-bottom: 0.2em;
    color: white;
    background-color:#586645 ;
    border-radius: 0.7em;
}

/*footer*/
footer p{
    background-color: rgb(238, 238, 238);
    font-size: 0.6em;
    color: rgb(131, 131, 131);
    text-align: center;
    margin: 4em 1em 2em 1em;
    padding: 1em;
    font-weight: 500;
}

/*Fin de pagina principal*/

/* Página Grupos */
#gruposalqeu h2{
    padding-top: 20px;
    padding-left: 0.5em;
    font-size: 1.3em;
}

/* barra buscador */

#explora {
    display: flex;
    justify-content: center;
    padding: 0 1em 1em 1em;
    
}

#explora i{
    padding: 0.3em;
    margin-top: 0;
    color: #F1857A;
}

#explora i:hover{
    color: #c5c497;
    cursor: pointer;
}


input[type=text],input[type=password] {
    width: 80%;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    height: 2em;
    border-radius: 2em;
    background: #EAEAEA;
    padding-left: 1em;
    font-size: 1em;
}

input{
   color: white;
}
/* fin barra buscadora */

.gruposu{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: left;
    text-align: center;
    width: 100%;
    height: auto;
    overflow-x: scroll; 
}

.gruposuni{
    width: 100%;
    height: auto;
    background: rgb(245, 181, 85);
    margin: 0.5em;
    padding: 0.3em;
    border-radius: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
}

.gruposuni figure {
    margin: 0.3em;
    width: 8em;
    height: 6em;
}

.gruposuni figure img {
    width: 100%;
    border-radius: 1em;
}

.gruposuni p{
    font-size: 12px;
    font-weight: 550;
    color: black;
}

.forosunidos{
    background-color: #c5c497;
    width: 98%;
    margin-left: 0.3em;
    margin-right: 0.3em;
    margin-top: 1em;
    border-radius: 1em;  
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
}

.comentario{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: left;
    width: 100%;
    height: auto;
    padding-left: 15px;
    padding-top: 10px;
}

.comentario img{
    width: 4em;
    border-radius: 0.5em;
}

.comentario p{
    padding-top: 0.3em;
    padding-left: 5px;
    font-size: 14.5px;
}
.comentario p span{
    margin-top: 1em;
    font-size: 14px;
    font-weight: 550;
}

.comentario p #spanhs{
    margin-top: 1em;
    font-size: 13px;
    font-weight: 500;
} 

#coment{
    display: block;
    margin-left: 0.3em;
    margin-top: 0.6em;
    color: black;
}

.coment{
    margin-left: 0.5em;
    margin-top: 1em;
    margin-bottom: 10px;
}

#escribir{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#escribir p{
    margin-top: 1.1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    background: #586645 ;
    border-radius: 0.4em;
    padding: 0.2em;
    margin-bottom: 1.2em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
}

#sugerencias{
    display: none;
}   

/* fin de Página Grupos*/

/* Página Grupo */
#grupo1 figure {
    object-fit: cover;
}

#grupo1 figure img{
    width: 100%;
}

#central h5{
    margin-left: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.3em;
}

#grupo1 h3{
    margin-left: 0.3em;
    margin-top: 0.3em;
    padding: 0.3em;
}
  
#grupo1 p{
    padding: 0.5em;
    font-size: 15px;
}

#spangrupos{
    font-size: 13px;
    padding: 0em;
}

#integrantes{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 0.5em;
}

#integrantes figure {
    width: 3.5em;
    height: auto;
}

#integrantes figure img{
    width: 100%;
}

#background{
    background:rgb(245, 181, 85);
    border-radius: 1em;
    margin-top:0em;
}

#botoninvitar{
  background:rgb(219, 152, 52);
  border-radius: 1em;
  text-align: center;
  box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136)
}

#agregarcoment{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 0.5em;
}

#agregarcoment figure {
  width: 3em;
  height: 3em;
  margin-top: 0.5em;
}

#agregarcoment figure img{
  width: 100%;
}

#agregarcoment p{
  margin-top: 1.4em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  background: #586645 ;
  border-radius: 0.4em;
  padding: 0.3em;
  margin-bottom: 1.2em;
  box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
}

#grupo1 #gruposalqeu{
  display: none;
}

#desafiogrupo{
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  margin-right: 1em;
}


/* Página Perfil */

#informacion{
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: rgb(245, 177, 76);
    margin: 0.5em;
    margin-top: 5.5em;
    padding-bottom: 0.5em;
    border-radius: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
}


#fotoperfil {
    width: 10em;
    height: 10em;
}

#fotoperfil img{
    width: 100%;
    height: auto;
}

#datos{
    width:15em;
    line-height: 1.5em;
}

#datos h2{
    font-weight:1000 ;
    font-size: 25px;
    margin: 1em 0 0.3em 0em;
    border-bottom: none;    
}

#ml{
    width: auto;
}

#desafios {
    width: 21em;
    margin-left: 1em;
    border-radius: 1em;
    background: #c5c497;
    margin-bottom: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
}

#desafiosflex{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: left;
}

#desafiosflex p{
    padding-left: 1em;
}

#porcentajedes figure{
    width: 11em;
    margin-left: 0.7em;
    margin-right: 0.3em;
}

#porcentajedes figure img{
    width: 100%;
    margin-left: 0.1em;
    margin-top: 0.7em;
}


#desafios #imgdes img{
    width: 100%;  
    border-radius: 1em;   
}

#desafios #imgdes{
    width: 5.6em;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: nowrap;
}


#desafios h4{ 
    color: black;
    padding-left: 5px;
    margin-left: 10px;
    margin-right: 50px;
    padding-top: 5px;
}

#desafios h6{ 
    padding-left: 3px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
}

#desafios div p{
    margin-top: 0.3em;
    font-size: 15px;
}

.spandesafios{
    font-size: 20px;
    font-weight: bold;
}

#desafios div p figure img{
    width: 100%;
}

#fl{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#amigoss{
    max-width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}

#amigoss p{
    font-weight: 550;
    text-align: center;
}

.amigo{
    width: 100%;
}

.amigo img{
    width: 8em;
}


/* Página Desafios */
#pagdesafios h2{
    padding-top: 20px;
}

#pagdesafios h3{
    margin: 2em;
}

#desafiosgrupales {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
}

#desafios1 #desafios{
    margin-right: 30px;
    margin-bottom: 40px;
    
}

#desafios1 #sugerencias h2{
    margin: 1em 1em 1em 0
    
}

#desafios1 #sugerencias p{
    margin-bottom: 30px;
}

 /* Página Novedades */
 .novedades1 h2{
    margin-left: 2em;
    padding-top: 1.5em;
    margin-bottom: 1em;
  }

  .novedades1 h3{
      color: black;
  }

  .novades1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .novedades{
    background-color: #c5c497;
    border-radius: 0.5em;
    margin-left: 0.5em;
    margin-top: 1em ;
    padding: 1em 1em 1em 1em;
    width: 96%;
    font-size: 0.9em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136)
    }

   .novedades figure{
    width: 100%;
    margin-bottom: 1em;
    margin-top: 0.5em;
   }

  .novedades figure img{
    width: 100%;
    border-radius: 0.7em;
  }

  .novedades p{
    margin-top: 1em;
  }

  .novedades p a{
    color: rgb(3, 78, 3);
  }

  .novedades p a:hover{
    color: white;
  }
  
  .consientizar h3{
    padding-top: 0.8em;
    margin-left: 0.8em;
    margin-bottom: 0.5em;
    }
  
  .consientizar p{
    margin-left: 1em;
    margin-bottom: 0.7em;
    font-style: italic;
    font-weight: 400;
  }

  #consientizar h5{
      padding-top: 0.5em;
      margin-left: 1em;
  }

  
/* Página Nota */
#consientizar h4{
    padding-top: 1.5em;
    margin-left: 1em;
}
  
#consientizar h2{
    padding-top: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
}

#consientizar h3{
    padding-top: 0.8em;
    margin-left: 0.8em;
    margin-bottom: 0.3em;
}
  
#consientizar p{
    margin-left: 1em;
    margin-bottom: 2em;
    font-weight: 400;
}
  
.nota p{
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    line-height: 1.5em;
    font-weight: 400;
    font-style: normal;
}
  
.importante {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    line-height: 1.5em;
    font-weight: 400;
}
  
.importante p{
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    line-height: 1.5em;
    font-style: inherit;
    font-weight: 400;
    background-color: rgb(245, 167, 50);
    padding: 0.8em;
}
  
.riesgos nav ul li{
    color: rgb(0, 0, 0);
    font-size: 1.1em;
    margin-left: 3em;
    margin-right: 3em;
    list-style: circle;
    line-height: 1.4em;
    
}
  
#entradasrecientes p{
    font-size: 1.5em;
    color: rgb(0, 0, 0);
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    font-style: oblique;
}
    
#entradasrecientes nav ul li{
    list-style: none;
    font-size: 0.9em;
    text-align: center;
    background-color: rgb(245, 177, 76);
    padding: 0.4em;
    border-radius: 0.8em;
    margin: 1em;
}

.galeria{
    width: 100%;
    height: auto;
}    

.galeria img{
    margin-bottom: 10px;
    width: 100%;
    height: auto;
}


/* Página Libro */ 
#foto{
    width: 20%;
    height: 20%;
}

#foto img{
    width: 10em;
    height: auto;
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
}

#Libro {
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 2em;
    background-color: rgb(245, 177, 76)
}

#Libro h5{
    color: black;
    margin: 2em;
    background-color: rgb(255, 255, 255);
    color: rgb(245, 177, 76);
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1.5em;
    text-align: center;
}

#Libro h3 {
    margin-top: 0.5em;
    font-size: 1em;
    font-style: italic;
}

#Libro p{
    margin-top: 0.5em;
}

.gruposquepertenecelibro {
    width: 20em;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: left;
    margin: auto;
    text-align: center;
    flex-direction: row;
    width: 100%;
}
  
/* Página Nosotros */
#nosotros{
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 1em;
}
#nosotros h2{
    margin-left: 1.5em;
    padding-top: 1em;
    font-size: 1.3em;
}

#info p {
    text-align: center;
    font-style: initial;
    line-height: 1.5em;
    background-color: rgb(245, 177, 76);
    color: rgb(255, 255, 255);
    font-size: 1em;
    padding: 0.8em;
    border-radius: 1em;
    margin: 1em 2em;
}
.contenedor{
    position: relative;
    padding-bottom: 56.25%;
    margin-left: 2em;
}
.contenedor iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

/* Pagina Actividades */
#pagactividades h2{
    padding-top: 15px;
}

#pagactividades div{
    width: 100%;
    height: auto;
}

#pagactividades div img{
    width: 30em;
    height: auto;
    margin-left: 15%;
}

#pagactividades nav{
    margin-top: 10px;
    margin-left: 15%;
}

#filtros h1{
    padding-top: 1em;
    margin-left: 1.5em;
    padding-bottom: 0.5em;
    font-variant: unset;
    font-size: 1.3em;
}

#filtros ul {
    display: flex;
    flex-direction: wrap;
    padding-top:0.5em;
    list-style: none;
    justify-content: center;
}

#filtros ul li {
    background-color:rgb(255, 255, 255);
    margin: 0.5em 0.5em 0.5em 1.5em;
    padding: 01em;
    width: 7em;
    text-align: center;
    border-radius:3em;
    box-shadow: 0.2em 0.2em 1em rgb(53, 53, 53);
}
   
#filtros div nav ul li a {
   text-decoration:none;
   text-transform: uppercase;
   font-weight: bold ;
   font-weight: 400;
}  
#Actividadesprincipal{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;

}
#Actividadesprincipal div{
    background-color: #c5c497;
    border-radius: 1em;
    text-align: left;
    margin: 1em 1.3em 3em 1em;
    padding: 1em 0.5em 1em 1em;
    width: 20em;
    font-size: 0.9em;
    justify-content: center;
    
}
#Actividadesprincipal img{
    width: 100%;
    height: 9em;
    border-radius: 1em;
}
#Actividadesprincipal h3{
    background-color: #ffffff;
    border-radius: 1em;
    text-align: center;
    margin-top: 1em; 
    
}
#Actividadesprincipal h1{
    margin-top: 0.2em;
    margin-bottom: 0.1em;
}

#Actividadesprincipal h3{
   font-weight: 500;
}

/* Página Registro */
#registro{
    width: 400px;
    background:rgb(245, 177, 76);
    padding: 30px;
    margin: auto;
    margin-top: 70px;
    margin-bottom: 100px;
    border-radius: 4px;
    color: white;
    
  }
  #registro h4{
    font-size: 22px;
    margin-bottom: 20px;
  }
  .controles{
    width: 100%;
    background: rgb(245, 190, 107);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    border: 1px solid rgb(245, 177, 76);
    font-size: 18px;
    color: white;
  }
  #registro p{
    height: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
  }
  .registro a{
    color:rgb(255, 255, 255);
    text-decoration: none;
  }
  .registro a:hover {
    color:rgb(255, 255, 255);
    text-decoration: underline;
}
  #registro .botones{
    width: 100px;
    background: #ff7b00;
    border: none;
    padding: 12px;
    color: white;
    margin: 16px 0;
    font-size: 16px;
    margin-left: 7em;
}
  #imagen img{
    width: 600px;
    align-content: center;
}

/* Página Mis Libros */  
main #libros {
    max-width: 100%;
}

main #libros .mislibros{
    display: flex;
    flex-direction: row;
    width: 93%;
    margin: 0em 0.5em 1em 1em;
    font-size: 0.8em;
    font-weight: 600;
    background-color: #c5c497; 
    border-radius: 1em; 
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136)
}

main #libros .mislibros p span{
    font-size: 14px;
    font-weight: bold;
    margin-top: 1em;
    padding-top: 1em; 
    margin-left: 0em;
    text-align: center; 
    color: black;
}

main #libros .mislibros p {
    font-size: 13px;
    font-weight: 500;
    margin-top: 1em;
    padding-top: 1em; 
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    line-height : 25px;
    color: black;
}


main #libros div figure{
    width: 10em;
    height: 16em;
    margin: 0.5em;
    padding-top: 0.1em;
}

main #libros figure img{
    width: 100%;
    border-radius: 0.5em;
}

#mislibrospag h2{
    padding-top: 1em;
    margin-left: 1.5em;
}

#Leyendo h3{
    padding-left: 1.5em;
    font-weight: 550;
    font-size: 1.1em;
    padding-bottom: 0.5em;
}

.mislibros #estrellas{
    width: 7em; 
    height: 1.5em;
}

 .mislibros #estrellas img{
    width: 100%;
}

#Leyendo{
    margin-bottom: 2.5em;
}


/* @media OTROS DISPOSITIVOS */

@media (min-width: 800px){
    
    /* Página Principal */
    #menu{
        display: none;
    }
    
    #menuresponsive{
        display: flex;
        flex-direction: row;
		margin-top: 10px;
    }
    
    header nav a {
        color:rgb(255, 231, 124);
        background-color: rgb(245, 177, 76);
        padding-top: 0;
        margin: 0px;
    }
    
    header nav li{
        padding-left: 1em;
        padding-right: 1em;
    }

    header nav ul {
        list-style: none;
        background-color: none;
        position: relative;
        display: flex;
        top:0;
        height: 0;
	}

    .slideshow-container {
        max-width: 100%;
        height: auto;
    }
           
    #novedades figure{
        height: 450px;
    }

    #flexprincipal{
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    #margenprincipal{
        margin-left: 3.6em;
        width: 73%;
    }

    #botondiscover{
        display: block;
        background-color: #66714f;
        border-radius: 1em;
        margin-top: 1.5em;
        margin-left: 1em;
        text-align: center;
        padding: 0.3em;
        margin-bottom: 1.5em;
        color: whitesmoke;
    }

    #botondiscover h3 {
        font-weight: 400;
        font-size: 1em;
    }

    #margenprincipal #Libros{
        overflow-x: scroll;
    }

    #margenprincipal #grupos{
        overflow-x: scroll;
    }

    /* Fin de Página Principal */
    
    /* Página Grupos */
    #paggrupos{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    #gruposalqeu{
        margin-top: -20px;
        width: 20em;
    }

    .gruposu{
        display: block;
        overflow-x:visible;
    }

    .gruposuni{
        margin-left: 17%;
        width: 57%;
    }

    .gruposuni figure{
        width: 8em;
    }

    .gruposuni figure img{
        width: 100%;
    }

    .gruposuni{
        margin-left: 20%;
        width: 9.3em;
    }
    #foros{
        width: 70%;
        margin-left: 2em;
    }

    #sugerencias{
        display: block;
        margin-top: 3.5em;
        margin-left: 2em;
    }
    
    #sugerencias #gruposg .gruposunidosg {
        width: 15em;
        height: 16.5em;
        padding: 1em;
        flex-direction: column;
        text-align: left;
        background-color:rgb(245, 181, 85);
        border-radius: 1em; 
        margin-right: 2em; 
        } 

    #sugerencias .gruposunidosg{
        margin: 15px 0px;
        box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
    }
        
    #sugerencias .gruposunidosg p{
        font-size: 0.8em;
        margin: 0.5em 0 0.5em 0;
    }
    
    #sugerencias .gruposunidosg figure{
        width: 13em;
    }

    #sugerencias .gruposunidosg figure img{
        width: 100%;
        border-radius: 0.7em;
    }

    .gruposunidosg p span{
        display: block;
        width: 15em;
        font-weight: 550 ;
        text-align: center;
        background-color:rgb(219, 152, 52) ;
        border-radius: 0.5em;
        padding: 0.4em;
        margin-left: 0.8em;
        margin-top: 0.5em;
        box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
    }

    #escribir{
        margin-left: 3em ; 
    }
    /* Fin de Página Grupos*/

    /* Pagina Grupo */

    #grupo1{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    #grupo1 #gruposalqeu{
        width:20%;
        display:block
    }

    #grupo1 #central{
        width:60%;
    }

    #central h5{
        padding-bottom: 0em;
    }

    #grupo1 #sugerencias{
        width: 20%;  
    }  

    #background figure{
        margin-top: 1.5em;
        border-radius: 1em;
        width: 100%;
        height: 60%;
    }

    #background figure img{
        border-radius: 1em;
    }
    
    #grupo1 #foros{
      margin-left: 15%;
    }

    #agregarcoment{
        background: #c5c497 ;
        border-radius: 1em;
    }

    #integrantes{
        margin-top: -2em;
        width: 70%;
    }

    #grupo1 .gruposuni figure{
        width: 8em;
    }
    #grupo1 .gruposuni figure img{
        width: 100%;
    }

    #desafiogrupo{
        display: flex;
        flex-direction: row;
        overflow-x:visible;
        margin-right: 1em;
        justify-content: space-evenly;
    }
    
    .sugim{
        width: 7em;
        height: 6em;
    }

    .sugim img{
        width: 100%;
    }

    /* Fin de Página Grupo */  

    /* Página Libro */    
    #main{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
        
    #foto{
        width: 150%;
        height: auto;
    }    
        
    #foto img {
        width: 2000px;
        margin-left: 20px;
    }
        
    #Libro {
        padding-left: 2em;
        padding-top: 1em;
        padding-bottom: 1em;
        padding-right: 2em;
        margin-left: 2em;
        margin-right: 2em;
        background-color: rgb(245, 177, 76)
    }
    
    #Libro h5{
        color: black;
        margin: 1em;
        background-color: rgb(255, 255, 255);
        color: rgb(245, 177, 76);
        font-size: 1em;
        padding: 0.5em;
        border-radius: 1.5em;
        text-align: center;
    }
        
    #Libro p{
        margin-top: 1em;
        margin-bottom: 2em;
        font-size: 15pt;
        font-weight: 350;
    }
        
    #Libro h1{
        font-size: 2em;
        text-align: left;
        text-transform: uppercase;
        margin-top: 1em;
        margin-bottom: 0em;
        font-weight: 700 ;
    }
    /* Fin de Página Libro */

    /* Página Nota */
    #pagnota{
        width: 80%;
        margin-left: 10%;
    }
    .galeria img{
        margin-left: 40px;
        width: 300%;
    }

    .nota p{
        padding-left: 20%;
    }

    #consientizar h3{
        margin-left: 2em;
    }

    #consientizar p{
        margin-left: 2.5em;
    }

    .nota p{
        padding-left: 23em;
    }

    #entradasrecientestipo{
        display: flex;
        flex-direction: row;
        margin-left: 2em;
    }

    #entradasrecientestipo li{
        width: 50%;
    }

    #entero2{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
    /* Fin de Página Notas */

    /* Página Nosotros */
    #pagnosotros{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        margin-left: 40px;
        margin-top: 20px;
    }

    #info{
        width: 80%;
        padding-top: 100px;
        margin-left: 10px;
        
    }
    
    /*Fin de Página Nosotros */

    /* Página Perfil*/
    #informacion{
        display: block;
        margin: 2em;
        margin-top: 3em;
        padding-left: 1%;
        align-content: center;
        background-color:rgb(245, 177, 76); 
        border-radius: 1em;
        width: 20%;
    }

    #perfil{
        display: flex;
    }

    #media{
        width: 70%;
        margin-top: 1em;
    }

    #datos{
        padding-left: 20px;
        align-items: center;
        padding-top: 2em;
    }

    #datos h4{
        padding-top: 10px;
    }

    
    #fotoperfil {
        width: 90%;
        height: 30%;
    }

    #fotoperfil img{
        width: 100%;
        height: auto;
    }
    /*Fin de Página Perfil*/

    /* Página Actividades*/
    #divisionact{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
    }

    #divisionact nav{
        width: 80%;
    }
    /*Fin de Página Actividades*/

     /* Página Novedades*/
     #novedadessem{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: scroll;
        margin-left: 5em;
    }

    .novedades1 .novedades{
        width: 22em;
        height: 27em;
        margin-left: 2%;
    }
    /* Pagina Registro */
    #contenedor{
      display: flex;
    }
    #imagen img{
      width: 850px;
      align-content: left;
      margin-top: 5em;
    }

    /*Pagina Mis Libros*/
    #Leyendo #libros {
        display: flex;
        flex-direction: row;
        overflow-x:scroll;
    }
    
}

/* Desafios ---- */

#desafioadentropag h5{
    margin: 0em 0em 0.5em 0.5em;
    padding-top: 0.5em;
}

#pagdesafiosprimero h3{
    margin: 4em 2em 1em 1.5em;
    font-size: 1.3em;
}

#desafiosprimero {
    width: 19.8em;
    margin-left: 1em;
    border-radius: 1em;
    background: #c5c497;
    margin-bottom: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136 136 136);
}

#desafiosprimero h4 {
    padding-left: 5px;
    margin-left: 10px;
    margin-right: 50px;
    padding-top: 5px;
}

#desafiosprimeroflex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#desafiosprimero #imgdesprimero {
    width: 5.6em;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: nowrap;
}

#desafiosprimero #imgdesprimero img {
    width: 100%;
    border-radius: 1em;
}

#desafiosprimero div p {
    margin-top: 0.3em;
    font-size: 15px;
}

#desafiosprimeroflex p {
    padding-left: 1em;
}

#porcentajedesprimero p {
    font-size: 12px;
}

.spandesafiosprimero {
    font-size: 20px;
    font-weight: bold;
}

#porcentajedesprimero figure {
    width: 11em;
    margin-left: 15px;
}

#porcentajedesprimero figure img {
    width: 100%;
    margin-top: 0.7em;
}

main .desafiossugerencias {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

main .desafiossugerencias > div{
    display: flex;
    margin: 0 1em 2em 1em;
    font-size: 1em;
    flex-direction: row;

}

main .desafiossugerencias div > div{
    display: flex;
    margin: 0 0 0 1em;
    flex-direction: column;
    width: 15em;
}

#figuresugerencias {
    width: 10em;
}

main .desafiossugerencias img {
    width: 100%;
    height: 100%;
    border-radius: 1em;
}

.desafiossugerencias div p span {
    font-weight: 800;
    font-size: 1.1em;
}

main .desafiossugerencias p{
    margin-bottom: 0.5em;
    
}

#vermassugerencias {
    margin-top: 0.7em;
}

#botondiscoverdesafios {
    display: block;
    background-color: #66714f;
    border-radius: 1em;
    margin-top: 1.5em;
    margin-left: 1em;
    text-align: center;
    margin-right: 1em;
    padding: 0.3em;
    margin-bottom: 1.5em;
    color: whitesmoke;
}

#botondiscoverdesafios h3 {
    font-weight: 400;
    font-size: 1em;
}

.clasedesafiosprimero {
    color: black;
    font-size: 17px;
    font-weight: bold;
    margin: 2em 1em 2em 1em;
}

.clase2desafiosprimero {
    color: black;
    font-size: 17px;
    font-weight: bold;
    margin: 2em 1em 2em 1em;
}





#exploradesafios {
    display: flex;
    justify-content: center;
    padding: 0 1em 1em 1em;
}

@media (min-width: 800px) {

    #exploradesafios {
        padding: 0;
    }


}

input[type=text], input[type=password] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    height: 3em;
    border-radius: 2em;
    background: #EAEAEA;
    padding-left: 1em;
    font-size: 1em;
}
input {
    color: white;
}

#exploradesafios i {
    padding: 0.3em;
    color: #F1857A;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 50px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    color: white;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    margin-top: 5px;
    margin-bottom: auto;
}

@media (min-width: 800px){

    main #desafiosprimerodividiones{ 

    display: flex;
    flex-direction: row;
    justify-content: center;    
    }    

    .clase2desafiosprimero {
        color: black;
        font-size: 17px;
        font-weight: bold;
        margin: 0 1em 2em 1em;
    }

    main .desafiossugerencias {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-left: 2.2em;
    }

    main #desafiosprimerosactuales {
        margin-right: 2.2em;
    }

    #figuresugerencias {
        width: 7em;
        height: 8.6em;
    }

    #pagdesafiosprimero h3 {
        display: flex;
        justify-content: center;
        margin: 4em 2em 1em 1.5em;
        font-size: 1.6em;
    }


}


    /* Libro */

    #paglibro #ml{
        display: none;
    }

    #paglibro #sugerencias{
        display: none;
    }

    #paglibro h5{
        padding-top: 0.5em;
        padding-left: 0.5em;
    }

    #paglibrosleyendo h2{
        padding-top: 30px;
        padding-left: 20px;
    }
    
    #paglibrosleyendo h3{
        margin: 1em 1.5em 1em;
    }
    
    #seccionlibrosleyendo{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-left: 0.5em;
        
    }
    
    #desafios1 #desafios{
        margin-right: 30px;
        margin-bottom: 40px;
        
    }
    
    #desafios1 #sugerencias h2{
        margin: 1em 1em 1em 0
        
    }
    
    #desafios1 #sugerencias p{
        margin-bottom: 30px;
    }
    
    #librosleyendo {
        margin-left: 0em;
        border-radius: 1em;
        background: #c5c497;
        width: 98%;
    }
    
    #librosleyendo #lldiv1{
        padding-left: 2.5em;
        width: 18em;
        display: flex;
        flex-direction: column;
    }
    
    
    #librosleyendo #lldiv1 > figure{
        margin-top: 40px;
        margin-left: 10px;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        width: 92%;       
    }
    
    #librosleyendo #lldiv1 > figure img{
        max-width: 100%; 
        height: auto;
    }
    
    
    #librosleyendo h4{ 
        padding-left: 5px;
        margin-left: 10px;
        margin-right: 50px;
        padding-top: 5px;
        font-size: 1.3em;
        display: flex;
        width: 90%;
        justify-content: center;
        font-weight: 1000;
    }
    
    #librosleyendo > p{ 
        padding-left: 5px;
        margin-left: 10px;
        margin-right: 50px;
        padding-top: 5px;
        font-size: 0.8em;
        display: flex;
        width: 90%;
        justify-content: center;
    }
    
    #librosleyendo h6{ 
        padding-left: 3px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 8px;
        font-size: 30px;
        color: #2a5f22;
    }
    
    #llsec0{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    
    #llsec0 p {
        margin-top: 15px;
        font-size: 0.8em;
        font-weight: 300;
        margin-bottom: 24px;
        text-align: center;
        margin-left: 9.2px;
        width: 19.2em;
    }
    
    
    #llsec1{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    
    #llsec1 p{
        margin-top: 22px;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 24px;
    }
    
    #llsec15{
        padding-left: 25px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-right: 9px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    #llsec2{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    #llsec2 p{
        margin-top: 18px;
        font-size: 15px;
    }
    
    #llsec3{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 18px;
    }
    
    #llsec3 p{
        margin-top: 22px;
        font-size: 17px;
        font-weight: 600;
    }
    
    #llsec4{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 10px;
    }
    
    #llsec4 #ll1div4{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-top: 10px;
    }
    
    #llsec4 #ll2div4{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 10px;
    }
    
    #librosleyendo #llsec4 figure{
        margin-left: 10px;
        display: flex;
        justify-content: center;
        width: 50%;       
    }
    
    #librosleyendo #llsec4 figure img{
        max-width: 100%; 
        height: auto;
    }
    
    #llsec5{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    #llsec5 #ll1div5{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-right: 9px;
    }
    
    #llsec5 #ll2div5{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 25px;
    }
    
    #llsec6{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    #llsec6 #ll1div6{
        padding-left: 15px;
        width: 21em;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding-top: 60px;
        padding-bottom: 1em;
    }
    
    #llsec6 #ll1div6 p{
        width: 7em;
        height: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        border-radius: 1em;
        font-weight: 500;
    }
    

    
    @media (min-width: 800px){
        
        #seccionlibrosleyendo{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center; 
            margin-left: 0; 
        }
    
        #librosleyendo {
            margin-left: 20px;
            border-radius: 1em;
            background: #c5c497;
            width: 50em;
        }
    
        #librosleyendo #lldiv1 {
            padding-left: 3px;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            width: auto;
            height: 38.5em;
            margin-top: 8px;
        }
    
    
        #librosleyendo #lldiv1 > figure {
            margin-top: 30px;
            margin-left: 10px;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            max-width: 30em;
            height: 32.5em;
            width: inherit;
    
        }
    
        #librosleyendo #lldiv1 > figure img {
            max-width: 100%;
            height: 100%;
        }
    
    
    
        #llsec0 p {
            margin-top: 28px;
            font-size: 0.8em;
            font-weight: 300;
            margin-bottom: 24px;
            text-align: center;
            margin-left: 9.2px;
            width: 19.2em;
        }
    
        #llsec6 #ll1div6 {
            padding-left: 15px;
            width: 21em;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            padding-top: 54px;
            padding-bottom: 1em;
        }
    
        #llsec1 p {
            margin-top: 20px;
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 24px;
        }
    
        #llsec3 p {
            margin-top: 20px;
            font-size: 17px;
            font-weight: 600;
        }
    
        #llsec4 {
            padding-left: 3px;
            width: 17em;
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding-top: 8px;
        }
    
        #librosleyendo h4 {
            padding-left: 0px;
            margin-left: 0px;
            margin-right: 0px;
            padding-right: 19.5px;
            padding-top: 15px;
            font-size: 1.3em;
            display: flex;
            width: 100%;
            justify-content: center;
            font-weight: 1000;
        }
    
        #librosleyendo > p {
            padding-left: 0px;
            margin-left: 0px;
            margin-right: 0px;
            padding-right: 19.5px;
            padding-top: 5px;
            font-size: 0.8em;
            display: flex;
            width: 100%;
            justify-content: center;
        }
    
        #paglibrosleyendo h2 {
            padding-top: 35px;
            padding-left: 0px;
            display: flex;
            justify-content: center;
        }
    
        #paglibrosleyendo h3 {
            margin: 1em 0 2em 0;
            display: flex;
            justify-content: center;
        }
    
        #paglibro #ml{
            display:block;
            padding-top: 0.8em;
        }

        #paglibro #ml h2{
            padding-left: 1em;
            padding-bottom: 0em;
            font-weight: 550;
        }

        #paglibro #ml h5{
            padding: 0.2em 0em;
        }
        
        #paglibro #ml #librospp{
            display: block;
            margin-left: 4em;
            margin-right: 8em ;
            overflow-x: visible;
        }

        #paglibro #ml #librospp .mislibros {
            width: 11em;
            margin-bottom: 0.3em;
            background: rgb(245, 181, 85);
        }

        #paglibro #ml #librospp .mislibros figure{
            height: 15em ;
            width: 10em;
            padding-top: 0.3em;
        }

        #paglibro #flexpaglibro{
            display: flex;
            flex-direction: row;
            margin-left: 4em;
        }

        #paglibro #sugerencias{
            display: block;
            margin-left: 8em;
        }
        
        #paglibro .gruposunidosg figure{
            height: 12em ;
            width: 8em;
            margin-left: 1em;
        }
        #paglibro #sugerencias .gruposunidosg{
            padding-top: 0.3em;
            width: 12em;
            height: 18.5em;
        }

        #paglibro #sugerencias .gruposunidosg h5{
            font-size: 0.81em;
            padding-left: 0em;
            padding-right: 0em;
        }

        #paglibro #sugerencias .gruposunidosg p {
            margin: 0.2em;
        }

        #paglibro #sugerencias .gruposunidosg p span {
            width: 12em;
            margin-left: 0.2em;
            margin-top: 0.2em;
        }
    }





    /* Desafiosadentro */

    #pagdesafiossegundo #sugerencias{
        display: none;
    }

    #pagdesafiossegundo #desafiopagdesafioadentro{
        display: none;
    }

    #pagdesafiossegundo h2{
        padding-top: 30px;
        font-size: 1.5em;
        padding-left: 11px;
        margin-bottom: 0; 
    }
    
    #pagdesafiossegundo h3{
        margin: 1em 1.5em 1em 1em;
        font-size: 1.17em;
    }
    
    #secciondesafiossegundo{
        margin-left: 0.5em;
    }
    
    #divdesafiossegundo {
        margin-left: 0;
        border-radius: 1em;
        background: #c5c497;
        width: 98%; 
    }
    
    #divdesafiossegundo #dsdiv1{
        padding-left: 2.5em;
        width: 18em;
        display: flex;
        flex-direction: column;
    }
    
    
    #divdesafiossegundo #dsdiv1 > figure{
        margin-top: 40px;
        margin-left: 79px;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        width: 45%;       
    }
    
    #divdesafiossegundo #dsdiv1 > figure img{
        max-width: 100%; 
        height: auto;
    }
    
    
    #divdesafiossegundo h4{ 
        padding-left: 5px;
        margin-left: 11px;
        margin-right: 50px;
        padding-top: 17px;
        font-size: 1.3em;
        display: flex;
        width: 90%;
        justify-content: center;
    }
        
    #divdesafiossegundo h6{ 
        padding-left: 3px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 8px;
        font-size: 30px;
        color: #2a5f22;
    }

    #dssecinfo > p{ 
        padding-left: 5px;
        margin-left: 14px;
        margin-right: 10px;
        padding-top: 8px;
        font-size: 0.93em;
        display: flex;
        width: 90%;
        justify-content: center;
        text-align: center;
    }
    
    #dssec1{
        padding-left: 12px;
        width: 14em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    
    #dssec1 p{
        margin-top: 28px;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 24px;
    }

    #dssec1y15{
        display: flex;
        flex-direction: row;
        margin-top: 25px;
    }
    
    #dssec15{
        padding-left: 13px;
        width: 17em;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #dssec15 figure{
        width: 8em;
        height: 0.8em;
    }

    
    #dssec2{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-left: 3.3px;
    }
    
    #dssec2 p{
        margin-top: 18px;
        font-size: 15px;
    }
    
    #dssec3{
        padding-left: 14px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 18px;
    }
    
    #dssec3 p{
        margin-top: 22px;
        font-size: 17px;
        font-weight: 600;
    }
    
    #dssec4{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 10px;
    }
    
    #dssec4 #ds1div4{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-top: 10px;
    }
    
    #dssec4 #ds2div4{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 10px;
    }
    
    #divdesafiossegundo #dssec4 figure{
        margin-left: 10px;
        display: flex;
        justify-content: center;
        width: 50%;       
    }
    
    #divdesafiossegundo #dssec4 figure img{
        max-width: 100%; 
        height: auto;
    }
    
    #dssec5{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    #dssec5 #ds1div5{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-right: 6px;
    }
    
    #dssec5 #ds2div5{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 31.5px;
    }


    #dssec31{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 18px;
        margin-left: 5px;
    }
    
    #dssec31 p{
        margin-top: 22px;
        font-size: 17px;
        font-weight: 600;
    }
    
    #dssec41{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 10px;
        margin-left: 2px;
    }
    
    #dssec41 #ds1div41{
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-top: 10px;
    }
    
    #dssec41 #ds2div41{
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 10px;
    }

    #dssec41 #ds3div41{
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 10px;
    }
    
    #divdesafiossegundo #dssec41 figure{
        margin-left: 10px;
        display: flex;
        justify-content: center;
        width: 70%;       
    }
    
    #divdesafiossegundo #dssec41 figure img{
        max-width: 100%; 
        height: auto;
    }
    
    #dssec51{
        padding-left: 3px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-right: 1.5px;
        margin-top: 10px;
        margin-bottom: 7px;
    }
    
    #dssec51 #ds1div51{
        padding-left: 3px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #dssec51 #ds1div51 p{
        font-size: 0.7em;
        text-align: center;
        width: 7.2em;
    }
    
    #dssec51 #ds2div51{
        padding-left: 3px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #dssec51 #ds2div51 p{
        font-size: 0.7em;
        text-align: center;
        width: 7.2em;
    }

    #dssec51 #ds3div51{
        padding-left: 3px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #dssec51 #ds3div51 p{
        font-size: 0.7em;
        text-align: center;
        width: 7.2em;
    }

    
    #dssec6{
        padding-left: 3px;
        width: 17em;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    #dssec6 #ds1div6{
        padding-left: 15px;
        width: 21em;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding-top: 50px;
        padding-bottom: 1em;
    }
    
    #dssec6 #ds1div6 p{
        width: 7em;
        height: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        border-radius: 1em;
        font-weight: 500;
        color: black;
    }
    
    
    @media (min-width: 800px){

        #pagdesafiossegundo #sugerencias{
            display: block;
        }
    
        #pagdesafiossegundo #desafiopagdesafioadentro{
            display: block;
        }

        #pagdesafiossegundo{ 
            display: flex;
            flex-direction: row;
            margin-left: 3em;
        }
        
        #pagdesafiossegundo #secciondesafiossegundo{
            display: block;
            margin-left: 7em;
        }

        #pagdesafiossegundo #sugerencias{
            margin-left: 8em;
        }

        #desafiopagdesafioadentro{
            padding-top: 3.5em ;
            margin-left: 2em;
        }

        #desafiopagdesafioadentro #desafios{
            background: rgb(245, 181, 85);
        }

        #desafiopagdesafioadentro h4{
            padding-left: 1.5em ;
            padding-bottom: 1em ;
        }
    
        #divdesafiossegundo {
            margin-left: 20px;
            border-radius: 1em;
            background: #c5c497;
            width: 40em;
        }
    
        #divdesafiossegundo #dsdiv1 {
            padding-left: 3px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 90%;
            margin-top: 8px;
            margin-left: 20px;
        }
    
    
        #divdesafiossegundo #dsdiv1 > figure {
            margin-top: 8px;
            margin-left: 16px;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            max-width: 17em;
            height: 15em;
            width: inherit;
            margin-right: 0;
    
        }
    
        #divdesafiossegundo #dsdiv1 > figure img {
            max-width: 100%;
            height: 100%;
        }
    
        #dssec6 #ds1div6 {
            padding-left: 15px;
            width: 21em;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            padding-top: 50px;
            padding-bottom: 1em;
        }
    
        #dssec1 p {
            margin-top: 20px;
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 24px;
        }
    
        #dssec3 p {
            margin-top: 20px;
            font-size: 17px;
            font-weight: 600;
        }

        #dssec31 p {
            margin-top: 20px;
            font-size: 17px;
            font-weight: 600;
        }
    
        #dssec4 {
            padding-left: 3px;
            width: 17em;
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding-top: 8px;
        }

        #dssec41 {
            padding-left: 3px;
            width: 17em;
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding-top: 8px;
        }
    
        #divdesafiossegundo h4 {
            margin-left: 67px;
            margin-right: 0px;
            margin-bottom: 10px;
            padding-right: 19.5px;
            padding-top: 29px;
            font-size: 1em;
            display: flex;
            width: 100%;
            justify-content: flex-start;
            font-weight: 800;
        }
    
        #divdesafiossegundo > p {
            padding-left: 0px;
            margin-left: 0px;
            margin-right: 0px;
            padding-right: 19.5px;
            padding-top: 5px;
            font-size: 0.8em;
            display: flex;
            width: 100%;
            justify-content: center;
        }
    
        #pagdesafiossegundo h2 {
            padding-top: 35px;
            display: flex;
            justify-content: center;
            padding-right: 13px;
        }
    
        #pagdesafiossegundo h3 {
            margin: 1em 0 2em 0;
            display: flex;
            justify-content: center;
        }

        #seccionseccion1 {
            width: 18em;
        }

        #dssec51 {
            padding-left: 3px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-right: 1.5px;
            margin-top: 10px;
            margin-bottom: 7px;
            width: 99%;
        }

        #dssec1 {
            padding-left: 12px;
            width: 14em;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: 9.3px;
        }
        
        #dssec1y15 {
            display: flex;
            flex-direction: row;
            margin-top: 24px;
        }
    
    
    
    
    }