* {
margin: 0;
padding: 0;    
font-family:sans-serif; 
 
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
display: block;
}


body {
display: block;
width:100%; 
background: #FAFAFA;
text-decoration: none;
}


.contenedor-total {
width:80%;    
margin: 0 auto;
box-sizing: border-box;  
}



header {
float: left;
width: 90%;
height:180px;
margin: 0% 5% 0% 5%; 
background: #F2F2F2; 
 }

main {
width: 90%;
height: auto; 
float: left;
display: block;
margin: 0% 5% 0% 5%;
box-sizing: border-box;
}


/* LOGO*/

.logo {
width: auto;
height: auto;    
}

.logo a img {
margin-top: 0px;
display: block;
float: left;
margin-left: 3%;
height: 160px;
}


/*BOTONERA SECUNDARIA*/


.secundaria {
width: auto;
list-style: none;
display: block;
float: right;    
}

.secundaria ul{
margin-top: 129px;
/* margin-left: 408px; */
}

.secundaria ul li {
display: inline-block; 
}

.secundaria ul li a {
padding: 10px 20px; 
text-decoration: none; 
font-size: 16px; 
color: #fff;
background: #04B4AE;  
}

.secundaria ul li a:hover {
background:  #00cccc; 
}


/*MAIN*/
.abarca{ 
float: left;
display: block;
width: 100%;
height: auto;
}

.abarca h2{ 
height: 11px;
color: #04B4AE;
margin: 60px 10px 30px 10px;}


.cuencabaja{
float: left;
display: block;
width: 100%;
height: auto}


.cuencabaja p {
margin: 0px 10px 0px 10px;
font-size: 0.9rem;
color: #6E6E6E;
width:95%}


.mapa img {
margin: 35px 0px 10px 0px;
float: left;
width: 50%}


.ubicacion {
margin: 40px 0px 10px 10px;
float:left;
width: 42%;
background: rgba(4, 180, 174, 0.46);
padding: 15px;
/**border: 6px solid #000;**/
}

.ubicacion h4 {
height: 9px;
color: #04B4AE;
float: center;
margin: 20px 0px 10px 10px;

}

.ubicacion p {
margin: 20px 10px 15px 10px;
float:left;
font-size: 0.75rem;
color: #6E6E6E;
width:95%;
text-align: justify;
line-height: 1rem;
}

.ubicacion a {
text-decoration: none;
font-size: 0.75rem;
color: #383838;
font-weight: 700;
text-decoration:underline
}




/**PAGINA-ESTUDIOS**/

.estudio {  
/**background: rgba(4, 180, 174, 0.33);**/
float:left;
width: 95%;
margin: 30px 0px 20px 10px
}


.estudiouno {
background: rgba(4, 180, 174, 0.38);
padding: 12px;
}

.estudiouno h3 {
color: #ff884d;
margin: 1%;
font-weight: 400
}

.estudiouno p {
font-size: 0.75rem;
color: #1f1f1f;
text-align: justify;
line-height: 1rem;
margin: 1%
}

.estudiosdos {
float:left;
width: auto100%;
margin: 10px 0px 0px 0px;
border: 2px solid #ff884d;
padding: 10px;
}

.estudiosdos h3 {
color: #04B4AE;
margin: 1%;
font-weight: 400
}

.estudiosdos p {
font-size: 0.75rem;
color: #1f1f1f;
text-align: justify;
line-height: 1rem;
margin: 1%;
margin-bottom: 1%
}



/**PAGINA-SUSCRIPCION**/

.gif {
float: left;
margin: 3% 0% 2% 25%


}

.texto {
float:left;
width: 90%;
margin: 0% 0% 3% 9%

}



.texto p {
font-size: 1.1rem;
color: #acabab;
text-align:center;
line-height: 1rem;
margin: 1%;
margin-bottom: 1%;
font-weight: 700

}

.texto a {
text-decoration: none;
color: #04B4AE
}

/**FORMULARIO**/

.megadiv {
float: left;
width: 100%
}

.formulario {
float: left;
width: 50%;
padding: 2%;
border: 3px solid #ff884d;
margin-top: 3%
}

