/*  _______________________________________

	06 CORNER RIBBONS
    _______________________________________  */



.corner_ribbon {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:100%;
	height:auto;
	overflow:hidden;
	float:left;
	margin:0px;
	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;
	}