/*  _______________________________________

	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("../img/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("../img/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("../img/icons/zoom.png");
			}
			.overlay_join_right .join_favorite, .overlay_join_bottom .join_favorite {
				background-image: url("../img/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("../img/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;
	width:180px;
	height:355px;
	float:left;
	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:160px;
		height:335px;
		padding:10px;
		/* Opacity */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity:0;
	}
		.flip_info a{line-height:20px;font-size:12px;text-decoration:none;color:#2ea6ff;font-family: 'Roboto Slab', serif;}
		.flip_info p{line-height:20px;font-size:12px;color:#444;font-family: 'Roboto Slab', serif;}
		.flip_info a:hover {color:#f00;}
		.flip_info h3 {font-size:24px;color:#444;}
		.flip_info h4 {font-size:18px;color:#444;}
		.flip_info h3.g{text-align:left;}
		.flip_info h4.d{text-align:right;}
		.flip_image:hover .flip_info {
			position:absolute;
			background:rgba(255, 255, 255, 0.9);
			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;
	width:180px;
	height:355px;
	float:left;
	overflow:hidden;
	border:5px solid #f6f6f6;
}
	.information_box img {
		width:100%;
		height:100%;
		border:none;
	}
.information_details {
	position: absolute;
	left: 0px; 
	top: 0px;
	padding: 10px;
	width: 160px;
	height:335px;
	/* Opacity */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	/* 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 a{line-height:20px;font-size:12px;text-decoration:none;color:#2ea6ff;font-family: 'Roboto Slab', serif;}
		.information_details p{line-height:20px;font-size:12px;color:#999;font-family: 'Roboto Slab', serif;}
		.information_details a:hover {color:#f00;}
		.information_details h3 {font-size:24px;color:#eee;}
		.information_details h4 {font-size:18px;color:#aaa;}
		.information_details h3.g{text-align:left;}
		.information_details h4.d{text-align:right;}
		
	.information_box:hover .information_details {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		filter: alpha(opacity=80);
		opacity: .8;
	}
	
.information_black {
	background:#000000;
}
.information_white {
	background:#DDDDDD;
}


/*  _______________________________________

	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);
}