@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');

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

img{
    max-width:  100%;}




/* íconos */

.material-icons {
    padding-right: .25em;}



/* contenedor centrado y con ancho máximo */
.contenedor {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    background-color: rgb(0, 0, 0);}

#logo {
    font-family: 'Marck Script', cursive;
    width: 3em;
    font-size: 1.2em;
    display: block;
    position: relative;
    color: white;
    z-index: 9999;
    line-height: 1em;
    top: 0.4em;
    
    }

header a{
    text-decoration: none;
}

/* *** menu *** */

header nav {
    color: white;
}

header nav a {
    color: rgba(255, 255, 255, 0.4);
    padding: .5em 1em;
    text-decoration: none;
    display: flex;
    justify-content:center;
}

header nav a:hover {
   color: rgb(255, 255, 255);
}

.blanco {
    color: rgb(255, 255, 255);
}

/* boton que llama al menu */
#llamamenu {
    background-color: rgba(240, 248, 255, 0);
    color: #ffffff;
    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    /* caja flexible */
    display: flex;
    position: fixed;
    top: 0em;
    left: 0em;
    z-index: 9998;
}

#llamamenu:hover {
    background-color: rgba(0, 0, 0, 0.75);
}

#llamamenu i { 
    padding: 0;
    /* centrado en la horizontal y en la vertical */
    margin: auto;
}


/* el menú propiamente dicho */
header nav ul {
    background-color: rgba(0, 0, 0, 0.84);
    position: fixed;
    opacity: 100%;
    top: 0;
    right: 100%;
    height: 100vh;
    width: 100%;
    transition: all 0s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0em
}

.visible {
    /* el menú se muestra
    corriéndose a la izquierda */
    opacity: 100%;
    transition: all .0s ease;
    right: 0%;
}

header ul li {
    list-style: none;
    font-family:  'Bebas Neue', sans-serif; 
    font-size: 1.8em;
}





#brocoli {
    background:  #e6e6e6  url(../imagenes/imgheaderancha1.png)no-repeat center 60%;
    height: 100vmin;
    margin: 0em 0em 0em 0em;
 box-shadow:    inset 0 -0.3em 4em rgba(0, 0, 0, 0.1), 0em 0.1em 5em rgba(2, 2, 2, 0.3);
}

.come {
    font-family:  'Bebas Neue', sans-serif; 
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    padding-top: 9.5em
}

h1 {
    font-family: sans-serif;
    font-size: 1em;
    margin-top: 1.5em;}


.informacionbolsones {
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
 
}

.bolsonesdeverdura{
    width: 60%;
    padding: 0em 0em 0em 1em;
}

h2 {
    color:  #000000 ;
    font-family:  'Bebas Neue', sans-serif; 
    font-size: 1.3em;
}

.bolsonesh{
    padding: 1.7em 1em 0em 1em;
    text-align: center;
    background-color: white;
}

.bolsonesdeverdura p {
    font-family: 'Lato', sans-serif;
    margin: 0em 0em 0em 1.8em;
    font-size: 0.9em;
     }

.logobolson {
    width:22%;
    height: 22%;
    margin: 0.3em 0em 0em 1.5em;
}

.bolsones{
    margin: 1.5em 0em 0em 3.6em;
    width: 100%;
}


.bolsones li {
    font-family: 'Lato', sans-serif;
    font-size: 0.9em;
    padding: 0em 0.3em 0.5em 0.3em;
}


.box {
    font-family:  'Bebas Neue', cursive; 
    font-size: 1.4em;
    width: 5.2em;
    margin: 0.5em auto;
    text-align: center;
    padding: 0.2em 0em;    
}

.verdurasdecoracion  {
    background: rgb(36, 140, 172) url(../imagenes/imgverdurasmain.jpg)no-repeat center center;
    height: 15em;
    width: 100%;
  box-shadow:    inset 0 -0.3em 1em rgba(0, 0, 0, 0.1), 
             0em 0.1em 5em rgba(0, 0, 0, 0.3);
}

