@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,700;1,400&display=swap');
*{
    margin:0;
    padding: 0;
    border:0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-color: #ffffff;
    height: 100vh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
}
/*en comun todas*/
header{
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center
}
/*menu*/
nav{
    text-align: right;
}
nav a{
    color: white;
    background-color: #3A5853;
    padding: 0.5em;
    border-radius: 1em;
}
nav li{
    list-style: none;
    margin: 1em;
}
nav button{
    position: relative;
    z-index: 9999;
    background: none;
}
nav ul{
    background-color: #3A5853;
    padding-top: 50px;
    position: fixed;
    top:0;
    bottom: 0;
    width: 50%;
    left:100%;
    transition: all .5s ease;
    z-index: 9998
}
.visible{
    left:50%
}

main {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#cabezal{
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 
}
#titulopag{
    text-align: center;
    width: 20em;  
    margin-bottom: 1em;
}
#titulopag p{
    color: #F5A363;
}
#botonatras{
    margin: 0em 0em 0em 0em
}
/*buscarplantas*/
#busqueda{
    display: flex;
    margin-top: 2em;
    flex-direction: column;
    align-items: center
}
#buscador{
    display: flex;
    align-items: center
}
#buscador img{
    width: 1em;
    margin-right: 1em
}
#filtros{
    display: flex;
}
#filtros div{
    display: flex;
    align-items: center;
    margin: 0 1em 0 0
}
#filtros div img{
    display: flex;
    align-items: center;
    margin: 0 1em 0 0
}
h1{color: #2f4643}
h2{color: #3A5853}
h3{color: #3A5853}
p{color: #3A5853;
font-size:0.9em}
#plantadestacada{
    display:flex;
    flex-direction: row;
    background-color: #F4E4DC;
    border-radius: 1em;
    padding: 1em;
    font-weight: bold;
    align-items: center; 
    color: #2f4643
}
#plantadestacada a{
    color: #2f4643;
    text-decoration: none;
}
#plantadestacada>div{
    width: 11em
}
#plantadestacada img{
    width: 10em;
}

#plantadestacada h4{
    font-weight: bold;
    font-size: 0.9em;
    color: #52726d;
}
#plantadestacada p{
    font-weight: 200;
    max-width: 10em
}
#plantadestacada{
    min-width: 24em
}
#pcorto{
    display: block;
}
#plargo{
    display: none;
}
#plantas{
    display: flex;
    flex-flow:column wrap;
    justify-content: center;
    align-items: center;
    margin: 1em;
}
#plantas ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 31rem;
    margin-top: 1em;
}
#plantas li{
    list-style: none;
}
.planta a{ 
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 8.5em;
    height: 14em;
    margin: 0.8em;
    color: #2f4643;
    text-decoration: none;   
    text-align: center;
    font-weight: bold;
    position: relative;
}
.planta img{
    margin: 0.5em 1em 0;
    max-height: 5em;
}
.planta p{
    font-weight: 200
}
.bloqueada a{
    background-color: #F1F1EF;
    border-radius: 1em
}
.imgbloqueada{
    opacity: 30%
}
.desbloqueada a{
    background-color: #E9F1D7;
    border-radius: 1em;
}
.yafavorita{
    position: absolute;
    z-index: 9999;
    width: 4.4em;
    top: -1.2em;
    left: -2.1em
}
#pasapagina{
    text-align: center;
    margin-bottom: 2em
}
#miniboton{
    background-color: #2f4643;
    color: white;
    font-weight: normal;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
}
#miniboton a{
    color: white;
    text-decoration: none
}
/*infoplanta*/
#cajainfoplanta{
    display: flex;
    flex-direction: column;
}
.favorita{
    position: absolute;
    width: 4em;
    top: -1.2em;
    right: -1.2em
}
#infoplanta{
    display:flex;
    flex-direction: column;
    align-items: center;
    margin:1em 2em 0;
    font-size: 0.9em;
    text-align: center;
}
#infoplanta > div{
    display: flex;
    flex-direction: column;
    align-items: center
}
#infoplanta figure{
    background-color: #F4E4DC;
    width: 15em;
    padding: 0 3em;
    border-radius: 2em;
    margin-bottom: 1em;
    position: relative
}
#infoplanta details{
    margin-top: 1em;
}
#infoplanta summary{
    color: #F5A363;
    text-decoration-line: underline;
}
#infoplanta details[open] > summary{
    display: flex;
    flex-direction: column;
}
#infoplanta > #infoplantadesktop{
    display: none
}
#desbloqueo{
    margin: 3em 1em;
    display: flex;
    flex-direction: column;
    text-align: center
}
#desbloqueo ul{
    margin-top: 1em;
}
#desbloqueo li{
   padding: 0.4em
}
#desbloqueo img{ 
    width: 50%
}
#desbloqueo h2{ 
    font-size: 1.2em
}
#desbloqueo > div{
    margin-bottom: 1em;
}
#premia p{
    margin: 1em 0;
    color: #F5A363
}
.pautacumplida{
    text-decoration: line-through
}
#pautas li{
    border-bottom: solid #52726d .1em;
    display: flex;
    justify-content: space-between
}
#pautas {
    margin-bottom: 1em;
}
#mantenimiento{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2em;
    text-align: center
}
#mantenimiento ul{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#mantenimiento img{
    width: 2em;
    margin: 1em;
}
#mantenimiento li{
    list-style: none;
}
#caracteristicas li{
    border-bottom: solid #52726d .1em;
    display: flex;
    justify-content: space-between;
    padding: 0.4em
}
#caracteristicas {
    margin: 1em 0 2em;
    width: 100%;
    color: #52726d
}
#minidescripcion{
    display: block
}
/*primer pagina*/
#todo{
    display: flex;
    flex-direction: column;
    align-items: center
    } 
