/**
 * cover
 * required: slide.scss,wait.scss
 **/
html, body, .jqMini {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-size-adjust: none;
}
@media screen and (max-height: 416px) {
  html, body, .jqMini {
    min-height: 416px;
  }
}
@media screen and (max-height: 272px) {
  html, body, .jqMini {
    min-height: 272px;
  }
}
.jqMini {
  position: relative;
  width: 100%;
  height: 100%;
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: none;
  z-index: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.page.current {
  display: block;
  z-index: 1;
}
.in {
  overflow: hidden;
  height: 100%;
  width: 100%;
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
  display: block;
  z-index: 1;
}
.out {
  overflow: hidden;
  height: 100%;
  width: 100%;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  -ms-animation-timing-function: ease-in;
  -o-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration: 225ms;
  -moz-animation-duration: 225ms;
  -ms-animation-duration: 225ms;
  -o-animation-duration: 225ms;
  animation-duration: 225ms;
  display: block;
  z-index: 1;
  /**
 * wait
 **/
}
@-webkit-keyframes wait {
  from {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-moz-keyframes wait {
  from {
    -moz-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  to {
    -moz-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-ms-keyframes wait {
  from {
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  to {
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-o-keyframes wait {
  from {
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  to {
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes wait {
  /**
 * fadein/fadeout
 **/
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1, 1);
  }
}
.fade.out {
  opacity: 0;
  -webkit-animation-duration: 125ms;
  -moz-animation-duration: 125ms;
  -ms-animation-duration: 125ms;
  -o-animation-duration: 125ms;
  animation-duration: 125ms;
  -webkit-animation-name: fadeout;
  -moz-animation-name: fadeout;
  -ms-animation-name: fadeout;
  -o-animation-name: fadeout;
  animation-name: fadeout;
}
.fade.in {
  opacity: 1;
  -webkit-animation-duration: 225ms;
  -moz-animation-duration: 225ms;
  -ms-animation-duration: 225ms;
  -o-animation-duration: 225ms;
  animation-duration: 225ms;
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -ms-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
}
@-webkit-keyframes fadein {
  from {
    -webkit-opacity: 0;
    opacity: 0;
  }
  to {
    -webkit-opacity: 1;
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  from {
    -webkit-opacity: 1;
    opacity: 1;
  }
  to {
    -webkit-opacity: 0;
    opacity: 0;
  }
}
@-moz-keyframes fadein {
  from {
    -moz-opacity: 0;
    opacity: 0;
  }
  to {
    -moz-opacity: 1;
    opacity: 1;
  }
}
@-moz-keyframes fadeout {
  from {
    -moz-opacity: 1;
    opacity: 1;
  }
  to {
    -moz-opacity: 0;
    opacity: 0;
  }
}
@-ms-keyframes fadein {
  from {
    -ms-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
  }
  to {
    -ms-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-ms-keyframes fadeout {
  from {
    -ms-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
  }
  to {
    -ms-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
@-o-keyframes fadein {
  from {
    -o-opacity: 0;
    opacity: 0;
  }
  to {
    -o-opacity: 1;
    opacity: 1;
  }
}
@-o-keyframes fadeout {
  from {
    -o-opacity: 1;
    opacity: 1;
  }
  to {
    -o-opacity: 0;
    opacity: 0;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  /**
 * popup/popout
 **/
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.popup, .popdown {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.popup.in, .popdown.in.reverse {
  transform: scale(1);
  opacity: 1;
  -webkit-animation-name: popin;
  -moz-animation-name: popin;
  -ms-animation-name: popin;
  -o-animation-name: popin;
  animation-name: popin;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.popup.out, .popdown.out.reverse {
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.popup.in.reverse {
  transform: scale(1);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.popdown.in {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.popdown.out {
  z-index: 2;
  transform: scale(0.8);
  opacity: 0;
  -webkit-animation-name: popout;
  -moz-animation-name: popout;
  -ms-animation-name: popout;
  -o-animation-name: popout;
  animation-name: popout;
}
.popup.out.reverse {
  transform: scale(0.8);
  opacity: 0;
  -webkit-animation-name: popout;
  -moz-animation-name: popout;
  -ms-animation-name: popout;
  -o-animation-name: popout;
  animation-name: popout;
}
@-webkit-keyframes popin {
  from {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-opacity: 0;
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    opacity: 1;
  }
}
@-webkit-keyframes popout {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-opacity: 0;
    opacity: 0;
  }
}
@-moz-keyframes popin {
  from {
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    -moz-opacity: 0;
    opacity: 0;
  }
  to {
    -moz-transform: scale(1);
    transform: scale(1);
    -moz-opacity: 1;
    opacity: 1;
  }
}
@-moz-keyframes popout {
  from {
    -moz-transform: scale(1);
    transform: scale(1);
    -moz-opacity: 1;
    opacity: 1;
  }
  to {
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    -moz-opacity: 0;
    opacity: 0;
  }
}
@-ms-keyframes popin {
  from {
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -ms-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
  }
  to {
    -ms-transform: scale(1);
    transform: scale(1);
    -ms-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-ms-keyframes popout {
  from {
    -ms-transform: scale(1);
    transform: scale(1);
    -ms-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
  }
  to {
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -ms-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
@-o-keyframes popin {
  from {
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -o-opacity: 0;
    opacity: 0;
  }
  to {
    -o-transform: scale(1);
    transform: scale(1);
    -o-opacity: 1;
    opacity: 1;
  }
}
@-o-keyframes popout {
  from {
    -o-transform: scale(1);
    transform: scale(1);
    -o-opacity: 1;
    opacity: 1;
  }
  to {
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -o-opacity: 0;
    opacity: 0;
  }
}
@keyframes popin {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popout {
  /**
 * slide
 **/
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}
.slideleft.out, .slideleft.in, .slideright.out, .slideright.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.slideleft.out, .slideright.out.reverse {
  transform: translateX(-100%);
  -webkit-animation-name: slideouttoleft;
  -moz-animation-name: slideouttoleft;
  -ms-animation-name: slideouttoleft;
  -o-animation-name: slideouttoleft;
  animation-name: slideouttoleft;
}
.slideleft.in, .slideright.in.reverse {
  transform: translateX(0);
  -webkit-animation-name: slideinfromright;
  -moz-animation-name: slideinfromright;
  -ms-animation-name: slideinfromright;
  -o-animation-name: slideinfromright;
  animation-name: slideinfromright;
}
.slideleft.out.reverse, .slideright.out {
  transform: translateX(100%);
  -webkit-animation-name: slideouttoright;
  -moz-animation-name: slideouttoright;
  -ms-animation-name: slideouttoright;
  -o-animation-name: slideouttoright;
  animation-name: slideouttoright;
}
.slideleft.in.reverse, .slideright.in {
  transform: translateX(0);
  -webkit-animation-name: slideinfromleft;
  -moz-animation-name: slideinfromleft;
  -ms-animation-name: slideinfromleft;
  -o-animation-name: slideinfromleft;
  animation-name: slideinfromleft;
}
.slidefadeleft.out, .slidefaderight.out.reverse {
  transform: translateX(-100%);
  -webkit-animation-name: slideouttoleft;
  -moz-animation-name: slideouttoleft;
  -ms-animation-name: slideouttoleft;
  -o-animation-name: slideouttoleft;
  animation-name: slideouttoleft;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slidefadeleft.in, .slidefaderight.in.reverse {
  transform: translateX(0);
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -ms-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slidefadeleft.out.reverse, .slidefaderight.out {
  transform: translateX(100%);
  -webkit-animation-name: slideouttoright;
  -moz-animation-name: slideouttoright;
  -ms-animation-name: slideouttoright;
  -o-animation-name: slideouttoright;
  animation-name: slideouttoright;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slidefadeleft.in.reverse, .slidefaderight.in {
  transform: translateX(0);
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -ms-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slidefadeup.out, .slidefadedown.out.reverse {
  transform: translateY(-100%);
  -webkit-animation-name: slideouttotop;
  -moz-animation-name: slideouttotop;
  -ms-animation-name: slideouttotop;
  -o-animation-name: slideouttotop;
  animation-name: slideouttotop;
  -webkit-animation-duration: 225ms;
  -moz-animation-duration: 225ms;
  -ms-animation-duration: 225ms;
  -o-animation-duration: 225ms;
  animation-duration: 225ms;
}
.slidefadeup.in, .slidefadedown.in.reverse {
  transform: translateY(0);
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -ms-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slidefadeup.out.reverse, .slidefadedown.out {
  transform: translateY(100%);
  -webkit-animation-name: slideouttobottom;
  -moz-animation-name: slideouttobottom;
  -ms-animation-name: slideouttobottom;
  -o-animation-name: slideouttobottom;
  animation-name: slideouttobottom;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slidefadeup.in.reverse, .slidefadedown.in {
  transform: translateY(0);
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -ms-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
  /* slide down */
}
.slidedown.out {
  -webkit-animation-name: slideouttobottom;
  -moz-animation-name: slideouttobottom;
  -ms-animation-name: slideouttobottom;
  -o-animation-name: slideouttobottom;
  animation-name: slideouttobottom;
  -webkit-animation-duration: 250ms;
  -moz-animation-duration: 250ms;
  -ms-animation-duration: 250ms;
  -o-animation-duration: 250ms;
  animation-duration: 250ms;
}
.slidedown.in {
  transform: translateY(0);
  -webkit-animation-name: slideinfromtop;
  -moz-animation-name: slideinfromtop;
  -ms-animation-name: slideinfromtop;
  -o-animation-name: slideinfromtop;
  animation-name: slideinfromtop;
  -webkit-animation-duration: 250ms;
  -moz-animation-duration: 250ms;
  -ms-animation-duration: 250ms;
  -o-animation-duration: 250ms;
  animation-duration: 250ms;
}
.slidedown.in.reverse {
  -webkit-animation-name: slideinfrombottom;
  -moz-animation-name: slideinfrombottom;
  -ms-animation-name: slideinfrombottom;
  -o-animation-name: slideinfrombottom;
  animation-name: slideinfrombottom;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slidedown.out.reverse {
  transform: translateY(-100%);
  -webkit-animation-name: slideouttotop;
  -moz-animation-name: slideouttotop;
  -ms-animation-name: slideouttotop;
  -o-animation-name: slideouttotop;
  animation-name: slideouttotop;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
  /* slide up */
}
.slideup.out {
  -webkit-animation-name: slideouttotop;
  -moz-animation-name: slideouttotop;
  -ms-animation-name: slideouttotop;
  -o-animation-name: slideouttotop;
  animation-name: slideouttotop;
  -webkit-animation-duration: 250ms;
  -moz-animation-duration: 250ms;
  -ms-animation-duration: 250ms;
  -o-animation-duration: 250ms;
  animation-duration: 250ms;
}
.slideup.in {
  transform: translateY(0);
  -webkit-animation-name: slideinfrombottom;
  -moz-animation-name: slideinfrombottom;
  -ms-animation-name: slideinfrombottom;
  -o-animation-name: slideinfrombottom;
  animation-name: slideinfrombottom;
  -webkit-animation-duration: 250ms;
  -moz-animation-duration: 250ms;
  -ms-animation-duration: 250ms;
  -o-animation-duration: 250ms;
  animation-duration: 250ms;
}
.slideup.in.reverse {
  -webkit-animation-name: slideinfromtop;
  -moz-animation-name: slideinfromtop;
  -ms-animation-name: slideinfromtop;
  -o-animation-name: slideinfromtop;
  animation-name: slideinfromtop;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
.slideup.out.reverse {
  transform: translateY(100%);
  -webkit-animation-name: slideouttobottom;
  -moz-animation-name: slideouttobottom;
  -ms-animation-name: slideouttobottom;
  -o-animation-name: slideouttobottom;
  animation-name: slideouttobottom;
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -o-animation-duration: 200ms;
  animation-duration: 200ms;
}
@-webkit-keyframes slideinfromright {
  from {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes slideinfromleft {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes slideouttoleft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes slideouttoright {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-webkit-keyframes slideinfromtop {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slideouttotop {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes slideinfrombottom {
  from {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slideouttobottom {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@-moz-keyframes slideinfromright {
  from {
    -moz-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}
@-moz-keyframes slideinfromleft {
  from {
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}
@-moz-keyframes slideouttoleft {
  from {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-moz-keyframes slideouttoright {
  from {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -moz-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-moz-keyframes slideinfromtop {
  from {
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes slideouttotop {
  from {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-moz-keyframes slideinfrombottom {
  from {
    -moz-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes slideouttobottom {
  from {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -moz-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@-ms-keyframes slideinfromright {
  from {
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@-ms-keyframes slideinfromleft {
  from {
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@-ms-keyframes slideouttoleft {
  from {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-ms-keyframes slideouttoright {
  from {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-ms-keyframes slideinfromtop {
  from {
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-ms-keyframes slideouttotop {
  from {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-ms-keyframes slideinfrombottom {
  from {
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-ms-keyframes slideouttobottom {
  from {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@-o-keyframes slideinfromright {
  from {
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-o-keyframes slideinfromleft {
  from {
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-o-keyframes slideouttoleft {
  from {
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-o-keyframes slideouttoright {
  from {
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-o-keyframes slideinfromtop {
  from {
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  to {
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes slideouttotop {
  from {
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-o-keyframes slideinfrombottom {
  from {
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes slideouttobottom {
  from {
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes slideinfromright {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideinfromleft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideouttoleft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slideouttoright {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes slideinfromtop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideouttotop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slideinfrombottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideouttobottom {
  /**
 * flip
 **/
  /* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
.viewport-flip {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  position: absolute;
}
.flipleft, .flipright {
  -webkit-animation-duration: 225ms;
  -moz-animation-duration: 225ms;
  -ms-animation-duration: 225ms;
  -o-animation-duration: 225ms;
  animation-duration: 225ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when visibility:hidden is used. */
  transform: translateX(0);
}
.flipleft.out, .flipright.out.reverse {
  transform: rotateY(-90deg) scale(0.9);
  -webkit-animation-name: flipouttoleft;
  -moz-animation-name: flipouttoleft;
  -ms-animation-name: flipouttoleft;
  -o-animation-name: flipouttoleft;
  animation-name: flipouttoleft;
}
.flipleft.in, .flipright.in.reverse {
  -webkit-animation-name: flipintoright;
  -moz-animation-name: flipintoright;
  -ms-animation-name: flipintoright;
  -o-animation-name: flipintoright;
  animation-name: flipintoright;
}
.flipleft.out.reverse, .flipright.out {
  transform: rotateY(90deg) scale(0.9);
  -webkit-animation-name: flipouttoright;
  -moz-animation-name: flipouttoright;
  -ms-animation-name: flipouttoright;
  -o-animation-name: flipouttoright;
  animation-name: flipouttoright;
}
.flipleft.in.reverse, .flipright.in {
  -webkit-animation-name: flipintoleft;
  -moz-animation-name: flipintoleft;
  -ms-animation-name: flipintoleft;
  -o-animation-name: flipintoleft;
  animation-name: flipintoleft;
}
.flipup, .flipdown {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation-duration: 225ms;
  -moz-animation-duration: 225ms;
  -ms-animation-duration: 225ms;
  -o-animation-duration: 225ms;
  animation-duration: 225ms;
}
.flipup.out, .flipdown.out.reverse {
  transform: rotateX(-90deg) scale(0.9);
  -webkit-animation-name: flipouttotop;
  -moz-animation-name: flipouttotop;
  -ms-animation-name: flipouttotop;
  -o-animation-name: flipouttotop;
  animation-name: flipouttotop;
}
.flipup.in, .flipdown.in.reverse {
  -webkit-animation-name: flipintotop;
  -moz-animation-name: flipintotop;
  -ms-animation-name: flipintotop;
  -o-animation-name: flipintotop;
  animation-name: flipintotop;
}
.flipup.out.reverse, .flipdown.out {
  transform: rotateX(90deg) scale(0.9);
  -webkit-animation-name: flipouttobottom;
  -moz-animation-name: flipouttobottom;
  -ms-animation-name: flipouttobottom;
  -o-animation-name: flipouttobottom;
  animation-name: flipouttobottom;
}
.flipup.in.reverse, .flipdown.in {
  -webkit-animation-name: flipintobottom;
  -moz-animation-name: flipintobottom;
  -ms-animation-name: flipintobottom;
  -o-animation-name: flipintobottom;
  animation-name: flipintobottom;
}
@-webkit-keyframes flipouttoleft {
  from {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-webkit-keyframes flipouttoright {
  from {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-webkit-keyframes flipintoleft {
  from {
    -webkit-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-webkit-keyframes flipintoright {
  from {
    -webkit-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-webkit-keyframes flipouttotop {
  from {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -webkit-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
}
@-webkit-keyframes flipouttobottom {
  from {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -webkit-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
}
@-webkit-keyframes flipintobottom {
  from {
    -webkit-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
  to {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-webkit-keyframes flipintotop {
  from {
    -webkit-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
  to {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-moz-keyframes flipouttoleft {
  from {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -moz-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-moz-keyframes flipouttoright {
  from {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -moz-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-moz-keyframes flipintoleft {
  from {
    -moz-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-moz-keyframes flipintoright {
  from {
    -moz-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-moz-keyframes flipouttotop {
  from {
    -moz-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -moz-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
}
@-moz-keyframes flipouttobottom {
  from {
    -moz-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -moz-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
}
@-moz-keyframes flipintobottom {
  from {
    -moz-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
  to {
    -moz-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-moz-keyframes flipintotop {
  from {
    -moz-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
  to {
    -moz-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-ms-keyframes flipouttoleft {
  from {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -ms-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-ms-keyframes flipouttoright {
  from {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -ms-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-ms-keyframes flipintoleft {
  from {
    -ms-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-ms-keyframes flipintoright {
  from {
    -ms-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-ms-keyframes flipouttotop {
  from {
    -ms-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -ms-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
}
@-ms-keyframes flipouttobottom {
  from {
    -ms-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -ms-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
}
@-ms-keyframes flipintobottom {
  from {
    -ms-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
  to {
    -ms-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-ms-keyframes flipintotop {
  from {
    -ms-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
  to {
    -ms-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-o-keyframes flipouttoleft {
  from {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -o-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-o-keyframes flipouttoright {
  from {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -o-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-o-keyframes flipintoleft {
  from {
    -o-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-o-keyframes flipintoright {
  from {
    -o-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-o-keyframes flipouttotop {
  from {
    -o-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -o-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
}
@-o-keyframes flipouttobottom {
  from {
    -o-transform: rotateX(0);
    transform: rotateX(0);
  }
  to {
    -o-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
}
@-o-keyframes flipintobottom {
  from {
    -o-transform: rotateX(-90deg) scale(0.9);
    transform: rotateX(-90deg) scale(0.9);
  }
  to {
    -o-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-o-keyframes flipintotop {
  from {
    -o-transform: rotateX(90deg) scale(0.9);
    transform: rotateX(90deg) scale(0.9);
  }
  to {
    -o-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@keyframes flipouttoleft {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-90deg) scale(0.9);
  }
}
@keyframes flipouttoright {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(90deg) scale(0.9);
  }
}
@keyframes flipintoleft {
  from {
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    transform: rotateY(0);
  }
}
@keyframes flipintoright {
  from {
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    transform: rotateY(0);
  }
}
@keyframes flipouttotop {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(-90deg) scale(0.9);
  }
}
@keyframes flipouttobottom {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(90deg) scale(0.9);
  }
}
@keyframes flipintobottom {
  from {
    transform: rotateX(-90deg) scale(0.9);
  }
  to {
    transform: rotateX(0);
  }
}
@keyframes flipintotop {
  /**
 * turn
 **/
  /* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
  from {
    transform: rotateX(90deg) scale(0.9);
  }
  to {
    transform: rotateX(0);
  }
}
.viewport-turn {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  position: absolute;
}
.turnleft, .turnright {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when visibility:hidden is used. */
  transform: translateX(0);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  -o-transform-origin: 0;
  transform-origin: 0;
  -webkit-animation-duration: 250ms;
  -moz-animation-duration: 250ms;
  -ms-animation-duration: 250ms;
  -o-animation-duration: 250ms;
  animation-duration: 250ms;
}
.turnleft.out, .turnright.out.reverse {
  transform: rotateY(-90deg) scale(0.9);
  -webkit-animation-name: flipouttoleft;
  -moz-animation-name: flipouttoleft;
  -ms-animation-name: flipouttoleft;
  -o-animation-name: flipouttoleft;
  animation-name: flipouttoleft;
}
.turnleft.in, .turnright.in.reverse {
  -webkit-animation-name: flipintoright;
  -moz-animation-name: flipintoright;
  -ms-animation-name: flipintoright;
  -o-animation-name: flipintoright;
  animation-name: flipintoright;
}
.turnleft.out.reverse, .turnright.out {
  transform: rotateY(90deg) scale(0.9);
  -webkit-animation-name: flipouttoright;
  -moz-animation-name: flipouttoright;
  -ms-animation-name: flipouttoright;
  -o-animation-name: flipouttoright;
  animation-name: flipouttoright;
}
.turnleft.in.reverse, .turnright.in {
  -webkit-animation-name: flipintoleft;
  -moz-animation-name: flipintoleft;
  -ms-animation-name: flipintoleft;
  -o-animation-name: flipintoleft;
  animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
  from {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-webkit-keyframes flipouttoright {
  from {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-webkit-keyframes flipintoleft {
  from {
    -webkit-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-webkit-keyframes flipintoright {
  from {
    -webkit-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-moz-keyframes flipouttoleft {
  from {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -moz-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-moz-keyframes flipouttoright {
  from {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -moz-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-moz-keyframes flipintoleft {
  from {
    -moz-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-moz-keyframes flipintoright {
  from {
    -moz-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-ms-keyframes flipouttoleft {
  from {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -ms-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-ms-keyframes flipouttoright {
  from {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -ms-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-ms-keyframes flipintoleft {
  from {
    -ms-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-ms-keyframes flipintoright {
  from {
    -ms-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-o-keyframes flipouttoleft {
  from {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -o-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
}
@-o-keyframes flipouttoright {
  from {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -o-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
}
@-o-keyframes flipintoleft {
  from {
    -o-transform: rotateY(-90deg) scale(0.9);
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-o-keyframes flipintoright {
  from {
    -o-transform: rotateY(90deg) scale(0.9);
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@keyframes flipouttoleft {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-90deg) scale(0.9);
  }
}
@keyframes flipouttoright {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(90deg) scale(0.9);
  }
}
@keyframes flipintoleft {
  from {
    transform: rotateY(-90deg) scale(0.9);
  }
  to {
    transform: rotateY(0);
  }
}
@keyframes flipintoright {
  /**
 * flow
 **/
  from {
    transform: rotateY(90deg) scale(0.9);
  }
  to {
    transform: rotateY(0);
  }
}
.flowleft, .flowright {
  -webkit-transform-origin: 50% 30%;
  -moz-transform-origin: 50% 30%;
  -ms-transform-origin: 50% 30%;
  -o-transform-origin: 50% 30%;
  transform-origin: 50% 30%;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  -ms-box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  -o-box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  box-shadow: 0 0 20px rgba(0, 0, 0, .4);
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.flowleft.out, .flowright.out.reverse {
  transform: translateX(-100%) scale(0.7);
  -webkit-animation-name: flowouttoleft;
  -moz-animation-name: flowouttoleft;
  -ms-animation-name: flowouttoleft;
  -o-animation-name: flowouttoleft;
  animation-name: flowouttoleft;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
}
.flowleft.in, .flowright.in.reverse {
  transform: translateX(0) scale(1);
  -webkit-animation-name: flowinfromright;
  -moz-animation-name: flowinfromright;
  -ms-animation-name: flowinfromright;
  -o-animation-name: flowinfromright;
  animation-name: flowinfromright;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
}
.flowleft.out.reverse, .flowright.out {
  transform: translateX(100%);
  -webkit-animation-name: flowouttoright;
  -moz-animation-name: flowouttoright;
  -ms-animation-name: flowouttoright;
  -o-animation-name: flowouttoright;
  animation-name: flowouttoright;
}
.flowleft.in.reverse, .flowright.in {
  -webkit-animation-name: flowinfromleft;
  -moz-animation-name: flowinfromleft;
  -ms-animation-name: flowinfromleft;
  -o-animation-name: flowinfromleft;
  animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
  0% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
  }
  45%, 55% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
  }
  100% {
    -webkit-transform: translateX(-100%) scale(0.7);
    transform: translateX(-100%) scale(0.7);
  }
}
@-webkit-keyframes flowouttoright {
  0% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
  }
  45%, 55% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
  }
  100% {
    -webkit-transform: translateX(100%) scale(0.7);
    transform: translateX(100%) scale(0.7);
  }
}
@-webkit-keyframes flowinfromleft {
  0% {
    -webkit-transform: translateX(-100%) scale(0.7);
    transform: translateX(-100%) scale(0.7);
  }
  45%, 55% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
  }
}
@-webkit-keyframes flowinfromright {
  0% {
    -webkit-transform: translateX(100%) scale(0.7);
    transform: translateX(100%) scale(0.7);
  }
  45%, 55% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
  }
}
.coverleft.out, .coverleft.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350m;
  -moz-animation-duration: 350m;
  -ms-animation-duration: 350m;
  -o-animation-duration: 350m;
  animation-duration: 350m;
}
.coverleft.out {
  transform: translateX(0);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.coverleft.in {
  transform: translateX(100%);
  -webkit-animation-name: slideinfromright;
  -moz-animation-name: slideinfromright;
  -ms-animation-name: slideinfromright;
  -o-animation-name: slideinfromright;
  animation-name: slideinfromright;
}
.coverleft.out.reverse {
  transform: translateX(100%);
  -webkit-animation-name: slideouttoright;
  -moz-animation-name: slideouttoright;
  -ms-animation-name: slideouttoright;
  -o-animation-name: slideouttoright;
  animation-name: slideouttoright;
}
.coverleft.in.reverse {
  transform: translateX(0);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.coverright.out, .coverright.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.coverright.out {
  transform: translateX(-100%);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.coverright.in {
  transform: translateX(0);
  -webkit-animation-name: slideinfromleft;
  -moz-animation-name: slideinfromleft;
  -ms-animation-name: slideinfromleft;
  -o-animation-name: slideinfromleft;
  animation-name: slideinfromleft;
}
.coverright.out.reverse {
  transform: translateX(100%);
  -webkit-animation-name: slideouttoleft;
  -moz-animation-name: slideouttoleft;
  -ms-animation-name: slideouttoleft;
  -o-animation-name: slideouttoleft;
  animation-name: slideouttoleft;
}
.coverright.in.reverse {
  transform: translateX(0);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.coverup.out, .coverup.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.coverup.out {
  transform: translateY(0);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.coverup.in {
  transform: translateY(0);
  -webkit-animation-name: slideinfromtop;
  -moz-animation-name: slideinfromtop;
  -ms-animation-name: slideinfromtop;
  -o-animation-name: slideinfromtop;
  animation-name: slideinfromtop;
}
.coverup.out.reverse {
  transform: translateY(100%);
  -webkit-animation-name: slideouttotop;
  -moz-animation-name: slideouttotop;
  -ms-animation-name: slideouttotop;
  -o-animation-name: slideouttotop;
  animation-name: slideouttotop;
}
.coverup.in.reverse {
  transform: translateY(0);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.coverdown.out, .coverdown.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.coverdown.out {
  transform: translateY(0);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
}
.coverdown.in {
  transform: translateY(0);
  -webkit-animation-name: slideinfrombottom;
  -moz-animation-name: slideinfrombottom;
  -ms-animation-name: slideinfrombottom;
  -o-animation-name: slideinfrombottom;
  animation-name: slideinfrombottom;
}
.coverdown.out.reverse {
  transform: translateY(100%);
  -webkit-animation-name: slideouttobottom;
  -moz-animation-name: slideouttobottom;
  -ms-animation-name: slideouttobottom;
  -o-animation-name: slideouttobottom;
  animation-name: slideouttobottom;
}
.coverdown.in.reverse {
  transform: translateY(0);
  -webkit-animation-name: wait;
  -moz-animation-name: wait;
  -ms-animation-name: wait;
  -o-animation-name: wait;
  animation-name: wait;
  /**
 * shuffle
 * required: slide.cscc
 **/
}
.shuffleright.out, .shuffleright.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.shuffleright.out {
  transform: translateX(-100%);
  -webkit-animation-name: slideouttoright;
  -moz-animation-name: slideouttoright;
  -ms-animation-name: slideouttoright;
  -o-animation-name: slideouttoright;
  animation-name: slideouttoright;
}
.shuffleright.in {
  transform: translateX(0);
  -webkit-animation-name: slideinfromright;
  -moz-animation-name: slideinfromright;
  -ms-animation-name: slideinfromright;
  -o-animation-name: slideinfromright;
  animation-name: slideinfromright;
}
.shuffleright.out.reverse {
  transform: translateX(100%);
  -webkit-animation-name: slideouttoright;
  -moz-animation-name: slideouttoright;
  -ms-animation-name: slideouttoright;
  -o-animation-name: slideouttoright;
  animation-name: slideouttoright;
}
.shuffleright.in.reverse {
  transform: translateX(0);
  -webkit-animation-name: slideinfromright;
  -moz-animation-name: slideinfromright;
  -ms-animation-name: slideinfromright;
  -o-animation-name: slideinfromright;
  animation-name: slideinfromright;
}
.shuffleleft.out, .shuffleleft.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.shuffleleft.out {
  transform: translateX(-100%);
  -webkit-animation-name: slideouttoleft;
  -moz-animation-name: slideouttoleft;
  -ms-animation-name: slideouttoleft;
  -o-animation-name: slideouttoleft;
  animation-name: slideouttoleft;
}
.shuffleleft.in {
  transform: translateX(0);
  -webkit-animation-name: slideinfromleft;
  -moz-animation-name: slideinfromleft;
  -ms-animation-name: slideinfromleft;
  -o-animation-name: slideinfromleft;
  animation-name: slideinfromleft;
}
.shuffleleft.out.reverse {
  transform: translateX(100%);
  -webkit-animation-name: slideouttoleft;
  -moz-animation-name: slideouttoleft;
  -ms-animation-name: slideouttoleft;
  -o-animation-name: slideouttoleft;
  animation-name: slideouttoleft;
}
.shuffleleft.in.reverse {
  transform: translateX(0);
  -webkit-animation-name: slideinfromleft;
  -moz-animation-name: slideinfromleft;
  -ms-animation-name: slideinfromleft;
  -o-animation-name: slideinfromleft;
  animation-name: slideinfromleft;
}
.shuffleup.out, .shuffleup.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.shuffleup.out {
  transform: translateY(-100%);
  -webkit-animation-name: slideouttotop;
  -moz-animation-name: slideouttotop;
  -ms-animation-name: slideouttotop;
  -o-animation-name: slideouttotop;
  animation-name: slideouttotop;
}
.shuffleup.in {
  transform: translateY(0);
  -webkit-animation-name: slideinfromtop;
  -moz-animation-name: slideinfromtop;
  -ms-animation-name: slideinfromtop;
  -o-animation-name: slideinfromtop;
  animation-name: slideinfromtop;
}
.shuffleup.out.reverse {
  transform: translateY(100%);
  -webkit-animation-name: slideouttotop;
  -moz-animation-name: slideouttotop;
  -ms-animation-name: slideouttotop;
  -o-animation-name: slideouttotop;
  animation-name: slideouttotop;
}
.shuffleup.in.reverse {
  transform: translateY(0);
  -webkit-animation-name: slideinfromtop;
  -moz-animation-name: slideinfromtop;
  -ms-animation-name: slideinfromtop;
  -o-animation-name: slideinfromtop;
  animation-name: slideinfromtop;
}
.shuffledown.out, .shuffledown.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.shuffledown.out {
  transform: translateY(-100%);
  -webkit-animation-name: slideouttobottom;
  -moz-animation-name: slideouttobottom;
  -ms-animation-name: slideouttobottom;
  -o-animation-name: slideouttobottom;
  animation-name: slideouttobottom;
}
.shuffledown.in {
  transform: translateY(0);
  -webkit-animation-name: slideinfrombottom;
  -moz-animation-name: slideinfrombottom;
  -ms-animation-name: slideinfrombottom;
  -o-animation-name: slideinfrombottom;
  animation-name: slideinfrombottom;
}
.shuffledown.out.reverse {
  transform: translateY(100%);
  -webkit-animation-name: slideouttobottom;
  -moz-animation-name: slideouttobottom;
  -ms-animation-name: slideouttobottom;
  -o-animation-name: slideouttobottom;
  animation-name: slideouttobottom;
}
.shuffledown.in.reverse {
  transform: translateY(0);
  -webkit-animation-name: slideinfrombottom;
  -moz-animation-name: slideinfrombottom;
  -ms-animation-name: slideinfrombottom;
  -o-animation-name: slideinfrombottom;
  animation-name: slideinfrombottom;
  /**
 * shrink
 **/
}
.shrink.out, .shrink.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.shrink.out {
  transform: scale(0);
  -webkit-animation-name: scaleout;
  -moz-animation-name: scaleout;
  -ms-animation-name: scaleout;
  -o-animation-name: scaleout;
  animation-name: scaleout;
}
.shrink.in {
  transform: scale(1);
  -webkit-animation-name: scalein;
  -moz-animation-name: scalein;
  -ms-animation-name: scalein;
  -o-animation-name: scalein;
  animation-name: scalein;
}
.shrink.out.reverse {
  transform: scale(0);
  -webkit-animation-name: scaleout;
  -moz-animation-name: scaleout;
  -ms-animation-name: scaleout;
  -o-animation-name: scaleout;
  animation-name: scaleout;
}
.shrink.in.reverse {
  transform: scale(1);
  -webkit-animation-name: scalein;
  -moz-animation-name: scalein;
  -ms-animation-name: scalein;
  -o-animation-name: scalein;
  animation-name: scalein;
}
@-webkit-keyframes scalein {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes scaleout {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
@-moz-keyframes scalein {
  from {
    -moz-transform: scale(0);
    transform: scale(0);
  }
  to {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes scaleout {
  from {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  to {
    -moz-transform: scale(0);
    transform: scale(0);
  }
}
@-ms-keyframes scalein {
  from {
    -ms-transform: scale(0);
    transform: scale(0);
  }
  to {
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes scaleout {
  from {
    -ms-transform: scale(1);
    transform: scale(1);
  }
  to {
    -ms-transform: scale(0);
    transform: scale(0);
  }
}
@-o-keyframes scalein {
  from {
    -o-transform: scale(0);
    transform: scale(0);
  }
  to {
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes scaleout {
  from {
    -o-transform: scale(1);
    transform: scale(1);
  }
  to {
    -o-transform: scale(0);
    transform: scale(0);
  }
}
@keyframes scalein {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes scaleout {
  /**
 * roll
 **/
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
.rollleft.out, .rollleft.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.rollleft.out {
  transform: rotateZ(-90deg);
  -webkit-animation-name: rollouttoleft;
  -moz-animation-name: rollouttoleft;
  -ms-animation-name: rollouttoleft;
  -o-animation-name: rollouttoleft;
  animation-name: rollouttoleft;
}
.rollleft.in {
  transform: rotateZ(0deg);
  -webkit-animation-name: rollinfromright;
  -moz-animation-name: rollinfromright;
  -ms-animation-name: rollinfromright;
  -o-animation-name: rollinfromright;
  animation-name: rollinfromright;
}
.rollleft.out.reverse {
  transform: rotateZ(90deg);
  -webkit-animation-name: rollouttoright;
  -moz-animation-name: rollouttoright;
  -ms-animation-name: rollouttoright;
  -o-animation-name: rollouttoright;
  animation-name: rollouttoright;
}
.rollleft.in.reverse {
  transform: rotateZ(0deg);
  -webkit-animation-name: rollinfromleft;
  -moz-animation-name: rollinfromleft;
  -ms-animation-name: rollinfromleft;
  -o-animation-name: rollinfromleft;
  animation-name: rollinfromleft;
}
.rollright.out, .rollright.in {
  -webkit-animation-timing-function: ease-out;
  -moz-animation-timing-function: ease-out;
  -ms-animation-timing-function: ease-out;
  -o-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 350ms;
  -moz-animation-duration: 350ms;
  -ms-animation-duration: 350ms;
  -o-animation-duration: 350ms;
  animation-duration: 350ms;
}
.rollright.out {
  transform: rotateZ(90deg);
  -webkit-animation-name: rollouttoright;
  -moz-animation-name: rollouttoright;
  -ms-animation-name: rollouttoright;
  -o-animation-name: rollouttoright;
  animation-name: rollouttoright;
}
.rollright.in {
  transform: rotateZ(0deg);
  -webkit-animation-name: rollinfromleft;
  -moz-animation-name: rollinfromleft;
  -ms-animation-name: rollinfromleft;
  -o-animation-name: rollinfromleft;
  animation-name: rollinfromleft;
}
.rollright.out.reverse {
  transform: rotateZ(-90deg);
  -webkit-animation-name: rollouttoleft;
  -moz-animation-name: rollouttoleft;
  -ms-animation-name: rollouttoleft;
  -o-animation-name: rollouttoleft;
  animation-name: rollouttoleft;
}
.rollright.in.reverse {
  transform: rotateZ(0deg);
  -webkit-animation-name: rollinfromright;
  -moz-animation-name: rollinfromright;
  -ms-animation-name: rollinfromright;
  -o-animation-name: rollinfromright;
  animation-name: rollinfromright;
}
@-webkit-keyframes rollinfromleft {
  from {
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
  to {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-webkit-keyframes rollinfromright {
  from {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  to {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-webkit-keyframes rollouttoright {
  from {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
}
@-webkit-keyframes rollouttoleft {
  from {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
}
@-moz-keyframes rollinfromleft {
  from {
    -moz-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
  to {
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-moz-keyframes rollinfromright {
  from {
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  to {
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-moz-keyframes rollouttoright {
  from {
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -moz-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
}
@-moz-keyframes rollouttoleft {
  from {
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -moz-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
}
@-ms-keyframes rollinfromleft {
  from {
    -ms-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
  to {
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-ms-keyframes rollinfromright {
  from {
    -ms-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  to {
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-ms-keyframes rollouttoright {
  from {
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -ms-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
}
@-ms-keyframes rollouttoleft {
  from {
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -ms-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
}
@-o-keyframes rollinfromleft {
  from {
    -o-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
  to {
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-o-keyframes rollinfromright {
  from {
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
  to {
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-o-keyframes rollouttoright {
  from {
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }
}
@-o-keyframes rollouttoleft {
  from {
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -o-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
}
@keyframes rollinfromleft {
  from {
    transform: rotateZ(-90deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@keyframes rollinfromright {
  from {
    transform: rotateZ(90deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@keyframes rollouttoright {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(90deg);
  }
}
@keyframes rollouttoleft {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(-90deg);
  }
}