/* INICIA SECCION REGLAS CSS - PARA NO CONFUNDIR LA INFO */ 


 /* ACUERDENSE QUE LAS REGLAS SI SE LLAMANA IGUAL SE APLICAN Y NO USEN MAYUSCULA SINO ASI EJ lucaDuem asi para separar no todo en mayuscyka */

/* TIPOGRAFIAS NUNITO */ 

@import url ('https://fonts.googleapis.com/css2? family = Nunito: ital, wght @ 0,200; 0,300; 0,400; 0,600; 0,700; 0,800; 0,900; 1,300; 1,900 & display = swap' );
                   
               /* le sacamos todo lo preestablecido */ 
               /* como regla universal para que los espacios los elijamos nosotrossss y no cambie en otro dispositivo. */ 
*{
    box-sizing: border-box;
    padding: 0;
    border:0;
    margin: 0;
}



body{
    font-family:  'Nunito', sans-serif;
     box-sizing: border-box; 
    margin: 1em;
}

            /* titulos de app*/ 
                 /* INICIAR SESION DE LA APP*/ 

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

header h1{ 
    padding: 1em;
    font-size: 13pt;
    font-weight: 700;
    color: #04854C;
    height: auto;
    text-align: center;
    height: auto;
    width: 90%;
    }

 

                 /* titulos del formulario*/ 
                 /* AGREGUE ESTO LO DE PARA ESCRIBIR H1 */ 
#paraEscribir h1{ 
    font-size: 13pt; 
    font-weight: 200; color: #04854C;
    padding: 1em 1em 0.5em 1em;
    text-align: center;
}


#paraEscribir h2{ 
    font-size: 13pt; 
    font-weight: 600; color: black;
    padding: 0.5em 1em 0.5em 1em;
}

#paraEscribir h3{ margin-left: 1em;
    margin-right: 1em;
    font-size: 11pt; 
    font-weight: 200; color: black;
    color: gray;
    font-style: italic;
  
    }

#iniciarSesion ul {
    font-size: 1em;
}
#iniciarSesion ul li {
    line-height: 0em;
}
                       /* Imagenes y logos  */ 
img{
    width: 100%;}
    





              /* LOGO MERLO OFICIAL A LA DERECHA*/ 
#logoMerlo{
    height: auto;
    width: 20%;
}

ul{
    list-style: none;
    padding: 0.2em 1em 0.2em 1em;
}


                      /* INICIAR CON GOOGLE O FACEBOOK*/ 
                      /* LOGOS GOOGLE O FACEBOOK*/ 

#googleFacebook ul li a{
    color: white;
    text-decoration: none; 
    margin-left: 0.5em;
    font-size: 1em;
}

#googleFacebook ul li {  
    padding: 1em;
    border-radius:  10px 10px 10px 10px;
  
     display: flex;
    align-items: center;
    justify-content:flex-start;
    margin-bottom: 1em;
    box-shadow: 0 0.15em 0.1em rgb(0 0 0 / 22%);
    background: linear-gradient(to bottom, rgb(121,206,135) 0%,rgb(18,133,76) 63%,rgb(0,112,46) 100%); 
    }

#googleFacebook ul{
    margin-top: 1em;
    margin-bottom: 0em;
}
                        /* ME OLVIDE CORREO O CONTRASEÑA QUE SERIA UN LINK QUE NO ME LLEVA A NINGUN LADO O SI HAY QUE VER ESO*/ 
#iniciarSesion .meOlvide{
    padding: 0 1em 0 1em;
    text-align: left;
    margin-bottom: 0em;
      margin-top: 0em;
    }


#iniciarSesion .meOlvide a {
    text-decoration: none;
    font-size: 10pt;
    color: #04854C;
    font-weight: 400;
    margin-left: 5pt;
    
}

#registrate {
    margin-left: 1em;
}
                         
           /* INPUT Y LO QUE ACOMPAÑA*/ 

#paraEscribir input[type="email"],
#paraEscribir input[type="password"],
#paraEscribir input[type="text"]
{
   width: 91%; 
   margin-left: 1em;
    margin-right: 1em;
    font-size: 11pt; 
    font-weight: 200; color: black;
    padding: 1em;
    border: 2px solid  #BDC82A;
    color: gray;
    border-radius:  10px 10px 10px 10px;
  
    }





input[type="checkbox" i] {
     margin-left: 1.2em;
    margin-top: 1em;
    margin-right: 1em;
}


#notenescuenta{
    font-size: 13px;
    color: black;
    font-weight: 400;
   
}
    
               /* PARA REGISTRARTE O ENTRAR A LA PAGINA SIGUIENTE*/ 

/*X PARA IR AL MENÚ DIRECTO*/

#iramenu {
    color: #04854C;
}


#registrate #notenescuenta{
    font-size: 13px;
    padding: 2em 0em 1em 0em;
    color: black;
    font-weight: 400;
    margin-left: 0em;
    margin-right: 8em;
}

#registrate a{
    font-weight: 400; color: black;
    padding: 0.5em;
  
    color: black;
    border-radius:  10px 10px 10px 10px;
    text-decoration: none;
  
          box-shadow: 0 0.15em 0.1em rgb(0 0 0 / 22%);
    
background: linear-gradient(to bottom, rgb(230,240,163) 0%,rgb(195,216,37) 72%);
}