#mapa figure{
    justify-content: center;
    display: flex;
    margin: 0 0 2em;
    padding: 2em;
}
#mapa img{
    width: 70vw;
    border-radius: 1em;
    margin: 1em;
    border-radius: 3em;
}
#primertexto{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em;
    text-align: center
}
.quieroreciclar li a{
    background-color: #52726d;
    width: 98%;
    border-radius: 2em;
    padding: 0;
    display: flex;
    justify-content: center
    margin: 0em 0 2em;   
}
.quieroreciclar li{
    list-style: none;
}
.quieroreciclar li a:hover{
    background-color: #6cafa4;
}
#botellas{
    width: 98%;
    justify-content: center;
    display: flex;
    margin: 1em 0 em;
    padding: 0em;
}

#cuentaregresiva h4{
    display: flex;
    align-items: center;
    justify-content: center;
}
#tuzona{
    display: flex;
    align-items: center;
    margin: 2em 0 0;
    flex-direction: column;
    text-align: center
}
#tuzona p{
    margin-bottom: 1em;
    max-width: 21rem
}
#recicladofijo{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row;
}
#puntosde{
   background-color: #f2a467;
    border-radius: 1em; 
    display: flex;
    align-items:center;
    justify-content: center;
}

#ubiazul{
    margin: 1em;
    width: 10em;
}

#ubiroja{
    margin: 1em;
    width: 10em;

}
#ubiroja h5{
    padding: 0;
    background-color: white;
    text-align: left; 
    
} 
#ubiazul h5{
    padding: 0;
    background-color: white;
    text-align: left;   
} 
#ecopuntos{
    display: flex;
    align-items:center;
    justify-content: center;
}
#linksaotraspaginas{
    display: flex;
    flex-direction: column;
}

#linksaotraspaginas li{
    list-style: none;
    margin: 0.3rem
}
#linksaotraspaginas ul{
    display: flex;
    flex-flow: row wrap;
}
#link1 figure{
    width: 80vw;
    position: relative
}
#link2 figure{
   width: 40vw;
   position: relative 
}
.paginas{
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around
}
#link2 .paginas{
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}
.paginas p{
    text-align: center;
    font-size: 0.7rem;
    color: #2f4643;
}
.paginas img{
     width: 50%;
}
#link2 .paginas img{
    width: 90%;
}

