.web_img {
	float: left;
	width:100%;
	/* height: 170px;
	max-height:170px; */
	height: 100%;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.web_img .mascara, .web_img .mascara_2 {
	width: 100%;
	/* height: 170px;
	max-height:170px; */
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.web_img img {
	width: 100%;
	background-size:cover;
	/* height: 170px;
	max-height: 170px; */
	height: 100%;
	position: relative;
}
.web_img h2 {
	text-transform: uppercase;
	text-align: center;
	position: relative;
	font-size: 1em;
	padding: 10px;
	/* background-color: #0C0706; */
	background-color: rgba(255, 215, 0); /* amarillo */
	margin: 20px 0 0 0;
	color: black;
}

.web_img p {
	font-size: 1.2em;
	position: relative;
	color: white;
	padding: 10px 20px 10px;
	text-align: center;
}
	.color_negro{
		color: black !important;
	}
.web_img a.link {
	position: absolute;
	padding: 2px 10px;
	bottom: 6px;
	text-decoration: none;
	background: #222;
	color: white;
	box-shadow: 0 0 1px #000;
}
.web_img a.link:hover {
	box-shadow: 0 0 5px #FFF;
}
.efecto-1 img {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.efecto-1 .mascara, .efecto-1 .mascara_2 {
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.efecto-1 .mascara{
	background-color: rgba(60,60,60, 0.8);
}
.efecto-1 .mascara_2{
	background-color: rgba(230,230,230, 0.7);
}

.efecto-1 h2 {
	-webkit-transform: translateX(-200px);/*Desplazamos a la izquierda*/
	-moz-transform: translateX(-200px);
	-o-transform: translateX(-200px);
	-ms-transform: translateX(-200px);
	transform: translateX(-200px);
	
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
.efecto-1 p{
	-webkit-transform: translateX(200px);/*Desplazamos a la derecha*/
	-moz-transform: translateX(200px);
	-o-transform: translateX(200px);
	-ms-transform: translateX(200px);
	transform: translateX(200px);
	
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
.efecto-1 a.link{
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-transform: translateY(100px);/*Desplazamos para abajo*/
	-moz-transform: translateY(100px);
	-o-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform: translateY(100px);
}
.efecto-1:hover img {
	-webkit-transform: scale(1.1);/*Damos un ligero zoom a la imagen*/
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.efecto-1:hover .mascara, .efecto-1:hover .mascara_2{
	opacity: 1;
	filter: alpha(opacity=100);
}

.efecto-1:hover h2, .efecto-1:hover p, .efecto-1:hover a.link {
	opacity: 1;
	filter: alpha(opacity=100);
	
	-webkit-transform: translateX(0px);/*Regresamos a las posiciones originales*/
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}
.efecto-1:hover p{
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	-ms-transition-delay: 0.1s;
	-webkit-transition-delay: 0.1s;
}
.efecto-1:hover a.link {
	-webkit-transition-delay: 0.2s; /*Aplicamos un pequeno retardo al final*/
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	transition-delay: 0.2s;
	
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}

/* MEDIA QUERIES */
@media screen and (max-width: 1500px) {
    .web_img h2 {	font-size: 1em;	padding: 6px;	margin: 14px 0 0 0;}
}

@media screen and (max-width: 650px) {
	.web_img h2 {	font-size: 0.8em;	padding: 6px;	margin: 14px 0 0 0;}
	.web_img a.link {padding: 2px 10px; margin:0;}
}