@font-face {
    font-family: 'Poppins', sans-serif;
    src: url("fuentes/poppins.ttf");
    font-family: 'Roboto', sans-serif;
    src: url("fuentes/roboto.ttf");
}

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    /*width: 100vw;*/
    min-height: 100vh;
    min-height: -webkit-fill-available;
    justify-content: space-between;
}

html {
    height: -webkit-fill-available;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: poppins;
}

p {
    font-family: roboto;
}

a {
    text-decoration: none;
}

ul,
li {
    list-style: none;
    padding: 0em;
    font-family: roboto;
}

img {
    max-width: 100%;
    max-height: auto;
}


i {
    color: #00d587;
}


/*-------------------------------------

    HEADER = MENU + LOGO + CALENDARIO
    (ordenado de izquierda a derecha y de lo general a lo particular)

-------------------------------------*/

/* color de fondo del header */
header {
    background-color: #032107;
    margin: 0;
}


/* se ordenan horizontalmente los elementos en el header */
header div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1em;
}


/* para que el nav esté adelante de todo */
header div nav {
    z-index: 9000;
}


/* ---Menú hamburguesa desplegable--- */

/* botón de menú desplegable */
#llamamenu {
    /* quitada la apariencia preestablecida */
    background-color: #032107;
    color: #f3fbec;
    border: none;
    position: relative;
    z-index: 9999;
}

/* el menu hamburguesa que se despliega al costado */
header div nav > ul {
    background-color: #032107;
    padding-left: 1.2em;
    padding-top: 6em;
    display: flex;
    flex-direction: column;
    left: -65%;
    transition: all 0.3s ease;
    top: 0;
    position: fixed;
    width: 60%;
    height: 100%;
    box-shadow: 0.5em 0em 0.5em rgba(3, 33, 7, 0.5);

}

/* todos los links de las secciones y subsecciones */
header div nav ul li a {
    color: #00d587;
    display: flex;
    padding: 0.5em;
}


/* cuando pase el cursor sobre las secciones cambia de color el fondo y la tipografía */
.secciones a:hover {
    background-color: #f0b047;
    display: flex;
    padding: 0.5em;
    color: #f3fbec;
}

/* Espacio entre los íconos y sus títulos*/
header div nav ul li i {
    padding-right: 0.3em;
}

/* Íconos de las secciones */
.secciones i {
    color: #00d587;
}

.secciones i:hover {
    color: #f0b047;
}


/* SUBSECCIONES */
.paginas-secundarias {
    /* para que las subsecciones no aparezcan */
    display: block;
    padding-left: 2em;
    background-color: #011504;
    width: 100%;
    height: 2.5em;
    /*z-index: 1000;*/
}

.ocultar {
    display: none;
}

/* cuando esté la clase visible se muestra el menu */
.visible {
    left: 0;
    transition: all 0.5s ease;
}


/* ---Merlo Recicla = título+logo--- */


/* logo de la app + título "Merlo Recicla" */
#logotipo {
    display: flex;
    align-items: center;
    color: #f3fbec;
    font-family: poppins;
    font-weight: bold;
    font-size: 1.1em;
}

/* tamaño del logo de la app */
#logoapp {
    width: 2em;
    height: 2em;
    /* separar imagen del texto */
    margin-right: 0.5em;
}



/* ----------Calendario---------- */


/* Quitarle los estilos predeterminados al botón */
#llamacalendario {
    background-color: #032107;
    border: none;

}

/* Agrandar el ícono del calendario */
#llamacalendario i {
    font-size: 2em;
}

/* Ventana del calendario oculta */
#calendario {
    color: #f3fbec;
    background-color: #032107;
    position: absolute;
    z-index: 9999;
    /* para que la ventana se esconda hacia arriba */
    top: -14em;
    right: 1em;
    width: 20em;
    height: 14em;
    padding: 1em;
    box-shadow: 0em 0.5em 0.5em rgba(2, 25, 5, 0.5);
    transition: all 0.5s ease;
}

/* Ventana del calendario visible */
#calendario.enpantalla {
    position: absolute;
    /* para que la ventana baje, no funcionó el top */
    top: 5em;
    transition: all 0.5s ease;
}


