/******************************************************************************/
/* Inicio -> Estilo común a todas las páginas                                 */
/******************************************************************************/

/* Importación de Fuentes */
@import url(http://fonts.googleapis.com/css?family=Raleway:300,600);
@import url(http://fonts.googleapis.com/css?family=Lato:300,600,300italic,600italic);


/* Inicio -> Estilo a etiquetas por defecto */
* {
  font-family: 'Lato';
  font-weight: 600;
}

a, button, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'Raleway';
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;  
}

a {
  font-weight: 300;
  text-decoration: none;
}

body {
  margin: 0;
}

main {
  /* Para que el elemento de bloque tome el alto de los elementos flotantes que contiene, utilizar "overflow: auto;" */
  overflow: auto;
}

/* Fin -> Estilo a etiquetas por defecto */


.pointer {
    cursor: pointer;
}

.bold-hover:hover h3 {
    font-weight: 600;
}


/* Inicio -> Sistema de columnas */
/* Elemento de bloque utilizado para centrar el contenido de la página */
.contenedor {
  /* Para centar elementos de bloque (generalmente divs) utilizar "margin: auto;" */
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
  width: 940px;
  overflow: auto;
}

/* Es un div que funcionará como fila y contendrá hasta 12 divs que funcionarán como columnas */
.fila-12 {
  width: 940px;
}

/* Características generales de todas las columnas */
.fila-12 > * {
  margin-right: 20px;
  margin-bottom: 20px;
  float: left;
}

/* Caracterísitcas de la última columna de cada fila */
.fila-12 > *:last-child {
  margin-right: 0;
  float: right;
}

/* Caracterísitcas de la primer columna de cada fila, contrarresta la anterior si es la única columna de la fila */
.fila-12 > *:first-child {
  float: left;
}

/* Columna que ocupa 12/12 de fila */
.columna-12-12 {
  width: 940px;
}

/* Columna que ocupa 11/12 de fila */
.columna-11-12 {
  width: 860px;
}

/* Columna que ocupa 10/12 de fila */
.columna-10-12 {
  width: 780px;
}

/* Columna que ocupa 9/12 de fila */
.columna-9-12 {
  width: 700px;
}

/* Columna que ocupa 8/12 de fila */
.columna-8-12 {
  width: 620px;
}

/* Columna que ocupa 7/12 de fila */
.columna-7-12 {
  width: 540px;
}

/* Columna que ocupa 6/12 de fila */
.columna-6-12 {
  width: 460px;
}

/* Columna que ocupa 5/12 de fila */
.columna-5-12 {
  width: 380px;
}

/* Columna que ocupa 4/12 de fila */
.columna-4-12 {
  width: 300px;
}

/* Columna que ocupa 3/12 de fila */
.columna-3-12 {
  width: 220px;
}

/* Columna que ocupa 2/12 de fila */
.columna-2-12 {
  width: 140px;
}

/* Columna que ocupa 1/12 de fila */
.columna-1-12 {
  width: 60px;
}

/* Elemento que corta con la propiedad float, comunmente se usa para separar filas */
.clear {
  clear: both;
}
/* Fin -> Sistema de columnas */


/* Inicio -> Header */
header .arriba {
  height: 30px;
  background-color: #EAE6DD;
}

header .arriba .logo {
    width: 220px;
    height: 110px;
    background-color: #EAE6DD;
    position: relative;
    top: 0;
    z-index: 2;
}

header .arriba .logo img {
    margin-top: 30px;
    margin-left: 45px;
    width: 140px;
}

header .abajo {
  height: 35px;
  background-color: #5e544a;
}

header nav,
header nav ul {
  overflow: auto;
}

header nav {
  float: right;
}

header nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

header nav ul li {
  margin-left: 30px;
  border-top: 2px solid transparent;
  height: 33px;
  float: left;
}

header nav ul li.current,
header nav ul li:hover {
  border-color: white;
}

header nav ul li.current a {
  font-weight: 600;
}

header nav ul li a {
  display: block;
  padding: 7px 0 8px 1px;
  font-size: 14px;
  color: white;
}

header nav ul li.social:last-child {
  margin-left: 20px;
}

header nav ul li.social a {
  padding: 4px 0 5px 2px;
  font-size: 20px;
}

header nav ul li div {
  position: absolute;
  margin-top: 2px;
  margin-left: -10px;
  background-color: #867869;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 1s;
  transition: height 1s;
  z-index: 2;
}

header nav > ul > li:hover div {
  height: 140px;
}

header nav ul li div li {
  margin: 0;
  border-top: none;
  padding: 2px 10px 0 10px;
  display: block;
  float: none;
}

header nav ul li div li:hover {
  background-color: #6e6153;
}
/* Fin -> Header */


/* Inicio -> Footer */
footer {
  padding-top: 40px;
  height: 80px;
  background-color: #343434;
  font-size: 12px;
  text-align: center;
  color: white;
}
/* Fin -> Footer */

/******************************************************************************/
/* Fin -> Estilo común a todas las páginas                                    */
/******************************************************************************/


/******************************************************************************/
/* Inicio -> Estilo para la página index                                      */
/******************************************************************************/

/* Inicio -> Slider */
main.index .slider {
  height: 335px;
  position: relative;
  overflow:hidden;
}

main.index #slider ul li {
  position: relative;
}

main.index #slider .info {
  padding: 40px;
  width: 220px;
  height: 255px;
  position: absolute;
  right: 90px;
  background-color: rgba(52, 52, 52, 0.6);
  z-index: 1;
}

main.index #slider .info h3 {
  border: 2px solid white;
  padding: 10px;
  font-weight: 600;
  color: white;
  font-size:16px;
}

main.index #slider .info p {
  font-size: 11px;
  color: white;
}

main.index #slider .info p:last-child {
  font-style: italic;
  font-weight: 600;
}

main.index #slider .info a.button {
  display: inline-block;
  padding: 7px 6px 6px 6px;
  background-color: #38bca4;
  font-size: 9px;
  font-weight: 600;
  color: white;
  position: absolute;
  bottom: 40px;
}
/* Fin -> Slider */


/* Inicio -> Metas */
main.index .metas {
  margin-bottom: 20px;
}

main.index .metas div {
  font-family: 'Raleway';
  float: left;
}

main.index .metas .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 30px;
}

main.index .metas .derecha.arriba {
  width: 720px;
  height: 60px;
  background-color: #5e544a;
}

main.index .metas .derecha.abajo {
  width: 720px;
  height: 34px;
  background-color: #009c84;
}

main.index .metas .derecha .columna {
  width: 144px;
  text-align: center;
}

main.index .metas .derecha i,
main.index .metas .derecha a {
  color: white;
}

main.index .metas .derecha i {
  margin-top: 18px;
  font-size: 25pt;
}

main.index .metas .derecha {
  font-size: 8pt;
  letter-spacing: 1px;
  color:white;
  font-weight: 400;
  padding-top:8px;
}

/* Fin -> Metas */


/* Inicio -> Principal */
main.index .principal .medio,
main.index .principal .derecha-2 {
  height: 110px;
  background-color: #009c84;
}

main.index .principal .medio-1 > div {
  line-height: 30px;
  font-family: 'Raleway';
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: #5e544a;
  margin-top: 30px;
}

main.index .principal .medio-3 .der {
  padding-top: 15px;
}

main.index .principal .medio:hover,
main.index .principal .derecha-2:hover > div {
  background-image: url(../img/trama-1.png);
  cursor: pointer;
}

main.index .principal .medio:hover > div {
  color:white;
}

main.index .principal .medio-2 > div,
main.index .principal .derecha-2 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.index .principal .derecha-2 {
background-image: url(../img/ubicacion.png); /* 190x110 */
background-position: 190px;
background-repeat: no-repeat;
}

main.index .principal .derecha-2 .izq {
  margin-top: 20px;
  margin-right: 20px;
    margin-left: 30px;
  float: left;
  font-size: 28px;
  text-transform: uppercase;
  color: white;
  text-align:right;
}

main.index .principal .derecha-2 .izq i {
  font-size: 40px;
  color: white;
  margin-top: -10px;
  vertical-align: middle;
}

main.index .principal .derecha-2 .der {
  margin: 0;
  width: 50%;
  height: 110px;
  float: right;
}