#botones { 
display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 1em;
}
            /* AGREGADO ESTE BOTON EN REGISTRARSE*/ 


.boton {
    display: flex;
    justify-content: flex-end;
}

.boton button {
    font-weight: 400; 
    font-family: nunito;
    font-size: 13pt;
    color: black;
    padding: 0.5em;
  
    border-radius:  10px 10px 10px 10px;
    text-decoration: none;
      box-shadow: 0 0.15em 0.1em rgb(0 0 0 / 22%);
      
    margin: 3em 1.5em 1em 0em;

background: linear-gradient(to bottom, rgb(230,240,163) 0%,rgb(195,216,37) 72%);
}


.sinfondo footer{
    background-color: white;
}

 /* FIN DEL INICIA SECCION REGLAS CSS - PARA NO CONFUNDIR LA INFO */ 

/*-------------------------------------ARRANCA COMUNIDAD REGLAS CSS main---------------------------------*/


.comunidad h2{
    font-weight: 400;
     color: #278b87;
    font-size: 13pt; 
  text-decoration: none;
    padding: 0em 0em 0.2em 0em;
}


.comunidad p{
    font-weight: 350;
    font-size: 10pt; 
    font-style: normal;
    text-decoration: none;  
    
}

.comunidad {
    padding: 1em;
    border-radius:  10px 10px 10px 0px;
    margin: 0.5em;
    display: flex; 
     border: 2px solid  #66BDAD;
}


.comunidad img { width: 20%;
    height: 100%;
    flex-direction: row;
    padding: 0em 0.8em 0em 0em;
    
}


.comunidad-riki h2{
    font-weight: 400;
     color: #278b87;
    font-size: 13pt; 
  text-decoration: none;
    padding: 0em 0em 0.2em 0em;
}


.comunidad-riki  p{
    font-weight: 350;
    font-size: 10pt; 
    font-style: normal;
    text-decoration: none;  
    
}

.comunidad-riki  {
    padding: 1em;
    border-radius:  10px 10px 0px 10px;
    margin: 0.5em;
    display: flex; 
     border: 2px solid  #278b87;
}


.comunidad-riki  img { width: 20%;
    height: 100%;
    flex-direction: row;
    padding: 0em 0.8em 0em 0em;
    
}

input[type="text"]
{
   width: 91%; 
    font-size: 11pt; 
    font-weight: 200; color: black;
    padding: 1em;
    border: 2px solid  #278b87;
    color: gray;
    border-radius:  10px 10px 10px 10px;
   }

#enviar a{
    font-weight: 400; color: black;
    padding: 0.5em;
    color: black;
    border-radius:  10px 10px 10px 10px;
    text-decoration: none;
}

#botonenviar { 
display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 1em;
    padding-right: 1em;
    
}
            /* AGREGADO ESTE BOTON EN REGISTRARSE*/ 

#botonenviar {
   padding-bottom: 1em;
    display: flex;
    justify-content: flex-end;
    margin: 1em 0em 0em 0em;
}

#botonenviar a{
    font-weight: 400; color: black;
    padding: 0.5em;
    background: linear-gradient(to bottom, rgb(230,240,163) 0%,rgb(195,216,37) 72%);
    color: black;
    border-radius:  10px 10px 10px 10px;
    text-decoration: none;
    
}


/*-------------------------------------ARRANCA FORO REGLAS CSS main---------------------------------*/

#mainforo ul li a{
    font-weight: 700;
    color: white;
    font-size: 12pt; 
    font-style: serif;
    text-decoration: none;

}

#mainforo ul li{
    line-height: 1em;
    margin: 0.5em;
    height: auto;
    text-align: center;
}  

#mainforo{
    color: white; 
    margin: 0em; 
     }

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

#paraEscribir1 ul li{ 
    padding: 1em;
    border-radius:  20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    }

/*-------------------------------------FIN DEL FORO REGLAS CSS---------------------------------*/ 



/*-------------------------------------ARRANCA MAPA REGLAS CSS---------------------------------*/

#header_mapa {
    background-color: rgb(119, 203, 183);
    padding: 1em;
    margin: 0;
    border: 0;
    width: 100%;
}

#header_mapa {
    display: flex;
    align-items: center;
    justify-content: space-between;  
}

#header_mapa div img {
    width: 2.6em;
}

#header_mapa h1 {
    font-size: 1.5em;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
}
#header_mapa div a {
        text-decoration: none;
}


#header_mapa div h2 {
    font-size: 1.6em;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
}
#main_mapa {
    align-items: center;
}
#main_mapa #maps{
   width: 80%;
   margin-top: 1em;
   margin-left: 2em;
   margin-right: 2em;
   margin-bottom: 1em;
}

#referencias_mapa img {
  width: 10%;  
}
#referencias_mapa {
    border: 1px solid #FEC34A;
    border-radius: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    margin: auto;
    margin-top: 1em;
    width: 90%;
}
#referencias_mapa li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

#referencias_mapa p {
    font-size: 10pt;
    color: #3E9F9B;
}
#explicacion_puntos {
    padding-left: 1.3em;
    padding-right: 1.3em;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5em;
}


#main_mapa ul {
    margin-bottom: 0em;
}


#main_mapa h2{
     color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 12pt;
    font-style: serif;
}