/* Para resaltar algunos números del mes*/
.jornada {
    background-color: #f0b047;
    color: #032107;
    font-weight: 700;
    border-radius: 50%;
    padding: 0.2em;
    width: 1.5em;
}

/* Para que título y subtítulo estén centrados */
#calendario li {
    text-align: center;
}

/* Título del calendario "Jornadas de Recolección" */
#calendario > li:first-child {
    font-size: 1.2em;
    margin-bottom: 0.5em;
    background-color: #f0b047;
    color: #032107;
    font-weight: 700;
}

/* Colocar una línea divisoria entre el mes y los números */
#mes {
    border-bottom: solid 0.2em #f3fbec;
}

/* Distribución de los números */
.semanas {
    display: flex;
    justify-content: space-around;
}

/* Los números que pertenecen a la primera semana de julio tienen opacidad para diferenciarse */
.julio {
    color: rgba(243, 251, 236, 0.5);
}

/* Para que los links no se vean azules */
.jornada a {
    color: #032107;
}

/*------------JORNADA 1----------*/

.jornada1 .ecocanje {
    background-color: #CCEAD5;
    box-shadow: 0.1em 0.1em 0.1em rgba(3, 33, 7, 0.5);
    padding: 1em;
    max-width: 100%;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

.jornada1 .ecocanje img {
    width: 6em;
}

.jornada1 .ecocanje div {
    text-align: center;
}


.jornada1 img {
    width: 29em;
    object-fit: cover
}

.jornada1 .actividades li {
    padding: 1em;
    background-color: #CCEAD5;
    margin-top: 2em;
    max-width: 100%;
    box-shadow: 0.1em 0.1em 0.1em rgba(3, 33, 7, 0.5);
}

.jornada1 .contenidocompleto {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.jornada1 h4 {
    padding: 1em;
}

.jornada1 h1 {
    padding-top: 1em;
    padding-bottom: 1em;
}

.jornada1 .parteabajo {
    display: flex;
    flex-wrap: wrap;
}

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

.jornada1 p {
    color: black;
    border: solid;
    border-width: 0.1em;
    padding: 1em;
    width: 30em;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
    display: flex;
}

.jornada1 p:hover {
    background-color: #F0B047;
    color: aliceblue;
}

/*----------------------------------*/



/*----------------------------------*/

/*-----------------------------------
    
    MAIN PARA MOBILE

-----------------------------------*/

main {
    background-color: #f3fbec;
    padding: 1em 1em;
    flex-grow: 1;
    max-width: 100vw;
}

ul li > ul {
    padding-top: .5em;
    font-size: .85em
}


/* ---MAPA PUNTOS DE RECOLECCIÓN--- */
#mapa-responsive {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 80%;
}

#mapa-responsive iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 8000;
}


/* ---BOTÓN FLOTANTE--- */
#boton-flotante {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 4em;
    right: 0.2em;
    border: solid 0.15em #f0b047;
    background-color: #032107;
    border-radius: 0.5em;
    box-shadow: 0.2em 0.2em 0.5em rgba(3, 33, 7, 0.5);
    padding: 0.2em;
    text-transform: uppercase;
    z-index: 8500;
}

#boton-flotante a {
    color: #f3fbec;
    letter-spacing: 0.05em;
    font-size: 0.6em;
    font-family: "poppins";
    font-weight: 500;
    padding: 0em 0.3em 0em 0.3em;
}

#boton-flotante i {
    font-size: 0.9em;
}

/* ---PUNTOS DE RECOLECCIÓN CONTENIDO--- */

#formulario {
    padding-top: 1.5em;
    font-size: 1.4em;
    text-align: center;
}

/* Botón para ir al formulario */
#submit {
    background-color: #f0b047;
    text-transform: uppercase;
    padding: 0.5em;
    border-radius: 0.3em;
    border: none;
    font-size: 0.8em;

}


.protocolos {
    color: #f0b047;
}


#formulario a {
    color: #f3fbec;
}

#ladomapa span {
    color: #F9A825;
}

