@charset "utf-8"
    
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

*{
    margin: 0;
    padding: 0;
}


img {
    width: 100%;
}

header {
    background-color: #AACF80;
    position: sticky;
    top: 0;
    z-index: 35;
    width: 100%;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    padding: .3em 0 
}
/*Estilos necesarios para el calendario*/
aside {
    margin: .5em;
    
}

aside span {
    padding: 5px 0px 5px 0px; 
    display: block; 
    color: #b5623a;
    font-size: 18px;
}

aside h1 {
    padding-top: 20px; 
    padding-bottom: 20px; 
    padding-left: 0x; 
    padding-right: 0px;
    color: #b5623a;
 text-decoration-line: underline;
    font-size: 40px;
    font-family: montserrat, serif;
}

aside h3 {
    padding-top: 20px; 
    padding-bottom: 20px; 
    padding-left: 0x; 
    padding-right: 0px;
    color: #62C0B7; 
    font-size: 28px;
}
/*Contenedor para calendario*/
#titulo{ 
    text-align: center; 
    color: black;
    font-size: 30px;
    margin: 0 0 1em 0;
}
#cal{
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
#cal1{
    background-color: white;
    font-family: "Montserrat", serif;
    border-radius: 1em;
    padding: .3em;
    
}

#imgcal{
    margin: .5em

}

#textoabajo{
 padding-top: 30em;
    margin-top: 1em;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) ;
  font-style: italic;
  font-style: oblique;

}
.centrar{
    margin-top: 1em;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) ;

}
.titulopedido{
    color: chocolate;
    font-style: bold;
    font-size: 32px;

}

#Formhist{
    display: block;
    width: 50%;
    text-align: inherit;
    margin: 0 auto;
    color: chocolate;
    padding: .3em 0
}
.pedidos{
    background-color: white;
    border-radius: .3em;
    position: relative;
    padding: 5px 0px 5px 5px;
    color: chocolate;
    font-size: 24px;
    margin: .6em 0
}
#pedidolist {
    border-radius: 1em;
}

/*Colabora4*/
#listo{
      width: 800px; height: 800px;
    margin: 0;
     position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) ;

}


/* Contenedor del header para que queden en horizontal */
#ContenedorHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    
}
#ContenedorHeader div:second-child {
    display: none
}


/* el boton */
#AbreMenu {
    display: block;
    width: 3em;
    height: 3em;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 100;
}

/* el menu desplegable. por favor no tocar */
#desplegable {
    background-color: #62C0B7;
    font-family: "Montserrat", serif;
    position: fixed;
    display: flex;
    flex-direction: column;
    
    flex-wrap: wrap;
    height: 100%;
    padding-right: 0em;
    border-top-right-radius: 3em;
    border-bottom-right-radius: 3em;
    transition: all .5s ease;
    z-index: 70;
    top: 0;
}
/* para que sea visible */
.visible {
    left: 0%;
    transition: all .5s ease;
}
/* para que sea invisible */
.Invisible {
    left: -110%;
    transition: all .5s ease;
}
/* la imagen de usuario con los links del longin estan aca en un flex */
#Usuario {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    margin: 5em 0em 3em -.3em;
    
}

FotoDePerfil {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    
    
    
    
}

#FotoDePerfil img:first-of-type{
    display: flex;
    height: 6em;
    width: 6em;
    padding: 0 -3em;
    margin-left: 2em;

}

/* los enlaces de login y registrarse */
#Usuario div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    text-decoration: none;

}

#Usuario div a{
    color: #E1F0E6;
    text-decoration: none
}
#NavPrincipal {
    margin: 0em 0 auto;
}

#NavPrincipal > a {
    width: 10em;
}
#NavPrincipal nav ul {
    text-decoration: none;
    list-style: none;
}

#NavPrincipal nav ul li {
    margin-left: -2em;
    margin-right: -0em;
    padding: .5em 2em .5em 4em ;

}
/* que cuando le pases el mouse por arriba se vean bien los links del nav */
#NavPrincipal nav ul li:hover {
        color: #AACF80;
        background-color: #E1F0E6;
        
    
}

#NavPrincipal nav ul li:hover a {
    color: #62C0B7;
    
}

#NavPrincipal nav ul li a {
    font-family: "Montserrat", bold;
    text-decoration: none;
    color: #E1F0E6;
    font-size: 2em;
    text-transform: uppercase;
    margin: 2em 0;
    
}
#aca {
    background-color: #E1F0E6;
    color: #62C0B7;
}

