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

.panel {
	display:block;
	width:287px;
	height:287px;
	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-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel .front {
	padding-top:18px;
	cursor: pointer;
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	width:290px;
	height:290px;
	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);
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	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;
}
.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;
}

.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 ;}
	
	
.panel .back {
	padding-top:18px;
	padding: 18px 40px 0px 40px;
	cursor: pointer;
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 800;
	width:287px;
	height:287px;
	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; 
}

.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;
}

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

.click .back {
	cursor: pointer;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
}
.click.flip .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
}/**/			
			
/* -- cosmetics -- */
.panel .pad {padding: 0 15px; }
.panel.flip .action {display: none; }
.block ol li {text-align: left; margin: 0 0 0 28px; }
.block .action {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; position: absolute; cursor: pointer; opacity: 0; -webkit-transition: opacity .2s linear; }
.block:hover .action {opacity: .7; }/**/
.circle div {border-radius: 100px; }
.circle div h2 {padding-top: 3em; text-align: center; }