.titulosjornadas {
    padding: 0em;
}


#ladomapa ul {
    font-size: 1em;
}

#ladomapa ul li {
    margin-top: 2em;
    font-size: 1.13em;
}

#ladomapa ul li ul li {
    margin: 0em;
}

#ladomapa ul a {
    color: white;
    background-color: #F0B047;
    padding: 0em 0.4em 0em 0.4em;

}

/*---------------FORMULARIO DE MAPA-----------------------*/

.formularioretiro form {
    margin: auto;
    text-align: center;
}

.formularioretiro input {
    background-color: #70C48A;
    width: 20em;
    height: 3em;
    border: solid;
    border-color: #70C48A;
    border-radius: 2em;
}

.formularioretiro li {
    margin: 2em;
}

.formularioretiro label {
    font-size: 1.3em
}


.marcarreciclables {
    display: flex;
    justify-content: center;
    text-align: left;
}

.marcarreciclables li {
    margin: 1em;
    font-size: 0.8em;
}

#botonformulariootro {
    background: white;
    border: none;
    width: 15em;
    height: 2em;
    border: solid;
    border-width: 0.1em;
    border-color: #70C48A;
    margin-left: 1em;
}


.marcarreciclables input {
    width: 5em;
    height: 1.5em;
}


.horariosretiro {
    display: flex;
    justify-content: center;
    max-width: 100%;
}


.horariosretiro div {
    display: flex;
    flex-direction: column;
    padding: 1em;
    justify-content: space-around;
    align-items: center;
}


.horariosretiro input {
    width: 2em;
}


#seleccionararchivo {
    background-color: transparent;
    border: 0;
    border-radius: 0
}

.horariosretiro .diasdelasemana {
    padding-top: 0.6em;
}

.formularioretiro button {
    width: 15em;
    height: 3em;
    border: none;
    background-color: #f0b047;
    text-transform: uppercase;
    font-weight: 700
}


/*_________________POPUP FORMULARIO DE RECOLECCIÓN________________________*/

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 400ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.cuadro {
    padding: 1em;
    background: #70C48A;
    border-radius: 5px;
    width: 20em;
    position: relative;
    transition: all 5s ease-in-out;
    margin: auto;
    top: 13em;
}

.cuadro .cerrar {
    position: absolute;
    top: 0.3em;
    right: 0.6em;
    transition: all 200ms;
    font-size: 2em;
    color: #333;
}

.cuadro .cerrar:hover {
    color: #06D85F;
}

.cuadro .mensaje {
    margin: 1em;
    font-family: sans-serif;
}



/*-----------------------------------------------*/

/* -----------------------------------
             PROTOCOLOS
------------------------------------ */


.protocolos2021 img {
    width: 45%;
    margin-right: 1em;
}

.protocolos2021 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.protocolos2021 p {
    padding: 1em;
    font-size: 1.2em;
}


.protocolos2021 ul li {
    box-shadow: 0em 0.5em 0.5em rgba(3, 33, 7, 0.1);
    line-height: 1.8;
    color: #032107;
    background-color: #C1E6CC;
    margin: 1em;
    padding: 1em;
    width: 35em;
    height: 15em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 610;
    max-width: 100%;
}



/*----------------------------------*/


/*--------------------------------------------
      
     CSS NOTICIAS

--------------------------------------------*/

main article figure {
    width: 20em;
}

main article figure img {
    max-width: 100%;
    height: auto;
}

.fecha-y-hora {
    font-size: .9em;
}

.datos-noticia {
    font-family: poppins;
}

.noticia h2,
.noticia p {
    color: #032107;
}

.noticia h2 {
    line-height: 1em;
    padding: .2em 0em .4em 0em;
}

.noticia > div {
    padding-bottom: 2.5em;
    max-width: 20em;
}

.noticia {
    display: flex;
    flex-direction: column;
    align-items: center
}

.noticia figure:hover {
    color: aquamarine;
}

#numeros-paginas-noticias p {
    font-family: roboto;
    font-size: .9em;
    font-weight: 500;
    color: #032107;
}

#numeros-paginas-noticias {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