ul li {
    text-decoration: none;
}

#ajustes {
    display: flex;
    flex-direction: column;
    margin: auto 0 2em 2em;
    color: #E1F0E6;
    }

#logomerve img {
    max-width: 15em;
    max-height: 2.5em;
    width: 75%;
    margin-left: 1em;
        
}
/* poner la etiqueda body1 cuando tiene el color de fondo claro */
#body1 { background-color: #F2F2D8}
/* poner la etiqueta body2 cuando tiene el color de fondo oscuro */
#body2 { background-color: #62C0B7}

h1 {
    font-family: "Montserrat", sans-serif;
    text-align: center;
    padding: 1em 0 .2em 0
}

h2 {
    font-family: "Montserrat", sans-serif;
}

h3 {
    font-family: "Montserrat", sans-serif;
}

h4{
    font-family: "Montserrat", sans-serif;
}

p {
    font-family: "Montserrat", sans-serif;
}
/* Usar esta class para elementos que van en 1 columna */
.UnaColumna {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin: 1em .5em;
}

.UnaColumna h1 {
        text-align: center;
}
.UnaColumna h2 {
        text-align: center;
}
.UnaColumna p {
    margin: 0em 1em
}
    

#camioncito {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    margin: 2em .7em .5 ;
}
#camioncito img {
    width: 9em;
    margin-right: .3em;
}
#camioncito a{
    background-color: #62C0B7;
    border-radius: 1em;
    margin-bottom: 1em;
    width: 40%;
    padding: .6em;
    height: 100%;
    text-decoration: none;
    font-family: montserrat, sans-serif;
    text-align: center;
    color: #F2F2D8;
    display: block;
    
    
}
#listo2{
    position: absolute;
    z-index: 5;
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    top: 0;
    height: 100%;
    z-index: 2;

}

#cartel {
    position: relative;
    display: flex;
    
}
#flecha{
    position: absolute;
    z-index: 7;
    top: 76%;   
    left: 13.5%;
    width: 7.5%;
}

#FotosJornada{
    width: 100%;
    display: block;
}

.slider {
    width: 100%;
}

.slider img {
    width: 100%;
    display: block;
}
/* usar esta class para que queden en flex dos columnas */
.DosColumnas {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin: 2em 1em;
}

.DosColumnas h3 {
        width: 100%;
        text-align: center;
}
#jornadas{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin: 2em 1em;
    
}

#jornadas h3{
    width: 100%;
    text-align: center;
}

        

#Caja1{
    width: 49%;
    max-width: 60%
        
}


/* una subflex dentro de una columna */
#Redes {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: 40%;
    height: 3em;
    margin-left: 1em;
    
}
#redes a {
    background-color: #AACF80;
    border-radius: 1em;
    margin-bottom: 1em;
    max-width: 20em;
    padding: .3em;
    height: 1.5em;
}
#redes img {
    height: 1.5em;
}

#login p label {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#login p input {
        border: none;
    height: 2em;
    border-radius: 1em;
    background-color: #E1F0E6;
}

#descripcion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    text-align: center;
    margin: .7em
    
    
    
}
#descripcion1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    text-align: center;
    
    
    
}

#descripcion p {
    text-align: left;
}

#descripcion h1{
    text-transform: uppercase;
    text-align: center;
}

#ListaColores {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: flex-start;
    width: 90%;
    margin: .5em auto 0 auto
    
    
}

#ListaColores p {
    font-size: .8em;
    color: #E1F0E6;
}

.circulitos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 10%;
 
    
}



.DosColumnas2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;   
    background-color: #83cec7;
    width: 80%;
    margin: auto;
    border-radius: 1em;
    position: relative;

}

.DosColumnas2 p {
    width: 40%;
    color: #E1F0E6;
    padding: 1em 0;
}

.DosColumnas2 figure:first-child {
    width: 50%;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

.DosColumnas2 img {
    max-width: 100%;
    max-height: 8em;
    width: auto;
}

.punto {
    position: absolute;
    top: .3em;
    right: .3em
}
.punto img {
    width: 1em;

}
.cuadro1 {
    margin-top: 1em;
}
.cuadro1 h2 {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    color: #E1F0E6;
    text-transform: uppercase;
    
}

#CargaReciclables ul{
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: flex-start;
    
    
}
#descripcion1 p {
    color: #b5623a;
    
    
}
#NoReciclamos {
    color: black;
}