main.index .principal .medio-2 .izq {
  margin-top: 20px;
  width: 40%;
  float: left;
  font-size: 50px;
  color: #00ac6b;
}

main.index .principal .medio-2 .izq i {
  font-size: 40px;
  color: white;
  font-weight:400;
}

main.index .principal .medio-2 .der {
  margin-top: 20px;
  margin-right: 10%;
  width: 50%;
  float: right;
  font-size: 28px;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
    text-align: right;
}

main.index .principal .medio-2 .der a {
  float: right;
  font-size: 28px;
  text-transform: uppercase;
  color: white;
  font-weight: 600;
  margin-top: 5px; 
  margin-right: 15px;
}

main.index .principal .medio-1 {
  background-image: url(../img/microbio.jpg); /* 296x106 */
}

main.index .principal .derecha-1 {
  height: 240px;
}

main.index .principal h3 {
  line-height: 40px;
  color: #38bca4;
  text-align: center;
  font-weight: 600;
  background-color:#EAE6DD;
}

main.index .principal .izquierda p {
  margin: 0;
  padding: 20px;
  font-size: 15px;
  font-weight: 500;
  color: #5e544a;
}

main.index .principal .izquierda strong {
  font-family: 'Lato';
  font-size: 18px;
  font-weight: 600;
  color: #009c84;
}

main.index .principal .izquierda hr {
  border: 0;
  height: 2px;
  border-top: 1px dashed #009c84;
  border-bottom: 1px dashed #009c84;
}

main.index .principal .izquierda h6 {
  margin: 6px 20px 0 20px;
  border-bottom: 1px;
  border-color: #5e544a;
  padding-bottom: 6px;
  color: #5e544a;
}

main.index .principal .izquierda h6:last-child {
  border-bottom: none;
}

main.index .principal .izquierda,
main.index .principal .derecha-1 {
  background-color: white;
}

main.index .principal .derecha-1 p {
  font-family: 'Raleway';
  font-size: 14px;
  color: #5e544a;
  line-height: 18px;
}

main.index .principal .derecha-1 .mes {
  display: inline-block;
  margin: 20px 20px 5px 20px;
  background-color: #EAE6DD;
  padding: 5px 12px;
  font-weight: 600;
  margin-top: 20px;
}

main.index .principal .derecha-1 .item-1,
main.index .principal .derecha-1 .item-2 {
  margin: 0 20px;
}

main.index .principal .derecha-1 .item-1 {
  font-weight: 600;
}
/* Inicio -> Principal */


/* Inicio -> Responsive activo desde 860px a 820px */
@media screen and (max-width: 860px) {
    
    body.index header .contenedor,
    body.index footer .contenedor {
      padding-left: 0;
      padding-right: 0;
      width: 820px;
    }
    
    body.index header .arriba .logo {
      width: 170px;
    }
    
    body.index header .arriba .logo img {
      margin-left: 18px;
    }
    
    main.index .contenedor {
      /* Para centar elementos de bloque (generalmente divs) utilizar "margin: auto;" */
      margin: auto;
      padding-left: 0;
      padding-right: 0;
      width: 820px;
      overflow: auto;
    }

    /* Es un div que funcionará como fila y contendrá hasta 12 divs que funcionarán como columnas */
    main.index .fila-12 {
      width: 820px;
    }

    /* Características generales de todas las columnas */
    main.index .fila-12 > * {
      margin-right: 20px;
      margin-bottom: 20px;
      float: left;
    }

    /* Caracterísitcas de la última columna de cada fila */
    main.index .fila-12 > *:last-child {
      margin-right: 0;
      float: right;
    }

    /* Caracterísitcas de la primer columna de cada fila, contrarresta la anterior si es la única columna de la fila */
    main.index .fila-12 > *:first-child {
      float: left;
    }

    /* Columna que ocupa 12/12 de fila */
    main.index .columna-12-12 {
      width: 820px;
    }

    /* Columna que ocupa 11/12 de fila */
    main.index .columna-11-12 {
      width: 750px;
    }

    /* Columna que ocupa 10/12 de fila */
    main.index .columna-10-12 {
      width: 680px;
    }

    /* Columna que ocupa 9/12 de fila */
    main.index .columna-9-12 {
      width: 610px;
    }

    /* Columna que ocupa 8/12 de fila */
    main.index .columna-8-12 {
      width: 540px;
    }

    /* Columna que ocupa 7/12 de fila */
    main.index .columna-7-12 {
      width: 470px;
    }

    /* Columna que ocupa 6/12 de fila */
    main.index .columna-6-12 {
      width: 400px;
    }

    /* Columna que ocupa 5/12 de fila */
    main.index .columna-5-12 {
      width: 330px;
    }

    /* Columna que ocupa 4/12 de fila */
    main.index .columna-4-12 {
      width: 260px;
    }

    /* Columna que ocupa 3/12 de fila */
    main.index .columna-3-12 {
      width: 190px;
    }

    /* Columna que ocupa 2/12 de fila */
    main.index .columna-2-12 {
      width: 120px;
    }

    /* Columna que ocupa 1/12 de fila */
    main.index .columna-1-12 {
      width: 50px;
    }

    
    /* Inicio -> Slider */
    main.index #slider {
      width: 820px;    
    }
    
    main.index #slider .info {
      right: 240px;
    }
    /* Fin -> Slider */
    
    
    /* Inicio -> Metas */
    main.index .metas {
      margin-bottom: 20px;
    }
    main.index .metas .izquierda {
      width: 190px;
    }

    main.index .metas .derecha.arriba {
      width: 630px;
    }

    main.index .metas .derecha.abajo {
      width: 630px;
    }

    main.index .metas .derecha .columna {
      width: 126px;
    }
    /* Fin -> Metas */
    
}
/* Fin -> Responsive activo desde 860px a 820px */


/* Inicio -> Responsive menor a 800 */
@media screen and (max-width: 800px) {
    
    body.index header .contenedor,
    body.index footer .contenedor {
      padding-left: 0;
      padding-right: 0;
      width: 100%;
    }
    
    body.index header:hover .abajo {
        height: 370px;
    }
    
    body.index header .arriba {
      height: 50px;
    }
    
    body.index header .arriba .logo {
      height: 50px;
        width: 254px;
        background-image: url(../img/logo-2.png);
    }
    
    body.index header .arriba .logo img {
      display: none;
    }
    
    body.index header .abajo {
      overflow: hidden;
      height: 0;
      -webkit-transition: height 1s;
      transition: height 1s;
    }
    
    body.index header nav {
        float: none;
    }
    
    body.index header nav ul li {
        display: block;
        float: none;
        margin: 0;
    }
    
    body.index header nav ul li.proyecto {
        height: 180px;
    }
    
    body.index header nav ul li > div {
        position: initial;
        height: 140px;
        width: 100%;
        margin: 0;
    }
    
    body.index header nav ul li.social {
        width: 40px;
        float: left;
        padding-left: 5px;
        margin-left: 5px;
    }
    
    body.index header nav ul li.social:hover {
        border-top-color: transparent;
    }
    
    main.index .contenedor {
      /* Para centar elementos de bloque (generalmente divs) utilizar "margin: auto;" */
      margin: auto;
      padding-left: 0;
      padding-right: 0;
      width: 100%;
      overflow: auto;
    }

    main.index .fila-12 {
      width: 100%;
    }
    
    main.index .columna-12-12,
    main.index .columna-11-12,
    main.index .columna-10-12,
    main.index .columna-9-12,
    main.index .columna-8-12,
    main.index .columna-7-12,
    main.index .columna-6-12,
    main.index .columna-5-12,
    main.index .columna-4-12,
    main.index .columna-3-12,
    main.index .columna-2-12,
    main.index .columna-1-12 {
      width: 100%;
    }

    
    /* Inicio -> Slider */
    main.index #slider {
      width: 100%;    
    }
    
    main.index #slider .info {
      display: none;
    }
    /* Fin -> Slider */
    
    
    /* Inicio -> Metas */
    main.index .metas {
      margin-bottom: 20px;
    }
    main.index .metas .izquierda {
      width: 100%;
    }

    main.index .metas .derecha.arriba {
      width: 100%;
    }

    main.index .metas .derecha.abajo {
      width: 100%;
    }

    main.index .metas .derecha .columna {
      width: 33%;
    }
    
    main.index .metas .no-800 {
        display: none;   
    }
    /* Fin -> Metas */
    
    main.index .principal .derecha-2 {
      background-position: 100%;
      background-size: 50%;
    }
    
    main.index .principal .izq {
      width: 50%;
      margin-left: 0 !important;
      text-align: center !important;
    }
}
/* Fin -> Responsive menor a 800 */

