.hover_rotation {
	position: relative;
	overflow: hidden;
	float: left;
}

.hover_rotation div {
	position: absolute;
		/* The images have to be larger than their parent container to fill the visible area when rotating */
		/*width:400px;
		height:250px;*/
		/* Margins keep the image centered */
	top: 50%;
	left: 50%;
		/*	margin-top:-125px;
				margin-left:-200px;*/
	border: none;
		/* Opacity */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
		/* Opacity & Rotation Transitions */
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;
}

/* Right rotation */

.hover_rotation div.hover_rotation_right:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
		/* Applying a 15 degrees rotation */
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
}

/* Left rotation */

.hover_rotation div.hover_rotation_left:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
		/* Applying a -15 degrees rotation */
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

/*	_______________________________________

	02 OVERLAY FADE
		_______________________________________	*/

.overlay_fade {
	position: relative;
		/* Modify the width and the height according to your images sizes */
	overflow: hidden;
	float: left;
}

.overlay_fade div {
	width: 100%;
	height: 100%;
	border: none;
}

.overlay_fade .overlay_zoom {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	background-image: url("../images/icons/zoom.png");
	background-repeat: no-repeat;
	background-position: center center;
		/* Opacity */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
		/* Opacity Transition */
	-webkit-transition: opacity .4s ease-in;
	-moz-transition: opacity .4s ease-in;
	-o-transition: opacity .4s ease-in;
	-ms-transition: opacity .4s ease-in;
	transition: opacity .4s ease-in;
}