#numeros-paginas-noticias p:hover {
    border: solid #032107 .2em;
    width: 1.6em;
    border-radius: 100em;
    background-color: #032107;
    color: #00d587;
}

#pagina-uno p {
    border: solid #032107 .2em;
    width: 1.6em;
    border-radius: 100em;
    background-color: #032107;
    color: #00d587;
}

.leer-mas-noticia {
    color: #00d587;
    text-decoration: underline;
    font-family: poppins;
    margin-top: 1em;
}

/* ------------ JORNADA ------------ 2*/

.jornada2 {
    max-width: 100%;
    margin: auto;
}

.jornada2 .contenidonota {
    margin-top: 1em;
}

.jornada2 .contenidonota li {
    list-style: none;
    margin: 0;
}

.jornada2 .contenidocompleto {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 2em;
}

.jornada2 img {
    width: 30em;
}

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

.jornada2 p {
    color: black;
    border: solid;
    border-width: 0.1em;
    padding: 1em;
    margin: auto;
    margin-top: 2em;
    max-width: 100%;
}

.jornada2 p:hover {
    background-color: #F0B047;
    color: aliceblue;
}


.jornada2 .recibimos {
    display: flex;
    flex-direction: column;
    font-size: 1.2em;
    margin-top: 1em
}

.jornada2 ul ul {
    border-color: #032107;
    box-shadow: 0.1em 0.1em 0.1em rgba(3, 33, 7, 0.5);
    height: 10em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    list-style: square;
    padding: 1em;
    margin-bottom: 1em;
    background-color: #CCEAD5;
    max-width: 100%;
}


.jornada2 li {
    list-style: square;
    margin-left: 1em;
}


.jornada2 ul h4 {
    padding-bottom: 0.3em;
}

.jornada26nota {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


/*--------------------------------------------
      
     CSS RAZONES PARA RECICLAR

--------------------------------------------*/

#titulo-razones {
    color: #032107;
    text-align: center;
    max-width: 100%;
    line-height: 1em;
    margin-bottom: .5em;
}

#main-razones p {
    color: #032107;
    max-width: 9em;
    font-size: .9em;
    font-weight: 500;
    text-align: center
}

#main-razones img {
    max-width: 9em;
}

#main-razones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.division-razones {
    border: solid #032107 .2em;
    border-radius: .3em;
    padding: .5em;
    margin: .5em;
}

/*---------------------------------------------*/


/* -----------   NOSOTROS ---------------- */

#mainnosotroshtml {
    margin: 0;
}

#espacio {
    max-width: 75em;
    margin: auto;
    margin-bottom: 3em;
}


.espacio figure {
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
    width: 100%;
}

.espacio img {
    width: 100%;
    /* para que "desaparezca" el espacio que queda debajo de la imagen */
    display: block;
}

.espacio figcaption {
    font-size: 0.8em;
    background-color: rgba(3, 33, 7, 0.5);
    color: #f3fbec;
    padding: 0.5em;
    line-height: 1.1em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: poppins;

    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc(100% - 2em);

    transition: all 0.6s ease-out;
}

/* propiedades de figcaption SÓLO cuando
   el cursor se coloca encima de "figure" */
.espacio figure:hover figcaption {
    background-color: rgba(3, 33, 7, 0.5);
    top: 0;
    transition: all 0.6s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.espacio figcaption span {
    display: block;
    font-size: 0.75em;
    color: #f3fbec;
    margin-top: .5em;
    text-transform: none;
    font-family: roboto;
    font-weight: 500;
}

.quienesomos ul {
    margin-top: 2em;
    max-width: 75em;
    margin: auto;
    margin-bottom: 3em;
}

.quienesomos ul li {
    margin-bottom: 1em;
}


.quienesomos ul li:last-child {
    color: #f3fbec;
    background-color: rgba(3, 33, 7, 0.5);
    border-radius: 1em;
    padding: 1em;
}

#imagencooperativamerlorecicla {
    margin: auto;
}

.quienesomos ul h2 {
    margin-bottom: 1em;
    border-style: solid #f0b047;
    border-radius: solid #f0b047;
    background-color: #f0b047;
    color: white;
    width: 9em;
}