/******************************************************************************/
/* Fin -> Estilo para la página index                                         */
/******************************************************************************/


/******************************************************************************/
/* Inicio -> Estilo para la página proyectos/problemas                        */
/******************************************************************************/

main.problemas .imagen {
    height: 335px;
}

main.problemas .imagen img{
    width: 100%;
}

main.problemas .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.problemas .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.problemas .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.problemas .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.problemas .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.problemas .principal .derecha > div {
    border: 1px solid #009c84;
    padding: 20px;
    overflow: auto;
}

main.problemas .principal .izquierda-1 {
    background-color: white;
    height: 30px;
    padding: 25px 0;
    color: #009c84;
    text-align: center;
    line-height: 18px;
    text-align: center;
    color: #38bca4;
    font-size:13px;

}

main.problemas .principal .izquierda-1 hr {
  border: 0;
  height: 2px;
  border-top: 1px dashed #009c84;
  border-bottom: 1px dashed #009c84;
 }

main.problemas .principal .izquierda-2 {
    background-color: white;
    height: 70px;
    padding: 15px 0;
    color: #009c84;
    text-align: center;
    line-height: 18px;
    text-align: center;
    color: #38bca4;
    font-size:13px;
}

main.problemas .principal .izquierda-3 {
  height: 110px;
  background-color: #009c84;
}

main.problemas .principal .izquierda-3 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.problemas .principal .izquierda-3 .izq {
  margin-top: 25px;
  width: 40%;
  float: left;
  font-size: 50px;
  color: #00ac6b;
}

main.problemas .principal .izquierda-3 .izq i {
  font-size: 50px;
  color: white;
}

main.problemas .principal .izquierda-3 .der {
  margin-top: 30px;
  margin-right: 10%;
  width: 50%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.problemas .principal .izquierda-3 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
  }

main.problemas .principal .derecha h3 {
    color: #38bca4;
    margin-bottom: 10px;
    font-weight: 600;
}

main.problemas .principal .derecha h4 {
    color: #343434;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 700;
    letter-spacing: 5px;
}
main.problemas .principal .derecha p {
  font-weight: 500;
}

main.problemas .principal .derecha strong {
  font-weight: 800;
}

main.problemas .principal .derecha .img {
  height: 400px;
  background-image: url(../img/proyectos/problemas/huevos.jpg);
  background-size: cover;
  background-position: cener;
}

main.problemas .principal .derecha .img .izq {
  padding: 0 5%;
  width: 40%;
  background-color: rgba(52, 52, 52, 0.4);
  height: inherit;
  color: white;
  font-size: 12px;
}

main.problemas .principal .derecha .img .izq h1 {
  padding-top: 35px;
}

main.problemas .principal .derecha > div > p {
  background-color: white;
  padding: 10px;
  color: #009c84;
  font-size: 14px;
  font-weight: 600;
  }

main.problemas .principal .derecha .col {
  width: 30%;
  height: 186px;
  margin-right: 5%;
  background-color: white;
  float: left;
}

main.problemas .principal .derecha .col:last-child {
  margin-right: 0;
}

main.problemas .principal .derecha .col h3 {
  padding: 10px;
  background-color: #EAE6DD;
  color: #5e544a;
  text-align: center;
}

main.problemas .principal .derecha .col ul {
  padding-left: 30px;
  color: #5e544a;
  font-size: 13px;
}

main.problemas .principal .descarga .der p {
  padding-left: 3px;
  font-size: 9px;
}

main.problemas .principal .descarga:hover,
main.problemas .principal .cronograma:hover {
    background-image: url(../img/trama-1.png);
}

main.problemas .principal .cronograma .der {
  padding-top: 10px;
  font-size: 13px;
  text-align: left;
}

main.problemas .principal .cronograma-imagen {
  height: 200px !important;
  background-image: url(../img/proyectos/problemas/actividades.jpg);
  background-size: cover;
  background-position: cener;
}

/******************************************************************************/
/* Fin -> Estilo para la página proyectos/problemas                           */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página proyectos/cronograma                        */
/******************************************************************************/

main.cronograma .imagen {
    height: 335px;
}

main.cronograma .imagen img{
    width: 100%;
}

main.cronograma .epigrafe {
    height: 110px;
    margin-bottom: 20px;
    margin-top: 60px;
}

main.cronograma .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.cronograma .epigrafe .izquierda {
  width: 220px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 24px;
  height:70px;
  padding-top:40px;    
}

main.cronograma .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.cronograma .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.cronograma .principal {
  margin-bottom: 20px;
}

main.cronograma .mes {
  margin: 0;
  width: 235px;
}

main.cronograma .mes > .num {
  border-left: 1px solid lightgray;
  border-top: 1px solid lightgray;
  padding: 10px;
  height: 150px;
  font-size: 120px;
  text-align: center;
  color: rgba(255,255,255,0.4);
}

main.cronograma .mes:last-child > .num {
  border-right: 1px solid lightgray;
}

main.cronograma .fila-12:last-child .num {
  border-bottom: 1px solid lightgray;
}

main.cronograma .mes.meses-a {
  background-color: rgb(25, 98, 86);
}

main.cronograma .mes.meses-b {
  background-color: rgb(29,117,102);
}

main.cronograma .mes.meses-c {
  background-color: rgb(0,156,130);
}

main.cronograma .mes.meses-d {
  background-color: rgb(14, 181, 154);
}

main.cronograma .mes.meses-e {
  background-color: rgb(118, 224, 206);
}

main.cronograma .mes > .texto {
  width: 740px;
  left: 50%;
  margin-left: -470px;
  padding-top: 190px;
  padding-left: 100px;
  padding-right: 100px;
  height: 324px;
  position: absolute;
  top: 255px;
  font-size: 30px;
  color: #5e544a;
  text-align: center;
  -webkit-transition: opacity 1s, visibility 0.8s;
  transition: opacity 0.8s, visibility 0.8s;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}

main.cronograma .mes > .texto hr {
  border-top: 1px solid white;
  border-bottom: none;
}

main.cronograma .mes.meses-b > .texto {
  padding-top: 170px;
  height: 344px;
}

main.cronograma .mes.meses-a > .texto {
  background-color: rgba(25, 98, 86,0.7);
  color:white;
}
main.cronograma .mes.meses-a:hover > .texto {
  opacity: 1;
  visibility: visible;
}

main.cronograma .mes.meses-b > .texto {
  background-color: rgba(29,117,102,0.7);
  color:white;
}
main.cronograma .mes.meses-b:hover > .texto {
  opacity: 1;
  visibility: visible;
}

main.cronograma .mes.meses-c > .texto {
  background-color: rgba(0,156,130,0.7);
  color:white;
}
main.cronograma .mes.meses-c:hover > .texto {
  opacity: 1;
  visibility: visible;
}

main.cronograma .mes.meses-d > .texto {
  background-color: rgba(14, 181, 154,0.7);
  color:white;
}
main.cronograma .mes.meses-d:hover > .texto {
  opacity: 1;
  visibility: visible;
}

main.cronograma .mes.meses-e > .texto {
  background-color: rgba(118, 224, 206,0.7);
  color:white;
}
main.cronograma .mes.meses-e:hover > .texto {
  opacity: 1;
  visibility: visible;
}

/******************************************************************************/
/* Fin -> Estilo para la página proyectos/cronograma                           */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página noticias                                   */
/******************************************************************************/

main.noticias .imagen {
    height: 335px;
}

main.noticias .imagen img{
    width: 100%;
}

main.noticias .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.noticias .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.noticias .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.noticias .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.noticias .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;
}

main.noticias .principal h3 {
  padding:20px;
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  color: #38bca4;
}

main.noticias .izquierda-2 h3 {
  font-size: 15px;
}

main.noticias .izquierda-2 h4 {
  font-size: 10px;
}

