x-flipbox {
	display: block;
	position: relative;
}
x-card { 
	height: 100%;
	width: 100%;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 0.65s;  
	-moz-transition: -moz-transform 0.65s;  
	-ms-transition: -ms-transform 0.65s; 
	-o-transition: -o-transform 0.65s;  
	transition: transform 0.65s;
}
x-card > * {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: white;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}


x-flipbox.x-flip-direction-right x-card > *:last-child, 
x-flipbox.x-flip-direction-left x-card > *:last-child, 
x-card > *:last-child {  
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
x-flipbox.x-card-flipped.x-flip-direction-right > x-card, 
x-flipbox.x-card-flipped > x-card {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
x-flipbox.x-card-flipped.x-flip-direction-left > x-card {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}


x-flipbox.x-flip-direction-up x-card > *:last-child, 
x-flipbox.x-flip-direction-down x-card > *:last-child {  
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
x-flipbox.x-card-flipped.x-flip-direction-up > x-card {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
x-flipbox.x-card-flipped.x-flip-direction-down > x-card {
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	-ms-transform: rotateX(-180deg);
	-o-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}