/* entire container, keeps perspective */
.flip{float:left;}
.flipper {position: relative;width: 40%;height: 220px;margin:3%;;perspective: 1000px; transform-style: preserve-3d;}
.flipper .img100pc{width:100%; /* height:220px; */}
.flipper ul {margin:10px; -webkit-margin-before: 10px;  -webkit-margin-after:10px; -webkit-margin-start: 10px; -webkit-margin-end: 10px; -webkit-padding-start: 10px;}
.flipper ul li{color:#fff;font-size:24px; line-height: 20px;}
.flipper ul li a{color:#fff !important;text-decoration:none;font-size:12px;}
.flip-title {width:100%;height:50px;line-height:50px;background:#151b4f;color:#fff;font-size:32px;text-align:center;}
.back{background: #fff; width: 100%;height:220px; border: 2px solid #c30e2d;}

.front {z-index: 2;}
.front, .back {width: 100%;position: absolute;top: 0;left: 0;background: #c30e2d;backface-visibility: hidden;transform-style: preserve-3d;}


/*------BEGIN-----Using class flip_active/flip_deactive  by JQuery----------Single side flip-------*/

.flipX.flipper.flip_active .front, 
.flipX.flipper.flip_deactive .back {-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-webkit-transform: rotateX(180deg);transform: rotateX(180deg);
                                     -webkit-animation: flipX 0.5s;-moz-animation: flipX 0.5s;animation: flipXC0.5s;}
.flipX.flipper.flip_active .back, 
.flipX.flipper.flip_deactive .front {z-index: 950;-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);-webkit-transform: rotateX(0deg);transform: rotateX(0deg);
                                       -webkit-animation: flipX-inverse 0.5s;-moz-animation: flipX-inverse 0.5s;animation: flipX-inverse 0.5s; height:260px;}


/*-----END------Using class flip_active/flip_deactive  by JQuery-----------------*/
/*--------------------------------------------------------------------*/
/*----BEGIN-------Using hover--------flip both side---------*/

/*rotate vertically */
/*.flipX.flipper:hover .front,
.flipX.flipper .back {-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-webkit-transform: rotateX(180deg);transform: rotateX(180deg);
                      -webkit-animation: flipX 0.5s;-moz-animation: flipX 0.5s;animation: flipX 0.5s;}
.flipX.flipper .front,
.flipX.flipper:hover .back {-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);-webkit-transform: rotateX(0deg);transform: rotateX(0deg);
                            -webkit-animation: flipX-inverse 0.5s;-moz-animation: flipX-inverse 0.5s;animation: flipX-inverse 0.5s;}*/
/*rotate horizentaly*/
/*.flipY.flipper:hover .front,
.flipY.flipper .back {-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);transform: rotateY(180deg);
                      -webkit-animation: flipY 0.5s;-moz-animation: flipY 0.5s;animation: flipY 0.5s;}
.flipY.flipper .front,
.flipY.flipper:hover .back {-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-webkit-transform: rotateY(0deg);transform: rotateY(0deg);
                            -webkit-animation: flipY-inverse 0.5s;-moz-animation: flipY-inverse 0.5s;animation: flipY-inverse 0.5s;}*/

/*----END-------Using hover-----------------*/

  /*rotate X CSS*/
@-webkit-keyframes flipX {
    0% {-webkit-transform: perspective(800px) rotateX(0);}
    70% {-webkit-transform: perspective(800px) rotateX(200deg);}
    100% {-webkit-transform: perspective(800px) rotateX(180deg);}
}

@-moz-keyframes flipX {
    0% {-moz-transform: perspective(800px) rotateX(0);}
    70% {-moz-transform: perspective(800px) rotateX(200deg);}
    100% {-moz-transform: perspective(800px) rotateX(180deg);}
}

@keyframes flipX {
    0% {-webkit-transform: perspective(800px) rotateX(0);-moz-transform: perspective(800px) rotateX(0);-ms-transform: perspective(800px) rotateX(0);-o-transform: perspective(800px) rotateX(0);transform: perspective(800px) rotateX(0);}
    70% {-webkit-transform: perspective(800px) rotateX(200deg);-moz-transform: perspective(800px) rotateX(200deg);-ms-transform: perspective(800px) rotateX(200deg);-o-transform: perspective(800px) rotateX(200deg);transform: perspective(800px) rotateX(200deg);}
    100% {-webkit-transform: perspective(800px) rotateX(180deg);-moz-transform: perspective(800px) rotateX(180deg);-ms-transform: perspective(800px) rotateX(180deg);-o-transform: perspective(800px) rotateX(180deg);transform: perspective(800px) rotateX(180deg);}
}   

@-webkit-keyframes flipX-inverse {
    0% {-webkit-transform: perspective(800px) rotateX(-180deg);}
    70% {-webkit-transform: perspective(800px) rotateX(20deg);}
    100% {-webkit-transform: perspective(800px) rotateX(0);}
}

@-moz-keyframes flipX-inverse {
    0% {-moz-transform: perspective(800px) rotateX(-180deg);}
    70% {-moz-transform: perspective(800px) rotateX(20deg);}
    100% {-moz-transform: perspective(800px) rotateX(0);}
}

@keyframes flipX-inverse {
    0% {-webkit-transform: perspective(800px) rotateX(-180deg);-moz-transform: perspective(800px) rotateX(-180deg);-ms-transform: perspective(800px) rotateX(-180deg);-o-transform: perspective(800px) rotateX(-180deg);transform: perspective(800px) rotateX(-180deg);}
    70% {-webkit-transform: perspective(800px) rotateX(20deg);-moz-transform: perspective(800px) rotateX(20deg);-ms-transform: perspective(800px) rotateX(20deg);-o-transform: perspective(800px) rotateX(20deg);transform: perspective(800px) rotateX(20deg);}
    100% {-webkit-transform: perspective(800px) rotateX(0);-moz-transform: perspective(800px) rotateX(0);-ms-transform: perspective(800px) rotateX(0);-o-transform: perspective(800px) rotateX(0);transform: perspective(800px) rotateX(0);}
}


/*rotate Y CSS*/
@-webkit-keyframes flipY {
    0% {-webkit-transform: perspective(800px) rotateY(0);}
    70% {-webkit-transform: perspective(800px) rotateY(200deg);}
    100% {-webkit-transform: perspective(800px) rotateY(180deg);}
}

@-moz-keyframes flipY {
    0% {-moz-transform: perspective(800px) rotateY(0);}
    70% {-moz-transform: perspective(800px) rotateY(200deg);}
    100% {-moz-transform: perspective(800px) rotateY(180deg);}
}

@keyframes flipY {
    0% {-webkit-transform: perspective(800px) rotateY(0);-moz-transform: perspective(800px) rotateY(0);-ms-transform: perspective(800px) rotateY(0);-o-transform: perspective(800px) rotateY(0);transform: perspective(800px) rotateY(0);}
    70% {-webkit-transform: perspective(800px) rotateY(200deg);-moz-transform: perspective(800px) rotateY(200deg);-ms-transform: perspective(800px) rotateY(200deg);-o-transform: perspective(800px) rotateY(200deg);transform: perspective(800px) rotateY(200deg);}
    100% {-webkit-transform: perspective(800px) rotateY(180deg);-moz-transform: perspective(800px) rotateY(180deg);-ms-transform: perspective(800px) rotateY(180deg);-o-transform: perspective(800px) rotateY(180deg);transform: perspective(800px) rotateY(180deg);}
}

@-webkit-keyframes flipY-inverse {
    0% {-webkit-transform: perspective(800px) rotateY(-180deg);}
    70% {-webkit-transform: perspective(800px) rotateY(20deg);}
    100% {-webkit-transform: perspective(800px) rotateY(0);}
}

@-moz-keyframes flipY-inverse {
    0% {-moz-transform: perspective(800px) rotateY(-180deg);}
    70% {-moz-transform: perspective(800px) rotateY(20deg);}
    100% {-moz-transform: perspective(800px) rotateY(0);}
}

@keyframes flipY-inverse {
    0% {-webkit-transform: perspective(800px) rotateY(-180deg);-moz-transform: perspective(800px) rotateY(-180deg);-ms-transform: perspective(800px) rotateY(-180deg);-o-transform: perspective(800px) rotateY(-180deg);transform: perspective(800px) rotateY(-180deg);}
    70% {-webkit-transform: perspective(800px) rotateY(20deg);-moz-transform: perspective(800px) rotateY(20deg);-ms-transform: perspective(800px) rotateY(20deg);-o-transform: perspective(800px) rotateY(20deg);transform: perspective(800px) rotateY(20deg);}
    100% {-webkit-transform: perspective(800px) rotateY(0);-moz-transform: perspective(800px) rotateY(0);-ms-transform: perspective(800px) rotateY(0);-o-transform: perspective(800px) rotateY(0);transform: perspective(800px) rotateY(0);}
}