main.noticias .principal .izquierda-1 {
    color: #5e544a;
}

main.noticias .principal .izquierda-1 p {
  margin: 0;
}

main.noticias .principal .izquierda-1 h3 {
    color: #38bca4;
    text-align: center;
}

main.noticias .principal .izquierda-1 p.arriba {
    padding: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
 }

main.noticias .principal .izquierda-1 p.arriba img {
    width: 50%;
    float: left;
    margin-right: 20px;
}

main.noticias .principal .izquierda-1 p.abajo {
  padding: 20px;
  padding-top: 0;
  font-size: 12px;
}

main.noticias .principal .izquierda-2 h3 {
  border: none;
  background-color: #eae6dd;
  color: #38bca4;
    font-weight: 800;
}

main.noticias .principal .izquierda-2 h4 {
  border: none;
  background-color: #eae6dd;
  color: black;
  padding-left:17px;
  padding-bottom: 15px; 
}

main.noticias .principal .izquierda-2 {
  background-color: #d5cfc3;
  color: #5e544a;
}

main.noticias .principal .izquierda-2 > div {
  padding: 15px;
  font-size: 12px;
}

main.noticias .principal .medio-1 {
  float: left;
}

main.noticias .principal .medio-1 h3 {
  background-color: #eae6dd;
  color: #009c84;
  border: none;
  }

main.noticias .principal .medio-1 .img {
  height: 287px;
  background-image: url(../img/noticias/10-lugares.png);
  background-size: cover;
  background-repeat: none;
}

main.noticias .principal .derecha-1 {
  height: 110px;
  background-color: #009c84;
}

main.noticias .principal .derecha-1 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.noticias .principal .derecha-1 .izq {
  margin-top: 20px;
  width: 50%;
  float: left;
  font-size: 50px;
  color: #00ac6b;
}

main.noticias .principal .derecha-1 .izq i {
  font-size: 50px;
  color: #00ac6b;
}

main.noticias .principal .derecha-1 .der {
  margin-top: 25px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.noticias .principal .derecha-1 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
}

main.noticias .principal .greenpeace:hover {
  background-image: url(../img/trama-1.png);
}

main.noticias .principal .greenpeace .izq img {
  width: 60px;
}

main.noticias .principal .greenpeace .der {
  padding-top: 10px;
  font-size: 13px;
  text-align: left;
}

main.noticias .principal .derecha-2{
  float: right;
}

main.noticias .principal .derecha-2 div {
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  padding: 15px;
  color: #5e544a;
}

main.noticias .principal .derecha-2 div p {
  font-size: 12px;
}

main.noticias .principal .derecha-2 div .numero-1 {
  font-size: 40px;
  margin: 0;
  color:#38bca4;
}

main.noticias .principal .derecha-2 div .numero-2 {
  font-size: 40px;
  margin: 0;
  color:#38bca4;
}

/******************************************************************************/
/* Fin -> Estilo para la página noticias                                      */
/******************************************************************************/



/******************************************************************************/
/* Inicio -> Estilo para la página proyectos/problemas2                       */
/******************************************************************************/

main.problemas2 .imagen {
    height: 335px;
}

main.problemas2 .imagen img{
    width: 100%;
}

main.problemas2 .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.problemas2 .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.problemas2 .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.problemas2 .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.problemas2 .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.problemas2 .principal .derecha > div {
    border: 1px solid #009c84;
    padding: 20px;
    overflow: auto;
}

main.problemas2 .principal .izquierda-1 {
    background-color: white;
    height: 30px;
    padding: 25px 0;
    color: #009c84;
    text-align: center;
    line-height: 18px;
    text-align: center;
    color: #38bca4;
    font-size:13px;

}

main.problemas2 .principal .izquierda-1 hr {
  border: 0;
  height: 2px;
  border-top: 1px dashed #009c84;
  border-bottom: 1px dashed #009c84;
 }

main.problemas2 .principal .izquierda-2 {
    background-color: white;
    height: 70px;
    padding: 15px 0;
    color: #009c84;
    text-align: center;
    line-height: 18px;
    text-align: center;
    color: #38bca4;
    font-size:13px;
}

main.problemas2 .principal .izquierda-3 {
  height: 110px;
  background-color: #009c84;
}

main.problemas2 .principal .izquierda-3 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.problemas2 .principal .izquierda-3 .izq {
  margin-top: 25px;
  width: 40%;
  float: left;
  font-size: 50px;
  color: #00ac6b;
}

main.problemas2 .principal .izquierda-3 .izq i {
  font-size: 50px;
  color: white;
}

main.problemas2 .principal .izquierda-3 .der {
  margin-top: 30px;
  margin-right: 10%;
  width: 50%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.problemas2 .principal .izquierda-3 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
  }

main.problemas2 .principal .derecha h3 {
    color: #38bca4;
    margin-bottom: 10px;
    font-weight: 600;
}

main.problemas2 .principal .derecha h4 {
    color: #343434;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 700;
    letter-spacing: 5px;
}
main.problemas2 .principal .derecha p {
  font-weight: 500;
}

main.problemas2 .principal .derecha strong {
  font-weight: 800;
}

main.problemas2 .principal .derecha .img {
  height: 400px;
  background-image: url(../img/proyectos/problemas2/pollosfabrica.jpg);
  background-size: cover;
  background-position: cener;
}

main.problemas2 .principal .derecha .img .izq {
  padding: 0 5%;
  width: 40%;
  background-color: rgba(52, 52, 52, 0.4);
  height: inherit;
  color: white;
  font-size: 12px;
}

main.problemas2 .principal .derecha .img .izq h1 {
  padding-top: 35px;
}

main.problemas2 .principal .derecha > div > p {
  background-color: white;
  padding: 10px;
  color: 5e544a;
  font-size: 14px;
  font-weight: 600;
  }

main.problemas2 .principal .derecha > div > p strong {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: #009c84;
  }

main.problemas2 .principal .derecha > div> hr {
  border:2px;
  height: 2px;
  border-top: 1px dotted #009c84;  
  margin-left:15px;
  margin-right:15px;
}

main.problemas2 .principal .derecha .col {
  width: 30%;
  height: 186px;
  margin-right: 5%;
  background-color: white;
  float: left;
}

main.problemas2 .principal .derecha .col:last-child {
  margin-right: 0;
}

main.problemas2 .principal .derecha .col ul {
  padding-left: 30px;
  color: #5e544a;
  font-size: 13px;
}

main.problemas2 .principal .descarga .der p {
  padding-left: 3px;
  font-size: 9px;
}

main.problemas2 .principal .cronograma .der {
  padding-top: 10px;
  font-size: 13px;
  text-align: left;
}

main.problemas2 .principal .cronograma-imagen {
  height: 200px !important;
  background-image: url(../img/proyectos/problemas/actividades.jpg);
  background-size: cover;
  background-position: cener;
}


/******************************************************************************/
/* Fin -> Estilo para la página proyectos/problemas2                                 */
/******************************************************************************/



/******************************************************************************/
/* Inicio -> Estilo para la página financiamiento                             */
/******************************************************************************/

main.financiamiento .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.financiamiento .epigrafe {
    height: 110px;
    margin-bottom: 20px;
    margin-top: 60px;
}

main.financiamiento .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.financiamiento .epigrafe .izquierda {
  width: 220px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 24px;
  height:85px;
  padding-top:25px;    
}

main.financiamiento .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.financiamiento .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.financiamiento .izquierda-1 {
   background-color: white;
}

main.financiamiento .izquierda-1 > h1 {
    color:#009D83;
    font-size: 26px;
    text-align: right;
    padding-top: 20px;
    line-height: 35px;
    border-top: 2px solid;
    margin-left: 20px;
}

main.financiamiento .izquierda-1 > h1:first-child {
    margin-left: 30px;
    margin-bottom: 467px;
}

main.financiamiento .derecha-1 hr {
    border-bottom: none;
}

main.financiamiento .derecha-1 {
    background-color: #EAE6DE;
    border: 1px dotted, #009D83;
}

main.financiamiento .derecha-1 > h1 {
    color:#5e544a;
    font-size: 25px;
    font-weight: 800;
    text-align: left;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    margin-top:15px;
    margin-bottom:15px;

}

