@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


header {    background-color: #a3a30d;
            background-position: center;
            margin-left: -0.5em;
            margin-right: -0.5em;
            margin-top: -1em;
            padding-bottom: 3em;
            
    
}


#hastaelegi {   padding: 0 2.5em 0 2.5em;
                box-sizing: border-box;
                background-position: center;
    
}




/* 
    primera parte para el celular
    mobile first
*/


header nav {    
                justify-content: center;
                        
    
}



header nav ul {     display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    font-family: 'Montserrat', sans-serif;
                    padding: 0.8em 1.9em 0 1.9em;
                    text-align: center;
    
}



header nav ul li {  display: inline-block; 
                    padding: 0 0.6em 0 0.6em;
                    text-align: center;
                    
    
}



header nav ul li a {    text-decoration-line: none;
                        color: white;
                        align-items: center;
                        font-size: 0.7em;
                        font-family: 'Montserrat', sans-serif;
                        text-align: center;
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 1em;

}



header nav ul li a:hover {  text-decoration-line: none;
                            color: white;
                            font-weight: 800;

}




#apadrinamiento nav ul li a:hover {      text-decoration: underline;
    
    
}



#logo figure img {     display: block;
                        justify-content: center;
                        align-items: center;
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: 2.5em;
    
}



#logo h1 {      color: white;
                display: block;
                text-align: center;
                font-size: 3em;
                margin-top: -0.1em;
                font-family: 'Bebas Neue', sans-serif;
}

/* ----- logo responsive ------ */

@media (min-width: 700px) {
  
    
    #logo {
    display: flex;  
    align-items: flex-end;
    justify-content: center;  
  }
    
    #hastaelegi{
    font-size: 1.5em ;
    margin-left: 4em;
    margin-right: 4em;    
        
    }
    
    #hastaelegi h2 {
        font-size: 1.5em;
        margin-bottom: 2em;
    }
    
    
    #hastaelegi h3 {
        margin-bottom: 1.2em;
        font-size: 1em;
        
    }
    
    
    #inicio {
        margin-left: 4em;
        margin-right: 4em;
        font-size: 1.5em; 
    }
    
    header nav ul { 
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-family: 'Montserrat', sans-serif;
        padding: 0.8em 1.9em 0 1.9em;
        text-align: center;
    }
    
    .video {
        margin-top: 2em;
        width: 80%;
        height: auto;
    }
    
    #formulario form{
        padding-left: 7em;
        padding-right: 7em;
    }
    
    .comentario textarea{
        width: 500px;
        height: 200px;
    }
    
    .nombre input {
        width: 500px;
        height: auto;
    }
    
    #formulario p{
        padding-left: 7em;
        padding-right: 7em;
    }
    
    
    .wiki li {
        width: 50%;
    }
    
    /*-------inputs form apadrinamiento-------*/
    .comentario textarea {
    margin-top: 1em;
    width: 50%;
    height: 100px;
    }

    
    .nombre input {
        width: 25%;
        height: auto;
    }
    
    
    /*----inputs form abajo---*/
    .texto {
    margin-top: 0.5em;
    width: 25%;
    height: 20px;
    }

    .area {
    margin-top: 0.5em;
    width: 50%;
    height: 100px;
    }

}


@media (max-width: 700px){
    
    /*-------inputs form apadrinamiento-------*/
    .comentario textarea {
    margin-top: 1em;
    width: 75%;
    height: 100px;
    }

    
    .nombre input {
        width: 50%;
        height: auto;
    }
    
    
    /*----inputs form abajo---*/
    .texto {
    margin-top: 0.5em;
    width: 50%;
    height: 20px;
    }

    .area {
    margin-top: 0.5em;
    width: 75%;
    height: 100px;
    }
    
    
    
}





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

header h2 {     display: flex;
                color: white;
                font-size: 1.1em;
                font-family: 'Montserrat', sans-serif;
                margin-bottom: -0.4em;
                font-weight: 700;
    
}



header div p {  color: white;
                display: flex;
                font-family: 'Montserrat', sans-serif;
                font-size: 0.75em;
                
                box-sizing: border-box;
                
}


#inicio {   display: flex;
            justify-content: center;
            flex-direction: column;
            padding: 0 2.5em 0 2.5em;
            
    
}



/** ______________ FIN DEL HEADER ________________ **/


/*apadrinamiento parrafos y titulos*/

#apadrinamiento h2 {    display: flex;
                        color: #a3a30d;
                        font-size: 2.5em;
                        font-family: 'Bebas Neue', sans-serif; 
                        justify-content: center;
                        margin-top: 2em;
                        margin-bottom: -0.3em;
}



#apadrinamiento h3 {
        
                    display: flex;
                    color: #a3a30d;
                    font-size: 1em;
                    font-family: 'Montserrat', sans-serif;
                    justify-content: center;
                    margin-top: none;
                    font-weight: 700;
}



#apadrinamiento p { color: black;
                    display: flex;
                    font-family: 'Montserrat', sans-serif;
                    font-size: 0.8em;
                    justify-content: center;
                    flex-direction: column;
                
                    margin-top: 0.9em;
                    margin-bottom: 0.5em;
                    box-sizing: border-box;
                
}


