/*General*/

*{box-sizing: border-box;list-style: none;
text-decoration: none;margin: 0;padding: 0; border: 0;font-family: 'Roboto', sans-serif}

html { display: block}

head{display: none;}

.container{margin: 0 auto;
    display: block;
    justify-content: space-between;
    
}
header{
    background: #689E54 ;
    color: white;
    padding: 1em 0;
} 

header::after{
    content: '';
    clear: both;
    display: block;
}
.container img{ width: 30%;
    height: 30%;
    margin: 0;
    
}
.site-nav{
    right:0;
    position: absolute;
    background: #689E54;
    clip-path: circle(0px at center);
    transition: clip-path ease-in-out 700ms;
}
.site-nav-open{
    clip-path: circle(150% at top right);
}
.site-nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav li{
    border-bottom: 0.05em solid white;
}
.site-nav li:last-child{
    border-bottom: none;

}
.site-nav a{
    color: whitesmoke;
    display: block;
    padding: 1em 2em;
    text-transform: uppercase;
    text-decoration: none
}
.site-nav a:hover,
.site-nav a:focus{
    background: #689E54;
    color: #464655;
}

.site-nav--icon{
    display: inline-block;
    font-size: 1.5em;
    margin-right: 1em;
    width: 1.1em;
    text-align: right;
    color: rgba(255, 255, 255, .4);
}

.menu-toggle{
   
    padding: 1em;
    position: absolute;
    top: 2em;
    right: .5em;
    
    
}
.menu-open .hamburger{
    transform: rotate(45deg);
}
.menu-open .hamburger::before{
    opacity: 0;
}
.menu-open .hamburger::after{
    transform: translateY(-3px) rotate(-90deg);
}
.hamburger,
.hamburger::before,
.hamburger::after{
    content: '';
    display: block;
    background: white;
    height: 3px;
    width: 1.75em;
    border-radius: 3px;
    transition: all ease-in-out 500ms;
}
.hamburger::before{
    transform: translateY(-6px);
}
.hamburger::after{
    transform: translateY(3px);
}

/*Barra menu para escritorio*/
@media screen and (min-width:992px) {

    .container{display:flex;
        flex-direction: column;
        width: 0;    
    }
    
   .container img{position: relative;
        margin-bottom: 2em; width: 10em; left: -6.5em;
    }
    .menu-toggle{
        display: none;
        
    } 
    
    .site-nav ul{display: flex;
    justify-content: flex-start;
    }
    
    .site-nav{
        position: relative;
        background: transparent;
        clip-path: initial;
        left: -44em
    } 
    .site-nav li{
        border: none;
    
    }
  
    .site-nav a{
        padding-top: .3em;
        margin-left: 3em;
        display: flex;
    }
    .site-nav--icon{padding-top:0;
    margin-right: .3em;
    }
    .site-nav a:hover,
    .site-nav a:focus{
        background: transparent;
    }
  
  }


/*Footer*/

footer {color: white; padding: 2em; text-align: center;background-image: url(../imagenes/footer.png);background-size:cover; background-repeat: no-repeat;background-position: top;}

footer img{height: 2em
}

#acumar-img{margin-top: 3em;}

footer ul {margin-top: .5em; margin-bottom: .5em}

footer ul li {margin-top: .5em}

.iconoredes {display: flex; justify-content: space-around; padding: 0 8em}

.iconoredes img {height: 2em; align-items: center}

/*Footer para escritorio*/

@media screen and (min-width:992px) {
footer {display: flex; justify-content: space-around}

footer img{height: 3em}

footer ul li {margin-top: .2em}

.iconoredes {display: flex;
    flex-direction: row;
    justify-content: space-around; ;margin-top: .5em;}
    .iconoredes li{margin-left: .5em;}
}

.contacto{margin-top: 3em;}

/*Pagina INICIO*/

#bodydeinicio {display: flex; flex-direction: column}

#portada {
    padding: 5em; margin-bottom:1em;
    background-image: url(../imagenes/portada.png);
    background-repeat: no-repeat; background-size: cover; background-attachment: fixed;
    background-position: center}

#portada h1 {
    margin-top: 8em;
    font-size: 45px;
    font-weight: 800;
    color: white;}

