/*Transition*/
.ui-viewport-transitioning .ui-panel {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ui-viewport-transitioning .ui-loading {
  -webkit-animation-name: none;
}
.in {
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
}
.out {
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 225ms;
}

/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideinfromleft {
  from { -webkit-transform: translateX(-100%); }
  to { -webkit-transform: translateX(0); }
}
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
  from { -webkit-transform: translateX(0); }
  to { -webkit-transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
  from { -webkit-transform: translateX(0); }
  to { -webkit-transform: translateX(100%); }
}
.slide.out, .slide.in {
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 350ms;
}
.slide.out {
  -webkit-animation-name: slideouttoleft;
  -webkit-transform: translateX(-100%);
}

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

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

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