.leyenda {
    color: #b5623a;
}
.titulo img{
    width: 1em;
    padding-left: 1em;
}

.titulo {
    text-align: center;}

    width: 100%;
}

.titulo p {
    display: block;
    margin: auto;
    text-align: center;
}
.marcado {
    position: absolute;
    background-color: #62C0B7;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 1em;
    display: none;

}

.marca:checked ~ .marcado {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    
}

#carton2 {
    margin: 2.15em auto auto auto
    
}

#Papel2 {
    margin: 3.6em auto auto auto
}

#Vidrio2 {
    margin: .5em auto auto auto
}

#Plastico2 {
    margin: .5em auto auto auto
}

#Metal2 {
    margin: .5em auto auto auto
}
.CajaRecicla input {
    margin-top: 3em;
    position: relative;
    z-index: 1;
    margin: .4em auto;
}

#CargaReciclables li {
    list-style: none;
    width: 40%;    
    
}
.CajaRecicla {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    background-color: #AACF80;
    border-radius: 1em;
    width: 9em;
    height: 9em;
    position: relative;
    margin: auto;
}
#CargaReciclables li div:last-child img {
     max-width: 8em;
    max-height: 7em;
    width: auto;
    display: flex;
}

#CargaReciclables li div:last-child input{
    margin: .4em auto;
    
}

#siguiente {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: auto;
    width: 10em;
    margin: auto 0 0 0 ;
    
    
}
#enviar1{
    display: block;
    border-style: none;
    background-color: #AACF80;
    padding: .6em .2em;
    border-radius: 1em;
    min-width: 125px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
    color: #F2F2D8;
}
#enviar2{
    display: block;
    border-style: none;
    background-color: #AACF80;
    padding: .6em .2em;
    border-radius: 1em;
    min-width: 125px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
    color: #AACF80;
}
.UnaColumna3{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin-top: 1em;
}

#Form2{
    background-color: #C8DCAD;
    display: block;
    width: 50%;
    text-align: center;
    margin: 1em auto 1em auto;
    border-radius: .5em;
    color: #b5623a;
    padding: .3em 0;
}

#ListaFechas {
    width: 100%;
    
}

#Mdesktop {
        margin: 0;
    display: none;
     position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
#Mmobile2 {
        width: 90%;
        margin: auto;
}
#mapas{
    display: flex;
    margin: auto;
    
}

#mapa1 {
    position: relative;
    margin: 0 .5em;
}

#mapa1 figure{ 
    position:relative;
    margin: 0em 0;
    
}
#botones{
;		  
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1em;

}
#botones2{
;		  
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1em;

}

#botones input:last-child{
    background-color: #62C0B7;
}
#botones2 input:last-child{
    background-color: #62C0B7;
}


}

#listado {
    background-color: #E1F0E6;
    padding: 1em .5em;
    border-radius: 1em;
    margin-top: 2em;
    width: 100%
}

.fechas{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    margin: 2em 0;
    background-color: #AACF80;
    padding: .4em;
    border-radius: .3em;
    position: relative;
    
}
.fechas input{
    margin: auto 0
}


.DNotSelected{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start; 
    align-content: flex-start;
    position: relative;

}

.DSelected{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start; 
    align-content: flex-start;
    display: none;
    background-color: #62C0B7;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: .4em .4em;
    border-radius: .5em;
}

.fecha:checked ~ .DSelected{
    display: flex;
    
}

.fecha{
    position: relative;
    z-index: 1
}

.dia {
    color: #b5623a;
    margin: 0 .5em;
    padding-right: .5em;
    border-right-color: #F2F2D8;
    border-right-style: solid
    
}
#lugares input {
    width: 1em;
}

.lugares h4 {
    color: #b5623a;
}

.lugares p {
    color: #F2F2D8;
}
#datousuario-bloque {
    background-color: #a7d685;
    border-radius: 1em;
    margin: .5em 0;
    text-align: left;
    padding: .5em 1em;
    color: #b5623a;
    font-family: "Montserrat", sans-serif;
}
.botonesusuario{
    ;		  
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1em;
    font-family: "Montserrat", sans-serif;
   
    }
#botonusuario{
    background-color: #a7d685;
    border-radius: 1em;
    padding: .5em;
    text-decoration: none;
    color: #F2F2D8
}

.marca1{
    position: relative;
    z-index: 3;
    transform: scale(1.5);
    
}

