.main{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-perspective: 0;
    -moz-perspective: 0;
    perspective: 1200px;
}
.main>form {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
/*     -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d; */
}
.current-page{
    visibility: visible!important;
    z-index: 1;
}

.flipOutRight {
    visibility: visible!important;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: flipOutRight .5s both ease-in;
    -moz-transform-origin: 50% 50%;
    -moz-animation: flipOutRight .5s both ease-in;
    transform-origin: 50% 50%;
    animation: flipOutRight .5s both ease-in;
}
.flipInLeft {
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: flipInLeft .5s both ease-out;
    -moz-transform-origin: 50% 50%;
    -moz-animation: flipInLeft .5s both ease-out;
    transform-origin: 50% 50%;
    animation: flipInLeft .5s both ease-out;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    animation-delay: .5s;
}

@-webkit-keyframes flipOutRight {
    to { -webkit-transform: translateZ(0) rotateY(90deg); opacity: 0.2; }
}
@-moz-keyframes flipOutRight {
    to { -moz-transform: translateZ(0) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipOutRight {
    to { transform: translateZ(0) rotateY(90deg); opacity: 0.2; }
}
@-webkit-keyframes flipInLeft {
    from { -webkit-transform: translateZ(0) rotateY(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipInLeft {
    from { -moz-transform: translateZ(0) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipInLeft {
    from { transform: translateZ(0) rotateY(-90deg); opacity: 0.2; }
}