#portada h3 {
    color: white;
    font-weight: 400;
    background-color: #2C9A46;
    width: 12em;
    text-align: center}
    
#proyecto {background-color: white; padding: 4em}

#proyecto p{text-align: left;}

#proyecto h2{
    font-size: 40px;
    color:#689E54;
    font-weight: 600;
    padding-bottom: .5em; margin-top: 0; text-align:center}

.iguales h2 {text-align: start; margin-top: 0; font-size: 2em; padding-bottom: .6em;}

.iguales h3 {text-align: start; margin-top: 0; font-size: 2em}

.iniciorecorrido{background-color: rgba(174, 209, 159, 0.63); padding: 4em;}




#maininicio h4 {font-size: 18px; color:#4D6D3A;font-weight: 600; padding-bottom: .5em}

.inforeciclaje {background-color: white; padding: 4em;}

.iguales a {position: relative; top: 1.5em;background-color: #689E54;
font-size: 18px;padding:0.8em;color: white;font-weight: 400; margin-bottom: 1.5em; margin-right: 2em}

.iguales a:hover{background-color: #4D6D3A;
}

/*Pagina INICIO para Escritorio*/
@media screen and (min-width:992px) {

#proyecto {padding: 4em}

.parrafo {column-count: 2;column-gap: 3.5em;padding: 0 18em}
    
    .iniciorecorrido{display: flex; flex-direction: column; align-items: center;}
    
    .iniciorecorrido{display: flex;flex-direction: column;}

.iniciorecorrido p{margin: 0 25em; text-align: center;}
    
.inforeciclaje{display: flex;flex-direction: column; align-items: center;margin-bottom: 4em}

.inforeciclaje p{margin: 0 25em; text-align: center;} 

    .iguales a{left:1em; top:2em}

}

#fotoinicio {width: 100%; max-width: 30em; margin: 2em; align-content: center}

#logoinicio {width: 10em; margin: 1em}
    
/*Pagina NOSOTROS*/

#bodynosotros {display: flex; flex-direction: column; background-image: url(../imagenes/fondo.png);background-size: contain}

#nosotros p{margin: 0 2em}

.quienessomos h1,h2 {
    margin-top: 1em; text-align: center; font-size: 40px;
    color: #689E54;
    font-weight: 600}

.quienessomos h2{margin-top:0.5em; padding-bottom: 0}

#nosotros img {width:22em; padding: 1em; margin-left: 4em }

.quienessomos p {padding: 1em; text-align: start; margin-left: 2em}

#sumate h4 {text-align: center; background-color: #689E54;
font-size: 18px;padding:0.8em;color: white;font-weight: 400;
margin-top: 0.5em;margin-bottom: 1.5em;align-content: center; margin-left: 2em; margin-right: 2em; margin-bottom: 6em}

.quienessomos h3 { margin-top: 0.8em; text-align: center; font-size: 18px;
    color: #689E54;
    font-weight: 300; padding-left: 3em; padding-right: 3em}

.link img{width: 20em; margin: 0 4em 1em}

.link a{ text-decoration: none; color: white;}

.nosotroscolectas h2{padding-bottom: 0.5em}

.nosotroscolectas {
    max-width: 30em;
    display: flex; flex-direction: column;
    justify-content: center}

.nosotroscolectas figure{
    position: relative; overflow: hidden;margin: 1em; width: 20em;
    margin-left: 5em;
    
}

.nosotroscolectas img{
    display: block; width: 20em;
    }

.nosotroscolectas figcaption {
    background-color: #689E54; color: white; font-weight: 700; position: absolute; width: 30em; top: calc(100% - 2.8em); padding: 0.5em
}

/*Pagina NOSOTROS para Escritorio*/

@media screen and (min-width:992px) {
    
#sumate h4 {
    font-weight: 400;
    margin-top: 0.3em; width: 12em; text-align: center;margin-left: 1em; margin-right: 1em;}
    
    .nosotroscolectas figure{
        position: relative; overflow: hidden;margin: 1em; width: 20em;}

#nosotros img {margin-left: 5em; flex-direction: row; width: 40em;padding: 1em;}
    
#nosotros{display: flex}

#nosotros p{ padding: 1.5em; text-align: start; margin-right: 15em}
    
#sumate {display: flex;}

