/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
	transform-style: preserve-3d;
	float: left;
	
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container {
	width: 21%;
	height: 310px;
	min-width: 230px;
	margin-left: 3%;

}
.front, .back {
	width: 100%;
	height: auto;
	box-shadow: 10px 10px 15px grey;
}
/* flip speed goes here */
.flipper {
	transition: 0.9s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.9s;
	transform-style: preserve-3d;

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

/*  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);
	}
@media only screen and (max-width: 1500px) {
.flip-container {
    width: 30%;
	height: 290px;
	margin-left: 12%;
	margin-bottom: 2px;
}
}
@media only screen and (max-width: 1100px) {
.flip-container {
    width: 40%;
	height: 250px;
    margin-left: 3%;
}
}
@media only screen and (max-width: 680px) {
.flip-container {
    width: 60%;
	height: 250px;
	margin-left: 18%;
}
}