#main_mapa a {
    text-decoration: none;
    display: block;
    padding: 1em;
    margin: 0;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 0.15em 0.1em rgb(0 0 0 / 22%);
    line-height: 1em;
    height: auto;
    text-align: center;
background: linear-gradient(to bottom, rgb(132,224,207) 0%,rgb(22,156,151) 63%,rgb(0,130,99) 100%);  
}

#main_mapa a:hover {
    display: block;
    padding: 1em;
    margin: 0;
    border-radius: 20px 20px 20px 20px;
    background-color: #FFE600;
}

#contacto_mapa {
    background-color: rgb(119, 203, 183);
    padding: 1em;
}

#contacto_mapa {
    display: flex;
    align-items: center;
}

.mapa_material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 28px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
}

#mapa_phone {
    color: white;
}

#mapa_face {
    color: white;
}

#contacto_mapa img{
    width: 15%;
}


/*-------------------------------------FIN DE MAPA REGLAS CSS---------------------------------*/


/*-------------------------------------ARRANCA MAPA <BOTON DONDE ESTAMOS> REGLAS CSS-------------------------------*/

#body-puntos {
    margin: 0;
}


/*-------------------------------------FIN DE MAPA > DONDE ESTAMOS > REGLAS CSS-------------------------------*/


/*-------------------------------------ARRANCA MAPA > PUNTOS ESTRATEGICOS > REGLAS CSS-------------------------------*/



#header_mapa2 {
    display: flex;
    align-items: center;
    justify-content: space-between;  
}

#header_mapa2 {
    width: 100%;
    font-size: 1em;
    color: #ffffff;
    margin-top: 5em;
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
    border-radius: 60px 60px 60px;
    background-color: rgb(119, 203, 183);

    position: fixed;
}
#header_mapa2 img {
    width: 4em;
    padding: 0.2em;
    margin-left: 0.2em;
    margin-top: 0.3em;
}
#header_mapa2 h1{
    font-size: 1em;
    color: #ffffff;
    margin-right: 0.6em;
}
#header_mapa2 div h2 {
    font-size: 1.5em;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    margin-right: 0.7em;
}

#header_mapa2 div a {
    text-decoration: none;
}

#body-puntos {
    margin: 0;
}
#googlemaps-puntos iframe {
    width: 100vw;
    height: 100vh;
    margin-top: 0px;
    margin-left: 0px; 
}
#googlemaps-puntos div {
    z-index: 3000;
}

/*-------------------------------------FIN DE MAPA MAPA > PUNTOS ESTRATEGICOS > REGLAS CSS-------------------------------*/

/CSS DUDAS/


.dudas, .dudas1 {
    margin: 1em 1em 1em 1em;
    margin-bottom: 4em;
    margin-top: 1em;
    width: 100%;
    display: block;
    padding: 1em 2em 1em 1em;
    align-items: center;
    
}

.dudas h3 {
    display: block;
    margin: 2em 1em 1em 1em;
    text-align: center;
    color: black;
    padding: 0.8em ;
    border-radius: 5px 5px 5px 5px;
    position: sticky;
    top: 3.1em;
    background-color: #FFDD00;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}
.dudas1 h3 {
    display: block;
    margin: 1em;
    text-align: center;
    color: white;
    padding: 0.2em 0em 0.2em 0em;
    border-radius: 5px 5px 5px 5px;
    position: sticky;
    top: 3.1em;
    background-color: #278b87;
}
.dudas1 h2 {
    display: block;
    margin: 1.4em;
    text-align: center;
    color: white;
    padding: 0.5em;
    border-radius: 5px 5px 5px 5px;
    top: 3.1em;
    background-color: #66BDAD;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 15px;
}

.dudas1 {
    border: 2px solid #FFDD00;
    border-radius: 5px 5px 5px 5px;
    margin: 1em;

}


.dudas p {
    font-size: 10pt;
    color: black;
    font-weight: 400;
    margin-top: 1em;
    margin-bottom: 2em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    text-align: center;

}
 
/*-------------------------------------ARRANCA SECCIONES DE MENÚ Y RECICLÁ REGLAS CSS-------------------------------*/

                                            /*BODY DE MENÚ Y RECICLÁ*/


#bodydeapp2 {
    margin: 0;
}

#bodydeapp2 a {
    color: black;
}


#bodydeapp2 .material-icons {
    color: white;
}


   
/*--------------------------------------------------EMPIEZA HEADERS DE TODAS LAS SECCIONES------------------------------------------------------*/
                                                /*HEADER DE MENÚ*/

#bodydeapp2 #headercolor {
    background-color: #71BB37;
    position: sticky;
    top: 0;
    bottom: 100%;
    right: 0;
    left: 0;
    z-index: 8000;
    
    
}


#headercolor h1{ 
    padding: 1em;
    font-size: 13pt;
    font-weight: 700;
    color: white;
    height: auto;
    text-align: center;
    height: auto;
    width: 90%;
    }

#headercolor .material-icons {
    margin-right: 1em;
    color: white;
    
    
}



                                               /*HEADER DE RECICLÁ*/

#bodydeapp2 #headercolor-r {
    background-color: #04854C;
    position: sticky;
    top: 0;
    bottom: 100%;
    right: 0;
    left: 0;
    z-index: 8000;
    
    
}