.link img {width: 30em; margin-right: 8em}

#sumate p {margin-left: 21em; margin-right: 4em}

#sumate h2{padding-top: 0.5em}
#sumate h3{margin-left: 10.4em; font-weight: 500;}
    
.nosotroscolectas {flex-direction: row; max-width: 90em; padding: 4em}


}


/*Pagina RECORRIDO*/

#mainrecorrido {text-align: center; align-content: center;}

#googlemap {text-align: center; align-content: center; border-radius: .100em; padding:.35em; margin-top: 3em;}

#vehiculo {border-radius: .100em; padding:.35em; width: 100%; max-width: 20em}

#chofer {width: 15em;padding:.35em;}


#viaje { margin-bottom: 1em;
}

#siguientesrecorridos img{; margin-bottom: 10em; width: 100% }

#siguientesrecorridos{padding-top:  2em;}
.prorecorrido a{text-align: center; background-color: #689E54;
font-size: 18px; padding:0.8em; color: white; font-weight: 400; position: relative; top: -5em}

.prorecorrido a:hover{background-color: #4D6D3A}

#separador { margin-bottom: -2em; margin-top: 1em;
    width: 100%;}

#recorridocamioneta {border-radius:10%; margin: 1em;
min-width: 50%;
    max-width:95%
}

.vieneenviaje{margin: 0 2em}
#miscosas {width: 50%; max-width: 20em}

#agregar {width: 20%; max-width: 10em}

/*Pagina RECORRIDO para escritorio*/
@media screen and (min-width:992px){

#siguiente {
   max-width: 30em; width: 100%; ;margin: 3em; border:.1em solid #689E54; 
    border-radius:2em;padding: 1em; padding: 2em
}


    
.vieneenviaje {display: flex; justify-content: space-around; padding: 0 6em}

    #datoschofer {padding-top: .4em}
    
    .viaje1{background-color: rgba(174, 209, 159, 0.63); padding: 1em 0 5em; margin: 0 10em; border-radius: 2em;}
    
    #separador {visibility:hidden}
.usuario {border-radius: 50%; margin: 1em; width: 20%;
      height: 90%}

.bloquesrecorrido {display: flex;
flex-direction: row;
    justify-content: space-around;
    margin: 3em 0 3em;}    
    
.recorridocliente{
    color: #689E54;
    border:.1em solid #689E54;
    border-radius:2em;
    display: flex;
    flex-direction: column;
    background-color: black; align-content: center;
}
    
.h60 {margin: 5em; text-align:left}

    .recorridocliente p{text-align:left; margin: 1em; color: white}

.cronograma {padding:3em 0 1em}


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

#iconosrecorrido { align-content: center;
 width: 50%;
}

#recorridocamioneta {border-radius:10%; margin: 1em;
min-width: 50%;
    max-width:5%
}


.conteiner {font-size: 1.6em; color:#689E54; border:.07em solid #689E54;
border-radius:2em; width: 20rem;
  }

#mapa {align-content: center}

#botonregistro {font-weight: 200;
    margin-top: 1.5em; width: 12em; text-align: center}


    }


/*Pagina RECICLADO*/


#mainreciclado {text-align: center; align-content: center;
    margin: 0 2em;}

#bodyreciclado {display: flex;
flex-direction: column;
align-content: center; background-image: url(../imagenes/fondo.png);background-size:contain;
    
}

#mainreciclado h1{ margin-top: 1em;
margin-bottom: .4em}

#mainreciclado h1{color: #689E54;
    font-size: 2em;}

#parrafo1{padding: 0 2em;
    margin-bottom: 2em;}
    
#parrafo2{padding: 0 2em;
    margin-bottom: 2em;}

.bloques{display: flex;
flex-direction: column;
    align-items: center;
    margin-top: 6em;
}

.listado {display: block;
 flex-direction: column;
    justify-content: center;
    
    
    }
.listado h4{ margin-left: 2em;}

.listado li{text-align: start;
}

.listado ul{list-style: none;
margin: 0; padding: 0; width: 180px}

.listado h3{color: white; margin-bottom: 1.5em; font-weight: 400;}

