/**
 * Table of Contents:
 *
 * 1.0 - Jazz effect
 * 2.0 - Layla effect
 * 3.0 - Layla circle effect
 */


/* 1.0 - Jazz effect */
.effect-jazz {
	overflow: hidden;
	position: relative;
}
.effect-jazz.loaded {
	background: #000;
}
	.effect-jazz a:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		content: '';
		-webkit-opacity: 0;
		-moz-opacity: 0;
		opacity: 0;
		-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
		-moz-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
		-ms-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
		-o-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-ms-transition: 0.3s;
		-o-transition: 0.3s;
	}
	.effect-jazz a .desc {
		-webkit-opacity: 0;
		-moz-opacity: 0;
		opacity: 0;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-ms-transition: 0.3s;
		-o-transition: 0.3s;
	}
	.effect-jazz img {
		display: block;
	}
		.effect-jazz img:after {
			-webkit-transition: 0.3s;
			-moz-transition: 0.3s;
			-ms-transition: 0.3s;
			-o-transition: 0.3s;
		}
	.effect-jazz:hover img {
		-webkit-opacity: 0.8;
		-moz-opacity: 0.8;
		opacity: 0.8;
	}
		.effect-jazz:hover a:after {
			-webkit-opacity: 1;
			-moz-opacity: 1;
			opacity: 1;
			-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
			-moz-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
			-ms-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
			-o-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
		}
		.effect-jazz:hover a .desc {
			-webkit-opacity: 1;
			-moz-opacity: 1;
			opacity: 1;
		}
		.effect-jazz-min:hover a:after {
			-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1.6,1);
			-moz-transform: rotate3d(0,0,1,45deg) scale3d(1,1.6,1);
			-ms-transform: rotate3d(0,0,1,45deg) scale3d(1,1.6,1);
			-o-transform: rotate3d(0,0,1,45deg) scale3d(1,1.6,1);
		}


/* 2.0 - Layla effect */
.effect-layla {
	position: relative;
	background: #000;
}
	.effect-layla:before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 20px;
		height: 20px;
		content: "\e91a";
		font: 28px/1 'sd-font-regular';
		color: #fff;
		margin: auto;
		z-index: 9;
		-webkit-opacity: 0;
		-moz-opacity: 0;
		opacity: 0;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-ms-transition: 0.3s;
		-o-transition: 0.3s;
	}
	.effect-layla .align,
	.effect-layla a {
		display: block;
		position: relative;
	}
		.effect-layla span:before,
		.effect-layla span:after,
		.effect-layla .align:before,
		.effect-layla .align:after,
		.effect-layla a:before,
		.effect-layla a:after {
			position: absolute;
			content: '';
			z-index: 9;
			-webkit-opacity: 0;
			-moz-opacity: 0;
			opacity: 0;
			-webkit-transition: 0.3s;
			-moz-transition: 0.3s;
			-ms-transition: 0.3s;
			-o-transition: 0.3s;
		}
		.effect-layla span:before,
		.effect-layla .align:before,
		.effect-layla a:before {
			top: 20px;
			right: 20px;
			bottom: 20px;
			left: 20px;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			-webkit-transform: scale(0,1);
			-moz-transform: scale(0,1);
			-ms-transform: scale(0,1);
			-o-transform: scale(0,1);
			-webkit-transform-origin: 0 0;
			-moz-transform-origin: 0 0;
			-ms-transform-origin: 0 0;
			-o-transform-origin: 0 0;
		}
		.effect-layla span:after,
		.effect-layla .align:after,
		.effect-layla a:after {
			top: 10px;
			right: 10px;
			bottom: 10px;
			left: 10px;
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			-webkit-transform: scale(1,0);
			-moz-transform: scale(1,0);
			-ms-transform: scale(1,0);
			-o-transform: scale(1,0);
			-webkit-transform-origin: 0 0;
			-moz-transform-origin: 0 0;
			-ms-transform-origin: 0 0;
			-o-transform-origin: 0 0;
		}
	.effect-layla img {
		display: block;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-ms-transition: 0.3s;
		-o-transition: 0.3s;
	}
		.effect-layla:hover:before {
			-webkit-opacity: 1;
			-moz-opacity: 1;
			opacity: 1;
		}
	.effect-layla:hover img {
		-webkit-opacity: 0.8;
		-moz-opacity: 0.8;
		opacity: 0.8;
	}
		.effect-layla:hover span:before,
		.effect-layla:hover span:after,
		.effect-layla:hover .align:before,
		.effect-layla:hover .align:after,
		.effect-layla:hover a:before,
		.effect-layla:hover a:after {
			-webkit-opacity: 1;
			-moz-opacity: 1;
			opacity: 1;
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
		}


/* 3.0 - Layla circle effect */
.effect-layla-circle {
	background: none;
}
	.effect-layla-circle:before {
		content: none;
	}
	.effect-layla-circle a:before,
	.effect-layla-circle a:after {
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
	.effect-layla-circle a:before {
		top: 30px;
		right: 30px;
		bottom: 30px;
		left: 30px;
	}
	.effect-layla-circle a:after {
		top: 15px;
		right: 15px;
		bottom: 15px;
		left: 15px;
	}
	.effect-layla-circle:hover img {
		-webkit-opacity: 0.9;
		-moz-opacity: 0.9;
		opacity: 0.9;
	}