#headercolor-r h1{ 
    padding: 1em;
    font-size: 13pt;
    font-weight: 700;
    color: white;
    height: auto;
    text-align: center;
    height: auto;
    width: 90%;
    }

#headercolor-r .material-icons {
    margin-right: 0.3em;
    color: white;
    
    
}


                                               /*HEADER DE FORO*/
#headercolor-f {
    background-color: rgb(39, 139, 135);
    position: sticky;
    top: 0;
    bottom: 100%;
    right: 0;
    left: 0;
    z-index: 8000;
    
    
}


#headercolor-f h1{ 
    padding: 1em;
    font-size: 13pt;
    font-weight: 700;
    color: white;
    height: auto;
    text-align: center;
    height: auto;
    width: 90%;
    }

#headercolor-f .material-icons {
    margin-right: 0.3em;
    color: white;
    
    
}
                                               /*HEADER DE MAPA*/
                                              
#headercolor-m {
    background-color: rgb(119, 203, 183);
    position: sticky;
    top: 0;
    bottom: 100%;
    right: 0;
    left: 0;
    z-index: 8000;
    
    
}


#headercolor-m h1{ 
    padding: 1em;
    font-size: 13pt;
    font-weight: 700;
    color: white;
    height: auto;
    text-align: center;
    height: auto;
    width: 90%;
    }

#headercolor-m .material-icons {
    margin-right: 0.3em;
    color: white;
    
    
}
                                               /*HEADER DE NOTICIAS*/
                                              
#headercolor-n {
    background-color: #70BF3F;
    position: sticky;
    top: 0;
    bottom: 100%;
    right: 0;
    left: 0;
    z-index: 8000;
    
    
}


#headercolor-n h1{ 
    padding: 1em;
    font-size: 13pt;
    font-weight: 700;
    color: white;
    height: auto;
    text-align: center;
    height: auto;
    width: 90%;
    }

#headercolor-n .material-icons {
    margin-right: 0.3em;
    color: white;
    
    
}
/*---------------------------------------------------TERMINA HEADERS DE TODAS LAS SECCIONES------------------------------------------------------*/

                                             /*PERFIL  NO VISIBLE*/

header .perfil {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.63) ;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    transition: all .5s ease;
    z-index: 9990;
    width: 70%;
}

#llamamenu {
    background-color: transparent;
    color: white;
    cursor: pointer;
    width: 2.5em;
    /* caja flexible */
    display: flex;
    /* para quedar encima de todo */
    position: relative;
    z-index: 9999;
}
#llamamenu span { 
    padding: 0;}




.perfil h3 {
    font-size: 13pt;
    font-weight: 700;
    color: white;
    height: auto;
    text-align: center;
    height: auto;
    width: 100%;
    font-weight: normal;
    margin-top: 3.5em;
}


.perfil h2 {
    font-size: 13pt;
    font-weight: 700;
    color: #FFDD00;
    height: auto;
    text-align: center;
    height: auto;
    width: 100%;
    
}









                                           /*PERFIL  VISIBLE*/


header .perfilvisible {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.63) ;
    top: 0;
    bottom: 0;
    right: 0;
    left: 30%;
    transition: all .5s ease;
    z-index: 9990;
    width: 70%;
    
}


.perfilvisible > .material-icons {
    position: relative;
    top: 0.7em;
    right: -8em;
}


.perfilvisible h3 {
    font-size: 13pt;
    font-weight: 700;
    color: white;
    height: auto;
    text-align: center;
    height: auto;
    width: 100%;
    font-weight: normal;
    margin-top: 3.5em;
}


.perfilvisible h2 {
    font-size: 13pt;
    font-weight: 700;
    color: #FFDD00;
    height: auto;
    text-align: center;
    height: auto;
    width: 100%;
    
}

#arriba {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


#arriba img {
    display: block;
    width: 25%;
    padding-bottom: 1em;
    
}

#datosperfil a{
   font-size: 9pt;
    font-weight: 700;
    color: white;
    text-decoration: none;
    height: auto;
    text-align: center;
    height: auto;
    width: 100%;
    font-weight: normal;
    align-items: center;
    margin-bottom: 2em;
}





   /*MAIN DE MENÚ Y RECICLÁ*/

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


#tacho {
    display: block;
    width: 60%;
    text-align: center;
}


#maindeapp2 h1 {
    margin-bottom: 1em;
    color: #6CAE3F;
    text-align: center;
    font-size: 18pt;
    font-weight: 600;
}

#maindeapp2 h2 {
    display: block;
    padding: 0.2em;
    color: #04854C;
    text-align: center;
     font-size: 16pt;
    font-weight: 600;
    margin-top: 2em;

    
}

#bajada-reciclaje {
        font-size: 10pt;
    color: #04854C;
    font-weight: 400;
    margin-top: 1em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    width: 85%;
}


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


                                         /*BOTONES DE RECICLÁ*/

#reciclados{
    
   margin: 3em 0 3em 0; 
    
}


#reciclados a {
     display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    font-weight: 700;
    color: white;
    font-size: 12pt;
    padding: 1em; 
    
background: linear-gradient(to bottom, rgb(164,232,141) 0%,rgb(76,183,60) 50%,rgb(4,173,1) 100%); 
}


#reciclados ul {
    margin-bottom: 1em;
    
}

#reciclados a:hover {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    font-weight: 700;
    color: white;
    font-size: 12pt;
    padding: 1em;
    background-color: #04854C;   
}