#link3 figure{
    width: 80vw;
    position: relative
}
#linkeos{
    display: flex;
    align-items: center;
    justify-content: center;
}
#cuentaregresiva img{
    width: 40%;
    margin: 1em;
}
#cuentaregresiva{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*iniciarsesion*/
input{
    border: solid #52726d .1em;
    border-radius: 1em;
    padding: 0.5em;
    width: 20em;
    margin: 0em 0 0.5em
}
.formulario{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em
}
.formulario div{
    margin-top: 1em
}
.formulario a{
    color: #F5A363;
    font-size: 0.9em
}
.boton{
    display: flex;
    justify-content: center;
}
.boton a{
    background-color: #2f4643;
    color: white;
    padding: 0.2em 2em;
    font-size: 1.2em;
    min-width: 5em;
    text-align: center;
    border-radius: 2em;
    text-decoration-line: none;
    margin-bottom: 1em;
}
/*donacion*/
/*donacion*/
#donando img{
    transition: 0.7s;
    cursor:pointer;
}
.donando img{
  align-content: center;
  width: 100%;
  height: auto;
  justify-content: center;
  margin-bottom: 1em;
  transition: 2s;
}
#donando{
   
    cursor:pointer;
    justify-content: center;
    margin-bottom: 1em;
    display: flex;
       
}
#anuncio{
    align-content: center;
    display: flex;
   
}
.cajacolor{
    margin: 0 0 24px;
    overflow: hidden;
    padding: 20px;
    border-radius: 10px
}
.cajacolor{
    background: color:#afcde3;
    border:1px solid #b2ce96;
}
/*formulario*/
.formulario ul{
    list-style: none;
}
.placeholder_formulario ul li{
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: row;
    padding: 0.5em;
}

.placeholder_formulario ul li input{
    margin: -8em
}
/*Error*/   
.volver a inicio li a{
    background-color: #52726d;
    width: 98%;
    border-radius:4em;
    padding: 0;
    display: flex;
    justify-content: center
    margin: 0em 0 2em;   
}
.volver a inicio li{
    list-style: none;
}
.volver a inicio li a:hover{
    background-color: #6cafa4;
}
#caja{
    width: 100%;
    justify-content: center;
    display: flex;
    margin-bottom: 1em;
}
#textoerror{
    display: flex;
    flex-direction: column;
}
/*Premio*/   
#premioplanta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}
#premioplanta div{
    margin:0 1em 1em
}
#premioplanta figure{
    background-color: #F5A363;
    padding: 1.5em 3em;
    border-radius: 5em;
}

/*estadisticas*/ 
/*estadisticas*/ 
#tablasestadistica img{
    transition: 0.7s;
    cursor:pointer;
}
#datossecundarios{
    display: flex;
    flex-flow: row wrap;
    justify-content: center
}

.paquetes{
    display:flex;
    margin: 0.5em 3em 1.5em;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    max-width: 25em
}
.paquetes div{
    margin: 0.5em;
}
.paquetes div img{
    width: 100%;
}
figcaption{
    font-size: 0.8em;
    color: #2f4643
}
#botones ul{
    display: flex;
    background-color: #F5A363;
    border-radius: 1rem;
    padding: 0 1rem;
    margin-bottom: 1rem
}
#botones li{
    list-style: none;
    margin: 0 0.5rem;
    
}
#botones a{
    text-decoration-line: none
}
#botones #mayo{
    border-left: solid #52726d 0.1em;
    border-right: solid #52726d 0.1em;
    padding: 0 1em
}
.botonselec{
    color: white
}

