.foto{
    margin-left: 10px;
    margin-top: 10px;
}
.alinear{
  vertical-align: unset !important;
}
.field{
  border: 3px groove #424199 !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #424199;
            box-shadow:  0px 0px 0px 0px #424199;
}
.leg{
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  color: #424199;
  border:none;
  width:inherit;
}
.field2 {
  border: 3px groove #98bf36 !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #98bf36;
            box-shadow:  0px 0px 0px 0px #98bf36;
}
.leg2 {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  color: #98bf36;
  border:none;
  width:inherit;
}
.div_form {
  float: left;
  width: 100%;
}
.input_form{
  border: 1px solid #424199;
  border-radius: 4px;
  width: 200px;
  margin-right: 3%;
  padding: 5px;

}
.input_form2 {
  border: 1px solid #98bf36;
  border-radius: 4px;
  width: 200px;
  margin-right: 3%;
  padding: 5px;

}
.label_form{
    margin-right: 2%;
    width: 200px;
    padding-bottom: 10px;
    font-size: 14px;
}
#search{
  padding: 5px;
  border-color: #98bf36;
  background-color: #ecfbd4;
}
.titulo_aprobado{
  color: black;
  text-align: center;
  font-size: 30px;
  font-family:Arial, Helvetica, sans-serif;
  padding-top: 25px;
}
.add{
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  margin-top: 12px;
  padding-left: 12px;
  font-size: 14px;
  font-weight: bold;  
}
.container2 {
  padding-right: 30px;
  padding-left: 35px;
  margin-right: 10%;
  margin-left: 10%;
  background-color: white;
  border-radius: 5px;
  border-color: #424199;
  border-style: solid;
  margin-top: 50px;
  margin-bottom: 50px;
}

.add2{
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  margin-top: 12px;
  padding-left: 12px;
  font-size: 14px;
 
}

.add3{
  background-color: #424199;
  color: #ffffff;
  text-align: center;
}
a .add:hover,
a:focus {
  color: #ffffff;
  text-decoration: underline;
}
.add4{
  background-color: #424199;
  color: #ffffff;
  text-align: center;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

#titulo2 {
  background-color: #424199;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

a.vermas{

  color: #fff;
}
a.botondescarga {
  position: relative;
  padding: 12px 60px 15px 60px;
  cursor: pointer;color:#000000 !important;
  text-align: center;
  font-weight: bold;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
  display: inline-block !important;
  font: 700 17px 'Arial', Helvetica, Clean, sans-serif;
  margin: 0px 0px 20px 10px;
  position: relative;
    -decoration: none;
  transition: background-position .2s ease, margin .1s ease;
  -webkit-transition: background-position .2s ease, margin .1s ease;
  -moz-transition: background-position .2s ease, margin .1s ease;
  background-repeat: repeat-x;
}

a.botondescarga:hover { background-position: 0 10px;color:#000000 !important;transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease; }

a.botondescarga:active {
  -webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
  box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
  margin: 2px 0 20px 10px;
}

a.botondescarga span.bar {
  width: 1px;
  height: 30px;
  position: absolute;
  background: black;
  top: 5px;
  left: 50px;
}

a.botondescarga div.flecha {
  position: absolute;
  left: 20px;
  top: 14px;
}

a.botondescarga div.flecha span.top {
  position: absolute;
  width: 6px;
  height: 9px;
  background: #000;
  top: 0;
  left: 3px;
}

a.botondescarga div.flecha span.bottom,
div.flecha span.bottomShadow {
  position: absolute;
  width: 0px;
  height: 0px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid black;
  top: 9px;
  left: -2px;
  z-index: 2;
}

a.botondescarga div.flecha span.bottomShadow {
  z-index: 1;
  left: -1px;
}
a.verde {
  background-color: #ecfbd4;
  background-image: -webkit-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: -moz-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: -ms-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: -o-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: linear-gradient(top, #ecfbd4, #98bf36);
  text-shadow: 1px 1px 1px #ecfbd4;
  border-top: 1px solid #ecfbd4;
}

a.verde span.bar {
  -webkit-box-shadow: 1px 1px 1px #98bf36;
  -moz-box-shadow: 1px 1px 1px #98bf36;
  box-shadow: 1px 1px 1px #98bf36;
}

a.verde div.flecha span.top {
  -webkit-box-shadow: 1px 1px 1px #98bf36;
  -moz-box-shadow: 1px 1px 1px #98bf36;
  box-shadow: 1px 1px 1px #98bf36;
}

a.verde div.flecha span.bottomShadow { border-top: 8px solid #98bf36 }

a.amarillo {
  background-color: #ecfbd4;
  background-image: -webkit-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: -moz-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: -ms-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: -o-linear-gradient(top, #ecfbd4, #98bf36);
  background-image: linear-gradient(top, #ecfbd4, #98bf36);
  text-shadow: 1px 1px 1px #ecfbd4;
  border-top: 1px solid #ecfbd4;
}

a.amarillo span.bar {
  -webkit-box-shadow: 1px 1px 1px #ecfbd4;
  -moz-box-shadow: 1px 1px 1px #ecfbd4;
  box-shadow: 1px 1px 1px #ecfbd4;
}

a.amarillo div.flecha span.top {
  -webkit-box-shadow: 1px 1px 1px #ecfbd4;
  -moz-box-shadow: 1px 1px 1px #ecfbd4;
  box-shadow: 1px 1px 1px #ecfbd4;
}

a.amarillo div.flecha span.bottomShadow { border-top: 8px solid #ecfbd4 }

div#info {
  position:absolute;
  overflow:hidden;
  width: 213px;
  height: 20px;
  /*background-color: rgba(31, 31, 31, 0.9);*/
  opacity:0;
  transition: height 1s;
}
div#imagen {
  width: 213px;
  height: 105px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../imagenes/youtube2.png");
  margin: 5px auto;
}

div#imagen:hover div#info {
  opacity:1;
  height: 105px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../imagenes/youtube.png");
}

p#headline {
  position: absolute;
  font-size: 1.5rem;
  margin-left: -75px;
  margin-top: 15px;
  transition: margin-left 2s;
  color:#000;
  font-family:Arial Black;
  font-size: 18px;
}

div#imagen:hover p#headline {
  margin-left: 35px;
}

p#descripcion {
  font-size: 1rem;
  margin-left: 35px;
  margin-top: 200px;
  transition: margin-top 2s;
  color:#fff;
  font-family:Arial;
}

div#imagen:hover p#descripcion {
  margin-top: 75px;
}