#reciclados ul:hover {
    margin-bottom: 1em;
    
}


                                               /*BOTONES DE MATERIALES DE RECICLAJE*/
#botonesrecicla {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
        margin: 1em 0 1em 0;
}

#botonesrecicla li {
        width: 33%;
}

#botonesrecicla li a{
    display: block;
    margin: 0 0.3em 0.4em 0.3em;
    text-align: center;
    text-decoration: none;
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
        font-weight: 700;
    color: white;
    font-size: 12pt;
background: linear-gradient(to bottom, rgb(164,232,141) 0%,rgb(76,183,60) 50%,rgb(4,173,1) 100%); 
}


#botonesrecicla li:hover {
        width: 33%;
}

#botonesrecicla li a:hover {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    font-weight: 700;
    color: white;
    font-size: 12pt;
    padding: 1em;
    border: 2px solid #04854C;
    background-color: #04854C;
    
    
   
}


.materiales {
    margin-bottom: 4em;
    margin-top: 1em;
    width: 100%;
}
.materiales h3 {
    display: block;
    margin: 0.4em 0.3em 0.4em 0.3em;
    text-align: center;
    color: white;
    padding: 0.2em 0em 0.2em 0em;
    width: 96%;
    border-radius: 5px 5px 5px 5px;
    position: sticky;
    top: 3.1em;
    background-color: #FEC34A;
     z-index: 5000;
}

.materiales section {
    border: 2px solid #FFDD00;
    border-radius: 5px 5px 5px 5px;
    margin: 0.2em 0 0.2em 0;
    width: 90%
}


.materiales section p {
    font-size: 10pt;
    color: #04854C;
    font-weight: 400;
    margin-top: 1em;
    margin-bottom: 2em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    text-align: left;
    width: 100%;
}





.flechaarriba {
    background-color: rgba(0, 0, 0, 0.63);
    border: 4px solid rgba(0, 0, 0, 0.46);
        border-radius: 20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    color: white;
    cursor: pointer;
    display: flex;
    width: 3em;
    height: 3em;
    
    /* para salir del "flujo de información" del fondo 
    y colocase en una capa superior fija */
    position: fixed;
    bottom: 3em;
    right: 0.5em;
    z-index: 5000
}

.flechaarriba span {
    margin: auto;
    padding: 0;
    font-size: 2.5em;
}




                                               /*VIDEOS - VIDEOS DIY RECICLAJE*/

#contenedor {
 
   position: relative;
    width: 88vw;
    background-color: white;
    padding-bottom: 56.25%;
    margin: 1em;
     z-index: 3000;
    
    
}
#contenedor iframe {
 position: absolute;
    width: 100%;
    height: 100%;
        top: 0px;
    left: 0px;
     border-radius: 20px 20px 20px 20px;
    margin-bottom: 2em;
    z-index: 3000;
   
}
                                              



                                               /*BOTONES DE MENÚ (JAZ)*/


#botonesmenu {
   margin: 4em 0 4em 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}


#botonesmenu li {
        width: 48%;
}


#botonesmenu li a {display: block;
    font-weight: 600;
   margin: 0.6em 0.5em 0.6em 0.3em;
    text-align: center;
    color: white;
    font-size: 16pt;
    text-decoration: none;
   padding-top: 2.2em;
    padding-bottom: 2.2em;
    border-radius: 30px;
       box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    
}


#recicla a {background: linear-gradient(to bottom, rgb(121,206,135) 0%,rgb(18,133,76) 63%,rgb(0,112,46) 100%); }
#noticiaz a {background: linear-gradient(to bottom, rgb(164,232,141) 0%,rgb(76,183,60) 50%,rgb(4,173,1) 100%); }
#foroz a { background: linear-gradient(to bottom, rgb(132,224,207) 0%,rgb(39,139,135) 63%,rgb(0,130,99) 100%);}
#mapaz a {background: linear-gradient(to bottom, rgb(158,237,213) 0%,rgb(119,203,183) 54%,rgb(0,201,151) 100%);}





                                               /*BOTONES DE MENÚ INICIALES SOLO, RÁPIDO ACCESO*/

#letrasbotonmenuz {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    top: 92%;
    left: 20%;
    right: 20%;
    background-color:;
    
}


#letrasbotonmenuz a {
    
    
    color: white;
    text-decoration: none;
    
}



#letrasbotonmenuz .material-icons{
    padding: 0;
    margin: 0;
    font-size: 2em;
     z-index: 7000;
    
}


/*--------------------------------------------------PRUEBA DE MAIN------------------------------------------------------*/



main {
    min-height: calc(100vh - 45px - 23.990px)
}


/*--------------------------------------------------EMPIEZA FOOTER DE TODAS LAS SECCIONES------------------------------------------------------*/



                                                 /*FOOTER DE MENÚ*/



#bodydeapp2 #footerapp {
    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    background-color: #71BB37;
    z-index: 9980;
    margin: 0.8em 0em 0em 0em;
}

#insta {
    width: 10%
}

#sitio {
    margin: 0.5em;
    text-align: right
}

#flechaatras {
    margin: 0.5em;
}



                                                 /*FOOTER DE RECICLÁ*/

#bodydeapp2 #footerapp-r {
    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #04854C;
    z-index: 9980;
}


                                                 /*FOOTER DE FORO*/