/*mibosque*/
#mibosque{
    display: flex;
    flex-direction: column
}
.grupoplantas{
        display: flex;
        flex-direction: column;
        align-items: center;       
}
#mibosque li{
    list-style: none;
    margin: 0.3rem
}
#mibosque ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center
}
#flores figure{
    width: 30vw;
    position: relative
}
#sucus figure{
    width: 45vw;
    position: relative
}
.tuplanta{
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom:1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}
#sucus .tuplanta{
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom:1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}
.tuplanta img{
    width: 130%;
}
#sucus .tuplanta img{
    width: 80%;
}
.tuplanta ul{
    display: flex;
}
.tuplanta ul img{
    width: 1em;
}
#sucus .tuplanta ul img{
    width: 1em;
}
#alerta{
    position: absolute;
    top:-1rem;
    left:-1rem;
    z-index: 9
}
details{
    display: flex;
    justify-content: center
}
details summary {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

details > summary::-webkit-details-marker {
    display: none;
}
#alertacont{
    color: white;
    background-color: #F5A363;
    border-radius: 1em;
    padding: 0.5rem;
    min-width: 11.5em   
}
#recordatorios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
#recordatorios>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em 0;
    max-width: 30rem
}
h5{
    width: 80%;
    text-align: center;
    font-weight: normal;
    color: #2f4643;
    background-color: #F1F1EF;
    padding: 1rem;
    border-radius: 1rem;
}
h6{
    width: 80%;
    text-align: center;
    font-weight: normal;
    color: #F5A363;
    font-size: 1rem;
    margin-bottom: 1em;
}
/*tutoriales*/
video{
    width: 80vw;
    height: auto;
}
#videodestacado{
    margin: 0 0 3em;
    display: flex;
    flex-flow: column wrap;
    align-items:center
}
#videodestacado h2{
    font-weight: normal;
    margin: 1em;
     background-color: #f8c094;
    font-size: 0.9em;
    display: flex;
    flex-flow: column wrap;
    align-items:center 
}
#videos{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
}
#subtitulo{
    margin: 1em;
}
#subtitulo2{
    margin: 1em;
}
#subtitulo3{
    margin: 1em;
}
#videodestacado img{
    width: 5%;
}
#comentarios{
    margin: 1em;
    background-color:#f5f5f2;
}
#tucomentario{
    margin: 0.5em;
}
/*reciclables*/
#tiporeciclable {
    display: flex;
    flex-flow: row wrap;
    margin-top: 1em;
    margin-bottom: 1em;
    }
#tiporeciclable ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 31rem;
    margin-top: 1em;
}
#tiporeciclable li{
    list-style: none;
    display: flex;
    flex-flow: row;
}
.tiporeciclable a{ 
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items:center;
    width: 5.5em;
    height: 5em;
    margin: 0.8em;
    margin-left: 0.5em;
    margin-right: 1em;
    text-decoration: none;   
    text-align:center;
}
.tiporeciclable img{
    margin: 0.5em 1em 0;
    max-height: 4em;
}
.tiporeciclable p{
    font-weight: 200
}

#tipotitulo {
    padding-top: 1.5em
    }
#cantidadreciclables {
        display: flex;
    flex-flow: row wrap;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    }
#cantidadreciclables ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 31rem;
    margin-top: 1em;
}
#cantidadreciclables li{
    list-style: none;
    display: flex;
    flex-flow: row;
    margin-top: 1em;
}
.cantidadreciclables a{ 
    display: flex;
    flex-flow: column;
    justify-content:center;
    align-items: center;
    width: 3.5em;
    height: 2em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    background-color: #2f4643;
    text-decoration: none;   
    text-align: center;
    position: relative;
    border-radius: 1em;
    color: aliceblue;
}
#numerocantidad {
    margin-left: 2em;
    margin-right: 0.2em;
    color: #F5A363;
    }

#pesoreciclables {
        display: flex;
    flex-flow: row wrap;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    }
#pesoreciclabless ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 31rem;
    margin-top: 1em;
}
#pesoreciclables li{
    list-style: none;
    display: flex;
    flex-flow: row;
    margin-top: 1em;
    margin-bottom: 4em;
    
}
.pesoreciclables a{ 
    display: flex;
    flex-flow: column;
    justify-content:center;
    align-items: center;
    width: 3.5em;
    height: 2em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    background-color: #2f4643;
    text-decoration: none;   
    text-align: center;
    position: relative;
    border-radius: 1em;
    color: aliceblue;
}
#numeropeso {
        margin-left: 2.4em;
     color: #F5A363;
    }
#todosreciclable div{
padding: 1em;
}
.materialesreciclables p{
    align-items: baseline
}
/*mensajeenviado*/

#correo img{

    justify-content: center;
   display: flex;
   width: 70%;
     margin: 3em
    
}

/*contacto*/

/contacto/
#aboutus{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
    justify-content: center
}
#aboutus img{
    margin: 1em
}
#contacto{
    display: flex;
    flex-direction: column;
    margin-bottom: -2em
}
#direcciones ul{
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
    float: right;
}
#direcciones li{
    display: flex;
    align-items: center;
   
}
#direcciones li figure{
    margin-right: 1em;
    
}
#infocontacto{
    display: flex;
    flex-direction: column;
    align-items: center
}
#todoau{
    display: flex;
    flex-direction: column
}
#contacto p{
    max-width: 25em
}

