/* entire container, keeps perspective */
.flip-container {perspective: 1000px; transform-style: preserve-3d;} 

/*  UPDATED! flip the pane when hovered */
.flip-container .back-active {transform: rotateY(0deg) !important;}
.flip-container .front-no-active {transform: rotateY(180deg) !important;}
.flip-container, .front, .back {width: 100%; height:auto}

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

/* hide back of pane during swap */
.front {backface-visibility: hidden; transition: 0.6s; transform-style: preserve-3d; position: relative; top: 0; bottom:0}
.back {backface-visibility: hidden;	transition: 0.6s; transform-style: preserve-3d;	position: relative; top: 0; bottom:0; display:none}

/*  UPDATED! front pane, placed above back */
.front {z-index: 2;	transform: rotateY(0deg);}

/* back, initially hidden pane */
.back {transform: rotateY(-180deg);}

/* Some vertical flip updates */
.vertical.flip-container {position: relative;}
.vertical .back {transform: rotateX(180deg);}
.vertical.flip-container:hover .back {transform: rotateX(0deg);}
.vertical.flip-container:hover .front {transform: rotateX(180deg);}