.overlay_fade:hover .overlay_zoom {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.overlay_fade .zoom_white {
	background-color: rgba(255, 255, 255, 0.7);
}

.overlay_fade .zoom_black {
	background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

	03 OVERLAY SLIDE
		_______________________________________	*/

.overlay_slide {
	position: relative;
	overflow: hidden;
	float: left;
}

.overlay_slide div {
	width: 100%;
	height: 100%;
	border: none;
}

.overlay_slide .overlay_zoom {
	position: absolute;
	top: -150px;
	width: 100%;
	height: 100%;
	background-image: url("../images/icons/zoom.png");
	background-repeat: no-repeat;
	background-position: center center;
		/* Slide Transition */
	-webkit-transition: top 0.4s;
	-moz-transition: top 0.4s;
	-o-transition: top 0.4s;
	-ms-transition: top 0.4s;
	transition: top 0.4s;
}

.overlay_slide:hover .overlay_zoom {
	top: 0 !important;
}

.overlay_slide .zoom_white {
	background-color: rgba(255, 255, 255, 0.7);
}

.overlay_slide .zoom_black {
	background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

	04 OVERLAY SPLIT
		_______________________________________	*/

.overlay_split {
	position: relative;
	overflow: hidden;
	float: left;
}

.overlay_split div {
	width: 100%;
	height: 100%;
	border: none;
}

/* Right and left sides */
.overlay_split .overlay_split_left,
.overlay_split .overlay_split_right {
	position: absolute;
	width: 50%;
	height: 100%;
}

.overlay_split .overlay_split_right {
	right: 0;
		/* Slide Transition */
	-webkit-transition: right 0.4s;
	-moz-transition: right 0.4s;
	-o-transition: right 0.4s;
	-ms-transition: right 0.4s;
	transition: right 0.4s;
}

.overlay_split .overlay_split_left {
	left: 0 !important;
		/* Slide Transition */
	-webkit-transition: left 0.4s;
	-moz-transition: left 0.4s;
	-o-transition: left 0.4s;
	-ms-transition: left 0.4s;
	transition: left 0.4s;
}

/* Top and bottom sides */

.overlay_split .overlay_split_top,
.overlay_split .overlay_split_bottom {
	position: absolute;
	width: 100%;
	height: 50%;
}

.overlay_split .overlay_split_top {
	top: 0 !important;
		/* Slide Transition */
	-webkit-transition: top 0.4s;
	-moz-transition: top 0.4s;
	-o-transition: top 0.4s;
	-ms-transition: top 0.4s;
	transition: top 0.4s;
}

.overlay_split .overlay_split_bottom {
	bottom: 0 !important;
		/* Slide Transition */
	-webkit-transition: bottom 0.4s;
	-moz-transition: bottom 0.4s;
	-o-transition: bottom 0.4s;
	-ms-transition: bottom 0.4s;
	transition: bottom 0.4s;
}

.overlay_split:hover .overlay_split_left {
	left: -50% !important;
}

.overlay_split:hover .overlay_split_right {
	right: -50% !important;
}

.overlay_split:hover .overlay_split_top {
	top: -50% !important;
}

.overlay_split:hover .overlay_split_bottom {
	bottom: -50% !important;
}

.overlay_split .split_white {
	background-color: rgba(255, 255, 255, 0.7);
}

.overlay_split .split_black {
	background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

	05 OVERLAY JOIN
		_______________________________________	*/

.overlay_join {
	position: relative;
	overflow: hidden;
	float: left;
}

.overlay_join div {
	width: 100%;
	height: 100%;
	border: none;
}

/* Right and left sides */

.overlay_join .overlay_join_left,
.overlay_join .overlay_join_right {
	position: absolute;
	width: 50% !important;
	height: 100% !important;
}

.overlay_join .overlay_join_left {
	left: -50% !important;
		/* Slide Transition */
	-webkit-transition: left 0.4s;
	-moz-transition: left 0.4s;
	-o-transition: left 0.4s;
	-ms-transition: left 0.4s;
	transition: left 0.4s;
}

.overlay_join .overlay_join_right {
	right: -50% !important;
		/* Slide Transition */
	-webkit-transition: right 0.4s;
	-moz-transition: right 0.4s;
	-o-transition: right 0.4s;
	-ms-transition: right 0.4s;
	transition: right 0.4s;
}

/* Top and bottom sides */

.overlay_join .overlay_join_top,
.overlay_join .overlay_join_bottom {
	position: absolute;
	width: 100%;
	height: 50%;
}

.overlay_join .overlay_join_top {
	top: -50% !important;
		/* Slide Transition */
	-webkit-transition: top 0.4s;
	-moz-transition: top 0.4s;
	-o-transition: top 0.4s;
	-ms-transition: top 0.4s;
	transition: top 0.4s;
}

.overlay_join .overlay_join_bottom {
	bottom: -50% !important;
		/* Slide Transition */
	-webkit-transition: bottom 0.4s;
	-moz-transition: bottom 0.4s;
	-o-transition: bottom 0.4s;
	-ms-transition: bottom 0.4s;
	transition: bottom 0.4s;
}

.overlay_join:hover .overlay_join_left {
	left: 0 !important;
}

.overlay_join:hover .overlay_join_right {
	right: 0 !important;
}

.overlay_join:hover .overlay_join_top {
	top: 0 !important;
}

.overlay_join:hover .overlay_join_bottom {
	bottom: 0 !important;
}

/* Background colors and icons */

.overlay_join_left .join_zoom,
.overlay_join_right .join_favorite,
.overlay_join_top .join_zoom,
.overlay_join_bottom .join_favorite {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
}

.overlay_join .join_zoom,
.overlay_join .join_favorite {
	width: 100%;
	height: 100%;
}

.overlay_join_left .join_zoom, .overlay_join_top .join_zoom {
	background-image: url("../images/icons/zoom.png");
}

.overlay_join_right .join_favorite, .overlay_join_bottom .join_favorite {
	background-image: url("../images/icons/favorite.png");
}

.overlay_join .join_white {
	background-color: rgba(255, 255, 255, 0.7);
}

.overlay_join .join_black {
	background-color: rgba(0, 0, 0, 0.7);
}

/*	_______________________________________

	06 CORNER RIBBONS
		_______________________________________	*/

.corner_ribbon {
	position: relative;
	overflow: hidden;
	float: left;
}

.corner_ribbon div {
	width: 100%;
	height: 100%;
	border: none;
}

/* Common styling to all variants */
.corner_ribbon .corner_ribbon_top_left_white,
.corner_ribbon .corner_ribbon_top_left_black,
.corner_ribbon .corner_ribbon_bottom_left_white,
.corner_ribbon .corner_ribbon_bottom_left_black,
.corner_ribbon .corner_ribbon_top_right_white,
.corner_ribbon .corner_ribbon_top_right_black,
.corner_ribbon .corner_ribbon_bottom_right_white,
.corner_ribbon .corner_ribbon_bottom_right_black {
	position: absolute;
	width: 0;
	height: 0;
		/* Slide Transition */
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
}

.corner_ribbon .corner_zoom,
.corner_ribbon .corner_zoom {
	position: absolute;
	background: url("../images/icons/zoom.png") no-repeat center center;
}

/* Top Left Ribbon */

.corner_ribbon:hover .corner_ribbon_top_left_white,
.corner_ribbon:hover .corner_ribbon_top_left_black {
	top: 0 !important;
	left: 0 !important;
}

/* Bottom Left Ribbon */

.corner_ribbon:hover .corner_ribbon_bottom_left_white,
.corner_ribbon:hover .corner_ribbon_bottom_left_black {
	bottom: 0 !important;
	left: 0 !important;
}

/* Top Right Ribbon */

.corner_ribbon:hover .corner_ribbon_top_right_white,
.corner_ribbon:hover .corner_ribbon_top_right_black {
	top: 0 !important;
	right: 0 !important;
}

/* Bottom Right Ribbon */

.corner_ribbon:hover .corner_ribbon_bottom_right_white,
.corner_ribbon:hover .corner_ribbon_bottom_right_black {
	bottom: 0 !important;
	right: 0 !important;
}

/*	_______________________________________

	10 LEVITATION SHADOW
		_______________________________________	*/

.levitation_shadow {
	position: relative;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}

.levitation_shadow div.levitation_small,
.levitation_shadow div.levitation_large {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
		/* Animation of the effect */
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	-o-transition: top 0.3s;
	-ms-transition: top 0.3s;
	transition: top 0.3s;
}

.levitation_shadow:hover div.levitation_small {
	top: -5px !important;
}

.levitation_shadow:hover div.levitation_large {
	top: -10px !important;
}

/*	_______________________________________

	11 LOMO EFFECT
		_______________________________________	*/

.lomo_black,
.lomo_white,
.lomo_black_reversed,
.lomo_white_reversed {
	position: relative;
	float: left;
	overflow: hidden;
}

.lomo_black div,
.lomo_white div,
.lomo_black_reversed div,
.lomo_white_reversed div {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

.lomo_black:after,
.lomo_white:after,
.lomo_black_reversed:after,
.lomo_white_reversed:after {
		/* Positionning this black glow on mouse hover */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	content: "";
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
}

.lomo_black:after,
.lomo_black_reversed:hover:after {
	-webkit-box-shadow: inset 0 0 5px #000000;
	-moz-box-shadow: inset 0 0 5px #000000;
	box-shadow: inset 0 0 5px #000000;
}

.lomo_black:hover:after,
.lomo_black_reversed:after {
	-webkit-box-shadow: inset 0 0 90px #000000;
	-moz-box-shadow: inset 0 0 90px #000000;
	box-shadow: inset 0 0 90px #000000;
}

.lomo_white:after,
.lomo_white_reversed:hover:after {
	-webkit-box-shadow: inset 0 0 1px #ffffff;
	-moz-box-shadow: inset 0 0 1px #ffffff;
	box-shadow: inset 0 0 1px #ffffff;
}

.lomo_white:hover:after,
.lomo_white_reversed:after {
	-webkit-box-shadow: inset 0 0 90px #ffffff;
	-moz-box-shadow: inset 0 0 90px #ffffff;
	box-shadow: inset 0 0 90px #ffffff;
}

/*	_______________________________________

	14 ROUNDED IMAGES
		_______________________________________	*/

.rounded_image {
	position: relative;
	float: left;
		/*margin:15px 30px 15px 15px;*/
}

.rounded_image div.rounded_img,
.rounded_image div.squared_img {
		/*width:100%;
		height:100%;*/
	display: block;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-o-transition: all 0.6s;
	-ms-transition: all 0.6s;
	transition: all 0.6s;
}

.rounded_image div.rounded_img,
.rounded_image div.squared_img:hover {
	-webkit-border-radius: 75% !important;
	-moz-border-radius: 75% !important;
	-o-border-radius: 75% !important;
	-ms-border-radius: 75% !important;
	-khtml-border-radius: 75% !important;
	border-radius: 75% !important;
}

.rounded_image div.rounded_img:hover,
.rounded_image div.squared_img {
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-o-border-radius: 0 !important;
	-ms-border-radius: 0 !important;
	-khtml-border-radius: 0 !important;
	border-radius: 0 !important;
}

/*	_______________________________________

	17 PERSPECTIVE IMAGES
		_______________________________________	*/

.perspective {
	float: left;
		/* 3D Effect - Safari and Chrome only */
	-webkit-perspective: 600;
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective;
	-webkit-transition-duration: 0.5s;
}

.perspective:hover {
		/* 3D Effect - Safari and Chrome only */
	-webkit-perspective: 1000;
}

.perspective div.perspective_right,
.perspective div.perspective_left {
	width: 100%;
	height: 100%;
	-moz-box-shadow: 0 0 6px #666;
	box-shadow: 0 0 6px #666;
	-webkit-box-shadow: 0 0 6px #666;
		/* Animation - Safari and Chrome only */
	-webkit-transition-property: transform;
	-webkit-transition-duration: 0.5s;
}

.perspective div.perspective_right {
	-webkit-transform: rotateY(30deg);
}

.perspective div.perspective_left {
	-webkit-transform: rotateY(-30deg);
}

.perspective div:hover.perspective_right,
.perspective div:hover.perspective_left {
	-webkit-transform: rotateY(0deg);
}

/* Grayscale */

.gallery_grayscale {
	position: relative;
	display: inline-block;
	filter: gray;
	-webkit-filter: grayscale(100%);
	-webkit-backface-visibility: hidden;
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

.gallery_grayscale:hover {
	filter: none;
	-webkit-filter: grayscale(0%);
	-webkit-transition: all .6s ease !important;
 /* Fade to color for Chrome and Safari */
}

/* Sepia */

.gallery_sepia {
	position: relative;
	display: inline-block;
	-webkit-transition: all .6s ease;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");
	-webkit-filter: sepia(1);
	-webkit-filter: sepia(100%);
	-moz-filter: sepia(100%);
	-ms-filter: sepia(100%);
	-o-filter: sepia(100%);
	filter: sepia(100%);
}

.gallery_sepia:hover {
	filter: none;
	-webkit-filter: sepia(0);
	-moz-filter: sepia(0);
	-ms-filter: sepia(0);
	-o-filter: sepia(0);
	filter: sepia(0);
	-webkit-transition: all .6s ease;
 /* Fade to color for Chrome and Safari */
}

/* Blur */

.gallery_blur {
	position: relative;
	display: inline-block;
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
}

.gallery_blur:hover {
	filter: none;
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-o-filter: blur(0);
	-ms-filter: blur(0);
	-webkit-transition: all .6s ease;
 /* Fade to color for Chrome and Safari */
}

/* Pulse */
@-webkit-keyframes special_pulse {
	25% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	75% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}

@keyframes special_pulse {
	25% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}

	75% {
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		transform: scale(0.9);
	}
}

.special_pulse {
	display: inline-block !important;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.special_pulse:hover {
	-webkit-animation-name: pulse;
	animation-name: pulse;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
