/* entire container, keeps perspective */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d;

float: right; 
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
	}

.flip-container, .front, .back, .flip-container2, .front2, .back2{
width: 320px;
height: 360px;
}

.flip-container, .flip-container2{
margin: 0 10px 20px 10px;
}

/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative	
}

/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

-o-transition: 0.6s;
-o-transform-style: preserve-3d;

-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: #f0f0f4;
z-index: 2;
}

/* back, initially hidden pane */
.back {
background: lightblue;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

/*Flipper 2*/

/* entire container, keeps perspective */
.flip-container2 {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d;

float: right; 
}

/* flip the pane when hovered */
.flip-container2:hover .flipper2, .flip-container2.hover .flipper2 {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
	}


/* flip speed goes here */
.flipper2 {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative	
}

/* hide back of pane during swap */
.front2, .back2 {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

-o-transition: 0.6s;
-o-transform-style: preserve-3d;

-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front2 {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: #f0f0f4;
z-index: 2;
}

/* back, initially hidden pane */
.back2 {
background: lightblue;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

/*Some formatting for the sides */

.front div, .back div, .front2 div, .back2 div{
margin:10px;
}