/*
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.

body {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#212121;
	background:url("http://www.yamahabandproject.com/img/bg.gif");
}
#wrapper {width:1060px;margin:20px auto;}
.clear {clear:left;height:21px;line-height:21px;}
h1, h2, h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-weight:normal;
	color:#181818;
	margin-left:15px;
}
h1 {font-size:30px; margin-top:50px; margin-bottom:45px;}
h2 {font-size:21px; margin:18px 0 18px 15px;}


/*  _______________________________________

	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:180px;
	height:128px;
	border:3px solid #CECECE;
	 margin-right:23px;
}                    
	.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;
	}