.conocermuchomas {

    margin: auto;
    margin-bottom: 2em;
    border-style: solid #f0b047;
    border-radius: 0.5em;
    background-color: #f0b047;
    width: 13em;
    font-family: roboto;
    padding: 1em 1em 1em 1em;
    text-align: center;
}

.conocermuchomas div a {
    color: #032107;
    font-weight: 700;
}


/*---------------------------------------------*/


/*-------------------------------------

    GALERIA = IMAGEN DE FONDO + CAJAS

---------------------------------------*/

h3 {
    color: #032107;
}

/* El main perteneciente al html de galería */
#galeriahtml {
    padding: 0em;
}

/* el título de la imagen de fondo */
#fondogaleria h3 {
    text-align: center;
    color: #f3fbec;
    /*text-shadow: 0.1em 0.1em 0em #032107;*/
    background-color: rgba(3, 33, 7, 0.5);
    height: 5em;
    position: sticky;
    top: 0;
}

/* El div contenedor del título y la imagen de fondo  */
#fondogaleria {
    background-image: url("../imagenes/puntoverde.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 35em;
}

#recuadros {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em 0em;
}

.recuadros figure {
    width: 20.3em;
    margin: 1em 0em;

    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
}

.recuadros img {
    /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
    object-fit: cover;
    width: 40em;
    height: 20em;
    /* para que "desaparezca" el espacio que queda debajo de la imagen */
    display: block;
}

.recuadros figcaption {
    background-color: rgba(3, 33, 7, 0.5);
    color: #f3fbec;
    padding: 0.5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: poppins;

    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc(100% - 2em);

    transition: all 0.6s ease-out;
}

/* propiedades de figcaption SÓLO cuando
   el cursor se coloca encima de "figure" */
.recuadros figure:hover figcaption {
    background-color: rgba(3, 33, 7, 0.5);
    top: 0;
    transition: all 0.6s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.recuadros figcaption span {
    display: block;
    font-size: 0.75em;
    color: #f3fbec;
    margin-top: .5em;
    text-transform: none;
    font-family: roboto;
    font-weight: 500;
}


/*JQUERY*/
.img-container img {
    padding: 1em;
    border: solid;
    border-color: #4C634D;
    padding: 0.2em;
    margin-bottom: 1em;
}




/*------------------------------------*/

/* ----------MATERIALES---------- */


.materiales {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.materiales h1,
h3 {
    width: 100%;
    padding: 1em;
}

.materiales figure {
    margin: 1em;
    position: relative;
    overflow: hidden;
}

.materiales img {
    width: 18em;
    display: block;
}

.materiales figcaption {
    text-align: center;
    background-color: rgba(0, 41, 0, 0.5);
    color: white;
    padding: 0.5em;
    line-height: 2em;
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc(100% - 3em);
    transition: all .6s ease-out;
    font-family: roboto;
    margin: auto;
}


.materiales figure:hover figcaption {
    top: 0;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;

}

.materiales li {
    list-style: square;
}

.materiales figcaption span {
    display: flex;
    justify-content: center;
    font-size: 1em;
    color: #ddd;
    margin: auto;
    text-transform: none;
    text-align: left;


}


/* ---------------------------------- */

/* ---------- RINCON DE IDEAS MOBILE---------- */
.ideasdecomunidad article {
    background-color: #64CC84;
    border: solid 1em;
    border-radius: 2em;
    border-color: #64CC84;
    width: 50em;
    margin: auto;
    margin-top: 3em;
    margin-bottom: 1em;
    box-shadow: 0.5em 0.7em 0.5em rgba(3, 33, 7, 0.5);
    max-width: 100%;

}

.ideasdecomunidad h4 {
    background-color: #032107;
    color: white;
    text-align: center;
    margin: 1em;
    box-shadow: 0.5em 0.5em 0.5em rgba(3, 33, 7, 0.5)
}

.ideasdecomunidad img {
    width: 6em;
    border: solid .2em;
    border-color: #032107;
    text-align: center;
    margin: 0.2em;
}

.ideasdecomunidad div {
    text-align: center;
}



.videotutorial {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%
}

.videotutorial iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}


.compartituidea {
    max-width: 100%;
    margin: auto;
    margin-top: 4em;
    border: solid 0.4em;
    border-color: #032107;
    width: 50em;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: roboto;
    padding: 0.6em;
}

.ideasdecomunidad input {
    width: 30em;
    max-width: 100%;
    margin-bottom: 1em;

}

.ideasdecomunidad button {
    background-color: #F0B047;
    border: none;
    text-transform: uppercase;
    width: 14em;
    height: 3em;
    font-weight: 700;
    margin: 1em;
}


#campoidea {
    height: 20em;
    width: 30em;
    max-width: 100%;
}


