@charset "utf-8";

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

body {
    font-family: "trebuchet ms", sans-serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    
}

img {
   max-width: 100%;
    height: auto;
}

ul { list-style: none;
}


/*
----------------
encabezado
----------------
*/

header {
    
    padding: .25em;
    height: 7.6em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}

#logo {
    display: block;
    width: 7em;
}

header > ul {
    display: flex;
}

header > ul > li {
    width: 2em;
    height: 2em;
    margin-left: .25em;
    display: flex;

}

header > ul > li > a {
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: skyblue;
    text-decoration: none;
    font-weight: bold;
font-size: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    

}


#logo:hover {
	font-size: 19px;
}


header > ul {
    display: flex;visibility: visible
}

header > ul > li > a :hover {
	color: deepskyblue;
	font-size: 35px;
}


/* menu desplegable */

header nav {
    background-color: deepskyblue;
    position: fixed;
    right: -150%;
    top: 0;
    height: 100vh;
    min-width: 75vw;
    transition: all .6s ease;
    z-index: 999; 
    font-family: 'Ubuntu', sans-serif;
    
}

header nav:target {
    right: 0;

}

.logoagua {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
   
}
.logoagua img {
	width: 30vmin;
	height: 30vmin;
	max-width: 23em;
	max-height: 15em;
	padding: 1px;
	padding-bottom:1px;
	padding-left:3px;
	   
}
	

div > img:hover {
	font-size: 15px;
}



header nav a:hover {
    color: white;
}

#out {
   
    position: absolute;
    right: 0;
    top: 0;
	font-size: 30px;
	padding-top: 10px;
	padding-right: 15px;
	
}

#out:hover{
	color: white;
	font-size: 35px;
}


header nav:target {
    right: 0;

}


/*
----------------
contenidos
----------------
*/


.usuario {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
}


header nav a {
    color:yellow;
    display: block;
    padding: .90em 1em;
    text-align: center;
    text-decoration: none;
}

header nav a:hover {
    color: white;
}

#x {
    
    position: absolute;
    right: 0;
    top: 0;
}

/*
----------------
contenidos
----------------
*/

main {
    background-color: white;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


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

.galeria3 h3 {
    width: 100%;
    padding: 1em;
}

.galeria3 figure {
    width: 45vmin;
    margin: .125em;
    
    position: relative;
  
    overflow: hidden;
}

.galeria3 img {
  
    display: block;
}

.galeria3 figcaption {
    background-color:gold;
    color: white;
    padding: .5em;
    line-height: 1em;
  
    position: absolute;
    height: 100%;
  
    top: calc(100% - 1.5em);
    transition: all .5s ease;
    
}

.galeria3 figure:hover figcaption {
    background-color: rgba(62,187,209);
    top: 0%;
    transition: all .5s ease;
}

.galeria3 figcaption span {
    display: block;
    font-size: .75em;
    color:black;
}


.textos {
    padding: 1em;
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
}


.recuperar{
    
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
    margin-top: 15%;
    margin-bottom: 48%;

    
}


.recuperar input {
    height:2.5em; 
    width: 70%;
    padding:1em;
    text-align-last: center;
    border: 2px solid rgba(62, 187, 209, 0.77);
    font-size: 1em; 
    margin-bottom: 1em;
}


 
.recuperar input::placeholder{
    text-align-last: left;    
    color:darkgray;
}






ul{
    text-decoration: none
}


#x {
    position: absolute;
    right: 0;
    top: 0;
    color: #fdf40e; 
    }
#menu:target {
    right: 0;

}

a {
    color: inherit;
    display: block;
    text-decoration: none;
}
#bajada{ 
    font-family: 'Amatic SC', cursive;
    color: gold;
    font-size: 50px;
}



.boton1 {
   background-color: rgb(62, 187, 209);
    text-align: center;
    font-family:'Fira Sans', sans-serif;
    margin: 3em;
    color: white;
    background-color:rgb(62, 187, 209);;
    padding: 10px;
    border-radius: 20px;
    border-style: none;
    width: 30
    }


.contenedorlogo {
    display: block;
    text-align: center;
    width: 100%;
    padding: 1em;
    margin-top: 10em;
    margin-bottom: 2em;
}
#logo2 {
    max-width: 70%;
    min-width: 70%;
}

    

