.mascara p{
	text-align:center !important;}
.boter{
	position:absolute;
	top:85px;
	width:100%;
	height:295px;
	background-image:url(../images/nosotros.jpg);
	background-position:50% 50%;
	opacity:0.2;
	z-index:-5;}
.cont{
	}
.cont2{
		display:none !important;}
.lost{
	margin-top:-30px;
	color:#F00;
	font-size:25px;
	margin-bottom:20px;}
	.lost2{
	margin-top:20px;
	color:#F00;
	font-size:25px;
	margin-bottom:20px;}
.fea{
	}
.fea li{
	float:left;
	margin-right:10px;}
.fea li img{
	width:90px;
	max-width:100%;}
.pot{
	width:100%;}
.post{
	padding-top:20px;
	font-size:30px;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:-2px;
	}
.post_img{
	padding-top:40px;
	
	}
.img_nosotros{
	float:left;
	margin-right:20px;
	margin-top:5px;
}
.img_nosotros img{
  	width:330px;
}
.conte_res{
	}
.pass{
	font-size:15px;
	}
.fuck{
	display:block;}
	
.contenedor-img {
width: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
	max-width:100%;
display: block;
position: relative;

}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 16px;
position: relative;
color: #fff;
padding: 30px 30px 10px;
text-align:justify;
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}
/*Ejemplo 2*/
.ejemplo-2 img {
transition: all 0.2s ease-in;
}
.ejemplo-2 .mascara {
background-color:rgba(0,0,0,0.5);
width: 100%;
padding: 60px;
height: 100%;
opacity: 1;
transform: translate(100%, 100%) rotate(90deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
transition: all 0.5s ease-in-out;
}
.ejemplo-2 h2 {

background: transparent;
margin: 40px 40px 0px 40px;
transform: translate(100%, 100%);/*Desplazamos el título arriba a la derecha*/
transition: all 0.3s ease-in-out;
font-weight:bold;
}
.ejemplo-2 p {
transform: translate(100%, 100%);/*Desplazamos la descripción abajo a la izquierda*/
transition: all 0.4s ease-in-out;
font-size:15px;
}
.ejemplo-2 a.link {
transform: translate(0px, 100%);/*Desplazamos el link para abajo*/
transition: all 0.3s 0.1s ease-in-out;
}

.ejemplo-2:hover .mascara {
opacity:0.9;
transform: translate(-12.5%, 0%) rotate(0deg);
}
.ejemplo-2:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.ejemplo-2:hover p {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.ejemplo-2:hover a.link {
transform: translate(0px,0px);
transition-delay: 0.5s;
}
/*Ejemplo 1*/
.ejemplo-1 img {
transition: all 0.2s linear;
}
.grid_2  .ejemplo-1 .mascara {background-color: rgba(2,2,2, 0.8) !important;}
.ejemplo-1 .mascara {
	height:100%;
	opacity: 0;
	background-color: rgba(2,2,2, 0.95);
	transform: translateY(200px);/*Desplazamos a la derecha*/
	opacity: 0;
	transition: all 0.4s linear;
}
.ejemplo-1 h2 {
	margin-top:80px;
transform: translateX(-200px);/*Desplazamos a la izquierda*/
opacity: 0;
transition: all 0.7s ease-in-out;
}
.ejemplo-1 p {
transform: translateY(200px);/*Desplazamos a la derecha*/
opacity: 0;
transition: all 0.4s linear;
}
.ejemplo-1 a.link{
opacity: 0;
transition: all 0.4s ease-in-out;
transform: translateY(100px)/*Desplazamos para abajo*/
}
.grid_2 .ejemplo-1:hover img {
transform: scale(1);/*Damos un ligero zoom a la imagen*/
}
.ejemplo-1:hover img {
transform: scale(0.8);/*Damos un ligero zoom a la imagen*/
}
.ejemplo-1:hover .mascara {
opacity: 1;
transform: translateY(0px);
}
.ejemplo-1:hover h2,
.ejemplo-1:hover p,
.ejemplo-1:hover a.link {
opacity: 1;
transform: translateY(0px);/*Regresamos a las posiciones originales*/
}
.ejemplo-1:hover p {
transition-delay: 0.1s;
}
.ejemplo-1:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
transform: translateY(0px);
}

@media only screen and (min-width: 780px) and (max-width: 1024px) {
	.contenedor-img p {
		font-size: 11px;
		position: relative;
		color: #fff;
		padding: 15px 30px 10px;
		text-align:justify;
		}
	}
@media only screen and (max-width: 780px) {
	.cont{
		display:none !important;}
	.cont2{
		display:block !important;
		}
	.contenedor-img{
		float:none;
		margin-bottom:20px !important;}
	.contenedor-img p {
		font-size:13.5px;
		position: relative;
		color: #fff;
		padding: 25px 30px 10px;
		text-align:justify;
		}
		
	}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.grid_4 .contenedor-img img {
		max-width:80%;
		margin:0 auto;
		display: block;
		position: relative;
		
		}
	.contenedor-img p {
		position: relative;
		color: #fff;
		padding: 40px 30px 10px;
		font-size:16px;
		text-align:justify;
		}
	}