.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; }
}