#registro {
    color:rgb(62, 187, 209);
    font-family:F'Fira Sans', sans-serif;
    padding-top: 1rem;
    text-align: center;
    font-style: italic;
    text-decoration:underline;
 
}

#argentinamundo{
    
}

.contenedorvideo{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.contenedormodulos a {
    
  height: 100vh;
    
   
}
  .videoresponsive {
       position: relative;
    margin: auto;
    height: 0;
    padding-bottom: 56.25%;
    border-color: 2em aqua;
    }
  
    .videoresponsive iframe {
  position: absolute;
    height: 100%;
    width:90%;
    left: 1em;
    }


h1{
 background: rgb(62, 187, 209);
   font-family: 'Fira Sans', sans-serif;
font-weight: 700
    font-size: 3em;
    background-size: 2em;
    font-size: 1.5em;
    color: white;
    text-align: center;
 margin-top: 0.85em;
    margin-right: 3;
    margin-left: 3;
    margin-bottom: 1.2em;
    padding: 0.10em;
    }

.galeria,
.galeria2 {
    padding-bottom: 0.8em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.galeria h3,
.galeria2 h3 {
    width: 100%;
    padding: 1em;
   
}

#captaciondeagua{
       font-family: 'Amatic SC', cursive;
    font-weight: 700;
    
}


#captacion p{
    margin: 0.85em;
}
.galeria figure,
.galeria2 figure {
    width: 45vmin;
    margin: 0.125em;
    position: relative;
 overflow: hidden;
}

.galeria img,
.galeria2 img {
    display: block;
}

.galeria figcaption,
.galeria2 figcaption {
    background-color: rgba(62, 187, 209, 0.18);
    color: rgb(5, 3, 51);
    font-family: 'Fira Sans' sans-serif;
    padding: 0.5em;
    line-height: 1em;
 position: absolute;
    height: 100%;
     top: calc(100% - 1.5em);
    transition: all 0.5s ease;
}

.galeria figure:hover figcaption,
.galeria2 figure:hover figcaption {
    background-color: rgb(62, 187, 209);
    top: 50%;
    transition: all .5s ease;
}

h3{
     font-family: Amatic SC, cursive;
     font-weight: 700;
    color: #fdf40e;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 0.5em;
}

p{
    font-family: 'Fira Sans' sans-serif;
    font-size: 1.2em;
  margin-left: 3em;
    margin-right: 3em;
    margin-bottom: 3em;

}
/*
----------------
ya soy parte
----------------
*/



input[type=text1] {
    box-sizing: border-box;
    margin-bottom: 5em;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3em;
    color: black;
    width: 40%;
    border-radius:200px;
    align-items: center;
   margin: auto;

}
input {
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 2rem;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
    margin: 7px 0;
    color: black;
    width:40%;
    border-radius:200px;
    align-items: center;  
    
}
textarea{

    background: rgba(62, 187, 209, 0.2);
    box-sizing: border-box;
    margin-bottom: 2rem;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
    margin: 7px 0;
    color: black;
    width: 60%;
    align-items: center;
    height: 90px;
}
select{
    font-family: 'Amatic SC', cursive;
    box-sizing: border-box;
    margin-bottom: 2rem;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
     margin: 7px 0;
    color: rgba(62, 187, 209);
    width: 60%;
    align-items: center;
    letter-spacing: 0.2rem;

}
    .boton{
    text-decoration: none;
    padding: 3px;
    border-radius:200px; 
    
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 800;
    font-size: 15px;
    color: white;
    background-color: rgb(62, 187, 209);
    margin-top: 15px;
    width: 30%;
    margin-left: 35%;
}

button {
    
     text-decoration: none;
    padding: 3px;
    border-radius:200px; 
    
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 800;
    font-size: 15px;
    color: white;
    background-color: rgb(62, 187, 209);
    margin-top: 15px;
    width: 30%;
    
    }

/* ----- BOTON ACEPTAR ----- */
  .boton_2{
    text-decoration: none;
    padding: 3px;
    border-radius:200px; 
    
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 800;
    font-size: 15px;
    color: white;
    background-color: rgb(62, 187, 209);
      padding-top: 32
  }


