/* entire container, keeps perspective */

.flip-container {
	perspective: 1000;
	-webkit-perspective: 1000;
}

/* flip the pane when hovered */
.flip-container.hover .flipper, .flip-container.flip .flipper{
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}
	
.flip-container, .front, .back {
	width: 95px;
	height: 130px;
	margin: 10px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	/*border-radius: 15px;*/
	width: 95px;
	height: 130px;
	border: 2px solid #FFF;
	box-shadow: 3px 3px 4px 0px #858585;
}


/* front pane, placed above back */
.front {
	z-index: 2;
	background: no-repeat scroll 0% 0% #0C6594;
	background-image: url('interrogation.png');
	background-size: 61%;
	background-position: center;
	/* for firefox 31 */
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	overflow: hidden;
	text-overflow-multiline: ellipsis;
	background: none repeat scroll 0% 0% #c2d9e4;
	margin-left: -13px;
	text-align: center;
	/*padding: 8px;*/
	/*width: 90%;
	height: 90%;*/
}


/**VERTICAL FLIP**/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
		-webkit-transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 75px; /* half of height */
		-webkit-transform-origin: 100% 75px;
	}

	.vertical.flip-container.flip .flipper {
		transform: rotateX(180deg);
		-webkit-transform: rotateX(180deg);
	}
	
@media handheld, only screen and (max-width: 565px) {
  
	.front, .back {
	/*border-radius: 12px;*/
	width: 75px;
	height: 103px;
	border: 2px solid #FFF;
	box-shadow: 3px 3px 4px 0px #858585;
}
.flip-container{width: 75px;
	height: 103px;}
}