.flip-container {
    width: 320px;
    height: 225px;
    position: relative;
    margin: 2% auto;
    -webkit-perspective: 1300px;
    perspective: 1300px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-page {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
	width: 50%;
	height: 100%;
	left: 50%;
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

#flip-first,
#flip-first .flip-back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

#flip-first {
    z-index: 102;
}
#flip-second {
    z-index: 103;
    transition: transform 0.8s ease-in-out;
}
#flip-third .flip-content {
    width: 400px;
}
#flip-fourth {
    z-index: 101;
}

.flip-page > div,
.flip-outer,
.flip-content,
.flip-helper-class-to-make-bug-visbile {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-page > div {
	width: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-back {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.flip-outer {
	width: 100%;
	overflow: hidden;
    z-index: 999;
}

/* problematic class: `.content` */
.flip-content {
    width: 200%;
    background: transparent;
}


.flip-front .flip-content {
	left: -100%;
}



/* controls */
#flip-prev, #flip-next {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 999;
}
#flip-prev:hover, #flip-next:hover {
    background: rgba(0,0,0,0.05);
    cursor: pointer;
}
#flip-prev {
    top: 0;
    left: 0;
}
#flip-next {
    top: 0;
    left: 50%;
}

@media screen and ( max-width: 900px ) {
    .flip-container{
        width: 320px;
        height: 225px;
    }
}