#bodydeapp2 #footerapp-f {
    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgb(39, 139, 135);
    z-index: 9980;
    margin: 0em 0em 0em 0em;
}
                                                 /*FOOTER DE MAPA*/
#bodydeapp2 #footerapp-m {
    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    background-color: #77CBB7;
    z-index: 9980;
    margin: 0em 0em 0em 0em;
}

#insta {
    width: 10%
}

#sitio {
    margin: 0.5em;
    text-align: right
}

#flechaatras {
    margin: 0.5em;
}

                                                 /*FOOTER DE NOTICIAS*/
#bodydeapp2 #footerapp-n {
    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #70BF3F;
    z-index: 9980;
    margin: 0.8em 0em 0em 0em;
}
/*-------------------------------------FIN DE LOS FOOTER---------------------------------*/

                                             /*BOTON DE CONTACTOS*/

#contactos {
    background-color: transparent;
    color: white;
    cursor: pointer;
    width: 2.5em;
    /* caja flexible */
    display: flex;
    /* para quedar encima de todo */
    position: fixed;
    bottom: 1em;
    right: 0.7em;
    z-index: 9000;
    
}
#contactos span { 
    padding: 0;}


                                                 /*MENÚ DE CONTACTOS NO VISIBLE*/
   
.sitio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    bottom: 2.8em;
    top: 70%;
    left: 100%;
    right: 0%;
    background-color: rgba(0, 0, 0, 0.63);
     transition: all .5s ease;
}

.sitio span {
    color: white;
    font-size: 1.5em;
   margin-left: 0.7em;
    margin-top: 0.5em;
}

.sitio img {
        width: 40%;
    margin-left: 1em;
    margin-top: 1em;
 margin-bottom: 1em;
}
 

                                                 /*MENÚ DE CONTACTOS VISIBLE*/
.sitiovisible {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    bottom: 2.8em;
    top: 65%;
    left: 83%;
    right: 0%;
    background-color: rgba(0, 0, 0, 0.63);
     transition: all .5s ease;
    
}


.sitiovisible span {
    color: white;
    font-size: 1.5em;
   margin-left: 0.7em;
    margin-top: 0.5em;
}

.sitiovisible img {
        width: 40%;
    margin-left: 1em;
    margin-top: 1em;
 margin-bottom: 3em;
}
 








/*-------------------------------------FIN DE LAS SECCIONES MENÚ Y RECICLÁ REGLAS CSS---------------------------------*/






/*-------------------------------------INICIO REGLAS DE NOTICIAS Y SUS RESPECTIVAS PAGINAS DE INFORAMCION YUPI---------------------------------*/

/*------------------------------------NOTICIAS ACA NOTICAS NOTICAS NOTICIAS NOTICIAS--------------------------------*/

#mainNoticias ul li a{
    font-weight: 700;
     color: white;
    font-size: 12pt; 
    font-style: serif;
    text-decoration: none;

}
#mainNoticias {
    padding: 1em;
}

#mainNoticias ul li{
    line-height: 1em;
    height: auto;
       text-align: center;
}  

#headerNoticias{
    background-color: #70BF3F;
    color: white; 
    margin: 0em; 
    padding: 1em;
     }

#mainNoticias ul{
    font-size: 1em;
    margin-top; 0.5em;
    margin: 0em;
    }

#paraEscribir1 ul li{ 
    padding: 1em;
    border-radius:  20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    
background: linear-gradient(to bottom, rgb(121,206,135) 0%,rgb(18,133,76) 63%,rgb(0,112,46) 100%);
}

#paraEscribir1 ul{ 
    margin-top; 0em;
    margin-bottom: 1em;
}

#paraEscribir1 img{
    padding: 1em;
    width: 100%;
}






#paraEscribir2 ul li{ 
    padding: 1em;
    border-radius:  20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
     
background: linear-gradient(to bottom, rgb(132 224 207) 0%,rgb(119 203 183) 54%,rgb(39 139 135) 100%);  
}

#paraEscribir2 ul{ 
    margin-top; 0em;
}

#paraEscribir2 img{
    padding: 1em;
    width: 100%;
}



#bodyNoticias {
    margin: 0em;
}

#headerNoticias h1{
    color: white;
    
}

#bodySinfooter{
    margin-bottom: 1em;
    
}
#footerElementosNoticias {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    }

#footerNoticias{
    background-color: #70BF3F;
    padding: 1em;
}
#footerElementosNoticias a{ 
    color: white;
}

#flecha a{
    display: flex;
    justify-content: flex-start;
}
 
/*---BOTON CUANDO CLIKEAS QUE CAMBIE DE COLOR - PRUEBA---*/ 

#paraEscribir1 ul li:hover { 
  background: #FFE600; 
  color: #FF367F; 
} 



/*---REGLAS DE NOVEDADES ---*/ 

.notas h2{
    font-weight: 400;
     color: black;
    font-size: 10pt; 
  text-decoration: none;
    padding: 0em 0em 0.2em 0em;
}


.notas p{
    font-weight: 300;
     color: gray;
    font-size: 8pt; 
    font-style: normal;
    text-decoration: none;  
    
}

.notas {
    padding: 1em;
    border: 1px solid  #FEC34A;
    border-radius:  10px 10px 10px 10px;
    margin: 0em 0em 1em 0em;
    display: flex; 
}