.pasos {
    background-color:  #e6e6e6; 
    text-align: center;
    padding: 2.5em 1em;}

.pedi {
       font-family:  'Bebas Neue', sans-serif; 
    font-size: 1.3em;
    color: black;
}

.pasosiconos h3 {
    font-family:  'Bebas Neue', sans-serif; 
    font-size: 2em;
    color: black;
    margin: 0.3em 0em; 
    }

ol form {
    background-color: rgba(0, 0, 0, 0.84);
    position:fixed;
    opacity: 100%;
    right: 100%;
    width: 100%;
    height: 30%;
    bottom: 0em;
    transition: all 0s ease;
    justify-content: center;
    z-index: 9999;
}


.contenedorr p {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.84);
    width: 100%;
    height: 30%;
    color: white;
    z-index: 9999;
    justify-content: center;
    bottom: 0em;
    right: 100%;
    padding: 3em 4em 0em 4em
}

.cierra{
    margin: 3em ;
}

.visibles{ 
    transition: all .0s ease;
    right: 0%;
    
}

.visibl{
       transition: all .0s ease;
    right: 0%;
}

.confirmacion{
        position: fixed;
    background-color: rgba(0, 0, 0, 0.84);
    width: 100%;
    height: 30%;
    color: white;
    z-index: 9999;
    bottom: 0em;
    right: 0%;
    transition: all .0s ease;
    display: flex;
    flex-direction: column;
    padding: 3em 2em;
    
    
}

.confirmacion button{
    
    margin: 2em 0em 0em 0em;
    
}

.butonindexdos{
    color: #3e3e3e;
    background-color: white;;
    width: 6em;
    text-decoration: none;
    padding: 0.34em;
    margin: 0.4em 0.4em;
    
}

.llamasuscribete {
    background-color: rgba(240, 248, 255, 0);
    cursor: pointer;
    /* caja flexible */
    display: flex;
    align-items: center;
    position: relative;
    z-index: 9998;
    border-radius:  0.5em;
    border: rgb(12, 33, 36) 0.1em solid;
    width: 5.5em;
    height: 1em;
    margin: 1.5em auto;
    padding: 0em auto;
    font-family:  'Bebas Neue', sans-serif;  
    font-size: 1.1em;
    color: black;
    
}

.llama{
    width: 6em;
}


h4 {
    font-style: italic;
    margin-bottom: 3.5em}





.pasos img {
    width: 30%;
    margin: 1.5em 0em 0em 0em;}



.pasosiconos li {
    list-style: none;
    margin: 2.5em 0em 0em 0em;
    
}


.pasosiconos li div{
    background-color: rgb(252, 252, 252);
    width: 11em;
    height: 15em;
    margin: 0em  auto;
    border: #a0a0a0 0.2em solid;
    box-shadow:    inset 0 -0.5em 1em rgba(0, 0, 0, 0.1), 
             0em 0.1em 0.2em rgba(0, 186, 255, 0.3);
}





.paso2 p, .paso3 p{
    font-family: 'Lato', sans-serif;
    font-size: 0.9em;
    margin: 0em 1.5em;
    color: black; 
    text-align: left;
    
    
}


footer {
    background-color: black;
    color:#dbdbdb;
    font-size: 1em;
    padding: 1em;}



/* voluntariado */



.foto_voluntariado{
    background:  #e6e6e6 url(../imagenes/foto_voluntariado.jpg) center center;
    height: 18em;    
}

.voluntariado{
    background-color:  #e6e6e6 ;
    text-align: center;
    padding: 4em 0em 0em 0em;
}


.sumate h1 {   
    font-family:  'Bebas Neue', sans-serif;
    font-size: 1.5em;}

.sumate p {
    font-family: 'Lato', sans-serif;
    margin: 0.5em 2.5em 0em 2.5em;
    text-align: left;
}


.manos_a_la_tierra {
    color:rgba(0, 0, 0, 0.68);
    font-family:  'Bebas Neue', sans-serif;
    font-size: 1.5em;
    font-size: bold;
    padding: 2em 2em 0em 2em;
}

