.page{height:100%;width:100%;}
.page{position:absolute;left:0;top:0;}
.page.out{display:none;}
.in,.out{animation-fill-mode: both;-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;-moz-animation-fill-mode: both;-o-animation-fill-mode: both;}
.mask{height:100%;width:100%;background-color:rgba(255,255,255,.45);z-index:9;position:fixed;top:0px;bottom:0px;left:0px;right:0px;}
/* .loading{
    width:3px;height:3px;border-radius:100%;
    box-shadow: 0 -10px 0 1px currentColor, top, 1px expand
                10px 0px currentColor,right
                0 10px currentColor,bottom
                -10px 0 currentColor,left
                -7px -7px 0 .5px currentColor,left-top, 0.5px expand
                7px -7px 0 1.5px currentColor,right-top, 1.5px expand
                7px 7px currentColor,right-bottom
                -7px 7px currentColor;left-bottom
	-webkit-animation: spin 1s steps(8) infinite;animation: spin 1s steps(8) infinite;-ms-animation: spin 1s steps(8) infinite;-moz-animation: spin 1s steps(8) infinite;-o-animation: spin 1s steps(8) infinite;
	position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
} */
.slide.out,.slide.in{
	animation-timing-function: ease;animation-duration: 400ms;
	-webkit-animation-timing-function: ease;-webkit-animation-duration: 400ms;
	-ms-animation-timing-function: ease;-ms-animation-duration: 400ms;
	-moz-animation-timing-function: ease;-moz-animation-duration: 400ms;
	-o-animation-timing-function: ease;-o-animation-duration: 400ms;
}
.slide.in{animation-name: slideinfromright;-webkit-animation-name: slideinfromright;-ms-animation-name: slideinfromright;-moz-animation-name: slideinfromright;-o-animation-name: slideinfromright;}
.slide.out{animation-name: slideouttoleft;-webkit-animation-name: slideouttoleft;-ms-animation-name: slideouttoleft;-moz-animation-name: slideouttoleft;-o-animation-name: slideouttoleft;}
.slide.reverse.out{animation-name: slideouttoright;-webkit-animation-name: slideouttoright;-ms-animation-name: slideouttoright;-moz-animation-name: slideouttoright;-o-animation-name: slideouttoright;}
.slide.reverse.in{animation-name: slideinfromleft;-webkit-animation-name: slideinfromleft;-ms-animation-name: slideinfromleft;-moz-animation-name: slideinfromleft;-o-animation-name: slideinfromleft;}
@-webkit-keyframes slideinfromright{
    from{transform: translate3d(100%,0,0);-webkit-transform: translate3d(100%,0,0);-ms-transform: translate3d(100%,0,0);-moz-transform: translate3d(100%,0,0);-o-transform: translate3d(100%,0,0);}
    to{transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);}
}
@keyframes slideinfromright{
    from{transform: translateX(100%);-webkit-transform: translateX(100%);-ms-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);}
    to{transform: translateX(0);-webkit-transform: translateX(0);-ms-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);}
}
@-webkit-keyframes slideinfromleft{
    from{transform: translate3d(-100%,0,0);-webkit-transform: translate3d(-100%,0,0);-ms-transform: translate3d(-100%,0,0);-moz-transform: translate3d(-100%,0,0);-o-transform: translate3d(-100%,0,0);}
    to{transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);}
}
@keyframes slideinfromleft{
    from{transform: translateX(-100%);-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);}
    to{transform: translateX(0);-webkit-transform: translateX(0);-ms-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);}
}
@-webkit-keyframes slideouttoleft{
    from{transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);}
    to{transform: translate3d(-100%,0,0);-webkit-transform: translate3d(-100%,0,0);-ms-transform: translate3d(-100%,0,0);-moz-transform: translate3d(-100%,0,0);-o-transform: translate3d(-100%,0,0);}
}
@keyframes slideouttoleft{
    from{transform: translateX(0);-webkit-transform: translateX(0);-ms-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);}
    to{transform: translateX(-100%);-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);}
}
@-webkit-keyframes slideouttoright{
    from{transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);}
    to{transform: translate3d(100%,0,0);-webkit-transform: translate3d(100%,0,0);-ms-transform: translate3d(100%,0,0);-moz-transform: translate3d(100%,0,0);-o-transform: translate3d(100%,0,0);}
}
@keyframes slideouttoright{
    from{transform: translateX(0);-webkit-transform: translateX(0);-ms-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);}
    to{transform: translateX(100%);-webkit-transform: translateX(100%);-ms-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);}
}
@-webkit-keyframes spin{
     0%{transform: rotate(0deg);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);}
   100%{transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);}
}
@keyframes spin{
     0%{transform: rotate(0deg);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);}
    100%{transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);}
}