@font-face
{
font-family: 'Lato-Regular';
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body {
    
    margin: auto;
    padding: 0;
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    
    justify-content: space-between;
    min-height: 100vh;   
    background-color: white;
    font-family:'Lato-Regular';  
}

ol {
    display: block;
    list-style-type: decimal;
    padding: 0;
    }


/* HEADER */
body header {
    background-size: auto;    
    padding: 0;
    margin: 0;
    background-color: black;
    box-shadow: 1px 1px 5px #000;
    z-index: 999;
}

body header div {
    z-index: 9999;
}


header div img{
    width: 3em;
}


header div ul{
    list-style: none;
    display: flex;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
}

header ul li{
    width: 10em;
    height: 2em;
    margin-left: .20em;
    margin-right: .20em;
    
   
    display: flex;
}

header ul li a{
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #2ECC71 , lightgreen);
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.3em;
    
    
    display: flex;
    justify-content: center;
    align-items: center;
}

header { 
display: block;
}


/* TERMINA HEADER */




/* MAIN */
body main{
    
    margin: auto;
    text-align: left;
    padding: 1em;
    display: block;

    flex-grow: 1;
   }





main div a {
    text-decoration: none;
    color: black;
   
}


/* TERMINA MAIN */

/* DONACIONES */


.donaciones {
    
padding: 0;
 text-align: center;
 padding-top: 20vh;
    
}
.donaciones ul{
    text-align:left;
               
    } 

.donaciones ol{
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: -1em 0 1em 0;
    }

/* FIN DONACIONES */


/* FORMULARIO DONACIONES */

/*clases formulario*/

.grupo{
    padding-top: 1em;
}

.fondo-formulario{
    background:  linear-gradient(to top, #82eaae , lightgreen);
   
    margin-top: 17vh;
    padding: 0;
}

.terminosycondiciones{
    font-size: .7em;
    margin: 1em auto 2em;
    
}




/*fin clases formulario*/

    .form{
    width: 80%;
    min-width: 70%;
    height: auto;
    background: white;
    padding: 1.3em 1.3em 2em 1.3em;
    margin: auto;
    margin-top: 50px;
    border-radius: 10px;
    
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    
}

.tituloformu{
    color:black;
    text-align: center;
    font-weight: 800;
    font-size: 1.5em;

    
}

input {
    background: none;
    color: #c6c6c6;
    font-size: 0.9em;
    padding: 0.8em;
    margin: .5em 1em .5em 0em;
    display: block;
    width: 130%;
    border:none;
    border-bottom: 1px solid #919191;
    
}

input{
    outline:none;
    color: #c6c6c6;
    
}

label{
    font-size: 0.8em;
    margin: -10em 0 0 0;
}


/* FIN FORMULARIO DONACIONES*/



/* historia*/
.historia {
    
padding: 1em;
 text-align: left;
  margin-top: 17vh;
    
    
}





.videoresponsive {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;
    z-index: -1;

}
.videoresponsive iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

main div ul img {
    margin: .5em;
    padding: 0;
}

.titulolinea{
    border-top: lightgreen solid 1px; 
    padding-top: 1em;
}

main div p {
    line-height: 1.4em;
}

.titulomayor{
    padding-top: 6em;
    margin-top: 6em;
}

/*termina historia*/


/* ACTIVIDADES */

.actividades{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    text-align: center;
    max-width: 30em;
    padding-bottom: 1em;
    padding-top: 1em;
}

.actividades img{
    border-radius: 1em;
    height: 35vw;
    width: 35vw;
    max-width: 15em;
    max-height: 15em;
    border: .25em solid lightgreen;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
    margin-top: 1em;
    text-decoration: none;
    margin-left: 1em;
    margin-right: 1em;
}

.actividades li{
    list-style: none;
}


/* CIERRA ACTIVIDADES */

/*index*/
#imagen-fondo-index{
    

    height: 10em;
    background-image: url(imagenes/cauceviejo.jpg);
    background-size: cover;
    background-color: black;
    background-repeat: no-repeat;
    
        
}

#imagen-fondo-index h3{
    color: white;
    text-align: center;
    padding-top: 5em;
    font-weight: 100;
    font-size: 2em;
    
    
}
.titulocalen{
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5em;
}

.calendar {
    position: relative;
    background: lightgreen;
    min-width: auto;
    max-width: 50em;
    display: flex;
  align-items: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
    margin-left: auto;
    margin-right: auto;
    border-radius: 1em;
    justify-content: center;
   margin-bottom: 3em;
    
}

.calendar .date {
    max-width: 400px;
    padding: 1em;
    box-sizing: border-box;
}

.calendar .date h5{
    margin: 0 0 20px;
    padding: 0;
    font-weight: 500;
    text-align: center;
}

.calendar .date .days {
    
    display: flex;
    flex-wrap: wrap;
    
    
}
.calendar .date .days .day{
    flex-wrap: nowrap;
    flex-basis: 13%;
   
    
}