.reciclables {background-color: #689E54; padding: 2em 0; border-radius: 2em;}

.listado h2{color: white;margin: 0 0 .2em; text-transform: uppercase; font-weight: 800; }

.papel{display: flex;
justify-content: space-between;
margin-top: .6em;}

.plastico{display: flex;
justify-content: space-between;
margin-top: .6em;}

.metal {display: flex;
justify-content: space-between;
margin-top: .6em;}

.vidrio {display: flex;
justify-content: space-between;
margin-top: .6em;}

.basura {background-color: #689E54; padding: 2em 0; border-radius: 2em; margin-top: 2em;}

.residuoshumedos{display: flex;
justify-content: space-between;
margin-top: .6em;}

.otros{display: flex;
justify-content: space-between;
margin-top: .6em;}

.trucos{border:.1em solid #689E54;
padding: 2em 0;
border-radius:2em;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: white;}

.enlaces{display: flex;
flex-direction: row;
align-items:flex-end;}

.enlaces h3{padding-bottom: .3em;position: absolute; color:#000;margin-top: -2em; margin-left: -1.5em; font-size: 1em }

.enlaces h3:hover {color: #73c700;}

.trucos p{text-align: left;}

.quepasa{ margin-top: 2em;border:.1em solid #689E54; 
    border-radius:2em;
padding: 2em 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: white;}

.quepasa p{text-align: left;}

.beneficios{ margin: 2em 0 8em 0; border:.1em solid #689E54;
    border-radius:2em;
padding: 2em 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: white;}

.beneficios p{text-align: left;}

.bloques p{ margin: .5em 3.5em;
}

.iconitos {align-self: flex-start;
margin-left: 1em}

video{width: 100%; padding-bottom: 2em}

#iconito {width: 5em; margin-left: 1em;}

#basura{width: 100%; max-width: 30em}

/*Pagina RECICLADO para escritorio*/
@media screen and (min-width:992px) {
    
    #mainreciclado{display: flex;
        flex-direction: column;
    align-items: center; padding-top: 2em}
    
    #mainreciclado h1{display: flex;
    justify-content: center;
    color: #689E54;
    font-size: 2em;}
    
    #parrafo1{display: flex;
    justify-content: center;
    padding: 0 30em 0 30em;
    margin-bottom: 3em;}
    
    #parrafo2{display: flex;
    justify-content: center;
    padding: 0 30em 0 30em;
    margin-bottom: 5em;}
    
    .enlaces h3{margin-left: -1em;}    
    video{width: 60%; padding-bottom: 2em}
    
.bloques{display: flex;
flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    margin: 4em 0 8em}    
    
    .trucos{margin: 2em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;}
    
    .trucos p{text-align:left}
    
    .quepasa {margin: 2em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;}
    
    .quepasa p{text-align: left;}
    
    .beneficios{ margin: 2em;
     display: flex;
    flex-direction: column;
    align-items: flex-start;}
    
    .beneficios p{text-align: left;}
    
.listado{display: flex;
 flex-direction: row;
    justify-content: space-around;
    align-items: flex-start; 
    margin: 0 17em;
    }
    
    #reciclables {padding: 1em;}
    
    
    
.listado h4{ margin-left: 2em;}

.listado li{text-align: start;
}

.listado ul{list-style: none;
margin: 0 0 0 1.5em; padding: 0; width: 180px}

.listado h3{color: white; margin-bottom: 1.5em; font-weight: 400;}

.reciclables {background-color: #689E54; padding: 2em 2em 2em 0; border-radius: 2em;}

.listado h2{color: white;margin: 0 0 .2em 1em; text-transform: uppercase; font-weight: 800; }

.papel{display: flex;
justify-content: space-between;
margin-top: .6em;}

.plastico{display: flex;
justify-content: space-between;
margin-top: .6em;}

.metal {display: flex;
justify-content: space-between;
margin-top: .6em;}

.vidrio {display: flex;
justify-content: space-between;
margin-top: .6em;}

.basura {background-color: #689E54; padding: 2em 2em 2em 0; border-radius: 2em;margin-top: 0}

.residuoshumedos{display: flex;
justify-content: space-between;
margin-top: .6em;}

.otros{display: flex;
justify-content: space-between;
margin-top: .6em;}
    
}

/*Pagina BENEFICIOS*/
#bodybeneficios{background-image: url(../imagenes/fondo.png);background-size: contain;}

#mainbeneficios {text-align: center; align-content: center;}

#tierra{width: 100%;
}

.intro h2{margin: 1em 1em .1em 1em;
padding-bottom: 0;}

#mainbeneficios p{text-align: start;
margin: 0 2em 0 3em}