/*--------------------------------------

     CSS CONTACTOS

--------------------------------------*/

.redes-sociales-contacto {
    display: flex;
    align-items: center;
    padding-bottom: .5em;
}

.redes-sociales-contacto img {
    width: 2.5em;
}

.redes-sociales-contacto h4 {
    padding-left: .8em;
    color: #032107;
}



.seccion-form-contacto {
    display: flex;
    flex-direction: column;
    padding-bottom: 1em
}

.seccion-form-contacto label {
    font-family: roboto;
    color: #032107;
}

.seccion-form-contacto input {
    background-color: rgba(112, 196, 138, 0.65);
    border-radius: .3em;
    border: none;
    padding: .5em;
}

#enviar-contacto {
    background-color: #f0b047;
    margin: auto;
    font-family: poppins;
    font-weight: 600;
    padding: 0.4em 0em;
    border-radius: .3em;

}

.seccion-form-contacto textarea {
    background-color: rgba(112, 196, 138, 0.65);
    border-radius: .3em;
    border: none;
    padding: .5em;
    height: 10em;
}

#titulo-contacto {
    margin-bottom: .7em;
    color: #032107;
}

#formulario-contacto {
    margin-bottom: 3em;

}

/*------------------------------------*/

/*-------------------------------------

    FOOTER CON REDES SOCIALES + FRASE

-------------------------------------*/

footer {
    background-color: #032107;
    color: #f3fbec;
    text-align: center;
    padding-top: 0.6em;
    font-family: roboto;
    font-weight: light;
}

footer > ul {
    padding-bottom: 0.3em;
}

footer > ul > li {
    padding-bottom: 0.5em;
}

.redes-sociales {
    display: flex;
    justify-content: center;
}


footer img {
    width: 2em;
}

#logoacumar {
    width: 9em;
}


footer ul li a figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer ul li a figure figcaption {
    color: #f3fbec;
    margin-left: 0.5em;
    font-size: 1.2em;
}

footer h4 {
    font-family: poppins;
    font-weight: 400;
    padding: 0.5em 0em;
    border-top: solid 0.2em #f0b047;
}

.redes-sociales li {
    padding: 0em 0.5em;
    display: flex;
}

/* ---ACÁ TERMINA EL FORMATO MOBILE--- */


/*--------------------------------------

    FORMATO DESKTOP Y TABLET 

----------------------------------------*/

