.gamification-flip-container {
	position: relative;
	z-index: 1;
	
	perspective: 1000;
	-webkit-perspective: 1000;
}

.gamification-flip-container .card {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 1.0s linear;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 1.0s linear;
	-o-transform-style: preserve-3d;
	-o-transition: all 1.0s linear;
	-ms-transform-style: preserve-3d;
	-ms-transition: all 1.0s linear;
	
	transform-style: preserve-3d;
	transition: all 1.0s linear;
}

.gamification-flip-container:hover .card {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.gamification-flip-container .front,
.gamification-flip-container .back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;

	backface-visibility: hidden;
}

.gamification-flip-container .back {
	display: block;
	transform: rotateY(180deg);
	box-sizing: border-box;
	-webkit-transform: rotateY(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateY(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateY(180deg);
	-o-box-sizing: border-box;
	-ms-transform: rotateY(180deg);
	-ms-box-sizing: border-box;
}

.gamification-scratch-container .back {
	display: none;
	width: 100%;
	height: 100%;
	cursor:  crosshair;
	cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png) 20 20, crosshair;
}

.gamification-scratch-container .front {	
	width: 100%;
	height: 100%;
}


.gamification-flip-container .front,
.gamification-flip-container .back,
.gamification-scratch-container .front,
.gamification-scratch-container .back {
	background-repeat: no-repeat;
	background-position: center center;
}