.front-side { 
	transform: perspective(500px) rotateY(0deg);
	-webkit-transform: perspective(500px) rotateY(0deg);
	-moz-transform: perspective(500px) rotateY(0deg);
}

.back-side {
	transform: perspective(500px) rotateY(-180deg);
	-moz-transform: perspective(500px) rotateY(-180deg);
	-webkit-transform: perspective(500px) rotateY(-180deg);
	height: 0;

	background: #ffffff;
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
	border-radius: 5px;
	border: 3px solid #006dcc;
}

.front-side, .back-side { 
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

.front-side, .flipping { 
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.front-side.flipped { 
	transform: perspective(500px) rotateY(180deg);
	-moz-transform: perspective(500px) rotateY(180deg);
	-webkit-transform: perspective(500px) rotateY(180deg);

}

.back-side.flipped { 
	transform: perspective(500px) rotateY(0deg);
	-moz-transform: perspective(500px) rotateY(0deg);
	-webkit-transform: perspective(500px) rotateY(0deg);
}

.back-side h1 {
	font-size: 14px;
	font-weight: bold;
	background: #444444;
	background: -moz-linear-gradient(top, #444444, #222222);
	background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
}