* {
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: 20px 20px; 
text-decoration: none; 
font-size: 16px; 
color:#818181;  
}

.secundaria ul li a:hover {
background: yellow;
}


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

.colaborar h2{ height: 11px;
color: #04B4AE;
margin: 60px 0px 30px 50px;}


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

.fotoinfo img{float: left;
            height: auto;
            width: 4%;
            margin: 0px 20px 0px 50px;}

.fotoinfo p {margin: 0px 0px 40px 0px;
font-size: 0.9rem;
color: #04B4AE;
width:70%}


/*VIDEO*/

.video1 { margin:  0px 0px 20px 50px;
         ;width: 58%;        
        overflow: hidden;
        position: relative}
   
/*SUSCRIPCION*/


.enlace { width: 90%; margin: 20px 0px 5px 50px}

.enlace a{ font-size: 1.5rem; 
            color: #04B4AE;
           text-decoration:none}

.enlace a:hover {color: #FF884D}





.fotosuma img{ width: 2%; margin: 0px 0px 0px 50px;float: left}


.fotosuma p {float: left;
                width: 80%;                
                font-size: 0.9rem; 
                color: #04B4AE;
                margin: 3px 0px 100px 10px}


/**FOOTER**/

/**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; 
  
}

/**FOOTER**/

footer {
float: left;
display: block;
margin top:8%;
background: #04B4AE;
margin: 4% 0% 0% 5%;
width: 90%;
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;
}





/**METAS**/

* {
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:  auto;
box-sizing: border-box;  
}



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

/** titulo**/ 


.titulo-metas {float: left;
 width: 100%;
height: auto;}

.titulo-metas h3 {height: 11px;
padding: 8px 0px 15px 10px;
font-size: 0.9rem;    
color:#04B4AE;border-bottom: 2px solid #04B4AE;
border-top: 2px solid #04B4AE}

.titulo-metas p {height: 11px;
padding: 20px 0px 30px 10px;
font-size: 0.9rem;    
color:  #04B4AE;
    width: 90%;}


/** cada meta **/ 

.box-metas {float: left;
 width: 100%;
height: auto;}

.meta1, .meta2, .meta3, .meta4, .meta5, .meta6 {width: 300px;
    height: 220px;
    border: 2px solid #04B4AE;
    margin: 10px 10px 10px 0px;
    float: left;
    background: #04B4AE;}

.meta1 h1, .meta2 h1, .meta3 h1, .meta4 h1, .meta5 h1, .meta6 h1 { color: white;
                                                                    margin: 15px 30px 25px 15px;
                                                                    border-bottom: 1px solid white}

.meta1 p, .meta2 p, .meta3 p, .meta4 p, .meta5 p, .meta6 p {  color: white; 
                                                                margin: 0px 35px 30px 15px;
                                                                font-size: 0.9rem}

.meta1 a, .meta2 a, .meta3 a, .meta4 a, .meta5 a, .meta6 a{ margin: 0px 0px 0px 15px;
                                                            color: #FF884D;                                                           
                                                            font-size: 0.7rem}




.meta-calendario {width: 310px;
                 height: 160px;
                border: 3px solid #04B4AE;
                margin: 80px 2px 80px 0px;
                float: left;}

.meta-calendario h3 { color: #04B4AE;
                    margin:15px 30px 25px 45px;
                border-bottom: 2px solid #04B4AE;}

.meta-calendario p {color:#04B4AE; 
                    margin: 25px 35px 0px 45px;
                    font-size: 0.9rem}

.meta-calendario a {color:#04B4AE; 
                    margin: 0px 35px 30px 45px;
    font-size: 0.9rem}

.meta-calendario img {width: 6%; float: left;
            height: auto;
              margin:15px 0px 25px 15px;}


.meta-agenda {width: 310px;
                 height: 160px;
                border: 3px solid #04B4AE;
                margin: 80px 2px 80px 0px;
                float: left;}

.meta-agenda h3{color: #04B4AE;
                    margin:15px 30px 25px 45px;
                border-bottom: 2px solid #04B4AE;}


.meta-agenda p {color:#04B4AE; 
                    margin: 25px 30px 0px 45px;
                    font-size: 0.9rem}

.meta-agenda a {color:#04B4AE; 
                    margin: 0px 35px 30px 45px;
                font-size: 0.9rem }

.meta-agenda img{width: 6%; float: left;
                height: auto;
                margin:15px 0px 25px 15px;}

.animacionmetas {width: 310px;height: 164px;
                margin: 80px 0px 0px 0px;
                float: left;}

.animacionmetas img { width:310px; height: 164px}
                
                    

/**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; 
}