.floatL {float: left;}

.floatR {float: right;}

.flip-container {-webkit-perspective: 1000; width: 100%; margin-bottom: 20px;}

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


.front,
.back{
    width:100%;
    height: 200px;
    position: absolute;
    /*left: 0;
    top: 0;*/
    -webkit-backface-visibility: hidden; 
   /* text-shadow: 1px 1px #000;*/
    font-size:16px;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
    border-radius: 30px; 
}


/*======================================================*/

.back {-webkit-transform: rotateY(180deg); background: #061492; color: #bcd12f;}
.front {z-index: 2; background: #502274; color:#d9b0dd; }

.back2 {-webkit-transform: rotateY(180deg); background: #d717e7; color: #fff;}
.front2 {z-index: 2; background: #bbbeac; color: #000;}

.back3 {-webkit-transform: rotateY(180deg); background: #d6a336; color: #061492;}
.front3 {z-index: 2; background: #e9c0e9; color: #061492;}

.back4 {-webkit-transform: rotateY(180deg); background: #70764d; color:#d0e623;}
.front4 {z-index:2; background:#780016; color: #e9c0e9;}

/*======================================================*/

.flip-container .flipper,
.flip-container.hover .flipper { animation: flipY 11s infinite;}

.flip-container p { margin: 10px 0; text-align: center; }

.vertical-flip-container .back {-webkit-transform: rotateX(180deg);}

/*.vertical-flip-container .flipper,
.vertical-flip-container.hover .flipper {
	animation: flipX 8s initial;
}*/

.bookflip-container .flipper { -webkit-transform-origin: 0;}
 
@keyframes flipY{
0% {-webkit-transform: rotateY(0deg);}
20% {-webkit-transform: rotateY(180deg);}
40% {-webkit-transform: rotateY(180deg);}
60% {-webkit-transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(0deg);}
}