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

*/




/*  _______________________________________

	10 LEVITATION SHADOW
    _______________________________________  */



.levitation {
	position:relative;
	/* Modify the width and the height according to your images sizes */
	width:100px;
	height:100px;
	float:left;
	margin:10px 0px 0px 0px;
	background:#ffffff;
}
	.levitation img.levitation_image,
	.levitation 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:hover img.levitation {
			top:-5px;
		}
		.levitation:hover img.levitation {
			top:-10px;
		}
	.levitation .bottom {
		/* Adjust sizes and position according to your needs */
		position:absolute;
		left:50%;
		margin:90px 0 0 -40px;
		width:80px;
		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;
	}