.calendar .date .days .day,
.calendar .date .days .numero {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
}
.calendar .date .days .day:first-child {
    color: white;
    font-weight: 600;
}
.calendar .date .days .numeroactivo{
    background: black;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    display: flex;
    
}


/*termina index*/


/*recorrido*/

.recorrido{
    padding-top: 20vh;
}
.maparesponsive {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;

}
.maparesponsive iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
   
}

#titulo-reco h3{
  text-align: center;
  font-weight: 100;
    font-size: 2em;
}

.articulo{
    border: lightgreen solid 1px;
    padding: 1em;
    text-align: left;
    display: flex;
    margin-bottom: 2em;
}

.articulo h4 {
   border-bottom: lightgreen solid 1px;
    margin: 0;
    padding-bottom: 1em;
}

.articulo p{
    line-height: 1.4em;
}


.galeriareco{
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   z-index: -1;
   
}

.galeriareco figure {
     width: 40vmin;
    margin: .125em;
    position: relative;
    overflow: hidden;
    
}

.galeriareco img{
    object-fit: cover;
    object-position: left center;
    width: 45vmin;
    height: 45vmin;
    display: block;
   
}



.galeriareco figure:hover figcaption {
    background-color: rgba(0, 0, 0,.8);
    top: 0;
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
   
}

.galeriareco figcaption {
    background-color: black;
    color: white;
    padding: .5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc( 100% - 2em );
    transition: all .6s ease-out;
}

.galeriareco figcaption span{
    display: block;
    font-size: .75em;
    color: #ddd;
    margin-top: .5em;
    text-transform: none;
    padding-bottom: 2em;
    justify-content: left;
}

.tituloreco2 {
    padding-top: 1em;
    border-top: grey solid 3px;
    color:black;
    text-align: left;
    font-weight: 800;
    font-size: 1.2em;
    text-transform: inherit;
    
}