#mainbeneficios h4{text-align: start; margin:1em 2em 1em 3em; padding-bottom: 1em; border-bottom: solid .01em}

#mainbeneficios h3{padding-bottom: .5em; padding-top: .5em;
color:#689E54;}

.intro p{padding-bottom: 2em;}

.porque p{padding-bottom: 5em;}

.porque{background-color: rgba(174, 209, 159, 0.63);border-radius: 2em; margin: 2em; padding-top: 2em;}

.porque h3{ font-size: 1.4em;}


/*Pagina BENEFICIOS para escritorio*/
@media screen and (min-width:992px){
    
    #mainbeneficios {padding-top: 2em}
    
    #tierra{width: 20em;
    padding-top: 5em;
    margin-left: 15em;}
    
    .intro {display: flex;
    justify-content: space-around;
    align-items: flex-end
    }
    .tierra1{display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 15em;
    margin-top: 2em;
    padding-bottom: 0;}
    
    .porque{margin: 3em 29em;
        background-color: rgba(174, 209, 159, 0.63); padding-top: 3em
   }
    
}



/*Pagina CONSEJOS*/
#bodyconsejos{background-image: url(../imagenes/fondo.png);background-size: contain;}
#mainconsejos {text-align: center; align-content: center;}

.intro1 h2{margin: 0 1em; padding-bottom: .5em;
}

.intro1 h4{text-align: start; margin:1em 2em 1em 3em; padding-bottom: 1em; border-bottom: solid .01em}

.tipsreciclado li{ text-align: start;margin: 0 2em 1em 4em; list-style-image: url(../imagenes/leaf-green-small-left.png)}

.tipsreciclado {margin: 0 2em 5em;background-color: rgba(174, 209, 159, 0.63); border-radius: 2em; padding: 2em 0; }

#videoconsejos{width: 85%; padding-bottom: 2em; }

/*Pagina CONSEJOS para escritorio*/
@media screen and (min-width:992px){
    
    #mainconsejos {padding-top: 2em}
    
    .tipsreciclado {margin: 2em 27em 5em; padding: 2em 0; background-color: rgba(174, 209, 159, 0.63); border-radius: 2em}
    
    .intro1{margin: 0 25em}
    
    .intro1 h2{padding-top: 1em}
    
    #videoconsejos{width: 60%; padding-bottom: 2em}
    
}

/*Pagina QUE PASA*/
#bodyquepasa {background-image: url(../imagenes/fondo.png);background-size: contain}
#mainquepasa {text-align: start; align-content: center;}

.intro1 h4{text-align: start; margin:1em 2em 0 3em;}

.intro1 p{text-align: start;
margin: 0 2em 0 3em; padding-top: 1em;padding-bottom: 1em;}

#tiposenvases li{margin-left: 3em;list-style-image: url(../imagenes/leaf-green-small-left.png); list-style-position: inside}

.equivalencias{ margin-bottom: 3em;}
.equivalencias img{width: 25em; margin-top: 1em}

.indice{visibility: hidden;}