main.registro {
    margin-top: 70px;
    text-align: center;
    color: black;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
  }



#contra{
  color:rgb(62, 187, 209);
    font-family:F'Fira Sans', sans-serif;
    padding-top: 1rem;
    text-align: center;
    font-style: italic; 
    font-style: normal;
    font-weight: 100;
    text-decoration:underline;
    
   

}


/* ----- FORMULARIO DONAR ----- */

.imgdonante {
   text-align: center; 
    
    }
#imagd{width: 30%;
    
}


input[type=titulartarjeta] {
    box-sizing: border-box;
    margin-bottom: 2em;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3em;
    color: black;
    width: 40%;
    border-radius:200px;
    align-items: center;
   margin: auto;

}
input[type=numerodetarjeta] {
    width: 72%;
    box-sizing: border-box;
    margin-bottom: 2em;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
    margin: 3px ;
    color: black;
    width: 40%;
    border-radius:200px;
    align-items: center;
    margin: auto;

}
input[type=expiracion] {
    width: 73%;
    box-sizing: border-box;
    margin-bottom: 2em;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
    margin: 3px ;
    color: black;
    width: 20%;
    border-radius:200px;
    align-items: center;
    margin: auto;

}

input[type=number] {
    width: 73%;
    box-sizing: border-box;
    margin-bottom: 2em;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
    margin: 3px ;
    color: black;
    width: 20%;
    border-radius:200px;
    align-items: center;
    margin: auto;
}
input[type=password ] {
    width: 73%;
    box-sizing: border-box;
    margin-bottom: 2rem;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
    margin: 2px 0;
    color: black;
    width: 30%;
    border-radius:200px;
    align-items: center;  
    
}
.boton2 {
   background-color: rgb(62, 187, 209);
    text-align: center;
    font-family:'Fira Sans', sans-serif;
    margin: 3em;
    color: white;
    background-color:rgb(62, 187, 209);
    padding: 10px;
    border-radius: 20px;
    border-style: none;
    width: 30;
    }


/* ----- CAPTACIÓN DE AGUA ----- */



h1{
    background: rgb(62, 187, 209);
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    font-size: 3em;
    background-size: 2em;
    font-size: 1.5em;
    color: white;
    text-align: center;
    margin-top: 0.85em;
    margin-right: 3;
    margin-left: 3;
    margin-bottom: 1.2em;
    padding: 0.10em;
    }

.galeria,
.galeria2 {
    padding-bottom: 0.8em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}


.galeria h3,
.galeria2 h3 {
    width: 100%;
    padding: 1em;
   
}

#captaciondeagua{
    font-family: 'Amatic SC', cursive;
    text-align: center;
    color: gold;
    font-size: 3em;
    font-weight: 700;
    
}


#captacion p{
    margin: 0.85em;
}
.galeria figure,
.galeria2 figure {
    width: 45vmin;
    margin: 0.125em;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.galeria img,
.galeria2 img {
    display: block;
}

.galeria figcaption,
.galeria2 figcaption {
    background-color: rgba(62, 187, 209, 0.18);
    color: white;
    font-family: 'Fira Sans', sans-serif;
    text-align: center;
    padding: 0.5em;
    line-height: 1em;
    position: absolute;
    height: 100%;
    width: 100%;
    top: calc(100% - 1.5em);
    transition: all 0.5s ease;
}

.galeria figure:hover figcaption,
.galeria2 figure:hover figcaption {
    background-color: rgb(62, 187, 209);
    top: 75%;
    transition: all .5s ease;
}

h3{
     font-family: 'Amatic SC', cursive;
     font-weight: 700;
    color:gold;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 0.5em;
}
#ini {
    font-family: 'Amatic SC', cursive;
     font-weight: 700;
    color:gold;
    font-size: 3em;
    text-align: left;
    margin-bottom: 0.5em;
}

button1{
    text-decoration: none;
    padding: 7px;
    border-radius:200px; 
    
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    padding-left: 19px;
    padding-right: 12px;
    font-weight: 800;
    font-size: 15px;
    color: white;
    background-color: rgb(62, 187, 209);
    width: 90px;
    align-items: center;
    margin: auto;
    margin-bottom: 60%


}
.contras{
    width: 400px;
    box-sizing: border-box;
    margin-bottom: 2em;
    font-size: 1rem;
    border: 1px solid #adf;
    padding: 0.3rem;
    color: black;
    border-radius:200px;
    align-items: center;
    margin: auto;
  
}


