/*
Code by : Hesam Gholami
Website : http://hesam.org
11/05/2013 - 14/08/1392
*/
@charset "utf-8";

body
{
	text-align:center;
	font-family:"Segoe UI", Tahoma, serif;
	font-size:20px;
}

.block
{
		
	display:inline-block;
	position: relative;
	width:400px;
	height:400px;
	margin:2cm;
	border:groove 1px rgba(100,100,100,0.37);
	background-color:#FFFFFF;
	text-shadow:0px 0px 3px rgba(70,70,70,1.00);
	
	-webkit-box-shadow:0 1px 4px rgba(142,142,142,0.91);
            box-shadow:0 1px 4px rgba(142,142,142,0.91);
			
}

.block .over
{
	z-index:1;
	
	opacity:0;
	position:absolute;
	left: 0px;
	background-color:rgba(79,240,212,0.9);
	text-shadow:0px 0px 4px rgba(70,70,70,.4);

}

.block:hover .over
{
	opacity:1;
	
}

/* Shadow */

.block:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 50px rgba(255,0,255,0.8);
    		box-shadow:0 0 50px rgba(255,0,255,0.8);
    bottom:0px;
	width:80%;
	height:50%;
    -moz-border-radius:100%;
    border-radius:100%;
	left:10%;
	right:10%;
	
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover:after
{
    -webkit-box-shadow:0 0 114px rgba(255,0,255,0.8);
    		box-shadow:0 0 114px rgba(255,0,255,0.8);
}

/* ToolTip */

[data-title]:after 
{
    content: attr(data-title);
	padding: 4px 8px;
	color: #333;
	position: absolute;
	left: 140px;
	top: -14px;
	width:100px;
	overflow:visible;
	z-index: 3;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 4px #222;
	-webkit-box-shadow: 0px 0px 4px #222;
	box-shadow: 0px 0px 4px #222;
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
	background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
	
	-webkit-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-o-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
	
	opacity:0;
}

[data-title]:hover:after 
{
    opacity:1;
	top: -44px;
}

/* Effects */

.zoomin
{
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover .zoomin
{
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
}

.zoomout
{
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover .zoomout
{
	-moz-transform: scale(.5);
	-webkit-transform: scale(.5);
	-o-transform: scale(.5);
	-ms-transform: scale(.5);
	transform: scale(.5);
}

.effect1
{
	height:400px;
	width:400px;
	top:0px;
	
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover .effect1
{
	height:400px;
	top:0px;
}

.effect2
{
	height:10px;
	width:400px;
	top:98%;
	overflow:hidden;
	
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}

.block:hover .effect2
{
	height:400px;
	top:0px;
}

.effect3
{
	height:400px;
	width:0px;
	top:0px;
	overflow:hidden;
	
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}

.block:hover .effect3
{
	width:400px;
}