@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,300;0,600;1,300&display=swap');

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

body { 
    background-color: rgba(226, 226, 226, 0.62);
    min-height: 100vh;
    min-height: -wekit-fill-available;
    
    font-family: 'Raleway', sans-serif;

    margin:0em 0em 0em 0em;


     /* flex */
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
}

h1 {
    font-size: 2em;
    text-align: center;
    padding: 1em;
}

h2 {
    text-align: center;
    font-size: 1.2em;

       
}

ul { 
    list-style: none;
}

a { 
    text-decoration: none;
    color: rgb(13, 7, 7);}

a:hover { 
    color: rgb(230, 76, 48);
}
 
/* mobile first */ 

/*INDEX*/

.logo {
    text-align: center;  
}

header{
    border-top:  rgba(230, 96, 71, 0.88) 3px solid;
}

header img{
    padding-top: 2em;
    padding-bottom: 0.5em;

}

/* contenedor centrado y con ancho máximo */
.contenedor {
    max-width: 40rem;
    margin: auto;
    padding:0 1em 0 1em;
    line-height: 1.7em;
}

header .contenedor {

    /* caja flexible */
    display: flex;
    
    /* elementos colocados en los extremos del eje principal */
    justify-content: space-between;
    
    /* elementos centrados en el eje secundario */
    align-items: center;
    
    padding-bottom: 1em;
}

#menu ul li {
    align-items: center;
    margin: 0 .5em;
}

#menu ul li a { 
    color: #338077;
      
}

#llamamenu {
    
    background-color:  #338077;
    color: black;
    cursor: pointer;
    height: 4em;
    width: 4em;
    
    border-radius: 1em;
    border-color: rgba(255, 255, 255, 0);
    
    /* caja flexible */
    display: flex;
    position: relative;
    z-index: 9999;
}

#llamamenu i { 
    padding: 0;
    /* centrado en la horizontal y en la vertical */
    margin: auto;
    color: rgba(226, 226, 226, 0.92);
}

/* el menú propiamente dicho */
header nav ul {
    
    /* el menu sale del flujo de informaciones
    y se oculta a la derecha */
    position: fixed;
    left: 100%;
    top: 0;
    height: auto;
    z-index: 9990;
    
    padding-top: 5em;
    padding: 1em;
    transition: all .5s ease;
    
    
}

.visible {
    /* el menú se muestra
    corriéndose a la izquierda */
    left: 40%;
    transition: all .25s ease;
    
}

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  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';
  
}

.material-icons {
    padding-right: .25em;
}

/* subtítulos con íconos */

.subir {
    display: flex;
    align-items: center;
}

/*
cuando la ventana del navegador mida
como mínimo 560px de ancho
*/
@media (min-width: 35em) {
    
    #llamamenu {
        display: none;
        
    }
    
    /* se muestran el menu horizontal */
    header nav ul {
        display: flex;
        flex-wrap: wrap;
        
        /* para que el menú vuelva al "fondo" */
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: 100%;
        padding-top: 0;
        
    }
    
    header nav ul.visible {
        left: auto;
     
    }

}

main h1{ 
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    padding-top: 0;
    text-transform: uppercase;
    
}

.primerseccion {
    background-color: #338077;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.primerseccion video{
    width: 100%;
    padding: 20px;
    max-width: 700px;
}

#antes h2{
    padding: 10px 20px;
    line-height: normal;
}

.primerseccion p, .primerseccion h2 { 
    color: rgba(226, 226, 226, 0.92);
    font-weight: 500;
    padding: 1em 3em;
    max-width: 1000px;
    
}

#masinfo {
    padding-bottom: .8em;
}

#masinfo a {
    color:rgba(0, 0, 0, 0.68);
    text-decoration: underline;
}

#masinfo a:hover {
    color: rgba(230, 96, 71, 0.88);

}

.meses {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1em;
    max-width: 1000px;
    margin: auto;
    
  
}

.meses img{
    max-width: 80%;
    margin: 2em;
}

.meses p{
    border: rgba(230, 96, 71, 0.88) 1px solid;
    line-height: 1.3em;
    padding: 20px;
    max-width: 500px;
    margin: auto;
   
}

.terceraseccion {
     padding: 1em 2em 1em ;
    max-width: 1000px;
    margin: auto;
}

.terceraseccion h2{ 
    border-bottom: rgb(226, 223, 223) .01em solid;
    line-height: 3em;
    margin: 0;
   
}

.terceraseccion ul li{
     padding:1em 2em;
     border-bottom: rgb(226, 223, 223) .01em solid;
}

#nombre{
    font-weight: 600;  
}

#localidad, #fecha{
    font-weight: 200;
    font-size: .9em;
}

#comentario{
    line-height: 1.3em;
    padding-top: .7em;
    color: #338077;
    font-style: italic;
}

#vermas{
    list-style: none;
    text-decoration: underline;
    padding: .5em 2em;
    text-align: center;
   
}

#vermas a:hover{
    color:rgba(230, 96, 71, 0.88);
}

#comentarios{
    padding: 1em 2em;
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

#comentarios label{
    margin-top: 10px;
    line-height:0;
}

.recicla{
    background-color: #338077;
    width: 120px;
    line-height: 25px;
    padding:.5em;
    margin: auto;

    box-shadow: .01em .01em 2em .5em #c5c0c9;
    text-transform: uppercase;
    border-radius: .5em;
}

.recicla h2 {
    font-size: 1em;
    color: rgb(238, 233,229);
}

.recicla:hover{
    background-color:rgba(230, 96, 71, 0.88);
    box-shadow: .01em .01em 3em .6em #c5c0c9;
    width: 105px;
}

.cuartaseccion {
    
    max-width: 1000px;
    margin: auto;
    padding: 1em 2em 5em ;
    
}