/estilos de galeria/
.galeria{
    width: 98%;
    margin: auto;
    list-style: none;
    padding: 20px;
    box-sizing:border-box;
        
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.galeria li{
    margin: 5px;
}
.galeria img{
    width: 150px;
    height:100px;
}
/listo/
#listorti div ul{
    display: flex;
    list-style: none;
}
#listo p{
  padding: 1em;
}
/estilos del modal/
.modal{
    display: none;
}
.modal:target {
    display: block;
    position: fixed;
    background:rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal h3 {
    color: #fff;
    font size: 30px;
    text-align: center;
    margin: 15px 0;
}
.gentereciclando {
    width: :100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 2;
}
.gentereciclando a {
   color: #fff;
    font font-size: 40px;
    text-decoration: none;
    margin: 0 10px;
}
.gentereciclando a:nth-child(4){
    margin: 0;
    height: 100%;
    flex-shrink: 2;
}
.gentereciclando img{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 7px solid #fff;
    box-sizing: border-box;
   
}
.cerrar {
    display: block;
    background: #fff;
    width: 30px;
    height: 30px;
    margin: 5px auto;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    color: #000;
    padding: 2px;
    border-radius: 50%;
    line-height: 1;
}
/*listo*/
#listorti div ul{
    display: flex;
    list-style: none;
}
#listop p{
  padding: 1em;
}
/*estilos del modal*/
.modal{
    display: none;
}
.modal:target {
    display: block;
    position: fixed;
    background:rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal h3 {
    color: #fff;
    font size: 30px;
    text-align: center;
    margin: 15px 0;
}
.gentereciclando {
    width: :100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 2;
}
.gentereciclando a {
   color: #fff;
    font font-size: 40px;
    text-decoration: none;
    margin: 0 10px;
}
.gentereciclando a:nth-child(4){
    margin: 0;
    height: 100%;
    flex-shrink: 2;
}
.gentereciclando img{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 7px solid #fff;
    box-sizing: border-box;
   
}
.cerrar {
    display: block;
    background: #fff;
    width: 30px;
    height: 30px;
    margin: 5px auto;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    color: #000;
    padding: 2px;
    border-radius: 50%;
    line-height: 1;
}
/*estilos de galeria*/
.galeria{
    width: 98%;
    margin: auto;
    list-style: none;
    padding: 20px;
    box-sizing:border-box;    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.galeria li{
    margin: 5px;
}
.galeria img{
    width: 150px;
    height:100px;
}


/*footer comun en todas*/
footer{
    background-color: #99c8c2;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center
}
#redes ul{
    display: flex;
    align-items: center;
}
#redes ul li{
    margin-left: 0.5em;
    list-style: none;
}



/*responsive*/
@media (min-width:780px){
/*menu*/
#llamamenu {
        display: none;
}
header nav ul {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: 100%;
        padding-top: 0;
        background-color: white
}
header nav ul.visible {
        left: auto;
}
nav li{
    margin: 0.2em;
}
/*premio*/
#premioplanta{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: left;
    align-items: center
}
/*error*/
#textoerror{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
#textoerror #titulopag {
        text-align: left;
        margin: 1em;  
}
#textoerror #titulopag p{
    margin: 0;
}
/*tutoriales*/
#cabezal{
    margin:  1em;
    display: flex;
    flex-flow: column wrap;
    align-items:flex-start  
}
#videodestacado h1{
        margin: 1em;
    }
video{
    width: 40vw;
    height: auto;
    margin: 1em;
}
#videodestacado h2{
   margin: 1em ;
   background-color: #f8c094;
   display: flex;
   
}
#videodestacado{
    display: flex;
    flex-flow: column wrap;
    align-items:flex-start
}
#videos{
    display: flex;
    align-items:flex-start;
    flex-flow: column wrap;
    flex-flow: row
    flex-flow: wrap
}
#videos{
width: 10vw;
margin: 1em;
}
/*mibosque*/
#mibosque{
    display: flex;
    flex-direction: row;
    margin-bottom: 1em;
}
#mibosque li{
    margin: 1rem
}
#flores figure{
    width: 12vw;
    position: relative
}
#sucus figure{
    width: 18.5vw;
    position: relative
}
.tuplanta img{
    width: 130%;
}
#sucus .tuplanta img{
    width: 80%;
}
.tuplanta ul img{
    width: 1.5rem;
    margin: 0 -1rem
}
#sucus .tuplanta ul img{
    width: 1.5rem;
    margin: 0 -1rem
}
#alerta{
    position: absolute;
    top:-0.5rem;
    left:-0.5rem;
    z-index: 9
}
#recordatorios {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; 
}
#recordatorios>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em 0;
}