.voluntariado form{
    background-color: rgba(0, 0, 0, 0.64);
    margin: 2em 0em 0em 0em;
    padding-bottom: 2em;
}

.voluntariado form h3{
    color: rgba(255, 255, 255, 0.76);
    text-align: left;
    margin: 0.5em 0em 0.5em 0.5em;
}


/* talleres */

.talleres {
    background-color:  #e6e6e6 ;
    padding: 4em 0em 2em 0em;
    text-align: center;
}

.talleres h1{ 
    font-family:  'Bebas Neue', sans-serif;
    font-size: 1.6em;
 }

.talleres div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
    margin: 2em;
    padding: 2.5em 1em 2.5em 1em;
    height: 34em;
    border: #7e7e7e 0.1em solid;}

.talleres h2{
    color: black;
    font-family:  'Bebas Neue', sans-serif;
    font-size: 1.2em;
    margin: 0em 1.5em;
    
}

.talleres h3 {
    font-family: 'Lato', sans-serif;
    font-size: 0.8em;
    margin: 0em auto 1em auto ;
    
}

.talleres #foto{
    max-width: 12em; 
    max-height:  12em; 
    margin: 0em auto;
}


.cargo {
    text-align: left;
    padding: 1em 2em 0em 2em;
    font-family: 'Lato', sans-serif;
    font-size: 0.9em;
    font-weight: bold;
}

.nombre{
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-size: 0.8em;
    padding: 0em 1.5em 0em 1.5em;
}

.talleres ul{
    padding-top: 0.5em;
}

.talleres li{
    list-style: none;
}

.fecha {
    padding: 0.5em 0em 0em 0em;
    font-size: 1.5em;
    font-weight: bold;
}

.hora {
    font-family: 'Lato', sans-serif;
    margin: 0.2em 0em 1.5em 0em;
    font-size: 0.9em;
}


.inscribete{
    background-color: rgb(51, 171, 189);
    color: rgb(0, 0, 0);
    font-family: 'Lato', sans-serif;
    font-size: 0.7;
    text-decoration: none;
    font-weight: bold;
    margin: 0em auto;
    padding:0.3em 0em;
    border-radius:   0.5em;
    box-shadow:    inset 0 -0em 0.2em rgba(106, 106, 106, 0.1), 
             0em 0.1em 0.2em rgb(98, 98, 98);
    width: 8.2em;
}




/*  nosotros*/

.mainnosotros{
    background-color: #e6e6e6;
}

.nosotros {
    padding: 4em 2.5em 3em 2.5em;
    
}
.nosotros h1 {
    font-family:  'Bebas Neue', sans-serif;
    text-align: center;
    font-size:1.5em;
    padding-bottom: 1em;
}
.nosotros h2{
    font-weight: bold;
    margin-bottom: 1em;
    color: black;
    font-family: sans-serif;
    font-size: 1em;
}

.nosotros p{
    font-family: 'Lato', sans-serif;
    padding-bottom: 1em;}

.nosotros h3 {
    font-family:  'Bebas Neue', sans-serif;
    text-align: center;
    font-size: 1.4em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.nuestrafilosofia {
    padding-bottom: 3em;
    }

.nuestrafilosofia h2 {
    letter-spacing: 0.05em;
    color: black;
    font-size: 1.4em;
    text-align: center;
    margin: 0em auto 0em auto;
}


.nuestrafilosofia div {
    display: flex;
    flex-wrap: wrap;
    margin: 1em 4.5em 1em 4.5em;
}

.transformacionsocial, .produccionagroecologica{
    font-weight: bold;
    padding: 0em 1em 0.4em 1em;
    text-align: center; 
    margin: 0em auto 0.5em auto;
}

{
    
}

.nuestrafilosofia li{
    font-family: 'Lato', sans-serif;
    margin-left: 2em;
    padding-top: 0.5em;
    
    
}
.logoproduccion, .logopersonas{
    max-width: 37%;
    max-height: 37%; 
    margin: 0em auto 1em auto;
}




/*contacto*/

.bodycontacto{
    background-color: #000000;
}

.contacto {
    margin: 0em 0em 0em 0em;
    background:  url(../imagenes/foto_contacto.jpg) no-repeat bottom center;
    color: white;
    font-size: 1.3em;
    font-weight: lighter;
    height: 18em;
    padding: 14em 1em 0em 1.5em;
}

.contacto h2{
     font-family:  'Lato', sans-serif;
 color: white;
  font-size: 0.8em;
    margin-bottom: 0.5em;
   
}


.contacto p{
      font-family:  'Lato', sans-serif;
    font-size: 0.6em;
}

.formularioc{
    height: 20em;
   

}

#contactop{
    color: white;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 2em;
}