.notas img { width: 45%;
    height: 100%;
    flex-direction: row;
    padding: 0em 0.8em 0em 0em;
    
}






/*---FIN DE REGLAS DE NOVEDADES ---*/ 


/*-------------------------------------FIN  REGLAS DE NOTICIAS Y SUS RESPECTIVAS PAGINAS DE INFORAMCION YUPI---------------------------------*/


/*-------------------------------------INICIO DE LA APPP---------------------------------*/

#Bodypresentacion {
    background-color: #70BF3F;
    width: 100%;
    height: 100%;
    margin: 0em;
}

#Bodypresentacion p{
    text-align: center;
    padding: 4em 0em 5em 0em;
    
}

#imagen1 img{
    padding: 6em 1em 1em 1em;
}
#imagen1 p{
    color: white;
    font-weight: 700;
    font-size: 30px;
}



.loadingborde {
    padding: 0.6em;
 
    border-radius:  10px 10px 10px 10px;
    color:#70BF3F;
    background-color: #70BF3F;
    position: fixed;
    left: 2em;
    right: 2em;
     top: 60%;
    transition: all .2s ease;
    z-index: 8000;
     border: 3px solid  #04854C;
}
.loading{
     padding: 0.5em;
  
    border-radius:  10px 10px 10px 10px;
    color: white;
    position: fixed;
   left: 2.3em;
    right: 2em;
    top: 61%;
  
    border-color: #04854C;
         z-index: 9000;
   
}

.loadingprincipio{
     padding: 0.5em;
  
    border-radius:  10px 10px 10px 10px;
    color: white;
    background-color: #04854C;
    position: fixed;
   left: 2.3em;
    right: 90%;
     top: 61%;
    
     z-index: 9000;
    
}

.loadingmedio {
     padding: 0.5em;
 
    border-radius:  10px 10px 10px 10px;
    color: white;
    background-color: #04854C;
    position: fixed;
    left: 2.3em;
    right: 20%;
     top: 61%;
    transition: all .2s ease;
     z-index: 9000;
   
}
.loadingfinal {
     padding: 0.5em;
 
    border-radius:  10px 10px 10px 10px;
    color: white;
    background-color: #04854C;
    position: fixed;
    left: 2.3em;
    right: 2.3em;
     top: 61%;
    transition: all .2s ease;
    z-index: 9000;
   
    
}
/*-------------------------------------FIN DE LA APPP---------------------------------*/


/*REGLAS DE POSTERR*/ 

#logoMerloPoster img{
    width: 10%;
    height: auto;
}

#poster {
    background-image: url(Imagenes/FONDO.svg)
}

#tituloPoster h1{
    margin: 0.2em 0em 0em 1em;
    text-align: left;
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 7em;
}


#tituloPoster h2{
    margin: 0em 0em 0em 1.7em;
    text-align: left;
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 7em;
}


#tituloPoster img{
    width: 25%;
    height: auto;
}


#tituloPoster id{
    display: flex;
    
}

#tituloPoster h3{
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
    font-size: 2em;
    margin: 0.2em 0em 0em 6.4em;
}

#posterDividido #ola img {
   width: 170.4%;
    height: auto;
    margin: 0em 0em 0em 6em;
}

#posterDividido {
    display: flex;
    flex-direction: row;
    margin: 1em;
    
}
#tituloPoster p{
     padding: 0.3em;
    border: 2px solid  #FEC34A;
    border-radius:  20px 20px 20px 20px;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    color: white;
    margin: 1em 13em 0em 8em;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 25px;
    font-style: italic;
    text-decoration: none;
    text-align: center;
    background-color: #70BF3F;
    
}


 #tituloPoster p :hover {
    background: #FFE600; 
         color: #FF367F;
    }
/*fi nREGLAS DE POSTERR*/ 





/*-------------------------------------ARRANCA @MEDIA DEL MENÚ---------------------------------------------*/

                                                   /*@MOTO G4 Y GALAXY S5*/

@media screen and (min-width:360px){
    
    
    progress {
        left: 23%;
    right: 23%;
    }
    
                               /*FOOTER BOTONES DE SECCIONES*/
    
    #letrasbotonmenuz {
   top: 93%;
    }
    
    
    
    
                            /*PERFIL*/     
    
    
    #headercolor .perfilvisible {
        left: 38%;
        
    }
    
     #arriba img {
    width: 35%;
    
}
    
                        /*BOTONES MENÚ*/     

    
    #botonesmenu li a {
    padding-top: 2.7em;
        padding-bottom: 2.5em;}
    
}/*FIN MEDIA*/ 


                                                   /*1 DE ABAJO ES DE HEIGHT*/
                                      /*GALAXY FOLD*/

@media screen and (min-height:653px){
    
    
    
    
                            /*PERFIL*/     
    #headercolor .perfilvisible {
        left: 20%;
        
    }
    
    
                        /*BOTONES MENÚ*/     
    #botonesmenu li a {
    padding-top: 2em;
    padding-bottom: 1.8em;
    
    }
    
    #botonesmenu li {
        width: 50%;
    }
    
     #botonesmenu {
    margin: 8.5em 0 8.5em 0;
}
}/*FIN MEDIA*/



                                                   /*!PHONE 6,7,8*/