/* Navegacion de apadrinar un arbol --------------- */

#apadrinamiento nav {   display: flex;
                        justify-content: center;
                       
                    
                    
                
}


#apadrinamiento nav ul {    display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;
                            padding: 0 2.5em 0 2.5em;
                            text-align: center;
    
}


#apadrinamiento nav ul li {     display: block;
                                text-align: center;
                                padding: 1em;
    
}

#apadrinamiento nav ul li a {       text-decoration-line: none;   
                                    font-family: 'Montserrat', sans-serif;
                                    font-size: 0.7em;
                                    color: #a3a30d;
                                    font-weight: 700;
}


#apadrinamiento nav ul li a:hover {      text-decoration: underline;
    
    
}


/* Seccion de apadrinamiento */


body h3 {  margin-bottom: -0.3em;
    
}






#comoapadrino figure picture img {  display: block;
                                    justify-content: center;
                                    align-items: center;
                                    margin-left: auto;
                                    margin-right: auto;
                                    margin-top: 2em; 
                                    width: 70%;

}




#comoapadrino {     background-color: white;
                    font-family: 'Montserrat', sans-serif;
                    padding: 2.2em 0em 2.5em 0em;
                    margin: auto;
    
}



#comoapadrino h3 {  color: #a3a30d;
                    text-align: center;

}

#comoapadrino p {   color: black;
                    display: flex;
                    font-family: 'Montserrat', sans-serif;
                    font-size: 0.8em;
                    justify-content: center;
                    flex-direction: column;
                    margin-top: 0.9em;
                    margin-bottom: 0.5em;
                    box-sizing: border-box;
    
}


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


}

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





#metodologia h3 {       margin-top: 0.5em;
                        text-align: center;
                        color: #a3a30d;
    
}



#metodologia {  padding-bottom: 0em;
                font-family: 'Montserrat', sans-serif;
    

}



#metodologia p {    color: black;
                    display: flex;
                    font-family: 'Montserrat', sans-serif;
                    font-size: 0.8em;
                    justify-content: center;
                    flex-direction: column;
                    margin-top: 0.9em;
                    margin-bottom: 2.5em;
                    box-sizing: border-box;
    
}




#elegiyformulario {     background-color: #a3a30d;
                        padding: 2em 2.5em 3em 2.5em;
                        font-family: 'Montserrat', sans-serif;
                        margin-left: -0.5em;
                        margin-right: -0.5em;
    
    
}
    





#elegieltuyo h3 {   font-family: 'Montserrat', sans-serif;
                    color: white;
                    text-align: center;
                

}



#elegiyformulario figure img {  display: block;
                            justify-content: center;
                            width: 90%;
                            align-content: center;
                            margin: auto;
            
    
    
}



#slider   {  margin: 2em 2.5em 3em 2.5em;
                  display: flex;
                             
}

.slider {        width: 512px;
                 height: 384px;
                 margin: auto;
                 position: relative;
                 list-style: none;
                 padding: 0;
                 display: flex;
                 align-items:flex-start;
                 justify-content: center;
                 max-width: 640px;
}


.slider img {
                position: absolute;
                top: 0;
                left: 0;
                width:100%;
                max-width:640px;
                bottom: 5em;
                opacity: 0;
                transition: all 0.7s;
                border: 5px solid white;
        
}

.slider input  {
                position: relative;
                z-index: 100;
                margin: 10px;
}


.slider input:checked ~ img {
                
                opacity: 1;
    
    
}}


/* -----------formulario apadrinamiento------------ */



#formulario h5 {   font-size: 0.9em;

}




#formulario p {     font-family: 'Montserrat', sans-serif;
                    font-size: 1em;
}


#formulario form {  display: flex;
                    flex-direction: column;
                    align-content: center;
                    justify-content: center;
                    font-family: 'Montserrat', sans-serif;
                    color: black;
                    width: 100%;
                    text-align: left;            
}



#primerformulario {     display: flex;
                        margin: auto;
                        justify-content: center;
                        margin-left: 10%;
                        margin-right: 10%;
}

.newsletter {   margin-top: 1em;
                margin-bottom: 1em;   
}


/*-----INPUTS TEXT APADRINAMIENTO-----*/

.comentario textarea {   width: 100%;
                         
    
}

.comentario { margin-top: 1em;
    
}


.nombre {
    margin-top: 1em;
    margin-bottom: 1em;
    
}


.nombre input { width: 100%;
    }


/* --------------------------------------------wikicauce seccion------------------------------ */


#wikicauce { padding: 2em;
    
}


#wikicauce p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
    color: black;
    box-sizing: border-box;
    
}



#wikicauce div p {  margin-left: 1.2em;
    
    
}




#wikicauce h2 {
    color: #a3a30d;
    text-align: center;
    font-size: 2.5em;
    font-family: 'Bebas Neue', sans-serif;
    margin-bottom: -0.2em;
}