form{
    padding: 1em 2em;
    display: flex;
    flex-direction: column;
}

input{
    padding: 0.8em;
    margin: 0.5em;
}

textarea{
      padding: 0.8em;
    margin: 0.5em;
}

button{
  padding: 0.8em;
    margin: 0.5em;
    width: 5em;
}

.confirmacioncontacto {
    position:fixed;
    background-color: rgba(0, 0, 0, 0.84);
    width: 100%;
    height: 50%;
    color: white;
    z-index: 9999;
    bottom: 5em;
    right: 0%;
    transition: all .0s ease;
    display: flex;
    flex-direction: column;
    padding: 8em 3em;
}

.butoncontactodos {
    color: #6f6f6f;
    background-color: #ffffff;
    width: 4em;
    height: 1.9em;
    text-align: center;
    text-decoration: none;
    padding: 0.4em;
    margin: 0.4em 0.48em;   
}

.butoncontacto{
    margin: 2em 0em;
}

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

.nuestrasredes h2{
      font-family:  'Bebas Neue', sans-serif;
    font-weight: lighter;
    color: white;
    font-size: 1.5em;
padding: 2em 0em 1em 0em;
}
.nuestrasredes ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  
}
.nuestrasredes li {
    width: 10%;
    margin: 0em 1em 2em 1em;
}
.nuestrasredes p{
    font-family:  'Bebas Neue', sans-serif;
    font-weight: lighter;
    color: white;
    font-size: 1.5em;
    margin-bottom: 0.5em;
}
#email{
    background: url(../imagenes/mail.png) no-repeat 0em 0em;
    height: 3em;
width: 3em;

}

.mail {
    display: flex;
    flex-wrap: wrap;
    text-decoration: none;
    color: white;
    margin-bottom: 2em;
   font-size: 1em;
    justify-content: center;
    
}

.mail p{
     font-family: 'Lato', sans-serif;
    font-size: 1em;
    padding-top: 1em;
}

.ubicacion{
    width: 100%;
}


iframe {
    width: 95%;
    height: 19.5em;
    margin: 0em 0.5em 4em 0.5em;
    border: black 0.1em solid;
}


/* pantalla pc  */

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

#logo {
    background-color: black;
    display: block;
    position: relative;
    width: 7em;
    text-align: right;
    z-index: 9999;
    top: 0.1em;
    right: 31em;   

}
    
.contenedor {
    max-width: 100%;
    max-height: 4em;
    background-color: #000000;
  
}

header nav ul {
    opacity: 100%;
    height: 0em;
    z-index: 9999;
    padding-top: 2em;
    display: flex;
    flex-wrap: wrap;
    width: 45%;
    margin-right: 2em;
    right: 0%
}
header ul li {
    font-family:  'Bebas Neue', sans-serif; 
    font-size: 1em;
}
    
main {
    padding-top: 2em}

#brocoli {
    background: #e6e6e6  url(../imagenes/imgheaderancha.png)no-repeat center center;
    height: 33em;
}

.come { 
    padding-top: 13.5em
}
 
.informacionbolsones {
    padding: .5em;
    flex-direction: column;
    align-content: center;
}