/*segundo boton*/
div#imagen2 {
  /* width: 213px;
  height: 105px;
  background-size: cover;
  background-image: url("../imagenes/f.png");
  margin: 5px auto; */
  width: 213px;
  height: 105px;
  background-size: contain;
  background-image: url(../imagenes/f.png);
  background-repeat: no-repeat;
  background-position-x: 50px;
  margin: 0 auto;
}

div#info2 {
  position:absolute;
  overflow:hidden;
  width: 213px;
  height: 20px;
  /*background-color: rgba(31, 31, 31, 0.9);*/
  opacity:0;
  transition: height 1s;
}
div#imagen2:hover {
  background-image: none;
}

div#imagen2:hover div#info2 {
  opacity: 1;
  height: 105px;
  background-size: contain;
  background-image: url(../imagenes/facebook-.png);
  background-repeat: no-repeat;
}

p#headline2 {
  position: absolute;
  font-size: 1.5rem;
  margin-left: -75px;
  margin-top: 15px;
  transition: margin-left 2s;
  color:#000;
  font-family:Arial Black;
  font-size: 18px;
}

div#imagen2:hover p#headline2 {
  margin-left: 35px;
}

p#descripcion2 {
  font-size: 1rem;
  margin-left: 35px;
  margin-top: 200px;
  transition: margin-top 2s;
  color:#fff;
  font-family:Arial;
}

div#imagen2:hover p#descripcion2 {
  margin-top: 75px;
}

/*tercer boton*/
div#imagen3 {
  width: 213px;
  height: 105px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../imagenes/t.png");
  margin: 5px auto;
}

div#info3 {
  position:absolute;
  overflow:hidden;
  width: 213px;
  height: 20px;
  /*background-color: rgba(31, 31, 31, 0.9);*/
  opacity:0;
  transition: height 1s;  
}

div#imagen3:hover div#info3 {
  opacity:1;
  height: 105px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../imagenes/twitter-.png");
}

p#headline3 {
  position: absolute;
  font-size: 1.5rem;
  margin-left: -75px;
  margin-top: 15px;
  transition: margin-left 2s;
  color:#000;
  font-family:Arial Black;
  font-size: 18px;
}

div#imagen3:hover p#headline3 {
  margin-left: 35px;
}

p#descripcion3 {
  font-size: 1rem;
  margin-left: 35px;
  margin-top: 200px;
  transition: margin-top 2s;
  color:#fff;
  font-family:Arial;
}

div#imagen3:hover p#descripcion3 {
  margin-top: 75px;
}

/*cuarto boton*/
div#imagen4 {
  width: 200px;
  height: 200px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../imagenes/next.png");
  margin: 5px auto;
}

div#info4 {
  position:absolute;
  overflow:hidden;
  width: 200px;
  height: 20px;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: height 1s;
}

div#imagen4:hover div#info4 {
  opacity:1;
  height: 200px;
}

p#headline4 {
  position: absolute;
  font-size: 1.5rem;
  margin-left: -75px;
  margin-top: 15px;
  transition: margin-left 2s;
  color:#fff;
  font-family:Arial Black;
}

div#imagen4:hover p#headline4 {
  margin-left: 35px;
}

p#descripcion4 {
  font-size: 1rem;
  margin-left: 35px;
  margin-top: 200px;
  transition: margin-top 2s;
  color:#fff;
  font-family:Arial;
}