/*buscarplantas*/
#plantas{
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
#plantas ul{
        margin-top: 0;
        margin-left: 1rem
    }
#pcorto{
        display: none;
    }
#plargo{
        display: block
}
#plantadestacada p{
    margin-top: 1em;
    max-width: 20em;
    line-height: 1.7em
}
#busqueda{
    flex-direction: row;
}
#buscador{
    margin-right: 4em;
}
#plantadestacada{
    display:flex;
    flex-direction: row;
}
#plantadestacada>div{
    width: 16em
}
#plantadestacada img{
    width: 14em;
}
#miniboton{
    width: 11em
}

/*plantainfodesb*/
#infoplanta{
    margin: 1rem 0 0 0;
    flex-flow: row wrap; 
    justify-content: space-between;
    align-items: flex-start
    }
#infoplanta details{
    display: none;
}
#infoplanta p{
    text-align: left
}
#minidescripcion{
    display: none;
}
#infoplanta > #infoplantadesktop{
    display: flex;
    flex-direction: column;
    max-width: 34em;
    margin-left: 4em;
}
#infoplanta figure{
    background-color: #F4E4DC;
    width: 20em;
    padding: 0 3em;
    border-radius: 2em;
    margin-bottom: 1em;
    position: relative
}
#mantenimiento p{
     font-size: 1.1em;
    margin-top: 1em
}
/*primera pagina*/
#todo{
    display: flex;
    flex-direction: row;
    align-items: center
    }    
#mapa img{
    width: 40vw;
}
#link1 figure{
    width: 30vw;
    position: relative
}
#link2 figure{
   width: 15vw;
   position: relative 
}
#link3 figure{
    width: 30vw;
    position: relative
}
#cabezal{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
    justify-content: center
}
/*contacto*/
#aboutus{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
    justify-content: center
}
#aboutus img{
    margin: 1em
}
#contacto{
    display: flex;
    flex-direction: column;
    margin-bottom: -2em
}
#direcciones ul{
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
    float: right;
}
#direcciones li{
    display: flex;
    align-items: center;
   
}
#direcciones li figure{
    margin-right: 1em;
    
}
#infocontacto{
    display: flex;
    flex-direction: column;
    align-items: center
}
#todoau{
    display: flex;
    flex-direction: column
}
#contacto p{
    max-width: 25em
}

/*estilos de galeria*/
.galeria{
    width: 98%;
    margin: auto;
    list-style: none;
    padding: 20px;
    box-sizing:border-box;
        
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.galeria li{
    margin: 5px;
}
.galeria img{
    width: 150px;
    height:100px;
}
/*listo*/
#listorti div ul{
    display: flex;
    list-style: none;
}
#listo p{
  padding: 1em;
}
/*estilos del modal*/
.modal{
    display: none;
}
.modal:target {
    display: block;
    position: fixed;
    background:rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal h3 {
    color: #fff;
    font size: 30px;
    text-align: center;
    margin: 15px 0;
}
.gentereciclando {
    width: :100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 2;
}
.gentereciclando a {
   color: #fff;
    font font-size: 40px;
    text-decoration: none;
    margin: 0 10px;
}
.gentereciclando a:nth-child(4){
    margin: 0;
    height: 100%;
    flex-shrink: 2;
}
.gentereciclando img{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 7px solid #fff;
    box-sizing: border-box;
   
}
.cerrar {
    display: block;
    background: #fff;
    width: 30px;
    height: 30px;
    margin: 5px auto;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    color: #000;
    padding: 2px;
    border-radius: 50%;
    line-height: 1;
}
/*infoplantab*/
#desbloqueo{
    margin: 3em 1em;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    align-items: flex-start;
}

#desbloqueo > div{
    margin-bottom: 0;
}
#premia{
        max-width: 20em;
        margin-left: 3em
}