@charset "utf-8";
/* CSS Document */

.area-panel {
	display:block;
	float:none;
	margin:0 auto;
	position:relative;
	/*margin:0px 26px 40px 2px;*/

	-webkit-box-shadow:inset 0px 1px 100px rgba(50, 50, 50, 0.80);
	-moz-box-shadow:   inset 0px 1px 100px rgba(50, 50, 50, 0.80);
	box-shadow:        inset 0px 1px 100px rgba(50, 50, 50, 0.80);

	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	height:100%;
	width:100%;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.area-panel .front {
	padding-top:18px;
	cursor: pointer;
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	height:100%;
	width:100%;
	background-color: #ffffff;
	text-align: center;

	-webkit-box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.40);
	-moz-box-shadow:    0px 1px 2px rgba(50, 50, 50, 0.40);
	box-shadow:         0px 1px 2px rgb	a(50, 50, 50, 0.40);
	
	border:1px solid #bbb;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;

	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.area-panel.flip .front {
	z-index: 900;
	background: #fff;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.area-panel .front:hover {
	-webkit-transform: rotateY(20deg);
	-moz-transform: rotateY(20deg);
	-webkit-box-shadow: 0px 0px 0px ;
	-moz-box-shadow:    0px 0px 0px ;
	box-shadow:         0px 0px 0px ;}
	
	
.area-panel .back {
	padding-top:18px;
	padding: 18px 40px 0px 40px;
	cursor: pointer;
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 800;
	height:100%;
	width:100%;
	background: #FFF;
	text-align: center;
	-webkit-box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.40);
	-moz-box-shadow:    0px 1px 2px rgba(50, 50, 50, 0.40);
	box-shadow:         0px 1px 2px rgb	a(50, 50, 50, 0.40);
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;

	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	opacity:60; 
}

.area-panel.flip .back {

	z-index: 1000;
	background: #FFF;

	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);/**/
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

/*	
.area-panel .back:hover {
	-webkit-transform: rotateY(-20deg);
	-moz-transform: rotateY(-20deg);}*/
	
/* -- X axis rotation for click panel -- */
.area-click .front {
	cursor: pointer;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
}
.area-click.flip .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}

.area-click .back {
	cursor: pointer;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
}
.area-click.flip .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
}/**/