/* ----- SLIDE FOTOS ----- */
    .slider{
        width: 95%;
        margin: auto;
        overflow: hidden;
        
    }
    
    .slider ul{
        display: flex;
        padding: 0;
        width: 400%;
        
        animation: cambio 20s infinite;
        animation-direction:alternate;
        animation animation-timing-function: ease-in;
    }
    
    .slider li {
        width: 100%;
        list-style: none;
    
    }

    .slider img{
        width: 100%;
        margin-top: 5%;
        margin-bottom: 10%;
    }
    
    @keyframes cambio{
        0%{margin-left: 0;}
        20%{margin-left: 0;}
        
        25%{margin-left: -100%;}
        45%{margin-left: -100%;}
        
        50%{margin-left: -200%;}
        70%{margin-left: -200%;}
        
        75%{margin-left: -300%;}
        100%{margin-left: -300%;}
    }
/* ----- REGISTRATE ----- */

h5{
    font-family: 'Libre Franklin', sans-serif;
    font-style: italic; 
color:red;
font-size: 0.7em;
    text-align: center;
position: absolute;
    left:35%; 
    margin: 53px 3px 0px 0px

}
.boton3 {
   background-color: rgb(62, 187, 209);
    text-align: center;
    font-family:'Fira Sans', sans-serif;
    margin-left: 43%;
    color: white;
    background-color:rgb(62, 187, 209);
    padding: 10px;
    border-radius: 20px;
    border-style: none;
    width: 90px;

    }

/* ----- ECOETIQUETADO ----- */



.etiquedado{
    font-family: 'Amatic SC', cursive;
    text-align: center;
    color: gold;
    font-size: 3em;
    font-weight: 700; 
}
#imageco{
   width: 90%;
    
}


/* ----- GENERAL PARRAFO ----- */

p{
    font-family: 'Fira Sans', sans-serif;
    text-align: left;
    font-size: 1em;
    font-weight: 300;
    margin: 0.50em;
    
    margin-left: 1em;
}
/* ----- SISTEMAS URBANOS ----- */
.sistemasurbanos{
      font-family: 'Amatic SC', cursive;
    text-align: center;
    color: gold;
    font-size: 3em;
    font-weight: 700; 
}
/* ----- POSIBLES SOLUCIONES ----- */


#posiblessoluciones{
    font-family: 'Amatic SC', cursive;
    text-align: center;
}
#enteratecomo h2{
    font-family: 'Amatic SC', cursive;
    color: rgba(62, 187, 209);
    text-align:center;
    font-size: 2.1em;  
    margin: 0px 0px 0px 0px;
}
#enteratecomo li a{
     background-color: rgba(62, 187, 209, 0.6);
 font-family: 'Acme', sans-serif;
    
    color: white;
    padding: 0.85em; 
    margin: 2em;
    margin-left: 4em;
    width: 70%;
    border-radius: 2px;
    text-decoration: none;
    border-color: rgb(62, 187, 209);
    border-bottom-width: medium;
    border-style: solid;
    
    text-align: center;
    align-items: center;
    }

#enteratecomo li a:hover{
   color: rgb(62, 187, 209);

}

#enteratecomo p{
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
    color: black;
    font-size: 1em;
    margin: 0.50em;
    margin-bottom: 0.50em;
margin-left: 1em;
}
/* ----- YOUTUBE ----- */

.videoresponsive2 {
    position: relative;
    margin: 2em;
    margin-left: 2em;
    height: 0;
    padding-bottom: 56.25%;
    border-color: 2em aqua;
    }
  
.videoresponsive2 iframe {
    position: absolute;
    height: 90%;
    margin: 2em;
    margin-left: 0em;
    margin-right:0em; 
    width:100%;
}

