.flip-container {
    perspective: 1000px;
    transform-style: preserve-3d;

}
.flip-container:hover .back {
    transform: rotateY(0deg);
}
.flip-container:hover .front {
    transform: rotateY(180deg);
}
.flip-container, .front, .back {

}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;

}

.front {
    z-index: 2;
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(-180deg);
    background: teal;
    color: whitesmoke;
    text-align:left;
    line-height:1.4em;
    width: 300px;
    height: 200%;
}

.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);
}
.front {

}

.flip-text-block {
  position: absolute;
  background-color: teal;
  color: white;
  padding-left: 10px;
  padding-right: 126px;
}

.flip-column{
    float: left;
    width: 30%;
    padding: 10px;
    height: 350px;
    margin: 0 20px 20px 0;

}

.flip-row:after{
    content: "";
    display: table;
    clear: both;

}