.boton-contenedor-gris{
  
    background-color: lightgreen;
    border-radius: 1em;
    padding: 1em 1em 1em 1em;
    width: 10em;
    height: 1.5em;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    text-decoration:none;
    color: black;
    margin-top: 1em;
    margin-bottom: 0em;
    display: flex;
    background: linear-gradient(to top, #2ECC71 , lightgreen);
    text-transform: uppercase;
    box-shadow: 0 .10em .5em rgba(0, 0, 0, .35); 
    }




.boton-contenedor-gris2:hover {
    background: linear-gradient(to top, lightgreen , #fafafa, white);
    transition: all 0.4s linear;
}

.textomapa{
    padding-bottom: 0.5em;
    line-height: 1.4em;
}
/*termina recorrido*/





/* CLASES WEBAPP */

/*PRINCIPAL*/

h1{
    text-transform: uppercase;
}
h2{
    text-transform: uppercase;
}
h3{
    text-transform: uppercase;
}

.boton-contenedor-gris{
  
    background-color: lightgreen;
    border-radius: 1em;
    padding: 1em 1em 1em 1em;
    width: 10em;
    height: 1.5em;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    margin-top: 1em;
    margin-bottom: 3em;
    display: flex;
    background: linear-gradient(to top, #2ECC71 , lightgreen);
    text-transform: uppercase;
    box-shadow: 0 .10em .5em rgba(0, 0, 0, .35); 
    }
.boton-contenedor-gris:hover {
    background: linear-gradient(to top, lightgreen , #fafafa, white);
    transition: all 0.4s linear;
}

.boton-contenedor-gris2{
  
    background-color: lightgreen;
    border-radius: 1em;
    padding: 1em 1em 1em 1em;
    width: 10em;
    height: 1.5em;
    justify-content: center;
    margin: auto;
    text-decoration:none;
    color: black;
    margin-top: 1em;
    display: flex;
    background: linear-gradient(to top, #2ECC71 , lightgreen);
    text-transform: uppercase;
    box-shadow: 0 .10em .5em rgba(0, 0, 0, .35); 
    }

.boton-overline{
    text-decoration: none;
    color:black;
         }

.titulo-secciones{
    background-color: black;
    color:lightgreen;
    border-radius: 5px;
    padding: 1em 1em 1em 1em;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    width: 15em;
    height: 1.5em;
    }

/*RECORRIDO*/
.contenedor-texto-desflecado{
    text-align:left;
    margin:0;
    }

.contenedor-informacion1{
    display:flex;
}

.contenedor-imagen{
    
    max-width: 20em;
    max-height: auto;
    border: .25em solid lightgreen;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
    margin-top: 1em;
    display: flex;
}
.contenedor-texto-explicacion{
    text-align:left;
    margin: 1em 2em 1em 2em;
    flex-wrap: wrap;
    display: flex;
    
  }
.centrado{
    max-width: 20em;
    margin:center;
    display:flex;    
    }

.subtitulo{
    color:black;
    margin: 1em;
    text-align: left;
   }

.contenedor-galeria{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;           
    }

main section figure {
    margin: .125em;
    padding: 0;
}
.img-galeria{
    object-fit: cover;
    object-position: center;
    width: 40vmin;
    height: 40vmin;
    flex-wrap: wrap;
    
    
    }
main div h6 {
    padding: 0;
    margin: 0.2em;
    justify-content: center;
    text-align: center;
}



/* CLASES WEBAPP */


/* FOOTER */

footer {
    background-color: #eaeaea;
    padding: 1em;
    margin: auto;
   
}
.contenedor {
    display: flex;
    flex-direction: row;
    max-width: auto;
    bottom: 0;
   
}

/* TERMINA FOOTER */




/* CLASES */

.logo{
    display:flex;
    justify-content: center;
    margin: auto;
    text-align: center;
    width: 20%;
    margin-top: 1em;
    max-width: 200px;
}

.header {
    position: fixed;
    left: 0;
    top:0;
    right: 0;
 }

.navegacion ul li a:hover {
    background: linear-gradient(to top, lightgreen , white, white);
    transition: all 0.4s linear;
}

header .contenedor{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    z-index: 99;
}


.contenedor-redondeado-verde{
    background: linear-gradient(to top, #2ECC71 , lightgreen);
    border-radius: 20px;
    padding: 1em;
    margin: 1em;
            
    border: .25em solid lightgreen;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
    margin-top: 1em;

}

.contenedor-redondeado-negro{
    background-color: black;
    border-radius: 20px;
    padding: 0.5em;
    margin: 0.5em 0.2em 0.5em 0.2em;
    color: lightgreen;
    box-shadow: 0 .10em .5em rgba(0, 0, 0, .35);
}


.redes-sociales img {
    max-width: 5em;

}

.linea{
    background-color: lightgreen;
    height: 0.5em;
    border-radius: 50px;
}

.

.cauce-titulo {
    padding-top: 12em;
}

/* TERMINA CLASES */







/* MOBILE FIRST */


@media screen and (min-width: 480px){
    body{
        background-color: white;
        padding: 1em;
    }
    
  
/*FORMULARIO DONACIONES*/
    .form {
    max-width: 80%;
   flex-direction: column;
   justify-content: center;
        
    }
   
    
    input {
    width: 80%;
    }
    
    input label{
    margin: auto;
    align-content: center;
    }
    
    .calendar {
        min-width: 70%;
    }
        
/*TERMINA DONACIONES*/

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

@media screen and (min-width: 760px){
    body{
        background-color: white;
    }
    
    body main{
    
     margin: auto;
    text-align: left;
    padding: 1em;
    display: block;

    flex-grow: 1;
}
    .header {
        flex-direction: row;
        text-align: center;
    }


    .usuario{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    text-align: center;
    max-width: 55em;
}
    

    .usuario img{
    border-radius: 50%;
    height: 20vw;
    width: 20vw;
    margin-left: 1em;
    margin-right: 1em;

    border: .25em solid lightgreen;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
    margin-top: 1em;
}
  
    


    
    /* Actividades */
    
    .actividades{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    text-align: center;
    
}
    
    

    .actividades img{
    border-radius: 15%;

    margin-left: 1em;
    margin-right: 1em;
    }
    
    /* CIERRA Actividades */
    
    /* DONACIONES */
    
    .donaciones ol{
        list-style: none;
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        margin: -1em 0 1em 0;
    }

    .contenedorrecorrido{
    
    z-index: -1;
    }
    
    
}
    
    
    /* CIERRA DONACIONES */













@media screen and (min-width: 950px){
    body{
        background-color: white;
    }
    
    body main{
    
    margin: auto;
    text-align: left;
    padding: 1em;
    display: block;

    flex-grow: 1;
}

    .usuario{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    text-align: center;
    max-width: 55em;
}
    

    .usuario img{
    border-radius: 50%;
    height: 10vw;
    width: 10vw;
    margin-left: 2em;
    margin-right: 2em;

    border: .25em solid lightgreen;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
    margin-top: 1em;
}
    
    
    
    
    .contenedor-redondeado-verde{
    
    display: inline-block;
    width: 10vw;
        
    border: .25em solid lightgreen;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35) inset, 0 .35em .5em rgba(0, 0, 0, .35);
    margin-top: 1em;
}
    
    

}

    

  
    
.contenedorrecorrido{
    
    z-index: -1;
    }
    /* Actividades */
    
    .actividades{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    text-align: center;
    max-width: 55em;
}
    

    .actividades img{
    border-radius: 15%;

    margin-left: 1em;
    margin-right: 1em;
    }
    
    /* CIERRA Actividades */
    
   #imagen-fondo-index{
    

    height: 0em;
    background-image: url(imagenes/cauceviejo.jpg);
    background-size: cover;
    background-color: black;
    background-repeat: no-repeat;
    
        
}

    .calendar{
        max-width: 40%;
    }

}