/*https://davidwalsh.name/css-flip*/

@media screen and (min-width:1280px) {
    /* entire container, keeps perspective */
    .flip-container {
	    perspective: 1000px;
    }
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

    .flip-container, .front, .back {
	    height: 250px;
    }

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

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

	    position: relative;
	    top: 0;
	    left: 0;
    }

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

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

    .vertical.flip-container {
	    position: relative;
    }

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 250.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }
}
@media screen and (max-width:1280px) {
    .back {
        display: none;
    }
}