/*---------------*/
/***** Layla *****/
/*---------------*/

.effect-layla {
	background:#001825 url(../images/pattern.png) repeat left top;
	color:#fff;
	position:relative;
	overflow:hidden;
	margin-bottom:30px;
	
}

.effect-layla img {
	height:auto;
	width:120%;
	position:absolute;
	margin:auto;
	left:0; right:0; top:0; bottom:0;
}

.effect-layla figcaption {
	padding: 3em;
	
}

.effect-layla figcaption::before,
.effect-layla figcaption::after {
	position: absolute;
	content: '';
	opacity: 0;
}

.effect-layla figcaption::before {
	top: 25px;
	right: 15px;
	bottom: 25px;
	left: 15px;
	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;
}

.effect-layla figcaption::after {
	top: 15px;
	right: 25px;
	bottom: 15px;
	left: 25px;
	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;
}

.effect-layla h2 {
	padding:3em 0 0 0;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	font-size:16px;
	text-transform:uppercase; 
	font-weight:600;
}

.effect-layla p {
	padding:0 0 3em 0;
	text-transform: none;
	opacity: 0;
	/*text-align:center;*/
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}


.effect-layla h2 {
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

.effect-layla img{	-webkit-transform: translate3d(0,0px,0);
	transform: translate3d(0,0px,0);}
.effect-layla img,
.effect-layla figcaption::before,
.effect-layla figcaption::after,
.effect-layla p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.effect-layla:hover img {
	opacity: 0.1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	
}

.effect-layla:hover figcaption::before,
.effect-layla:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.effect-layla:hover h2,
.effect-layla:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.effect-layla:hover figcaption::after,
.effect-layla:hover h2,
.effect-layla:hover p,
.effect-layla:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

@media(max-width:1280px){.effect-layla figcaption {padding: 2.5em;}}
@media only screen and (max-width: 1198px) and (min-width: 992px) {.effect-layla figcaption {padding: 0em 2em;}}

/*-----------------*/
/***** Selena *****/
/*-----------------*/
figcaption{padding: 2em;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.effect-selena {background: #155094; overflow:hidden; text-align:center}
.effect-selena img {
	opacity: 0.75;
	background:#155094;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.effect-selena:hover img {-webkit-transform: scale3d(0.95,0.95,1);transform: scale3d(0.95,0.95,1);}
.effect-selena figcaption{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.effect-selena h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

.effect-selena p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
	transform: perspective(1000px) rotate3d(1,0,0,90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.effect-selena:hover h2 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.effect-selena:hover p {opacity: 1;-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);transform: perspective(1000px) rotate3d(1,0,0,0);}