/*Pagina QUE PASA para escritorio*/
@media screen and (min-width:992px){

    #mainquepasa {padding-top: 2em}
.equivalencias{display: flex;
    justify-content: space-around;
    margin-bottom: 1em}

    .equivalencias img{margin-left: 0}
    
    .equivalencias #caja{margin-bottom: 6em}

    .indice ul{display: flex; flex-direction: row;
    position: absolute; left: 10.7em; visibility: visible; font-size: 13px; text-transform: uppercase}
    
    .indice a{color: #689E54;font-weight: 600}
    
    .indice a:hover{color: rgba(174, 209, 159, 0.63)}
    }
/*Pagina CREDENCIAL para escritorio*/

.link {color: #689e54; margin: 1em}



#credencial {background-color: #1a3e0d; color: white; font-family:  'Roboto', sans-serif; background-image: url(../imagenes/fondo.png);background-size: contain;}

#usuarioid  {border-radius:10em; padding-top: 2em; align-content: center}  

#credencialmain {align-content: center; text-align: center}  
h60 { color: #689E54; font-size: 250%}

h61 { color: #689E54; font-size: 250%}


@keyframes fillAnimation{
  0%{transform : rotate(-45deg);}
  50%{transform: rotate(135deg);}
}

@keyframes fillGraphAnimation{
  0%{transform: rotate(0deg);}
  50%{transform: rotate(180deg);}
}

#nivel {margin-top: 2em; width: 80%; max-width: 30em}

#galeriaid {margin-top: 2em; width: 10em; border-radius:10em}

#tituloid{margin-top: 2em; font-size: 2em;color: #689e54; font-weight: 700;
    
}

/*Pagina GALERIA*/
#bodygaleria{;background-image: url(../imagenes/fondo.png); background-size: cover;}
.galeria {
    max-width: 90em;
    padding-top: 5em;
    display: flex;
    flex-wrap:wrap;
    justify-content: center; 
}

.galeria h3{text-align: center; font-size: 30px;
    color: #689E54;font-weight: 600;}

.galeria figure{
    position: relative; overflow: hidden;margin: .170em; max-height: 30em
}

.galeria img {
    object-fit: cover;
    object-position: left center;
    display: block;
    }

.galeria figcaption {
    background-color:  #689E54; color: white; text-transform: uppercase; font-weight: 700; position: absolute; width: 17.3em; top: calc(100% - 2.5em);
    transition: all .6s ease; padding-left: .7em; padding-right: .7em; padding-top: .4em; padding-bottom: .4em; margin: 0;text-align: left;
}

.galeria figure:hover figcaption {background-color: #689E54 ; top: 0;transition: all .3s ease}

.galeria figcaption span{
    display: block;
    font-size: .70em;
    color: black; text-transform: none;text-align: start;}

.galeria p{margin: 1.5em 5em 3.5em 7em; text-align:start}




/*Pagina GALERIA para escritorio*/
@media screen and (min-width:992px) {

.galeria {margin-left: 8em; margin-right: 8em; margin-bottom: 6em;}
    .galeria p{margin: 1.5em 18em 3.5em}
}


/*Formulario*/
#bodyregistrate{background-image: url(../imagenes/fondo.png);background-size: cover;}
.formulario {padding-top:1em; text-align: center;}

.formulario li{padding: .5em; display: list-item}

input {background-color: #689E54; color: white; font-size: 1.3em}

label {display: block}

.botonregistrarse button{width: 10em; height: 3em; font-weight: 600; background-color: #689E54;margin: 1.5em; margin-bottom: 5em}

.botonregistrarse a{color: white; text-decoration: none}

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

.separte h2 {margin-top: 1.5em; text-align: center; font-size: 30px;
    color: #689E54;font-weight: 600}

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

/*Formulario recorrido*/
#bodyform{background-image: url(../imagenes/fondo.png);background-size:cover;}
.separte h4{font-weight: 400;
    margin: .8em; text-align: center}

#fecha{width: 14em; font-size: 1em; padding: .2em}

select {
    text-rendering: auto;
    color:white;
    background-color: #689E54;
    display: inline-block;
    text-align: center;
    align-items: center;
    margin: 0em;
    font-size:1em;
    padding: .2em;
    width: 14em
}

/*bienvenidx*/
#bodyenviado{background-image: url(../imagenes/fondo.png);background-size:cover;}

.bienvenidx{display: flex; flex-direction: column; font-weight: 900; text-transform: uppercase;margin: 2em 2em}

.nosotroscolectas h3{margin-top: 1.5em; text-align: center; font-size: 30px;color: #689E54;font-weight: 600}

/*enviado*/
.enviado{margin: 2em 2em 6em}
.enviado h4{text-align: center;padding: 1em}

.enviado h2{text-align: center; padding: 0.5em}

#boton a{ background-color:#689E54;text-decoration: none; color: white; padding: 1em}

.enviado img{ width: 20em; padding: 1.5em; margin-left: 3em}

/*enviado escritorio*/
@media screen and (min-width:992px){
.enviado{display: flex; padding: 3em;
    }
.enviado img{ width: 30em;}
}
.enviado h4{margin: 0 5em}