div#imagen4:hover p#descripcion4 {
  margin-top: 75px;
}

/*quinto boton*/
div#imagen5 {
  width: 100px;
  height: 100px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../imagenes/afiliate.png");
  margin: 5px auto;
}

div#info5 {
  position:absolute;
  overflow:hidden;
  width: 100px;
  height: 100px;
  /*background-color: rgba(31, 31, 31, 0.9);*/
  opacity:0;
  transition: height 1s;
}

div#imagen5:hover div#info5 {
  opacity:1;
  height: 105px;
  background-size: cover;/*sólo para ejemplo*/
  background-image: url("../imagenes/afiliate.png");
}

p#headline5 {
  position: absolute;
  font-size: 1.5rem;
  margin-left: -75px;
  margin-top: 15px;
  transition: margin-left 2s;
  color:#000;
  font-family:Arial Black;
  font-size: 18px;
}

div#imagen5:hover p#headline5 {
  margin-left: 35px;
}

p#descripcion5 {
  font-size: 1rem;
  margin-left: 35px;
  margin-top: 200px;
  transition: margin-top 2s;
  color:#fff;
  font-family:Arial;
}

div#imagen5:hover p#descripcion5 {
  margin-top: 75px;
}


h1 {
color: #323133;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
letter-spacing: -1px;
text-decoration: none; 
text-shadow: 1px 1px #fff, 0 0 #0e0e0e, 2px 3px 1px #e3e3e3; 
text-transform: none; 
word-spacing: -2px;

}

.container-logo > .img-responsive{
    margin: 0 auto;
}

.parrafo{
  
  text-align: justify;

  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3;

  -moz-column-gap: 3em;
  -webkit-column-gap: 3em;
  column-gap: 3em;


  -moz-column-width: 140px;         
  -webkit-column-width: 140px;
  column-width: 140px;
}

.parrafo2{
  
  text-align: justify;
  padding-bottom: 10px;

  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;

  -moz-column-gap: 3em;
  -webkit-column-gap: 3em;
  column-gap: 3em;


  -moz-column-width: 180px;       
  -webkit-column-width: 180px;
  column-width: 180px;
}

.tituloemprendimiento {
color: #38397b;
 font-family: Georgia, Serif, Helvetica Neue, Arial, Helvetica, sans-serif;
letter-spacing: -1px;
text-decoration: none; 
text-shadow: 1px 1px #fff, 0 0 #0e0e0e, 2px 3px 1px #e3e3e3; 
text-transform: none; 
word-spacing: -2px;
margin-top: -20px;
text-align: center;
}

.ventana:hover:after {
   content: attr(original-title); /* este es el texto que será mostrado */
   position: absolute;
    z-index: 500;
    /* el formato gráfico */
    background: #eee5c8 ;
    border-radius: 5px;
    color: #000; /* el color del texto */
    font-family: Georgia;
    font-size: 12px;
    padding: 5px 15px;
    text-align: justify;
    width: 440px;

  }
.ventana:hover:before {
    content: "";
    left: 10%;
    position: absolute;
    z-index: 500;
    /* el triángulo inferior */
    border: solid;
    border-color: white transparent;
    border-width: 6px 6px 0 6px; /* Triangulo sentido abajo*/

  }

 .fondoinstitucional {
  margin-top: -35px;
  min-height: 800px;
  background-image: url("../imagenes/fondoinstitucional.jpg");

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url("../imagenes/fondoinstitucional.jpg") 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
 .fondoemprendimiento {
  margin-top: -35px;
  min-height: 800px;
  background-image: url("../imagenes/fondoemprendimiento.jpg");

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url("../imagenes/fondoemprendimiento.jpg") 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
 .fondosomosmas {
  margin-top: -35px;
  min-height: 800px;
  background-image: url("../imagenes/fondosomosmas.jpg");

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url("../imagenes/fondosomosmas.jpg") 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

 .fondoenlacedevictimas {
  margin-top: -35px;
  min-height: 800px;
  background-image: url("../imagenes/fondoenlacedevictimas.jpg");

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url("../imagenes/fondoenlacedevictimas.jpg") 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
 .fondoyosoylider {
  margin-top: -35px;
  min-height: 800px;
  background-image: url("../imagenes/fondoyosoylider.jpg");

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url("../imagenes/fondoyosoylider.jpg") 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

 .fondogris {
  margin-top: -35px;
  background-color: #ccc;
  min-width: 1300px;
  min-height: 800px;
}
 .fondoiniciosesion {
  margin-top: -35px;
  min-height: 800px;
  background-image: url("../imagenes/fondoiniciosesion.jpg");

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url("../imagenes/fondoiniciosesion.jpg") 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
 .fondocomitestecnicos {
  margin-top: -35px;
  min-height: 800px;
  background-image: url("../imagenes/fondocomitestecnicos.jpg");

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url("../imagenes/fondocomitestecnicos.jpg") 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}