#contactoo {
    padding: 1em 1em 0 2.5em;
    color: #338077;
    margin-top: 20px;
    text-transform: uppercase;
    border-top: rgb(226, 223, 223) .01em solid;
}

form {
    display: flex;
    flex-direction: column;
    padding: 2em;
    max-width: 600px;
}

textarea{
    height: 5em;
    padding: .5em;
}

#enviar{
    margin-top:10px;
    max-width: 85px;
}

.cuartaseccion img{
    max-width: 10%;
    margin-left: 2em;   
}



    /*HISTORIA*/

#historia h2{
    text-transform: uppercase;
    font-size: 1.5em;
    text-align: center;
    padding: 0 1em 1em 1em;  
}

#historia .intro {
    background-color: #338077; 
    margin: auto;
    max-width: 1000px;
    padding: 1em;
}

#historia .intro p{ 
    color: rgb(226, 223, 223);
    margin: auto;
    line-height: 1.5em;
    max-width: 1000px;
    padding: 1em;
    
}

.infohistoria{
    max-width: 1000px;
    margin: auto;
    padding: 1em 2em 5em ;

    
}

.infohistoria p {
    color: #338077;
    padding: 1em 0;
    line-height: 1.5em
}

.infohistoria img {
    margin: auto;
    padding: 1em 0;
    width: 100%;
    
   
    
    
}

#acumar{
    text-decoration: underline;
    text-transform: uppercase;
    margin: 1em 0;
    max-width: 80px;

}



    /* REUTILIZAR*/

/*titulo de reutilizar,cronograma y reciclado*/
#residuos h1{
    background-color: rgba(226, 223, 223, 0.49);
    color: rgb(13, 7, 7);
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    padding-top: 1em;

}

#residuos {
    background: url(../imagenes/fondoreutilizar.png) no-repeat center center;
    background-size:100%;
    padding: 20px;
    max-width: 1000px;
    margin: auto;
}

.data1 {
    padding: 0 2em 1.5em 2em;
    background-color: #338077;
    color: rgb(226, 223, 223);
    max-width: 1000px;
    margin: auto;
}

.data1 h2{
    padding: 20px;
}

.data2{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data2 p {
    padding: 0 2em 1em 2em;
    font-style: italic;
    margin-top: 0;
    line-height: 1.5em; 
    max-width: 1000px;
    margin: auto;

}

.data2 h3{
    padding: 20px;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 0;

}

#hojita{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.data3 img{
    max-height:50px;   
}

.data3 h2{
    padding: 20px;
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left
}

.data3 ul{
    margin:0 0 4em ;
    padding: 1em 0;
}
    
.data3 ul li {
    margin: auto;
    padding: 0 2em 1em 2em;
    max-width: 1000px;

}
 



    /*CRONOGRAMA*/

#calendario h1{
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0;

}

#calendario{
    display: flex;
    align-items: center; 
    background-color: rgba(230, 96, 71, 0.78);
    max-width: 80%;
    padding: 0 30px 0px 30px;
    margin: auto;
    color: rgb(226, 223, 223);
    max-width: 1000px;   
}

#calendario .material-icons{
    align-items: center;
    color: rgb(255, 255, 255);    
    
}

#calendario .material-icons:hover{
    color:#000000; 
}

#calendario h1{
    margin: auto;
    color:rgb(255, 255, 255);
    padding: 15px;
    text-transform: uppercase;
}

.cronograma ul{
    padding: 0em 1em;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;  
    max-width: 70%;
    margin: auto;
}

.cronograma  img{
    max-width: 100%;
}

.cronograma ul li {
    margin: 30px 40px;   
}

.cronograma ul li h3{
    text-transform: uppercase;
    margin-bottom: 10px;
    border-bottom: rgb(226, 223, 223) 0.01em solid;
    margin: auto;
}

.cronograma ul li h5{
    margin-top: 10px; 
}

.cronograma ul li p{
    color:#338077;  
    border-bottom:  rgb(226, 223, 223) 0.01em solid;
    max-width: 300px;
    margin:auto;
    padding-top: 10px;
    padding-bottom: 20px;
}

#vermas2{
    text-decoration: underline;
    text-align: center;
    max-width: 80%;
    margin: auto;
    padding: 1em;
    
}

#vermas2 a:hover{
    color:rgba(230, 96, 71, 0.88);
}



    /* RECICLADO*/

#reciclado h1{
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0;
    padding-top: 0;
    
}

#reciclado .intro { 
    padding: 2em;
    background-color: #338077;
    margin: auto;
    max-width: 1000px;   
}

#reciclado .intro p{ 
    color: rgb(226, 223, 223);
    max-width: 600px;
    margin: auto;
}

.articulos{
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    padding: 2em 0 2em 0;
    justify-content: center;   
    
}

.articulos h4{
    color: #338077;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    
}

/* textos > artículos */

.articulo1, .articulo2 {
    padding: 1.5em;
    box-shadow: .1em .1em .25em rgba(0,0,0,.2);
    max-width: 450px;
    margin: 1.5em;
    
}

#reciclado {
    max-width: 1000px;
    margin: auto;
    padding: 1em 0 5em 0em;
    
    
    /* para salir del "flujo de información" del fondo 
    y colocase en una capa superior "pegajosa" */
    position: sticky;
    top: 0;
}

.video {
    position:relative;
    width: 100vw;
    margin: auto;
    max-width: 80%;
    padding-bottom:56.25%;
    
}

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

footer{
    
    background-color: rgb(249, 224, 127);
    font-family: sans-serif;
    font-weight: lighter;
    font-size: 0.7em;
    
   padding: 3em;
    justify-content: center;
    text-align:justify
}