.input-group {
width: 100%;
margin:1%;
margin-left: none;
float:left
}

.input-group-addon {
width: 95%;
background: #d4d4d4;
padding: 1%

}

.form-control {
width: 96%;
margin: 2% 2% 2% 0%

}
    
.form-control-2 {
width: 50%;
margin: 2% 2% 2% 0%

}

.form-control-3 {
width: 10%;
    margin: 2% 2% 2% 0%}



.cont-metas {
float: left;
width: 60%;
margin-top: 1%;
margin-left: 1%

}


button {
    float: right;
    clear: both;
    background: #ff884d;
    padding: 1%;
    width: 25%;
    font-weight: 500;
    color: white
    

}

button:hover {background: #04b4ae}


.enumerado {
/**background: #04B4AE;**/
border: 1px solid #04B4AE;   
margin: 0% 2% 2% 2%;
padding: 1% 2% 1% 2%;
width: 80%;
text-align: center
    
}

.enumerado a {
text-decoration: none;
margin: 1%;
font-size: 0.7rem;
color: #04B4AE;
font-weight: 700;
width: 100%

}

.enumerado a:hover {color: #ff884d}

.donaciones {
    float: left;
    margin-left: 15%

}



/**PROBLEMÁTICA**/

.problemgif {
    width: 100%;
    float: left
}

.gif1 img{
    float: left;
    width: 60%

}



.gif2 img {
    float: left;
    width: 30%;
    margin-left: 7%;
    margin-top: 3%

}


.text{
float: left;
width: 100%;
}

.text p{
margin-left: 10px;
font-size: 0.75rem;
color: #6E6E6E;
width:95%;
text-align: justify;
line-height: 1rem

}

.resaltado {
    font-weight: 600;


}

.datos {
    width: 100%;
    float: left

}

.datos img {
    margin-left: 15%;
    margin-top: 3%
    


}


/**BOTONERA DE ANCLAJE A PAGINAS **/

.menu-anclaje {
width: 100%;
height: auto;
float: left;
display: block;
box-sizing: border-box;   
}

.anclaje {
float: left;
display: block;
width: 100%;
height: auto;
margin: 4% 0% 2% 0%;
padding-bottom: 1%;
border-bottom: 1px solid #bdbdbd;
}

.anclaje ul li {
display: inline-block; 
}

.anclaje ul li a {
padding: 1px 20px; 
text-decoration: none; 
font-size: 16px; 
color: #fff;
background: #04B4AE;  
}

.anclaje ul li a:hover {
background:#00ace6; 
  
}

/*BOTONERA SECUNDARIA*/


.secundaria {
width: auto;
list-style: none;
display: block;
float: right;    
}


.secundaria ul li {
display: inline-block;
 
}

.secundaria ul li a {
text-decoration: none; 
font-size: 16px; 
color: #fff;
background: #04B4AE;
transition: all 0.2s ease 0s;        
}

.secundaria ul li a:hover {
background:  #00cccc; 
}

/**FOOTER**/

footer {
float: left;
display: block;
margin top:8%;
background: #04B4AE;
margin: 4% 20% 0% 14%;
width: 72%;
height: auto;
box-sizing: border-box;
}    

footer h4 {
font-size: 1rem;
color: #fff;   
}


footer p {
font-size: 0.9rem;
color: #fff;   
}



footer #footerlink ul {
  list-style: none;
  font-size: 1rem;
  float: left;
  clear: both;
}

footer #footerlink ul li {
  float: left;
  clear: both;
}

#footerlink {
  margin: 1rem 1rem 0rem 2rem;
  float: left;
  width: 23%
}

#social {
  margin: 1rem 1rem 0rem 1rem;
  float: left;
  width: 20%
}

#contacto {
  margin: 1rem 1rem 0rem 1rem;
  float: left;
  width: 40%;
}

#abajo {
  margin: 0rem 2.5rem 2rem 2.5rem;
  width: 90%;
  clear: both;
}




#footerlink a:link, a:visited {
 
    width: 6rem;
    font-weight: 400;
    color: white;
    text-align: left;
    padding: 0.5rem;
    text-decoration: none;
}