@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Nosifer&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body {margin: 0px;}
header {width: 100%; background-color: #208409; 
        position: fixed; top: 0; left: 0;
        z-index: 5; border: 1px solid #208409;}
.cabecera {max-width: 1140px; margin: 0px auto; 
        padding: 10px; display: flex;
        align-content: center; align-items: center;  }
.logo {width: 20%;}
.menu {width: 60%;}
.boton {width:20%;}
.boton a {color: white; background-color: white;
        padding: 10px 20px; border-radius: 5px; font-weight: 600;
        text-decoration: none; color: #208409;}
.boton a:hover {background-color: black; color: white;}
.menu ul {text-align: center;}
.menu ul li {display: inline;}
.menu a {color: white; text-decoration: none; padding: 0px 10px;
        font-size: 24px;}
.menu a:hover {color: #000;}
.menu a:active {color: #000;}
.logo img {width: 100%; object-fit: cover;}
.mensaje {width: 100%; height: 500px;
        background-image: url("mensaje.jpg");
        background-position: center center;
        position: relative;
        margin-top: 80px;}
.mensaje:before {
        content:'';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.5);
}
.mensaje h1 {color: white; margin: 0px auto; 
    max-width: 1140px; padding-top: 170px;
    font-family: "Roboto", sans-serif;
    text-align: center; font-size: 48px; font-weight: 600;
    position: relative;}

.banners {max-width: 1140px; margin: 40px auto; display: flex;}
.banner {width: 33%; padding: 20px; margin: 10px;
        background-color: #9CC026;
        border-bottom-right-radius: 70px;}

.banner h3 {text-align: center; text-transform: uppercase; 
        color: white; font-weight: 700;}
.banner p {text-align: justify; font-size: 20px; padding: 10px;}

.residuos {
        background-image: url("mensaje2.jpg");
        background-position: center center;
        background-size: cover;
        width: 100%;
        height: 300px;
        position: relative;
}
.residuos:before {
        content:'';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.5);
}
.residuos h2 { color: white; text-align: center; font-size: 42px;
        font-weight: 700; padding-top: 70px; position: relative;}

.residuos a {text-align: center; position: relative;
        color: white; background-color: #9CC026;
        padding: 10px 20px; border-radius: 5px;
        text-decoration: none; font-size: 18px;}

.residuos a:hover {background-color: #5a6e17;} 
.noticias {max-width: 1140px; margin: 0px auto 50px; display: flex;}
.noticia {width: 33%; border: 1px solid #b4b4b4; border-radius: 10px;
padding: 20px; margin: 20px; box-shadow: 15px 15px 30px #b4b4b4;}
.noticia img {height: 200px; width: 100%; object-fit: cover;}

footer {width: 100%; background-color: #208409; }
.pie1 {max-width: 1140px; margin: 0px auto; display: flex;}
.pie-item {width: 25%; margin-left: 10px;}
.pie-item h3 {color: white; font-size: 20px; text-transform: uppercase;
        border-bottom: 1px solid white; margin-bottom: 0px;}
.pie-item p {color: white;}
.pie-item ul {list-style-type: none; padding-left: 0px;}
.pie-item a {text-decoration: none; color: white;}
.pie-item a:hover {color: black;}

.pie2 {width: 100%; background-color: black;}
.pie2 p {color: white; max-width: 1140px; margin:0px auto;
        text-align: center; padding: 10px;}


/* Animaciones en CSS3 */        
.animacion {
        animation-name: aparecer;
        animation-duration: 8s;
}
@keyframes aparecer {
        from { opacity: 0;}
        to { opacity: 1;}
}

.titulo {width: 100%;
        background-color: rgba(0,0,0,0.8); margin-top: 75px;}
.titulo h2 {color: white; text-align: center; 
        margin: 0px; padding: 20px; font-size: 42px;}
.contenedor {max-width: 1140px; margin: 0px auto;}
.contenedor p {font-size: 18px; text-align: justify;}
.contenedor ul {font-size: 18px;}
.contenedor h2 {text-align: center; color:  #208409; 
        text-transform: uppercase; margin-top: 5px;
        font-size: 32px;}
.contenedor h3 {text-align: center; color:  black;  
        text-transform: uppercase; margin-bottom: 0px;
        font-size: 26px;}
.contenedor h4 {color:  #208409; text-transform: uppercase;
        font-size: 20px; font-weight: bold;}
.caja-flex {display: flex; margin-bottom: 50px;}
.caja-50 {width: 50%;}
.caja-50 img {width: 100%; object-fit: cover; margin-left: 20px;
        height: 450px;}