#norte {
    position: absolute;
    left: 35%;
    top: 11%;
}
#norte img:first-of-type{
    position: absolute;
    top: 
    left: 
}
#norte img:last-of-type{
    position: absolute;
}



#centro {position: absolute;
top: 16%;
left: 58%;
}
#centro img:first-of-type {position: absolute;
}
#centro img:last-of-type {position: absolute;}
#sur {position: absolute;
    top: 80%;
    left: 13%;

}

#sur img:first-of-type {position: absolute;
}
#sur img:last-of-type {position: absolute;}

.gno {
    position: absolute;
    width: 3.5em;
    top: -70px;
    left: -19px;
    z-index: 1;
}
.gclick {width: 5em;
    top: -87px;
    left: -29px;
display:none;
}

.marca1:checked ~ .gclick {
    display: block;
   
    
}
.marca1:checked ~ .gno{
    display: none;
   
}

#buscar{
    margin: .5em;
}
#busqueda {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #C8DCAD;
    padding: .5em;
    border-radius: 1em;
    
}
#busqueda figure {
    width: 2.6em;
}
#busqueda input {
    width: 85%;
    height: 2em;
    border-style: none;
    border-radius: 2em;
    padding: 0 .5em;
    font-size: 1.4em
    
}

/* el nav secundario */
#NavSecundario {
    position: fixed;
    background-color: #C8DCAD;
    bottom: 0;
    height: 3em;
    width: 100%;
    z-index: 28;
}

#NavSecundario Nav {
    padding: .5em 0;
}

#NavSecundario nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-around;
    list-style: none;
    
}

#NavSecundario nav ul li {
    height: 10%;
}

#NavSecundario img {
    height: 2em
}

/* importante para que el contenido del body no quede detras del nav secundario, sino lo pisa */
footer {
    margin-top: 4em;
}

/* tamaño escritorio. punto de quiebre ideal */
@media (min-width: 800px) {
    #ContenedorHeader {
    justify-content: flex-start;
    flex-direction: column;
    
}
    #logomerve {
        margin-left: 2em;
        
    }
    #Navegador{
        display: none;
    }
    
    #AbreMenu {
        display: none;}

/* el menu desplegable. por favor no tocar */