main.financiamiento .derecha-1 > h2 {
    color:#5e544a;
    font-size: 18px;
    text-align: left;
    padding-top: 15px;
    padding-left: 20px;
    margin-top:15px;

}

main.financiamiento .derecha-1 > p {
    color:#5e544a;
    font-size: 12px;
    text-align: left;
    padding-left: 20px;
    padding-bottom: 15px;

}






/******************************************************************************/
/* Fin -> Estilo para la página financiamiento                             */
/******************************************************************************/



/******************************************************************************/
/* Inicio -> Estilo para la página plan                                       */
/******************************************************************************/

main.plan .epigrafe {
    margin-top: 60px;
    height: 110px;
    margin-bottom: 20px;
}

main.plan .epigrafe {
  font-family: 'Raleway';
  line-height: 110px;
  color: white;
  background-color: #6e6153;
  font-size: 30px;
  padding-left: 40px;
}

main.plan .principal h3 {
  padding:20px;
  line-height: 30px;
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  text-align: center;
  color: #38bca4;
}

main.plan .izquierda-1 h3 {
  font-weight: 600;
}

main.plan .principal .caja-verde {
  height: 110px;
  background-color: #009c84;
  cursor: pointer;
}

main.plan .principal .caja-verde .izq {
  margin-top: 26px;
  width: 40%;
  float: left;
  font-size: 50px;
  color: white;
  text-align: center;
}

main.plan .principal .caja-verde .izq i {
  font-size: 50px;
}

main.plan .principal .caja-verde .der {
  margin-top: 18px;
  margin-right: 10%;
  width: 50%;
  float: left;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
}

main.plan .principal .caja-verde:hover {
  background-image: url(../img/trama-1.png);
}


main.plan .principal .medio {
  float: left;
}

main.plan .principal .medio-3 .caja-verde .der {
  margin-top: 30px;
}

main.plan .principal .izquierda-2 > div {
  background-color: #ccede7;
  padding: 5px 20px 5px 20px;
  height: 360px;
}

main.plan .principal .caja-gris > div {
  background-color: #EAE6DD;
  padding: 10px;
  overflow: auto;
}

main.plan .principal .caja-gris h3 {
  padding: 5px;
  border: none;
  line-height: 18px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #5e544a;
}

main.plan .principal .izquierda-2 > div > p {
  font-size: 13px;
}

main.plan .principal ol {
  padding-left: 20px;
}

main.plan .principal .caja-gris li {
  font-size: 20px;
  line-height: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}

main.plan .principal .caja-gris p,
main.plan .principal .caja-gris li span {
  font-size: 12px;
  color: #5e544a;
}

main.plan .principal .caja-gris a {
  display: inline-block;
  float: right;
  background-color: #009c84;
  padding: 5px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

main.plan .principal .derecha-2 {
  float: right;
  margin-left: 20px;
  margin-right: 0;
}

main.plan .principal .derecha-2 > p {
  font-size: 12px;
}

/******************************************************************************/
/* Fin -> Estilo para la página plan                                          */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página historia                                   */
/******************************************************************************/

main.historia .epigrafe {
    height: 110px;
    margin-bottom: 20px;
    margin-top: 60px;
}

main.historia .epigrafe {
  background-color: #6e6153;
  padding-left: 40px;
}

main.historia .epigrafe h1 {
  font-family: 'Raleway';
  line-height: 110px;
  color: white;
  font-size: 30px;
  float: left;
}

main.historia .epigrafe p {
  float: right;
  width: 600px;
  color: #fff;
  font-size: 13px;
  margin: 30px 30px 0 0;
}

main.historia .principal {
  font-size: 9pt;
  line-height: 16pt;
}

main.historia .principal .texto h3 {
  padding-top:0 !important;
  line-height: 30px;
  color: #38bca4;
  letter-spacing: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0 !important;
}

main.historia #texto .texto p {
  margin: 0 0 10px 0;
  font-size: 9pt;
}

main.historia #texto {
  float: left;
  width: 415px;
}

main.historia #texto .texto {
  width: 415px;
}

main.historia #texto .texto.historia {
  padding-top: 20px;
}

main.historia #datos {
  float: left;
  width: 465px;
  height: 1000px;
  border-left: 2px solid #38bca4;
  margin: 0 0 30px 20px;
  padding-left: 30px;
}

main.historia #contenedor-mapa {
  float: left;
  height: 376px;
}

main.historia #contenedor-mapa h3 {
  background: #009d84;
  color: #fff;
  padding: 10px 15px;
  margin: 0;
  width: 244px;
  font-weight: normal;
  font-size: 14pt;
}

main.historia #contenedor-mapa .mapa-izq {
  width: 290px;
  float: left;
}

main.historia #contenedor-mapa .mapa-izq .informacion {
  float: left;
  width: 274px;
  border-top: 1px solid #009d84;
  border-bottom: 1px solid #009d84;
  padding: 4px 0;
  height: 64px;
}

main.historia #contenedor-mapa .mapa-izq .info {
  float: left;
  clear: none;
  width: 135px;
}

main.historia #contenedor-mapa .mapa-izq .info.metro {
  border-left: 1px solid #009d84;
}

main.historia #contenedor-mapa .mapa-izq .info.metro p span {
  font-size: 15pt;
}

main.historia #contenedor-mapa .mapa-izq .info .icono {
  margin: -9px 0 0 -3px;
}

main.historia #contenedor-mapa .mapa-izq .info p {
  text-align: center;
  width: 70px;
  float: left;
  margin-top: 10px;
}

main.historia #contenedor-mapa .mapa-izq .info p span {
  font-size: 18pt;
  display: block;
  line-height: 16pt;
}

main.historia #contenedor-mapa .graficos {
  width: 175px;
  float: left;
}

main.historia #contenedor-video {
  float: left;
  clear: left;
  margin-top: 20px;
  border: 3px solid #206576;
  width: 465px;
    background-color: #EAE6DD;
}

main.historia #contenedor-video h3 {
  color: #fff;
  background-color: #206576;
  padding: 5px;
  width: 458px;
}

main.historia #contenedor-video video {
  width: 100%;
  height: 250px;
}

main.historia #contenedor-cita {
  float: left;
  clear: left;
  margin-top: 20px;
  background-color: #39bca4;
  padding: 30px;
  color: #fff;
  width: 410px;
}

main.historia #contenedor-cita h3 {
  font-size: 15pt;
  letter-spacing: 0;
}

main.historia #contenedor-cita p {
  width: 410px;
}

main.historia #contenedor-cita p.autor {
  text-align: right;
}

main.historia .icono {
  background: url(../img/historia-iconos.png) no-repeat;
  width: 68px;
  height: 68px;
  float: left;
  margin: 0 5px 10px 0;
}

main.historia .icono.grafico {
  background-position: -411px -7px;
}

main.historia .icono.clohaca {
  background-position: -352px -4px;
  width: 60px;
  margin-right: 13px;
}

main.historia .icono.industria {
  background-position: -278px -4px;
}

main.historia .icono.habitantes {
  background-position: -181px -7px;
}

main.historia .icono.mapa {
  background-position: 0 0;
}

main.historia .icono.metro {
  background-position: -89px 0;
}

main.historia .info {
  float: left;
  clear: left;
  color: #009d84;
  font-size: 7pt;
  line-height: 9pt;
}

main.historia .info p {
  margin-top: 5px;
  width: 185px;
  text-align: left;
}

/******************************************************************************/
/* Fin -> Estilo para la página historia                                      */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página soluciones                                 */
/******************************************************************************/

main.soluciones .imagen {
    height: 335px;
}

main.soluciones .imagen img{
    width: 100%;
}

main.soluciones .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.soluciones .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.soluciones .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.soluciones .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.soluciones .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.soluciones .principal h3 {
  padding:20px;
  line-height: 30px;
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  text-align: center;
  color: #38bca4;
}

main.soluciones .principal .izquierda-1 {
    color: #5e544a;
}

main.soluciones .principal .izquierda-1 p {
  margin: 0;
}

main.soluciones .principal .izquierda-1 p.arriba {
    padding: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
 }

main.soluciones .principal .izquierda-1 p.arriba img {
    width: 50%;
    float: left;
    margin-right: 20px;
}

main.soluciones .principal .izquierda-1 p.abajo {
  padding: 20px;
  padding-top: 0;
  font-size: 12px;
}