.logobolson {
    max-width:  10%;
    max-height: 10%;
    padding: 0em;
    margin: 2em auto 0em auto;
}

.bolsones{
    margin: 2em auto;
    width: 26%;
    
}

.bolsones li {
    padding-bottom:  0.5em;
}

    .box{
        margin: 0em auto 2em;
    }
    
.verdurasdecoracion  {
    height:  0em;
}

   
.pedi {
    width: 100%
}

.pasos {
    background-color: #e6e6e6;
    }
    
.pasos h4{ 
    width: 100%;}

.suscribete{
    margin: 1em auto;
    font-size: 1em;   
}

.llamasuscribite{
        width: 10em;
    }
    
ol form {
    width: 35%;
     height: 25%;
    bottom: 0em;
    right: 100%;
    transition: all 0s ease;
    justify-content: center;
    z-index: 9999;
}

    .visible {
        right: auto;
       
    }
    
   
    
.pasosiconos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2em;
    }
    
.pasosiconos li {
    width: 17em;
    margin: 0em;
}


.pasosiconos p{
    color: black;
    padding: 0em em;
   }

 .pasos .confirmacion{
        color: white;
     width: 30%;
     height: 10em;
     margin: 0em 30em 10em 20em;
    }
    
/*  voluntariado        */

.foto_voluntariado{
    background:  #e6e6e6 url(../imagenes/fotovoluntariadocopia.jpg)no-repeat ;
    width: 60%;
    height: 23.5em    
}
    
.voluntariado{
    background-color: #e6e6e6; 
    margin: 0em;
    padding-top: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sumate{
    padding-top: 0em;
    width: 50%;
    }

.manos_a_la_tierra {
    color: black;
    padding-bottom: 2em;
    }

.voluntariado form{
    background-color: rgba(145, 145, 145, 0.26);
    margin: 2em 0em 2em 0em;
    width: 35%;
    padding: 1em 2em;
    height: 20em;
}

    .confirmacion{
        width: 30%;
        height: 10em;
        margin: 0em 32em 10em 0em
    }
/* talleres*/
    
.talleres {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.talleres h1{ 
    margin:0em 0em 1em 0em;
    width: 100%;}

.talleres div {
    background-color: white;
    margin: 2em;
    height: 33em;
    width: 30%;
   }







 /* nosotros*/
    
    
    .nosotros {
    width: 60%;
    margin: 0.5em auto 0em auto;
    padding: 2em;
}

.nuestrafilosofia {
    width: 60%;
    padding-bottom: 3em;
    margin: 0em auto;
    display: flex;
    flex-wrap: wrap;}

.nuestrafilosofia h2 {
    width: 100%;
    
}

.nuestrafilosofia div {
    display: flex;
    flex-wrap: wrap;
    margin: 1em auto;
    width: 50%;
    justify-content: center;
}

.transformacionsocial, .produccionagroecologica{ 
    width: 100%;
}


.logopersonas{
    margin: 0em 11em 1em 11em;
}
    
/*contacto*/

  
.contacto {
    height: 18em;
    padding: 14em 0em 0em 22em;
}

.formulario{
    margin: 1em 15em;;
}

    .formularioc p{
        padding-left: 23em;
    }
    
form{
    padding: 1em 2em 1em 2em ;
    width: 35%;
    margin: 0em auto;
}

input{
    padding: 0.6em;
}

textarea{
    padding: 0.6em;
}

button{
    padding: 0.6em;
}

.nuestrasredes h2{
padding: 2em 0em 1em 0em;
}

.nuestrasredes li {
    width: 4%;
    margin: 0em 1em 3em 1em;
}

.ubicacion{
    width: 36%;
    text-align: center;
    padding: 0em 0em;
    margin: 0em auto;
}

.ubicacion p{
    text-align: center;
}
    

    .confirmacioncontacto{
        background-color: rgb(255, 255, 255);
        width:  30%;
        height: 10em;
        color: black;
        position: fixed;
        left: 29.5em;
        bottom: 10em;
        padding: 2em;
    }