@media screen and (min-width:375px){
    
    
    
                            /*PERFIL*/
    
    
    #headercolor .perfilvisible {
        left: 30%;      
    }
    
    
    
    .perfilvisible > .material-icons {
    right: -9.6em;
}


.perfilvisible h3 {
    font-size: 16pt;
}


.perfilvisible h2 {
    font-size: 16pt;}
    
    
    
    #arriba img {
    width: 25%;
    
}
    
    
    
    #datosperfil a{
        font-size: 11pt;}
    
    
                        /*BOTONES MENÚ*/ 
    
    
    #botonesmenu li a {
        padding-top: 2.5em;
    padding-bottom: 2.5em;
    }
    
    
    #botonesmenu li {
        width: 45%;
}
    
   #botonesmenu {
    margin: 7.3em 0 7.3em 0;
}
}/*FIN MEDIA*/ 


                                                   /*PIXEL 2*/
    
@media screen and (min-width:411px){
    
    
    
                        /*PERFIL*/     
    
      .perfilvisible > .material-icons {
    right: -10.7em;
}  
    
    #datosperfil a {
        font-size: 13pt;}
    
    
    
                        /*BOTONES MENÚ*/     
    
    
  #letrasbotonmenuz {
   
    top: 94%;
   
}
    
    
    #botonesmenu li a {
    padding-top: 3em;
        padding-bottom: 3em;}
    
    #botonesmenu li {
        width: 45%;
    }
    
  #botonesmenu {
    margin: 8em 0 8em 0;
}
}/*FIN MEDIA*/ 

    
                                                   /*!PHONE 6,7,8 PLUS*/    

 @media screen and (min-width:414px){
     
     
                            /*PERFIL*/      
       .perfilvisible > .material-icons {
    right: -10.7em;
}
     
    
                        /*BOTONES MENÚ*/ 
      #botonesmenu {
    margin: 8.4em 0 8.4em 0;
}
     
    #botonesmenu li a {
    padding-top: 2.9em;
        padding-bottom: 2.9em;}
    

    
} /*FIN MEDIA*/   

                                                   /*2 DE ABAJO SON DE HEIGHT*/  

                                                   /*!PHONE X*/    

@media screen and (min-height:812px){
    

                        /*BOTONES MENÚ*/     
    #botonesmenu {
    margin: 11.9em 0 11.7em 0;
}
    
      #letrasbotonmenuz {
   
    top: 94%;
   
}
    

}/*FIN MEDIA*/ 


                                                   /*PIXEL 2 XL*/

@media screen and (min-height:823px){
    
                        /*BOTONES MENÚ*/     
    #botonesmenu {
    margin: 11em 0 10.7em 0;
}
    
  #letrasbotonmenuz {
   
    top: 95%;
   
}
}/*FIN MEDIA*/ 


                                                   /*MOBILE L*/
@media screen and (min-width:425px){
    
    
                        /*BOTONES MENÚ*/     
    #botonesmenu li a {
      padding-top: 2.6em;
        padding-bottom: 2.6em;}
    
     #botonesmenu li {
        width: 40%;
}
    #botonesmenu {
         margin: 4em 0 4em 0;
    }
    
      #letrasbotonmenuz {
   
    top: 93%;
   
}
    
}/*FIN MEDIA*/ 

/*FIN MEDIA*/ 
/*INICIO MEDIA DEL MALDITO POSTER*/ 

@media (max-width:550px){
    
    #poster {
        background: #04854C !important;
    }
    #posterDividido{
        display: flex; 
        flex-direction: column;
    }
    #tituloPoster h1 {
        font-size: 3em;
         margin: 0.2em 0em 0em 0em;
         text-align: left;
    }
    #tituloPoster h2 {
        margin: 0em;
        font-size: 3em;
    }
    
    #tituloPoster h3 {
        font-size:19px;
        margin: 1em 0em 0em 0em;
        font-weight: 200;
    }
    #posterDividido #ola img {
    width: 61%;
    height: auto;
    margin: 3em 3.5em 0em 3.5em;
    }
    
    #tituloPoster p { 
        margin: 1em 3em 0em 0em;
        text-align: center;
        background-color: #70BF3F;
    }
    
    #tituloPoster p :hover {
    background: #FFE600; 
         color: #FF367F;
    }
    
    
    #tituloPoster img {
    width: 30%;
        height: auto;}
}

@media (min-width:550px) and (max-width:1000px){
     #poster {
        background: #04854C !important;
    }
    #posterDividido{
        display: flex; 
        flex-direction: column;
    }
     #posterDividido #ola img {
    width: 40%;
    height: auto;
    margin: 0em 8em 0em 20em;
    }
    #tituloPoster h1 {
        margin: 0.2em 0em 0em 0.5em;
        font-size: 6.5em;
    }
     #tituloPoster h2 {
        margin: 0em 0em 0em 0.5em;
        font-size: 7.4em;
    }
      #tituloPoster h3 {
        margin: 0em 0em 0em 1.7em;
        font-size: 40px;
    }
     #tituloPoster p {
        font-size: 35px;
         margin: 1em 7em 0em 2em;
          margin: 1em 3em 0em 0em;
        text-align: center;
        background-color: #70BF3F;

    }
    
    #logoMerloPoster img {
    width: 15%;
    height: auto;
    }
}
    /*FIN MEDIA DEL MALDITO POSTER*/