/* ----- MUCHAS GRACIAS ----- */
.muchasgracias{
    
    width: 70%;
	max-height: 12em;
	padding: 0em;
	padding-bottom:2em;
    align-content: center;
    margin-top:0;
	
}
.boton4 {
   background-color: rgb(62, 187, 209);
    text-align: center;
    font-family:'Fira Sans', sans-serif;
    margin-left: 25%;
    color: white;
    background-color:rgb(62, 187, 209);
    padding: 4px;
    border-radius: 20px;
    border-style: none;
    width: 50%;
    margin: 20px 0px 10px 99px

    }
/* -----Gracias ----- */

.graciastick{ 
margin: 90px 3px 90px 150px;
    align-content: center;
    display: block;

}






/* ----- ENCUESTA ----- */

    
.opciones1{
  font-family:'Fira Sans', sans-serif;
    text-align:left;
    color: black;
    font-size: 0.9em;
    font-weight:400 ; 
	display: inline-block;
    
    
margin: 9px 0px 10px 10px;
    
	 
}
#encuesta{
    margin-left: 2%;
    
}
.opciones{
  font-family:'Fira Sans', sans-serif;
    text-align:left;
    color: black;
    font-size: 0.9em;
    font-weight:400 ; 
 display: inline-block;
    margin: 9px 0px 7px 10px;
    
}

.preguntas{
   font-family:'Fira Sans', sans-serif;
    text-align: left;
    display: block;
    color: rgba(0, 161, 199, 0.74);
    font-size: 1em;
    font-weight:600;  margin-left: 2%;
    
}

.cuidemos{
    color: gold;
    font-style: italic;
    
    
    
}
 
    /* ----- TRANSPORTE DEL AGUA ----- */
.transportedelagua{
   font-family: 'Amatic SC', cursive;
    text-align: center;
    color: gold;
    font-size: 3em;
    font-weight: 700;   
}


.mio {
    
    font-family: 'Fira Sans', sans-serif;
    font-style: italic;
}    
/* ----- POTABILIZACION DEL AGUA ----- */
.potab{
      font-family: 'Amatic SC', cursive;
    text-align: center;
    color: gold;
    font-size: 3em;
    font-weight: 700; 
}

#potabilizacion h1{
   background: rgb(62, 187, 209);
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    font-size: 3em;
    background-size: 2em;
    font-size: 1.5em;
    color: white;
    text-align: center;
    margin-top: 0.85em;
    margin-right: 3;
    margin-left: 3;
    margin-bottom: 1.2em;
    padding: 0.10em;
}

/* ----- ENVIO MAIL ----- */

 .mail {
   background: rgb(62, 187, 209);
    font-family: 'Fira Sans', sans-serif;
    font-weight: 100;
    background-size: 2em;
    font-size: 0.7em;
    color: white;
    text-align: center;
    margin-top: 0.85em;
    margin-right: 3;
    margin-left: 3;
    margin-bottom: 1.2em;
    padding: 0.10em;
}   

.muchasgracias{
    margin: 100px 0px 50px 0px;
    align-content: center;
    display: block;
    position:relative; top:-34%;
position:relative; left:60px;
}
/* ----- QUIENES SOMOS ----- */

.contactos{
    font-family:'Fira Sans', sans-serif;
  margin: 0px 0px 2px 50px;
    color: rgb(13, 182, 222);
    font-size: 1em;
    font-weight:400 ;
    display: flex;
    text-decoration: underline;
    

}
.contactos1{
    font-family:'Fira Sans', sans-serif;
    margin-left: 35%;
    margin-top: 1em;
    color: rgb(13, 182, 222);
    font-size: 1.3em;
    font-weight:400 ;
    display: block;
   
    
}
.carita{
     margin: -65px 0px 0px 300px;
  align-content: center;    
    
}

.carta{
position:absolute; bottom:34%;
position:absolute; left:18px; 
  
    
}
.ubicacion{
   
position:absolute; bottom:24%;
position:absolute; left:25px; 
  
    
}


/* ----- FOOTER ----- */

footer p{
    background-color: rgb(62, 187, 209);
    font-size: 0.75em;
    font-family: 'Fira Sans', sans-serif;
    color: white;
    text-align: center;
    line-height: 1.4;
    display: flex;
    margin-bottom:0;
    margin-top: 5em;
    margin-left: 0;
    width: 100%;
    opacity: 0.7;
    }