/* el contenedor y la imagen */
  div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    /* tuve que establecer la altura para que los textos se centraran verticalmente */
    height: 100%;
    
  }
  div.multi-hover img {width: 100%;}

  /* los textos que, por defecto, permanecerán ocultos */ 
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    height: 100%;
    opacity: 0; 
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s; /* agregar los prefijos para cada navegador */
    width: 100%;
  }

  /* y esto es lo que generará el efecto */

  div.multi-hover span:nth-child(1) { /* desde la derecha */
    background: none repeat scroll 0 0 rgba(0, 113, 172, 0.8);
    left: 0;
    top: 0%;
  }
  div.multi-hover span:nth-child(2) { /* desde arriba */
    background: none repeat scroll 0 0 rgba(0, 113, 172, 0.8);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* desde la izquierda */
    background: none repeat scroll 0 0 rgba(0, 113, 172, 0.8);
    left: -90%;
    top: 0;
  }
  div.multi-hover span:nth-child(4) { /* desde abajo */
    background: none repeat scroll 0 0 rgba(0, 113, 172, 0.8);
    left: 90%;
    top: 0;
  }

  /* los hacemos visibles ... */
  div.multi-hover span:hover {opacity: 1;}

  /* ... moviéndolos horizontalmente ... */
  div.multi-hover span:nth-child(2n):hover {left: 0;}
  /* ... o verticalmente ... */
  div.multi-hover span:nth-child(2n+1):hover {top: 0;}


.cont-descrip{
	margin:1% 8%;
}
.descripcion .cont-descrip h2{
	font-size: 89%;
	text-align: left;
}

.descripcion .cont-descrip h3{
	font-weight: bold;
	font-size: 30%;
	text-align: left;
}
.descripcion .cont-descrip p{
	font-size: 34%;
	text-align: left;
}

.descripcion .cont-descrip ul{
	font-size: 40%;
	padding: 0;
}

.descripcion .cont-descrip ul li{
	list-style: none;
	text-align: left;

}
.row{
	margin-right: 0;
}