@media(min-width:768px) {

    /* ---------HEADER--------- */


    header div {
        padding: 0.4em;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    #llamamenu {
        display: none;
    }

    header div nav {
        order: 1;
        max-width: 100vw;
    }

    header #contenedor {
        order: 3;
    }

    header div nav ul {
        display: flex;
        position: relative;
        flex-direction: row;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    header div nav ul li {
        width: 11em;
        font-size: 0.9em;
        display: flex;
        justify-content: center;
        align-items: center;

    }


    .secciones:hover .subsecciones {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 12.9em;
        padding-left: 0;
    }


    header div nav > ul {
        left: 0;
    }


    #calendario {
        right: 2.5em;
    }


    #llamacalendario i:hover {
        color: #f0b047;
        cursor: pointer;
    }



    header div nav ul li:hover {
        background-color: #f0b047;
    }



    header div nav ul li ul {
        display: none;
        top: 100%;

    }

    header div nav ul li a {
        display: flex;
        align-items: center;
    }

    .paginas-secundarias {
        height: 3.5em;
        display: flex;
        padding: 0;
        width: 14.34em;
    }

    .subsecciones {
        display: none;

    }


    .visible {
        display: none;
    }


    /* ---MAIN, CONTENIDO DE LA PÁGINA--- */
    #mapa-responsive {
        position: relative;
        margin: 0;
        height: 0;
        width: 50%;
        padding-bottom: 50%;
    }

    #mapa {
        display: flex;
    }

    #ladomapa {
        margin-left: 2em;
    }


    #formulario {
        max-width: 15em;
        text-align: center;
        margin: auto;
        font-size: 1.8em;
        margin-top: 1em;

    }

    #submit {
        font-size: .9em;
        margin: 0.4em;
    }

    #boton-flotante {
        font-size: 1.5em;
        bottom: 7em;
        right: 1em;
        bottom: 0.2em;
    }

    #boton-flotante a {
        letter-spacing: normal;
        font-weight: 700;
    }

    /*------------POP UP FORMULARIO-------------*/
    .cuadro {
        padding: 2em;
        width: 30em;
    }


    /*--------------------------------------------
      
     CSS DESKTOP NOTICIAS

--------------------------------------------*/

    /* Imagen de cada recuadro*/
    main article figure {
        width: 30em;
    }

    .fecha-y-hora {
        font-size: 1em;
        color: #032107;
    }

    .datos-noticia {
        font-size: 1.1em;
        padding-top: auto;
        margin-top: auto;
    }

    /* cada recuadro individual*/
    .noticia {
        padding: 2em;
    }

    /* Título de cada recuadro */
    .noticia h2 {
        font-size: 2em;
    }

    .noticia > div {
        display: flex;
        flex-direction: column;
        max-width: 30em;
        flex-grow: 1;
    }

    .leer-mas-noticia {
        margin-top: auto;
    }

    #numeros-paginas-noticias {
        justify-content: center;
    }

    #numeros-paginas-noticias a {
        padding: 1em;
    }

    #main-noticias {
        display: flex;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        margin: auto;
    }

    /*-----JORNADA 1---*/
    .jornada1 .ecocanje {
        width: 30em;
    }


    /*----------JORNADA 2-----*/
    .jornada2 ul ul {
        margin-top: 1em;
    }

    .jornada2 {
        width: 60em;
    }


    #mainnosotroshtml ul {
        margin: 0em 5em;
    }


    /*--------------------------------------------
    
        GALERIA.HTML FORMATO DESKTOP    
    
    ---------------------------------------------*/

    #fondogaleria h3 {
        height: 4em;
    }

    #recuadros {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 2em 1em;
    }

    .recuadros {
        margin: 0em 3em;
    }


    /* GALERIA JQ DESKTOP*/
    .img-container {
        text-align: center
    }

    .img-container img {
        width: 15em;
        margin: 1em;
        border: solid;
        border-color: #032107;
        padding: 0.2em;

    }

    .img-container img:hover {
        opacity: 0.8;
    }

    /*--------------------------------------------
      
     CSS MEDIAQUERY RAZONES PARA RECICLAR

--------------------------------------------*/

    #main-razones p {
        max-width: 14em;
        font-size: 2em;

    }

    #main-razones img {
        max-width: 20em;

    }

    #titulo-razones {
        font-size: 4em;
        margin-bottom: .4em;
        padding: 0.4em;
    }


    .division-razones {
        margin: 1em;
        text-align: center;
    }


    /* ---------- RINCON DE IDEAS  DESKTOP---------- */


    .videotutorial iframe {
        padding: 2em;
    }


    /*--------------------------------------------
      
     CSS CONTACTOS

--------------------------------------------*/
    #main-contacto {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #titulo-contacto {
        font-size: 3em;
    }

    #formulario-contacto {
        width: 35%
    }

    #enviar-contacto {
        font-size: 1em;
        width: 10em;
    }

    #redes-contacto {
        margin-right: 14.5em;
        font-size: 1.1em;
    }

    footer ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    footer > ul {
        padding: 0em 5em;
    }
}