main.soluciones .principal .izquierda-2 h3 {
  border: none;
  background-color: #009c84;
  color: white;
}

main.soluciones .principal .izquierda-2 {
  background-color: #867869;
  color: white;
}

main.soluciones .principal .izquierda-2 > div {
  padding: 15px;
  font-size: 12px;
}

main.soluciones .principal .medio-1 {
  float: left;
}

main.soluciones .principal .medio-1 h3 {
  background-color: #6e6153;
  color: white;
  border: none;
}

main.soluciones .principal .medio-1 .img {
  height: 185px;
  background-image: url(../img/noticias/10-lugares.png);
  background-size: cover;
  background-repeat: none;
}

main.soluciones .principal .derecha-1 {
  height: 110px;
  background-color: #009c84;
}

main.soluciones .principal .derecha-1 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.soluciones .principal .derecha-1 .izq {
  margin-top: 20px;
  width: 50%;
  float: left;
  font-size: 50px;
  color: #00ac6b;
}

main.soluciones .principal .derecha-1 .izq i {
  font-size: 50px;
  color: #00ac6b;
}

main.soluciones .principal .derecha-1 .der {
  margin-top: 25px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.soluciones .principal .microbiano:hover {
  background-image: url(../img/trama-1.png);
}

main.soluciones .principal .microbiano .izq img {
  width: 60px;
}

main.soluciones .principal .microbiano .der {
  padding-top: 10px;
  font-size: 13px;
  text-align: left;
}

main.soluciones .principal .derecha-2{
  float: right;
}

main.soluciones .principal .derecha-2 div {
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  padding: 18px;
  color: #5e544a;
}

main.soluciones .principal .derecha-2 div p {
  font-size: 12px;
}

main.soluciones .principal .derecha-2 div .numero-1 {
  font-size: 25px;
  margin: 10px;
  color:#38bca4;
}



/******************************************************************************/
/* Fin -> Estilo para la página soluciones                                    */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página causas                                     */
/******************************************************************************/

main.causas .contenedor {
    margin-top: 60px;
}

main.causas .epigrafe {
    height: 110px;
    
}

main.causas .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.causas .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.causas .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.causas .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.causas .principal h3 {
  padding:20px;
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  color: #38bca4;
}

main.causas .izquierda-2 h3 {
  font-size: 15px;
}

main.causas .izquierda-2 h4 {
  font-size: 10px;
}

main.causas .principal .izquierda-1 {
    color: #5e544a;
}

main.causas .principal .izquierda-1 p {
  margin: 0;
}

main.causas .principal .izquierda-1 h3 {
    color: #38bca4;
    text-align: center;
}

main.causas .principal .izquierda-1 p.arriba {
    padding: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
 }

main.causas .principal .izquierda-1 p.arriba img {
    width: 50%;
    float: left;
    margin-right: 20px;
}

main.causas .principal .izquierda-1 p.abajo {
  padding: 20px;
  padding-top: 0;
  font-size: 12px;
}

main.causas .principal .izquierda-2 h3 {
  border: none;
  background-color: #eae6dd;
  color: #38bca4;
    font-weight: 800;
}

main.causas .principal .izquierda-2 h4 {
  border: none;
  background-color: #eae6dd;
  color: black;
  padding-left:17px;
  padding-bottom: 15px; 
}

main.causas .principal .izquierda-2 {
  background-color: #d5cfc3;
  color: #5e544a;
      height: 362px;
}

main.causas .principal .izquierda-2 > div {
padding:8px;
  font-size: 12px;
    padding-left: 19px;
    padding-right: 17px;
}

main.causas .principal .medio-1 {
  float: left;
  background-color: #d5cfc3;
  color: #5e544a;
    width: 618px;
}

main.causas .principal .medio-1 h3 {
  background-color: #eae6dd;
  color: #009c84;
  border: none;
  }
main.causas .principal .medio-1 h4{
      border: none;
  background-color: #eae6dd;
  color: black;
  padding-left:17px;
  padding-bottom: 15px; 
}

main.causas .principal .medio-1 > div {
  font-size: 12px;
    margin-right: 20px;
}
main.causas .principal .medio-1 .img {
  height: 300px;
    width: 340px;
  background-image: url(../img/causas/PERIFONEO-Y-I-JORNADA-DE-SANEAM.-AMB.-006.jpg);
  background-size: cover;
  background-repeat: none;
    float: left;
}

main.causas .principal .derecha-1 {
  height: 110px;
  background-color: #009c84;
}

main.causas .principal .derecha-1 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.causas .principal .derecha-1 .izq {
  margin-top: 20px;
  width: 50%;
  float: left;
  font-size: 50px;
  color: #00ac6b;
}

main.causas .principal .derecha-1 .izq i {
  font-size: 50px;
  color: #00ac6b;
}

main.causas .principal .derecha-1 .der {
  margin-top: 25px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.causas .principal .derecha-1 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
}

main.causas .principal .plan:hover {
  background-image: url(../img/trama-1.png);
}


main.causas .principal .plan .izq img {
  width: 60px;
}

main.causas .principal .plan .der {
  font-size: 12px;
  text-align: left;
}

main.causas .principal .derecha-2 .der {
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
  height:40px;
  padding: center;
  padding-top:30px;
  padding-bottom:25px;
}

main.causas .principal .derecha-2 div {
  /*border-bottom-width: 2px;*/
  padding-left: 15px;
  color: rgb(255;255;255);
  background-color: #009c84;
  padding-top: 4px;
  font-size: 12px;
  text-align: left;
}

main.causas .principal .derecha-2 .img {
  background-size: cover;
  background-repeat: none;
  float: center;
  height:260px; 
}

/******************************************************************************/
/* Fin -> Estilo para la página causas                                        */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página participa                                  */
/******************************************************************************/

main.participa .imagen {
    height: 335px;
}

main.participa .imagen img{
    width: 100%;
}

main.participa .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.participa .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.participa .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.participa .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.participa .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.participa .principal .izquierda-1 > h3 {
  padding:20px;
  line-height: 30px;
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  text-align: center;
  color: #38bca4;
}

main.participa .principal .izquierda-1 {
    color: #5e544a;
}

main.participa .principal .izquierda-1 p {
  margin: 0;
  padding: 20px;
  font-size: 13px; 
  font-weight: 600;
  line-height: 18px;
}

main.participa .principal .izquierda-1 p.arriba img {
    width: 50%;
    float: left;
    margin-right: 20px;
}

main.participa .principal .izquierda-2 h3 {
  border: none;
  background-color: #009c84;
  color: white;
}

main.participa .principal .izquierda-2 {
  background-color: #867869;
  color: white;
}

main.participa .principal .izquierda-2 > div {
  padding: 15px;
  font-size: 12px;
}

main.participa .principal .medio-1 {
  float: left;
}

main.participa .principal .medio-1 h3 {
  background-color: #6e6153;
  color: white;
  border: none;
}

main.participa .principal .medio-1 .img {
  height: 185px;
  background-image: url(../img/noticias/10-lugares.png);
  background-size: cover;
  background-repeat: none;
}

main.participa .principal .derecha-1 {
  background-color: #caede7;
  margin-bottom:20px;    
}

main.participa .principal .derecha-1 .inscripcion > h2 {
  color:white;
  font-size: 24px;
  padding: 20px;
  background-color: #009c86;
}

main.participa .principal .derecha-1 .inscripcion > h3 {
  color:#6e6153;
  font-size: 12px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:20px;
  font-weight: 600;
  font-size: 18px;
}

main.participa .principal .derecha-1 .inscripcion > hr {
  color:#6e6153;
  border: 1px solid #6e6153;
  width: 418px;
}    

main.participa .principal .derecha-1 .inscripcion {
  float: left;
  clear: left;
}

main.participa .principal .derecha-1 .texto1 {
  width: 113px;
  height: 28px;
  margin-top:10px;
  border: 1px solid #009c86;
  color: #009c86;
  padding: 0px;
  font-weight: 600;
  text-align: left;
  margin:10px 10px 10px 20px;
  text-align: center; 
  text-transform: uppercase;
  float: left;
  clear: left;
}

main.participa .principal .derecha-1 .texto1 p {
  margin: 5px 0;
}


main.participa .principal .derecha-1 .relleno {
  background-color:white;
  width:295px;
  height: 30px;
  margin-right:20px;    
  margin-top:10px;  
  float: left;   

}

main.participa .principal .derecha-1 .boton {
   color:white;
   font-weight: 600;
   font-size: 14px;
   background-color:#009c86;
   height: 28px;
   float:right; 
   margin-right:20px;    
   margin-top:15px;
   margin-bottom:15px;
   padding:10px 10px 0 10px;
   text-align:center;
    
}

main.participa .principal .capacitacion h2 {
    margin-bottom: 5px;
}

main.participa .principal .capacitacion img {
  width: 49%;
   margin-top: 0;
    margin-bottom: 6px;
}   

main.participa .principal .capacitacion img.izq {
  margin-right: 2%;
}   
 
main.participa .principal .capacitacion p {
    margin: 0;
    font-size: 11px;
}

main.participa .principal .izq {
  margin-top: 20px;
  width: 50%;
  float: left;
  font-size: 50px;
  color:#009c86;

}

main.participa .principal .derecha-1 .izq i {
  font-size: 50px;
  color: #00ac6b;
}

main.participa .principal .derecha-1 .der {
  margin-top: 25px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.participa .principal .derecha-1 .capacitacion {
  height: 400px;
  background-color: #caede7;
  margin-bottom:20px;  
  clear:both;
}


/******************************************************************************/
/* Fin -> Estilo para la página participa                                     */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página contacto                                   */
/******************************************************************************/

main.contacto .imagen {
    height: 335px;
}

main.contacto .imagen img{
    width: 100%;
}

main.contacto .epigrafe {
    height: 110px;
    margin-bottom: 20px;
    margin-top:60px;
}

main.contacto .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.contacto .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.contacto .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.contacto .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.contacto .principal .izquierda-1 > h3 {
  padding:20px;
  line-height: 30px;
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  text-align: center;
  color: #38bca4;
}

main.contacto .principal .izquierda-1 {
    color: #5e544a;
}

main.contacto .principal .izquierda-1 h4 {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
}

main.contacto .principal .izquierda-1 p {
  margin: 0;
  padding: 20px;
  font-size: 13px; 
  font-weight: 600;
  line-height: 18px;
}

main.contacto .principal .izquierda-1 p.arriba img {
    width: 50%;
    float: left;
    margin-right: 20px;
}

main.contacto .principal .izquierda-2 h3 {
  border: none;
  background-color: #009c84;
  color: white;
}

main.contacto .principal .izquierda-2 {
  background-color: #867869;
  color: white;
}

main.contacto .principal .izquierda-2 > div {
  padding: 15px;
  font-size: 12px;
}

main.contacto .principal .medio-1 {
  float: left;
}

main.contacto .principal .medio-1 h3 {
  background-color: #6e6153;
  color: white;
  border: none;
}

main.contacto .principal .medio-1 .img {
  height: 185px;
  background-image: url(../img/noticias/10-lugares.png);
  background-size: cover;
  background-repeat: none;
}

main.contacto .principal .derecha-1 {
  background-color: #caede7;
  margin-bottom:20px;    
    overflow: auto;
}
 
main.contacto .principal .derecha-1 .izq {
  margin-top: 20px;
  width: 50%;
  float: left;
  font-size: 50px;
  color:#009c86;

}

main.contacto .principal .derecha-1 .izq i {
  font-size: 50px;
  color: #00ac6b;
}

main.contacto .principal .derecha-1 .der {
  margin-top: 25px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.contacto .principal .derecha-1 .capacitacion {
  height: 400px;
  background-color: #caede7;
  margin-bottom:20px;  
  clear:both;
}

main.contacto .principal .derecha-1 .formulario > h2 {
  color:white;
  font-size: 24px;
  padding: 20px;
  background-color: #009c86;
}

main.contacto .principal .derecha-1 .formulario > h3 {
  color:#6e6153;
  font-size: 12px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:20px;
  font-weight: 600;
  font-size: 18px;
}

main.contacto .principal .derecha-1 .formulario > hr {
  color:#6e6153;
  border: 1px solid #6e6153;
  width: 418px;
}

main.contacto .principal .derecha-1 .texto1 {
  width: 113px;
  height: 28px;
  margin-top:10px;
  border: 1px solid #009c86;
  color: #009c86;
  padding: 0px;
  font-weight: 600;
  text-align: left;
  margin:10px 10px 10px 20px;
  text-align: center; 
  text-transform: uppercase;
  float: left;
  clear: left;
}

main.contacto .principal .derecha-1 .texto1 p {
  margin: 5px 0;
}

main.contacto .principal .derecha-1 .relleno {
  background-color:white;
  width:295px;
  height: 30px;
  margin-right:20px;    
  margin-top:10px;  
  float: left;   
}

main.contacto .principal .derecha-1 .relleno2 {
  background-color:white;
  width:295px;
  height: 100px;
  margin-right:20px;    
  margin-top:10px;  
  float: left;   
}

main.contacto .principal .derecha-1 .boton {
   color:white;
   font-weight: 600;
   font-size: 14px;
   background-color:#009c86;
   height: 28px;
   float:right; 
   margin-right:20px;    
   margin-top:15px;
   margin-bottom:15px;
   padding:10px 10px 0 10px;
   text-align:center;
    
}

/******************************************************************************/
/* Fin -> Estilo para la página contacto                                      */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página objetivos                                  */
/******************************************************************************/

main.objetivos .contenedor {
    margin-top: 60px;
}

main.objetivos .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.objetivos .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.objetivos .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.objetivos .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.objetivos .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.objetivos .contenedor.principal {
    margin-top: 0;
}

main.objetivos .principal h3 {
  padding:20px;
  /*border-bottom-width: 2px;*/
  border-color: #38bca4;
  border-style: solid;
  color: #38bca4;
}

main.objetivos .izquierda-2 h3 {
  font-size: 15px;
}

main.objetivos .izquierda-2 h4 {
  font-size: 10px;
}

main.objetivos .principal .izquierda-1 {
    color: #5e544a;
}

main.objetivos .principal .izquierda-1 p {
  margin: 0px;
  padding-top: 0px;
}

main.objetivos .principal .izquierda-1 h3 {
    color: #38bca4;
    text-align: center;
    padding: 10px;
}

main.objetivos .principal .izquierda-1 p.arriba {
    padding: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
 }

main.objetivos .principal .izquierda-1 p.arriba img {
    width: 50%;
    float: left;
    margin-right: 20px;
}

main.objetivos .principal .izquierda-1 p.abajo {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0;
  font-size: 12px;
  text-align: justify;
  margin-top: 0px;
}

main.objetivos .principal .izquierda-2 h3 {
  border: none;
  background-color: #eae6dd;
  color: #38bca4;
    font-weight: 800;
}

main.objetivos .principal .izquierda-2 h4 {
  border: none;
  background-color: #eae6dd;
  color: black;
  padding-left:17px;
  padding-bottom: 15px; 
}

main.objetivos .principal .izquierda-2 {
  background-color: #d5cfc3;
  color: #5e544a;
      height: 362px;
}

main.objetivos .principal .izquierda-2 > div {
padding:8px;
  font-size: 12px;
    padding-left: 19px;
    padding-right: 17px;
}

main.objetivos .principal .medio-1 {
  float: left;
  background-color: #d5cfc3;
  color: #5e544a;
    width: 618px;
}

main.objetivos .principal .medio-1 h3 {
  background-color: #eae6dd;
  color: #009c84;
  border: none;
  }
main.objetivos .principal .medio-1 h4{
      border: none;
  background-color: #eae6dd;
  color: black;
  padding-left:17px;
  padding-bottom: 15px; 
}

main.objetivos .principal .medio-1 > div {
  font-size: 12px;
    padding-left: 300px;
    padding-right: 20px;
    padding-top: 20px;
}
main.objetivos .principal .medio-1 .img {
  height: 280px;
    width: 40px;
  background-image: url(../img/causas/PERIFONEO-Y-I-JORNADA-DE-SANEAM.-AMB.jpg);
  background-size: cover;
  background-repeat: none;
    float: left;
}

main.objetivos .principal .derecha-1 {
  height: 110px;
  background-color: #009c84;
}

main.objetivos .principal .derecha-1:hover {
  background-image: url(../img/trama-1.png);
}

main.objetivos .principal .derecha-1 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.objetivos .principal .derecha-1 .izq {
  margin-top: 20px;
  width: 50%;
  float: left;
  font-size: 50px;
  color: white;
}

main.objetivos .principal .derecha-1 .izq i {
  font-size: 50px;
  color: rgb:(255;255;255);
}

main.objetivos .principal .derecha-1 .der {
  margin-top: 25px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.objetivos .principal .derecha-1 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
}

main.objetivos .principal .plan .izq img {
  width: 60px;
}

main.objetivos .principal .plan .der {
  font-size: 12px;
  text-align: left;
}

main.objetivos .principal .derecha-2 .der {
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
  height:40px;
}

main.objetivos .principal .derecha-2 div {
  padding-left: 15px;
  background-color: #d5cfc3;
  padding-top: 0px;
  text-align: left;
}

main.objetivos .principal .derecha-2{
  float: right;
}

main.objetivos .principal .derecha-2 div {
  padding: 18px;
  color: #5e544a;
}

main.objetivos .principal .derecha-2 div p {
  font-size: 12px;
}

/******************************************************************************/
/* Fin -> Estilo para la página objetivos                                     */
/******************************************************************************/


/******************************************************************************/
/* Inicio -> Estilo para la página ubicación                                  */
/******************************************************************************/

main.ubicacion .contenedor {
    margin-top: 60px;
}

main.ubicacion .contenedor.principal {
    margin-top: 0;
}

main.ubicacion .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.ubicacion .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.ubicacion .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.ubicacion .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.ubicacion .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.ubicacion .derecha-1 {
  font-size: 20px;
  text-transform: uppercase;
  color: #5e544a;
}

main.ubicacion .derecha-1 h3 {
  padding: 20px;
  border-color: #38bca4;
  border-style: solid;
  color: #38bca4;
  text-align: center;
  margin-bottom: 20px;
}

main.ubicacion .derecha-1 p {
  text-align: center;
}

main.ubicacion .derecha-1 i {
    font-size: 50px;
    float: left;
    display: block;
    margin-right: 10px;
}

main.ubicacion .derecha-1 hr {
  border: 0;
  height: 2px;
  border-top: 1px dashed #009c84;
  border-bottom: 1px dashed #009c84;
  margin-bottom: 20px;
}

/******************************************************************************/
/* Fin -> Estilo para la página ubicación                                     */
/******************************************************************************/

/******************************************************************************/
/* Inicio -> Estilo para la página microbiano                                 */
/******************************************************************************/

main.microbiano .contenedor {
    margin-top: 60px;
}

main.microbiano .contenedor.principal {
    margin-top: 0;
}

main.microbiano .epigrafe {
    height: 110px;
    margin-bottom: 20px;
}

main.microbiano .epigrafe > div {
    float:left;
    font-family: 'Raleway';
}

main.microbiano .epigrafe .izquierda {
  width: 220px;
  line-height: 110px;
  background-color: #504840;
  color: white;
  text-align: center;
  font-size: 26px;
}

main.microbiano .epigrafe .derecha {
  width: 720px;
  height: 110px;
  background-color: #5e544a;
  color: white;
  }

main.microbiano .epigrafe .derecha p {
    margin: 25px;
    font-size: 13px;

}

main.microbiano .principal h3 {
  padding:20px;
  border-bottom-width: 2px;
  border-color: #38bca4;
  border-style: solid;
  color: #38bca4;
}

main.microbiano .izquierda-2 h3 {
  font-size: 15px;
}

main.microbiano .izquierda-2 h4 {
  font-size: 10px;
}

main.microbiano .principal .izquierda-1 {
    color: #5e544a;
}

main.microbiano .principal .izquierda-1 p {
  margin: 0px;
  padding-top: 0px;
}

main.microbiano .principal .izquierda-1 h3 {
    color: #38bca4;
    text-align: center;
    padding: 10px;
}

main.microbiano .principal .izquierda-1 p.arriba {
    padding: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
 }

main.microbiano .principal .izquierda-1 p.arriba img {
    width: 50%;
    float: left;
    margin-right: 20px;
}

main.microbiano .principal .izquierda-1 p.abajo {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0;
  font-size: 12px;
  text-align: justify;
  margin-top: 0px;
}

main.microbiano .principal .izquierda-2 h3 {
  border: none;
  background-color: #eae6dd;
  color: #38bca4;
    font-weight: 800;
}

main.microbiano .principal .izquierda-2 h4 {
  border: none;
  background-color: #eae6dd;
  color: black;
  padding-left:17px;
  padding-bottom: 15px; 
}

main.microbiano .principal .izquierda-2 {
  background-color: #d5cfc3;
  color: #5e544a;
      height: 362px;
}

main.microbiano .principal .izquierda-2 > div {
padding:8px;
  font-size: 12px;
    padding-left: 19px;
    padding-right: 17px;
}

main.microbiano .principal .medio-1 {
  float: left;
  background-color: #d5cfc3;
  color: #5e544a;
    width: 618px;
}

main.microbiano .principal .medio-1 h3 {
  background-color: #eae6dd;
  color: #009c84;
  border: none;
  }
main.microbiano .principal .medio-1 h4{
      border: none;
  background-color: #eae6dd;
  color: black;
  padding-left:17px;
  padding-bottom: 15px; 
}

main.microbiano .principal .medio-1 > div {
  font-size: 12px;
    padding-left: 300px;
    padding-right: 20px;
    padding-top: 20px;
}
main.microbiano .principal .medio-1 .img {
  height: 280px;
    width: 40px;
  background-image: url(../img/causas/PERIFONEO-Y-I-JORNADA-DE-SANEAM.-AMB.jpg);
  background-size: cover;
  background-repeat: none;
    float: left;
}

main.microbiano .principal .derecha-1 {
  height: 160px;
  background-color: #009c84;
}

main.microbiano .principal .derecha-1 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.microbiano .principal .derecha-1 .izq {
  margin-top: 50px;
  width: 50%;
  float: left;
  font-size: 50px;
  color: white;
}

main.microbiano .principal .derecha-1 .izq i {
  font-size: 50px;
  color: rgb:(255;255;255);
}

main.microbiano .principal .derecha-1 .der {
  margin-top: 25px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.microbiano .principal .derecha-1 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
}

main.microbiano .principal .plan .izq img {
  width: 60px;
}

main.microbiano .principal .plan .der {
  font-size: 12px;
  text-align: left;
}

main.microbiano .principal .derecha-3 {
  height: 160px;
  background-color: #009c84;
    float: right;
    margin-bottom: 20px;
}

main.microbiano .principal .derecha-3 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.microbiano .principal .derecha-3 .izq {
  margin-top: 50px;
  width: 50%;
  float: left;
  font-size: 50px;
  color: white;
}

main.microbiano .principal .derecha-3 .izq i {
  font-size: 50px;
  color: rgb:(255;255;255);
}

main.microbiano .principal .derecha-3 .der {
  margin-top: 30px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.microbiano .principal .derecha-3 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
}

main.microbiano .principal .derecha-2 {
  height: 160px;
  background-color: #009c84;
    float: right;
}

main.microbiano .principal .derecha-2 > div {
  height: 110px;
  text-align: center;
  cursor: pointer;
}

main.microbiano .principal .derecha-2 .izq {
  margin-top: 50px;
  width: 50%;
  float: left;
  font-size: 50px;
  color: white;
}

main.microbiano .principal .derecha-2 .izq i {
  font-size: 50px;
  color: rgb:(255;255;255);
}

main.microbiano .principal .derecha-2 .der {
  margin-top: 30px;
  margin-right: 10%;
  width: 40%;
  float: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  color: white;
}

main.microbiano .principal .derecha-2 .der > p {
  margin-top: 0;
  width: 80%;
  float: left;
  font-size: 10px;
  text-transform: uppercase;
  text-align: left;
}

main.microbiano .principal .derecha-1:hover,
main.microbiano .principal .derecha-2:hover,
main.microbiano .principal .derecha-3:hover {
    background-image: url(../img/trama-1.png);
}

/******************************************************************************/
/* Fin -> Estilo para la página microbiano                                    */
/******************************************************************************/