#desplegable {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 3em;
    padding: 0 3em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    border-top-right-radius: 0em;
    transition: all .5s ease;
    top: .3em;
    margin: 0;
    }
    h1 {
        padding: 0;
    }
    
    /* el nav secundario se pone arriba de todo */
    #NavSecundario {
    top: 0;
    right: 0;
    height: 2.5em;
    width: 50%;
    background-color: #AACF80;
    z-index: 38;
    }
    .Invisible {
    left: 0;
    }
    #Usuario {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    margin: 0em;
    padding: 0;    
    
    }
    #Usuario div {
        justify-content: center;
        align-content: center;
        margin .5em 0;
    }
    
    #FotoDePerfil {
    width: 2em;
        height: 2em;
    justify-content: flex-start;
    align-content: flex-start;
    margin: 0 .5em 0 0;
    padding: 0;
    }
    #FotoDePerfil img:first-of-type{
    display: flex;
    padding: 0 -3em;
    margin: 0;
    width: 100%;
    height: 100%

    }
    #NavPrincpal{
    width: 1000%;
    margin: auto;

    }
    
    #NavPrincipal > a {
    width: 1000%;
    }

    #NavPrincipal nav ul {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        align-content: center;
        margin: auto;
    }
    #NavPrincipal nav ul li {
    margin-left: 0;
    margin-right: -0em;
    padding: 2em 1em ;
    font-size: .5em;
    }
    
    #Ajustes{
        display: none;
    }
    
    #NavSecundario Nav {
    padding: .5em 0 .2em 0;
    }
    /* esto arregla el una columna en ancho de pantalla grandes */
    .UnaColumna {
    display: flex;
    max-width: 60%;
    flex-direction: column; 
    justify-content: center;
    align-content: center;
    margin: 2em auto;
    }
    #mapa2 {
        width: 50%;
    }
    
    
    
    figurecaption {
        font-family: "Montserrat", sans-serif;
        font-size: 1.2em;
    }
    
    #cal{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    }
    #imgcal{
    margin: 2em 3em;
    width: 40%;

        
    }
    #listo2{
        display: flex;
        justify-content: center;
    }
    #fotousuario{
        width: 50%;
        margin: auto;
        
    }
    #cartel {
    position: relative;
    display: block;
    width: 50%;
    margin: auto
    
    }
    #flecha{
    top: 76%;   
    left: 13.4%;
    width: 7.5%;
    }
    aside{
        width: 40%;
        margin: 2em 2.9em;
    }
    aside h1{
        padding-top: 10px;
        padding-bottom: .7em;
    }
    
    .UnaColumna2 {
    display: flex;
    max-width: 60%;
    flex-direction: column; 
    justify-content: center;
    align-content: center;
    margin: 2em 0em;
        
    }
    #buscar{
        width: 50%;
        margin: auto;
    }
    
    .slider div {
        
    }
    #ListaFechas {
    width: 50%;
    margin: 0 auto;
    
    }
    #mapa1 {
    position: relative;
    margin: 0 3em;
    
    }

    #mapa1 figure{
    width: 50%;
        margin: auto;
    
    }
    #mapa1 form {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #norte{
        left: 35%;
        top: 13%;
    }
    #centro {
        top: 18%;
        left: 58.5%;
    }
    #sur {position:;
    top: 88%;
    left: 13.5%;
    }
    #ListaColores {
        width: 100%;
        display: flex;
        margin:  auto;
    }
    
    #descripcion1 {
        flex-wrap: wrap;
        margin: 0 auto 0 auto;
    }
    
    #temporal{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        margin: 2em 0;
        width: 30%;
        display: flex;
        flex-direction: column;
    }
    
    #descripcion {
        margin-top: -2em;
    }
    
    #descripcion h1{
        margin-top: 2em;
    }
    
    .UnaColumna h1 {
        display: inline;
        width: 100%;
        margin: 0;
    }
    
    #jornadas{
        display: flex;
        flex-direction: column;
        width: 30%;
        justify-content: flex-start;
        align-content: center;
        padding: 0;

        
    }
    
    #jornadas h3{
        margin-bottom: .3em;
    }
    
    #Caja1{
    width: 100%;
    margin: 0;
    max-width: none;
    }
    #pedidolist{
        width: 100%
    }
    
    #Redes {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: none;
    height: 3em;
    margin-left: none;
    margin-top: 2.5em;
    
    }
    #redes a {
    background-color: #AACF80;
    border-radius: 1em;
    margin-bottom: 1em;
    max-width: 100%;
    padding: .3em;
    height: 1.5em;
    }
    
   #camioncito {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    width: 30%;
    margin-top: 2.8em;
    
    }
    #camioncito img {
    width: 100%;
    margin-right: 0em;
    margin-bottom: 1em;
    }
    
    #camioncito a {
    height: auto;
    width: 92%;
    margin: 0;
        
    }
    
    #camioncito p {
        margin-top: 2.5em
    }
   
    #home {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 2.5em;
        
    }
    /* hay que */
    /* no se por que es necesario arreglarlo, pero se descuarengica todo si no está */
    .DosColumnas {
        display: flex;
        align-content: flex-start;
        margin: 2em 0 2em 0;
        width: 100%
    }
    
    .UnaColumna2 {
        margin: 3em auto 2em auto;
        }
    .DosColumnas2{
        min-height: 9em
    }
    
    .cuadro1{
        width: 50%;
    }
    .DosColumnas3 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    #ListaColores p {
    font-size: 1em;
    }
    .circulitos img {
        max-width: 3em;
    }
    
    #CargaReciclables li div:last-child {
        width: 16em
    }
    
    #CargaReciclables ul {
    list-style: none;
    display: flex; 
    flex-direction: row;
    justify-content: space-around;
    align-content: space-around;
    width: 100%;
    
    }
    #CargaReciclables li {
        width: 30%;
    }
    
    #ListaColores2 form{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
        align-content: flex-start;
        margin: auto;
        
        
    }
    .marca1{
    transform: scale(1.7);
    
    }
    
    #UnaColumna3{
        display: block;
        width: 100%;
    }

    
    #botones {
        display: flex;
        width: 100%;
        margin: auto  0 0;
    }
    #botones2 {
        display: flex;
        width: 50%;
        margin: .5em auto;
    }
    footer {
        margin-top: 1em;
    }
}
@media (min-width: 1020px) {
    .cuadro1{
        width: 33%;
        margin: 0 auto 0 auto;
        justify-content: space-between;
        }
    .DosColumnas2 {
        margin:  0em 1em 1em 0;
        min-height: 10em
    }
    .DosColumnas3 {
        margin: 0 0 0 3em;
    }
}