/*
Item Name : CSS3 Image Hover Effects 
Author URI : http://codecanyon.net/user/Pixelworkshop/
Version : 1.0
*/

/*

TABLE OF CONTENTS

00 PAGE STYLING (REMOVABLE)
01 HOVER ROTATION
02 OVERLAY FADE
03 OVERLAY SLIDE
04 OVERLAY SPLIT
05 OVERLAY JOIN
06 CORNER RIBBONS
07 SLIDING SIDE PANEL
08 ELASTIC THUMBNAILS
09 FLIP IMAGE
10 LEVITATION SHADOW
11 LOMO EFFECT
12 BOTTOM OVERLAY
13 IMAGE STACKS
14 ROUNDED IMAGES
17 PERSPECTIVE IMAGES

*/






/*  _______________________________________

	00 PAGE STYLING (REMOVABLE)
    _______________________________________  */



/* 
The following markup is used only for demonstration purposes,
this whole section can be removed.
*/



/*  _______________________________________

	01 HOVER ROTATION
    _______________________________________  */



.hover_rotation {
	position:relative;
	width:240px;
	height:150px;
	border:5px solid #f6f6f6;
	overflow:hidden;
	float:left;
	margin:15px;
}

	.hover_rotation img {
		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:.8;
		/* 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 img.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 img.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 */
	width:240px;
	height:150px;
	overflow:hidden;
	float:left;
	margin:15px;
	border:5px solid #f6f6f6;
}

	.overlay_fade img {
		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;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	overflow:hidden;
	float:left;
	margin:15px;
	border:5px solid #f6f6f6;
}
	.overlay_slide img {
		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;
		}
	.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;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	overflow:hidden;
	float:left;
	margin:15px;
	border:5px solid #f6f6f6;
}
	.overlay_split img {
		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;
			/* 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;
			/* 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;
			/* 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%;
	}
	.overlay_split:hover .overlay_split_right {
		right:-50%;
	}
	.overlay_split:hover .overlay_split_top {
		top:-50%;
	}
	.overlay_split:hover .overlay_split_bottom {
		bottom:-50%;
	}
	.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;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	overflow:hidden;
	float:left;
	margin:15px;
	border:5px solid #f6f6f6;
}
	.overlay_join img {
		width:100%;
		height:100%;
		border:none;
	}
	
	/* Right and left sides */
		
	.overlay_join .overlay_join_left,
	.overlay_join .overlay_join_right {
		position:absolute;
		width:50%;
		height:100%;
	}
	.overlay_join .overlay_join_left {
		left:-50%;
		/* 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%;
		/* 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%;
		/* 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%;
		/* 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;
	}
	.overlay_join:hover .overlay_join_right {
		right:0;
	}
	.overlay_join:hover .overlay_join_top {
		top:0;
	}
	.overlay_join:hover .overlay_join_bottom {
		bottom:0;
	}
	
	/* 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;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	overflow:hidden;
	float:left;
	margin:15px;
	border:5px solid #f6f6f6;
}
	.corner_ribbon img {
		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;
			width:150px;
			height:150px;
			background: url("../images/icons/zoom.png") no-repeat center center;
		}
	
	/* Top Left Ribbon */
	
	.corner_ribbon .corner_ribbon_top_left_white,
	.corner_ribbon .corner_ribbon_top_left_black {
		top:-150px;
		left:-150px;
		border-right: 150px solid transparent;
	}
		.corner_ribbon .corner_ribbon_top_left_white {
			border-top: 150px solid rgba(255, 255, 255, 0.7);
		}
		.corner_ribbon .corner_ribbon_top_left_black {
			border-top: 150px solid rgba(0, 0, 0, 0.7);
		}
	
	.corner_ribbon:hover .corner_ribbon_top_left_white,
	.corner_ribbon:hover .corner_ribbon_top_left_black {
		top:0;
		left:0;
	}

	.corner_ribbon .corner_ribbon_top_left_white .corner_zoom,
	.corner_ribbon .corner_ribbon_top_left_black .corner_zoom {
		top:-170px;
		left:-35px;
	}
	
	/* Bottom Left Ribbon */
	
	.corner_ribbon .corner_ribbon_bottom_left_white,
	.corner_ribbon .corner_ribbon_bottom_left_black {
		bottom:-150px;
		left:-150px;
		border-right: 150px solid transparent;
	}
		.corner_ribbon .corner_ribbon_bottom_left_white {
			border-bottom: 150px solid rgba(255, 255, 255, 0.7);
		}
		.corner_ribbon .corner_ribbon_bottom_left_black {
			border-bottom: 150px solid rgba(0, 0, 0, 0.7);
		}
	
	.corner_ribbon:hover .corner_ribbon_bottom_left_white,
	.corner_ribbon:hover .corner_ribbon_bottom_left_black {
		bottom:0;
		left:0;
	}

	.corner_ribbon .corner_ribbon_bottom_left_white .corner_zoom,
	.corner_ribbon .corner_ribbon_bottom_left_black .corner_zoom {
		bottom:-180px;
		left:-30px;
	}
	
	/* Top Right Ribbon */
	
	.corner_ribbon .corner_ribbon_top_right_white,
	.corner_ribbon .corner_ribbon_top_right_black {
		top:-150px;
		right:-150px;
		border-left: 150px solid transparent;
	}
		.corner_ribbon .corner_ribbon_top_right_white {
			border-top: 150px solid rgba(255, 255, 255, 0.7);
		}
		.corner_ribbon .corner_ribbon_top_right_black {
			border-top: 150px solid rgba(0, 0, 0, 0.7);
		}
	
	.corner_ribbon:hover .corner_ribbon_top_right_white,
	.corner_ribbon:hover .corner_ribbon_top_right_black {
		top:0;
		right:0;
	}

	.corner_ribbon .corner_ribbon_top_right_white .corner_zoom,
	.corner_ribbon .corner_ribbon_top_right_black .corner_zoom {
		top:-180px;
		right:-30px;
	}
	
	/* Bottom Right Ribbon */
	
	.corner_ribbon .corner_ribbon_bottom_right_white,
	.corner_ribbon .corner_ribbon_bottom_right_black {
		bottom:-150px;
		right:-150px;
		border-left: 150px solid transparent;
	}
		.corner_ribbon .corner_ribbon_bottom_right_white {
			border-bottom: 150px solid rgba(255, 255, 255, 0.7);
		}
		.corner_ribbon .corner_ribbon_bottom_right_black {
			border-bottom: 150px solid rgba(0, 0, 0, 0.7);
		}
	
	.corner_ribbon:hover .corner_ribbon_bottom_right_white,
	.corner_ribbon:hover .corner_ribbon_bottom_right_black {
		bottom:0;
		right:0;
	}

	.corner_ribbon .corner_ribbon_bottom_right_white .corner_zoom,
	.corner_ribbon .corner_ribbon_bottom_right_black .corner_zoom {
		bottom:-180px;
		right:-30px;
	}



/*  _______________________________________

	07 SLIDING SIDE PANEL
    _______________________________________  */



.sliding_panel_container {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	float:left;
	margin:15px;
	border:5px solid #f6f6f6;
}
.sliding_panel {
	position: absolute; 
	display: inline; 
	width:100%;
	height:100%;
}
	.sliding_panel img {
		width:100%;
		height:100%;
		position: relative; 
		z-index: 30; 
		float: left; 
		border:none;
	}
	
	.sliding_panel .info_panel {
		display: block; 
		position: absolute;
		padding:6px 10px 6px 10px;
		left: 20px; 
		width:180px;
		height:30px;
		overflow: hidden; 
		background:#F6F6F6;
		border: solid 1px #cccccc;
		/* Shadow */
		-webkit-box-shadow:0px 0px 4px #cccccc;
		-moz-box-shadow:0px 0px 4px #cccccc;
		box-shadow:0px 0px 4px #cccccc;
		/* Transition */
		-webkit-transition:bottom .25s linear;  
		-moz-transition:bottom .25s linear; 
		-o-transition:bottom .25s linear;  
		-ms-transition:bottom .25s linear;  
		transition:bottom .25s linear; 
	}
		.sliding_panel .info_panel p {
			font-size:11px;
			line-height:28px;
			margin:0;
		}
	.sliding_panel .panel_bottom {
		bottom: 0px;
	}
		.sliding_panel:hover .panel_bottom {
			bottom:-42px;
			/* Rounded Corners */
			-webkit-border-radius:0 0 6px 6px;
			-moz-border-radius:0 0 6px 6px;
			-o-border-radius:0 0 6px 6px;
			-ms-border-radius:0 0 6px 6px;
			-khtml-border-radius:0 0 6px 6px;
			border-radius:0 0 6px 6px;
		}
	.sliding_panel .panel_top {
		bottom: 100px;
	}
		.sliding_panel:hover .panel_top {
			bottom:148px;
			/* Rounded Corners */
			-webkit-border-radius:6px 6px 0 0;
			-moz-border-radius:6px 6px 0 0;
			-o-border-radius:6px 6px 0 0;
			-ms-border-radius:6px 6px 0 0;
			-khtml-border-radius:6px 6px 0 0;
			border-radius:6px 6px 0 0;
		}



/*  _______________________________________

	08 ELASTIC THUMBNAILS
    _______________________________________  */



.elastic_thumbnails,
.elastic_thumbnails_horizontal,
.elastic_thumbnails_vertical {
	position:relative;
	float:left;
	margin:15px;
	overflow:hidden;
	border:5px solid #f6f6f6;
	line-height:0; /* Fixes a padding issue */
}
	.elastic_thumbnails_horizontal {
		height:150px;
	}
	.elastic_thumbnails_vertical {
		width:240px;
	}
		.elastic_thumbnails img,
		.elastic_thumbnails_horizontal img,
		.elastic_thumbnails_vertical img {
			/* Modify the width and the height according to your images sizes */
			width:240px;
			height:150px;
			border:none;
			-webkit-transition: all 0.4s;
			-moz-transition: all 0.4s;
			-o-transition: all 0.4s;
			-ms-transition: all 0.4s;
			transition: all 0.4s;
		}
			.elastic_thumbnails img:hover,
			.elastic_thumbnails_horizontal img:hover,
			.elastic_thumbnails_vertical img:hover {
				/* Real image size, it appears cropped due to the width, height and hidden overflow properties of the parent container and image selector */
				width:500px;
				height:300px;
			}
			.elastic_thumbnails img:hover {
				/* Margins to modify which part of the image remains visible */
				margin-left:-40px;
				margin-top:-30px;
			}
			.elastic_thumbnails_horizontal img:hover {
				/* Margins to modify which part of the image remains visible */
				margin-left:-60px;
				margin-top:-70px;
			}
			.elastic_thumbnails_vertical img:hover {
				/* Margins to modify which part of the image remains visible */
				margin-left:-30px;
				margin-top:-20px;
			}



/*  _______________________________________

	09 FLIP IMAGE
    _______________________________________  */



.flip_image {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:220px;
	height:120px;
	float:left;
	margin:6px;
	overflow:hidden;
	border:5px solid #f6f6f6;
}
	.flip_image img {
		position:absolute;
		width:100%;
		height:100%;
		border:none;
	}
	.flip_image .flip_horizontal,
	.flip_image .flip_vertical,
	.flip_image .flip_info {
		/* Animation of the effect */
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		-ms-transition: all 0.4s;
		transition: all 0.4s;
	}
	.flip_image:hover .flip_horizontal {
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}
	.flip_image:hover .flip_vertical {
		-moz-transform: scaleY(-1);
		-o-transform: scaleY(-1);
		-webkit-transform: scaleY(-1);
		transform: scaleY(-1);
		filter: FlipV;
		-ms-filter: "FlipV";
	}
	.flip_image .flip_info {
		width:220px;
		height:110px;
		padding:7px;
		padding-right:8px;
		/* Opacity */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity:0;
	}
		.flip_image .flip_info p {
			font-size:11px;
			color:#333333;
			padding-right:5px;
		}
		.flip_image .flip_info .button {
	margin-top:-38px;
	}
		.flip_image:hover .flip_info {
			position:absolute;
			background:rgba(255, 255, 255, 1);
			z-index:9999;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			opacity:1;
		}



/*  _______________________________________

	10 LEVITATION SHADOW
    _______________________________________  */



.levitation_shadow {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	float:left;
	margin:15px 30px 15px 10px;
	background:#f6f6f6;
}
	.levitation_shadow img.levitation_image,
	.levitation_shadow img.levitation_image2 {
		position:absolute;
		width:100%;
		height:100%;
		border:5px solid #f6f6f6;
		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 img.levitation_image {
			top:-5px;
		}
		.levitation_shadow:hover img.levitation_image2 {
			top:-10px;
		}
	.levitation_shadow .bottom_shadow {
		/* Adjust sizes and position according to your needs */
		position:absolute;
		left:50%;
		margin:140px 0 0 -110px;
		width:220px;
		height:10px;
		/* Shadow */
		-webkit-border-radius:120px / 8px;
		-moz-border-radius:120px / 8px;
		-o-border-radius:120px / 8px;
		-ms-border-radius:120px / 8px;
		-khtml-border-radius:120px / 8px;
		border-radius:120px / 8px;
		-webkit-box-shadow:0 10px 10px #000;
		-moz-box-shadow:0 10px 10px #000;
		box-shadow:0 10px 10px #000;
	}



/*  _______________________________________

	11 LOMO EFFECT
    _______________________________________  */



.lomo_black,
.lomo_white,
.lomo_black_reversed,
.lomo_white_reversed {
	position: relative; 
	float:left;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	margin:15px;
	border:5px solid #f6f6f6;
}                    
	.lomo_black img,
	.lomo_white img,
	.lomo_black_reversed img,
	.lomo_white_reversed img {
		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;
	} 



/*  _______________________________________

	12 BOTTOM OVERLAY
    _______________________________________  */



.bottom_overlay {
	position: relative; 
	float:left;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	margin:15px;
	border:5px solid #f6f6f6;
	display: inline-block;
	overflow:hidden;
}                    
	.bottom_overlay img {
		display: block;
		width:100%;
		height:100%;
		border:none;
	}  
	.bottom_overlay .description_white,
	.bottom_overlay .description_black {
		/* Rounded background, adjust sizes and position according to your needs */
		position: absolute;
		width: 400px;
		height: 100px;
		left: -75px; 
		bottom: -55px;
		-moz-border-radius: 200px / 50px;
		-webkit-border-radius: 200px / 50px;
		border-radius: 200px / 50px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		-webkit-transition: opacity 0.4s;
		-moz-transition: opacity 0.4s;
		-o-transition: opacity 0.4s;
		-ms-transition: opacity 0.4s;
		transition: opacity 0.4s;
	}
	.bottom_overlay .description_white {
		background:#FFFFFF;
		background: rgba(255,255,255,0.8);
	}
	.bottom_overlay .description_black {
		background:#000000;
		background: rgba(0,0,0,0.8);
	}
		.description_white p,
		.description_black p {
			position: absolute;
			font-size:11px;
			line-height:28px;
			margin:0;
			left:85px;
			padding:10px;
		}
		.description_white {
			color:#000000;
		}
		.description_black {
			color:#FFFFFF;
		}
.bottom_overlay:hover .description_white,
.bottom_overlay:hover .description_black {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}



/*  _______________________________________

	13 IMAGE STACKS
    _______________________________________  */



.stack_image {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	float:left;
	margin:15px;
	overflow:hidden;
	border:5px solid #f6f6f6;
}
	.stack_image img {
		position:absolute;
		width:100%;
		height:100%;
		border:none;
	}
	.stack_image img.image_stack01,
	.stack_image img.image_stack02 {
		-webkit-transition: opacity 0.6s;
		-moz-transition: opacity 0.6s;
		-o-transition: opacity 0.6s;
		-ms-transition: opacity 0.6s;
		transition: opacity 0.6s;
	}
	.stack_image img.image_stack01 {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
	}
	.stack_image img.image_stack02 {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
	}
	.stack_image:hover img.image_stack01 {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
	}
	.stack_image:hover img.image_stack02 {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
	}



/*  _______________________________________

	14 ROUNDED IMAGES
    _______________________________________  */



.rounded_image {
	position: relative; 
	float:left;
	/* Modify the width and the height according to your images sizes,
	   For this effect, it is necessary to have the same width and height */
	width:150px;
	height:150px;
	margin:15px 30px 15px 15px;
}                    
	.rounded_image img.rounded_img,
	.rounded_image img.squared_img {
		width:100%;
		height:100%;
		display: block;
		border:5px solid #f6f6f6;
		-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 img.rounded_img,
	.rounded_image img.squared_img:hover {
		-webkit-border-radius:75px;
		-moz-border-radius:75px;
		-o-border-radius:75px;
		-ms-border-radius:75px;
		-khtml-border-radius:75px;
		border-radius:75px;
	}  
	.rounded_image img.rounded_img:hover,
	.rounded_image img.squared_img {
		-webkit-border-radius:0;
		-moz-border-radius:0;
		-o-border-radius:0;
		-ms-border-radius:0;
		-khtml-border-radius:0;
		border-radius:0;
	}  



/*  _______________________________________

	15 INFORMATION BOX
    _______________________________________  */



.information_box {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:240px;
	height:150px;
	float:left;
	margin:15px;
	border:5px solid #f6f6f6;
}
	.information_box img {
		width:100%;
		height:100%;
		border:none;
	}
.information_details {
	position: absolute;
	left: -10px; 
	top: -10px;
	padding: 20px;
	width: 220px;
	height:130px;
	/* Opacity */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	/* Fading Transition */
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-o-transition: all 0.6s;
	-ms-transition: all 0.6s;
	transition: all 0.6s;
}
.information_details p {
	font-size:11px;
	line-height:18px;
}
	.information_box:hover .information_details {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		filter: alpha(opacity=90);
		opacity: .9;
	}
.information_black {
	background:#000000;
}
.information_white {
	background:#DDDDDD;
}
	.information_black p {
		color: #ffffff;
	}
	.information_white p {
		color: #000000;
	}



/*  _______________________________________

	16 CONTINUOUS SLIDE
    _______________________________________  */



.continuous_slide {
	position:relative;
	width:240px;
	height:150px;
	border:5px solid #f6f6f6;
	overflow:hidden;
	float:left;
	margin:15px;
}
.hslide {
	width:400px;
	height:250px;
	position:absolute;
	border:none;
	top:-60px;
	left:0;
	animation: hslide 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation: hslide 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation: hslide 5s linear 2s infinite alternate;
}
	@keyframes hslide
	{
	0%   {left:0px;}
	100% {left:-160px;}
	}
	
	@-moz-keyframes hslide /* Firefox */
	{
	0%   {left:0px;}
	100% {left:-160px;}
	}
	
	@-webkit-keyframes hslide /* Safari and Chrome */
	{
	0%   {left:0px;}
	100% {left:-160px;}
	}
.vslide {
	width:400px;
	height:250px;
	position:absolute;
	border:none;
	top:0px;
	left:-40px;
	animation: vslide 8s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation: vslide 8s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation: vslide 8s linear 2s infinite alternate;
}
	@keyframes vslide
	{
	0%   {top:0px;}
	100% {top:-80px;}
	}
	
	@-moz-keyframes vslide /* Firefox */
	{
	0%   {top:0px;}
	100% {top:-80px;}
	}
	
	@-webkit-keyframes vslide /* Safari and Chrome */
	{
	0%   {top:0px;}
	100% {top:-80px;}
	}

.dslide {
	width:400px;
	height:250px;
	position:absolute;
	border:none;
	top:0;
	left:0;
	animation: dslide 6s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation: dslide 6s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation: dslide 6s linear 2s infinite alternate;
}
	@keyframes dslide
	{
	0%   {top:0px;left:0;}
	100% {top:-60px;left:-140px;}
	}
	
	@-moz-keyframes dslide /* Firefox */
	{
	0%   {top:0px;left:0;}
	100% {top:-60px;left:-140px;}
	}
	
	@-webkit-keyframes dslide /* Safari and Chrome */
	{
	0%   {top:0px;left:0;}
	100% {top:-60px;left:-140px;}
	}

.hslide:hover,
.vslide:hover,
.dslide:hover {
	animation-play-state: paused;
	/* Firefox: */
	-moz-animation-play-state: paused;
	/* Safari and Chrome: */
	-webkit-animation-play-state: paused;
}



/*  _______________________________________

	17 PERSPECTIVE IMAGES
    _______________________________________  */



.perspective {
	width:240px;
	height:150px;
	margin:15px 20px 15px 20px;
	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 img.perspective_right,
.perspective img.perspective_left {
	width:100%;
	height:100%;
	border:5px solid #f6f6f6;
	-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 img.perspective_right {
    -webkit-transform: rotateY(30deg);
}
.perspective img.perspective_left {
    -webkit-transform: rotateY(-30deg);
}
.perspective img:hover.perspective_right,
.perspective img:hover.perspective_left {
    -webkit-transform: rotateY(0deg);
}