
@keyframes ABig{0%{transform: scale(0);}100%{transform: scale(1);}}

.grid{
	overflow: hidden;
	margin: 0 auto;
	width:100%;
	list-style: none;
	text-align: center;
	font-size:0;
	display:none;
	height:auto;
}

.grid .imgPro{ width:380px;height:320px;}
/* Common style */
.grid div {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
/*	width: 590px;
	height: 300px;*/
	background: #3085a3;
	text-align: center;
	cursor: pointer;
	margin:0 5px 0 5px;
	overflow:hidden;
	animation:ABig 1s;
}

/*.grid div img {
	position: relative;
	display: block;
	min-height:100%;
	opacity: 1.0;
	margin:0 auto;
}*/

.grid div span {
	padding:15px;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid div span::before,.grid div span::after {pointer-events: none;}

.grid div span,.grid div a {
	position: absolute;
	top: 0;
	left: 0;
	width:91%;
	height:88%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid div a {}

.grid div h2 { }

.grid div h2 span {}

.grid div h2,.grid div p {}

.grid div p { margin:80px; padding:0; font-size:14px;}


/* Individual effects */

div.effect-oscar { background:#000; width:380px; height:320px;}

div.effect-oscar img {opacity: 1.0;}

div.effect-oscar span {}

div.effect-oscar span::before {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border: 1px solid #fff;
	content: '';
}

div.effect-oscar h2 {
    opacity: 0;
	margin: 50px 0 0 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

div.effect-oscar h2 img{ width:190px;}

div.effect-oscar span::before,
div.effect-oscar p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}


div.effect-oscar:hover h2 {
	opacity:1.0;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

div.effect-oscar:hover span::before,
div.effect-oscar:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


div.effect-oscar:hover span {}

div.effect-oscar:hover img {
	opacity: 0.4;
}

span img{opacity: 1.0!important;}


.grid i{ display:block; background:url(../images/icoMore.png) center no-repeat; width:100%; height:24px; }

div.effect-oscar i{
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}
div.effect-oscar:hover i {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


