.slide.out {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
	-moz-transform: translateX(-100%);
	-moz-animation-name: slideouttoleft;
}

.slide.in {
	-webkit-transform: translateX(0);
	-webkit-animation-name: fadein;
	-moz-transform: translateX(0);
	-moz-animation-name: fadein;
}

.slide.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
	-moz-transform: translateX(100%);
	-moz-animation-name: slideouttoright;
}

.slide.in.reverse {
	-webkit-transform: translateX(0);
	-webkit-animation-name: fadein;
	-moz-transform: translateX(0);
	-moz-animation-name: fadein;
}


/* slide up */

.slideup.out {
	-webkit-animation-name: fadeout;
	-moz-animation-name: fadeout;
	z-index: 0;
}

.slideup.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfrombottom;
	z-index: 10;
}

.slideup.in.reverse {
	z-index: 0;
	-webkit-animation-name: fadein;
	-moz-animation-name: fadein;
}

.slideup.out.reverse {
	z-index: 10;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-webkit-animation-name: slideouttobottom;
	-moz-animation-name: slideouttobottom;
}

/* slide down */

.slidedown.out {
	-webkit-animation-name: fadeout;
	-moz-animation-name: fadeout;
	z-index: 0;
}

.slidedown.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromtop;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfromtop;
	z-index: 10;
}

.slidedown.in.reverse {
	z-index: 0;
	-webkit-animation-name: fadein;
	-moz-animation-name: fadein;
}

.slidedown.out.reverse {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	z-index: 10;
	-webkit-animation-name: slideouttotop;
	-moz-animation-name: slideouttotop;
}

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideinfromright {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(0); }
}

@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideinfromleft {
    from { -moz-transform: translateX(-100%); }
    to { -moz-transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes slideouttoleft {
    from { -moz-transform: translateX(0); }
    to { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes slideouttoright {
    from { -moz-transform: translateX(0); }
    to { -moz-transform: translateX(100%); }
}

@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfromtop {
    from { -moz-transform: translateY(-100%); }
    to { -moz-transform: translateY(0); }
}

@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfrombottom {
    from { -moz-transform: translateY(100%); }
    to { -moz-transform: translateY(0); }
}

@-webkit-keyframes slideouttobottom {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes slideouttobottom {
    from { -moz-transform: translateY(0); }
    to { -moz-transform: translateY(100%); }
}

@-webkit-keyframes slideouttotop {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes slideouttotop {
    from { -moz-transform: translateY(0); }
    to { -moz-transform: translateY(-100%); }
}


/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */
.ui-unsupported-csstransform3d .slide.in,
.ui-unsupported-csstransform3d .slide.in.reverse,
.ui-unsupported-csstransform3d .slideup.in.reverse,
.ui-unsupported-csstransform3d .slidedown.in.reverse {
	z-index:10;
	-webkit-animation-name: nofade;
	-webkit-animation-duration: 500ms;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-name: nofade;
	-moz-animation-duration: 500ms;
	-moz-animation-timing-function: ease-in;
}

/* Also get rid of the fade out animation and use the same timing */
.ui-unsupported-csstransform3d .slideup.out,
.ui-unsupported-csstransform3d .slidedown.out
 {
	z-index:0;
	-webkit-animation-name: nofade;
	-webkit-animation-duration: 500ms;
	-webkit-animation-timing-function: ease-in;
	-moz-animation-name: nofade;
	-moz-animation-duration: 500ms;
	-moz-animation-timing-function: ease-in;
}

/* use similiar timing for slides that we don't need to exclude fades from */
.ui-unsupported-csstransform3d .slide.out,
.ui-unsupported-csstransform3d .slide.out.reverse,
.ui-unsupported-csstransform3d .slideup.in,
.ui-unsupported-csstransform3d .slideup.out.reverse,
.ui-unsupported-csstransform3d .slidedown.out.reverse,
.ui-unsupported-csstransform3d .slidedown.in {
	-webkit-animation-duration: 500ms;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-duration: 500ms;
	-moz-animation-timing-function: ease-out;
}