/*  _______________________________________

	02 OVERLAY FADE
    _______________________________________  */



.overlay_fade {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:160px;
	height:125px;
	overflow:hidden;
	float:left;
	border: 1px solid #E2E2E2;
	margin: 5px;
	padding: 0;
	box-shadow: 2px 2px 0px #ccc;
}

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



.overlay_fade2 {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:325px;
	height:200px;
	overflow:hidden;
	float:left;
	margin-bottom: 10px;
	padding: 0;
	border-bottom: 7px solid #efa036;
}

	.overlay_fade2 img {
		width:100%;
		height:100%;
		border:none;
	}
	
	.overlay_fade2 .overlay_zoom2 {
		position:absolute;
		top:0px;
		width:100%;
		height:100%;
		background-image: url("../images/i28.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_fade2:hover .overlay_zoom2 {
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			opacity:1;
		}
	.overlay_fade2 .zoom_white2 {
		background-color:rgba(255, 255, 255, 0.7);
	}
	.overlay_fade2 .zoom_black2 {
		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:325px;
	height:200px;
	overflow:hidden;
	float:left;
	margin-bottom:10px;
}
	.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/info.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;
	}