@font-face{font-weight:normal;font-style:normal;font-family:'feathericons';src:url('../fonts/feathericons/feathericons.eot?-8is7zf');src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');}
.grid{position:relative;margin:0 auto;padding:1em 0 0em;list-style:none;text-align:center;}
.grid figure{position:relative;float:left;overflow:hidden;margin:10px 0%;/*min-width:320px;*/max-width:480px;max-height:360px;width:100%;background:#3085a3;text-align:center;cursor:pointer;}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:0.8;}
.grid figure figcaption{padding:2em;color:#fff;text-transform:Capitalize;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after{pointer-events:none;}
.grid figure figcaption,
.grid figure figcaption > a{position:absolute;top:0;left:0;width:100%;height:100%;}
.grid figure figcaption > a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0;}
.grid figure h2{font-weight:300;}
.grid figure h2 span{font-weight:800;}
.grid figure h2,
.grid figure p{margin:0;}
.grid figure p{letter-spacing:0px;font-size:90%;}

figure.effect-layla{background:transparent;}
figure.effect-layla img{height:390px;}
figure.effect-layla figcaption{padding:3em;}
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after{position:absolute;content:'';opacity:0;}
figure.effect-layla figcaption::before{top:50px;right:30px;bottom:50px;left:30px;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;transform-origin:0 0;}
figure.effect-layla figcaption::after{top:30px;right:50px;bottom:30px;left:50px;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;transform-origin:100% 0;}
figure.effect-layla h2{font-size: 34px;padding-top:26%;-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;}
figure.effect-layla p{padding:0.5em 2em;text-transform:none;opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}
figure.effect-layla img,
figure.effect-layla h2{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);color:#fff;}
figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p{-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, transform 0.35s;}
figure.effect-layla:hover img{opacity:0.7;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
figure.effect-layla:hover h2,
figure.effect-layla:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img{-webkit-transition-delay:0.15s;transition-delay:0.15s;}
/*-----------------*/
/***** Goliath *****/
/*-----------------*/

figure.effect-goliath {
	background: #df4e4e;
}

figure.effect-goliath img,
figure.effect-goliath h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-goliath img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 30px;
	color:#fff;
}

figure.effect-goliath p {
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

figure.effect-goliath:hover h2 {
	-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
}

figure.effect-goliath:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
@media screen and (max-width:50em){.content{padding:0 10px;text-align:center;}
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%;}
}