#wikicauce h3 {
    color: #a3a30d;
    font-size: 1.5em;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    margin-top: 1.5em;
    margin-bottom: -1.3em;
}

.wiki li figcaption {
    padding: 1em;
    box-sizing: border-box;
}

.wiki li figcaption p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
    box-sizing: border-box;
}

.wiki li figure {
    margin: 0 1em 0 1em;
}

.wiki li figure img {   display: block;
                        justify-content: center;
                        width: 100%;
                        border: 2px solid #a3a30d;
                         
}



.wiki li figcaption h4 {    text-align: left;
                            color: #a3a30d;
                            font-family: 'Montserrat', sans-serif;
                            font-size: 0.9em;
                            margin-bottom: 0.1em;
                            margin-top: 0.1em;
}



.wiki      {    list-style: none;
                display: flex;
                flex-direction: row;
                justify-content: justify;
                flex-wrap: wrap;
                align-content: center;
                padding: 0em;
                
}

.wiki li { margin-top: 2em;
    
    
}







/* -------- seccion contacto ----- */


#contacto {  
            background-color: #a3a30d;
            padding: 2em 2.5em 3em 2.5em;
            font-family: 'Montserrat', sans-serif;
            margin-left: -0.5em;
            margin-right: -0.5em;
            
    
}
    




#contacto h2 {          display: flex;
                        color: white;
                        font-size: 2.5em;
                        font-family: 'Bebas Neue', sans-serif; 
                        justify-content: center;
                        margin-top: 0em;
                        margin-bottom: -0.3em;
}


#contacto h3 {      display: flex;
                    color: white;
                    font-size: 1em;
                    font-family: 'Montserrat', sans-serif;
                    justify-content: center;
                    margin-top: 2em;
                    font-weight: 700;
}



#contacto form {    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-content: center;
                    font-family: 'Montserrat', sans-serif;
                    color: black;   
                    width: 100%;
                    text-align: left;
                    padding: auto;  
                    margin: auto;
}


#formulariocontacto {   justify-content: center;
                        margin-left: 20%;
                        margin-right: 20%;
}                       



.formContacto {
    margin-top: 1.5em;
}

/*---INPUTS TEXT FORM CONTACTO ----*/

.texto {
    margin-top: 0.5em;
    width: 100%;
}

.area {
    margin-top: 0.5em;
    width: 100%;
   
}


#contacto label   { margin-bottom: -0.8em;
                    margin-top: 0.5em;
    
}




#enviar {   font-family: 'Montserrat', sans-serif;
            background-color: #a3a30d;
            color: whitesmoke;
            font-size: 0.9em;
            margin-top: 1em;
            border-style: solid;
            border-color: whitesmoke;
    
}



#limpiar {  font-family: 'Montserrat', sans-serif;
            background-color: whitesmoke;
            font-size: 0.9em;
            border-style: solid;
            border-color: whitesmoke;
             
             
             
}






/* ------------------------------------------------perfil seccion------------------------------------------------------------ */


#perfil {   padding: 0 2.5em 0 2.5em;
            
    
}


#perfil h2 {        display: flex;
                    color: #a3a30d;
                    justify-content: center;
                    margin-top: 2em;
                    margin-bottom: -0.2em;
                    font-size: 2.5em;
                    font-family: 'Bebas Neue', sans-serif;  
}



#fotoperfil     {   display: flex;
                    justify-content: center;
                    margin: auto;
                    margin-top: 1.7em; 
                    width: 50%;   
                    align-content: center;
                                
}


#perfil h3 {    display: flex;
                color: #a3a30d;
                font-size: 1.5em;
                font-family: 'Montserrat', sans-serif;
                justify-content: center;
                margin-top: 0.6em;
                margin-bottom: 0em;
                font-weight: 700;
}



#perfil h4 {    justify-content: center;
                color: #264223;
                font-family: 'Montserrat', sans-serif;
                font-size: 0.9em; 
                margin-top: -0.7em;
}



#perfil h5 {        color: #a3a30d;
                    flex-direction: column;
                    margin: auto;
                    margin-top: 1em;
                    margin-bottom: 5em;
                    font-family: 'Montserrat', sans-serif;
                    font-size: 1em;
                    text-align: center;              
}



#perfil p {     justify-content: center;
                font-family: 'Montserrat', sans-serif;
                font-size: 2em;
                margin-top: -0.5em;
                margin-bottom: 0em
            
}




#gamification nav {   display: flex;
                        justify-content: center;          
}


#gamification nav ul {    display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;
                            padding: 0 2.5em 0 2.5em;
                            text-align: center;  
}


#gamification nav ul li {    display: block;
                            text-align: center;
                            padding: 1em;
}


/* ------------------------------------------ footer -------------------------------------------------------------*/



footer {    background-color: #a3a30d;
            color: white;
            padding: 2em 3em 3.5em 3em;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7em;
            display: block;
            box-sizing: border-box;
                background-position: center;
            margin-left: -0.7em;
            margin-right: -0.7em;
            
            
    
}





footer p {  font-family: 'Montserrat', sans-serif;
            margin-bottom: -0.5em;
    
}