.in{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}
.out{-webkit-animation-timing-function:ease-in;-webkit-animation-duration:225ms;animation-timing-function:ease-in;animation-duration:225ms}
@-webkit-keyframes fadein{from{opacity:0}
to{opacity:1}
}
@keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadeout{from{opacity:1}
to{opacity:0}
}
@keyframes fadeout{from{opacity:1}
to{opacity:0}
}
.fade.out{opacity:0;-webkit-animation-duration:125ms;-webkit-animation-name:fadeout;animation-duration:125ms;animation-name:fadeout}
.fade.in{opacity:1;-webkit-animation-duration:225ms;-webkit-animation-name:fadein;animation-duration:225ms;animation-name:fadein}
.pop{-webkit-transform-origin:50% 50%;transform-origin:50% 50%}
.pop.in{-webkit-transform:scale(1);-webkit-animation-name:popin;-webkit-animation-duration:350ms;transform:scale(1);animation-name:popin;animation-duration:350ms;opacity:1}
.pop.out{-webkit-animation-name:fadeout;-webkit-animation-duration:.1s;animation-name:fadeout;animation-duration:.1s;opacity:0}
.pop.in.reverse{-webkit-animation-name:fadein;animation-name:fadein}
.pop.out.reverse{-webkit-transform:scale(.8);-webkit-animation-name:popout;transform:scale(.8);animation-name:popout}
@-webkit-keyframes popin{from{-webkit-transform:scale(.8);opacity:0}
to{-webkit-transform:scale(1);opacity:1}
}
@keyframes popin{from{transform:scale(.8);opacity:0}
to{transform:scale(1);opacity:1}
}
@-webkit-keyframes popout{from{-webkit-transform:scale(1);opacity:1}
to{-webkit-transform:scale(.8);opacity:0}
}
@keyframes popout{from{transform:scale(1);opacity:1}
to{transform:scale(.8);opacity:0}
}
@-webkit-keyframes slideinfromright{from{-webkit-transform:translate3d(100%,0,0)}
to{-webkit-transform:translate3d(0,0,0)}
}
@keyframes slideinfromright{from{transform:translateX(100%)}
to{transform:translateX(0)}
}
@-webkit-keyframes slideinfromleft{from{-webkit-transform:translate3d(-100%,0,0)}
to{-webkit-transform:translate3d(0,0,0)}
}
@keyframes slideinfromleft{from{transform:translateX(-100%)}
to{transform:translateX(0)}
}
@-webkit-keyframes slideouttoleft{from{-webkit-transform:translate3d(0,0,0)}
to{-webkit-transform:translate3d(-100%,0,0)}
}
@keyframes slideouttoleft{from{transform:translateX(0)}
to{transform:translateX(-100%)}
}
@-webkit-keyframes slideouttoright{from{-webkit-transform:translate3d(0,0,0)}
to{-webkit-transform:translate3d(100%,0,0)}
}
@keyframes slideouttoright{from{transform:translateX(0)}
to{transform:translateX(100%)}
}
.slide.in,.slide.out{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}
.slide.out{-webkit-transform:translate3d(-100%,0,0);-webkit-animation-name:slideouttoleft;transform:translateX(-100%);animation-name:slideouttoleft}
.slide.in{-webkit-transform:translate3d(0,0,0);-webkit-animation-name:slideinfromright;transform:translateX(0);animation-name:slideinfromright}
.slide.out.reverse{-webkit-transform:translate3d(100%,0,0);-webkit-animation-name:slideouttoright;transform:translateX(100%);animation-name:slideouttoright}
.slide.in.reverse{-webkit-transform:translate3d(0,0,0);-webkit-animation-name:slideinfromleft;transform:translateX(0);animation-name:slideinfromleft}
.slidefade.out{-webkit-transform:translateX(-100%);-webkit-animation-name:slideouttoleft;-webkit-animation-duration:225ms;transform:translateX(-100%);animation-name:slideouttoleft;animation-duration:225ms}
.slidefade.in{-webkit-transform:translateX(0);-webkit-animation-name:fadein;-webkit-animation-duration:.2s;transform:translateX(0);animation-name:fadein;animation-duration:.2s}
.slidefade.out.reverse{-webkit-transform:translateX(100%);-webkit-animation-name:slideouttoright;-webkit-animation-duration:.2s;transform:translateX(100%);animation-name:slideouttoright;animation-duration:.2s}
.slidefade.in.reverse{-webkit-transform:translateX(0);-webkit-animation-name:fadein;-webkit-animation-duration:.2s;transform:translateX(0);animation-name:fadein;animation-duration:.2s}
.slidedown.out{-webkit-animation-name:fadeout;-webkit-animation-duration:.1s;animation-name:fadeout;animation-duration:.1s}
.slidedown.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfromtop;-webkit-animation-duration:250ms;transform:translateY(0);animation-name:slideinfromtop;animation-duration:250ms}
.slidedown.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:150ms;animation-name:fadein;animation-duration:150ms}
.slidedown.out.reverse{-webkit-transform:translateY(-100%);-webkit-animation-name:slideouttotop;-webkit-animation-duration:.2s;transform:translateY(-100%);animation-name:slideouttotop;animation-duration:.2s}
@-webkit-keyframes slideinfromtop{from{-webkit-transform:translateY(-100%)}
to{-webkit-transform:translateY(0)}
}
@keyframes slideinfromtop{from{transform:translateY(-100%)}
to{transform:translateY(0)}
}
@-webkit-keyframes slideouttotop{from{-webkit-transform:translateY(0)}
to{-webkit-transform:translateY(-100%)}
}
@keyframes slideouttotop{from{transform:translateY(0)}
to{transform:translateY(-100%)}
}
.slideup.out{-webkit-animation-name:fadeout;-webkit-animation-duration:.1s;animation-name:fadeout;animation-duration:.1s}
.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:250ms;transform:translateY(0);animation-name:slideinfrombottom;animation-duration:250ms}
.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:150ms;animation-name:fadein;animation-duration:150ms}
.slideup.out.reverse{-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:.2s;transform:translateY(100%);animation-name:slideouttobottom;animation-duration:.2s}
@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}
to{-webkit-transform:translateY(0)}
}
@keyframes slideinfrombottom{from{transform:translateY(100%)}
to{transform:translateY(0)}
}
@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}
to{-webkit-transform:translateY(100%)}
}
@keyframes slideouttobottom{from{transform:translateY(0)}
to{transform:translateY(100%)}
}
.viewport-flip{-webkit-perspective:1000;-ms-perspective:1000;perspective:1000;}
.flip{-ms-backface-visibility:hidden;-ms-transform:translateX(0);-webkit-backface-visibility:hidden;-webkit-transform:translateX(0);backface-visibility:hidden;transform:translateX(0)}
.flip.out{ display:none;-ms-transform:rotateY(-90deg) scale(.9);-ms-animation-name:flipouttoleft;-ms-animation-duration:175ms;-webkit-transform:rotateY(-90deg) scale(.9);-webkit-animation-name:flipouttoleft;-webkit-animation-duration:175ms;transform:rotateY(-90deg) scale(.9);animation-name:flipouttoleft;animation-duration:175ms}
.flip.in{-webkit-animation-name:flipintoright;-webkit-animation-duration:225ms;-ms-animation-name:flipintoright;-ms-animation-duration:225ms;animation-name:flipintoright;animation-duration:225ms;}
.flip.out.reverse{-ms-transform:rotateY(90deg) scale(.9);-ms-animation-name:flipouttoright;-webkit-transform:rotateY(90deg) scale(.9);-webkit-animation-name:flipouttoright;transform:rotateY(90deg) scale(.9);animation-name:flipouttoright}
.flip.in.reverse{-webkit-animation-name:flipintoleft;-ms-animation-name:flipintoleft;animation-name:flipintoleft}
@-webkit-keyframes flipouttoleft{from{-webkit-transform:rotateY(0)}
to{-webkit-transform:rotateY(-90deg) scale(.9)}
}
@-ms-keyframes flipouttoleft{from{-ms-transform:rotateY(0)}
to{-ms-transform:rotateY(-90deg) scale(.9)}
}
@keyframes flipouttoleft{from{transform:rotateY(0)}
to{transform:rotateY(-90deg) scale(.9)}
}
@-webkit-keyframes flipouttoright{from{-webkit-transform:rotateY(0)}
to{-webkit-transform:rotateY(90deg) scale(.9)}
}
@-ms-keyframes flipouttoright{from{-ms-transform:rotateY(0)}
to{-ms-transform:rotateY(90deg) scale(.9)}
}
@keyframes flipouttoright{from{transform:rotateY(0)}
to{transform:rotateY(90deg) scale(.9)}
}
@-webkit-keyframes flipintoleft{from{-webkit-transform:rotateY(-90deg) scale(.9)}
to{-webkit-transform:rotateY(0)}
}
@-ms-keyframes flipintoleft{from{-ms-transform:rotateY(-90deg) scale(.9)}
to{-ms-transform:rotateY(0)}
}
@keyframes flipintoleft{from{transform:rotateY(-90deg) scale(.9)}
to{transform:rotateY(0)}
}
@-ms-keyframes flipintoright{from{-ms-transform:rotateY(90deg) scale(.9)}
to{-ms-transform:rotateY(0)}
}
@-webkit-keyframes flipintoright{from{-webkit-transform:rotateY(90deg) scale(.9)}
to{-webkit-transform:rotateY(0)}
}
@keyframes flipintoright{from{transform:rotateY(90deg) scale(.9)}
to{transform:rotateY(0)}
}
.viewport-turn{-webkit-perspective:200px;perspective:200px;position:absolute}
.turn{-webkit-backface-visibility:hidden;-webkit-transform:translateX(0);-webkit-transform-origin:0;backface-visibility:hidden;transform:translateX(0);transform-origin:0}
.turn.out{-webkit-transform:rotateY(-90deg) scale(.9);-webkit-animation-name:flipouttoleft;-webkit-animation-duration:125ms;transform:rotateY(-90deg) scale(.9);animation-name:flipouttoleft;animation-duration:125ms}
.turn.in{-webkit-animation-name:flipintoright;-webkit-animation-duration:250ms;animation-name:flipintoright;animation-duration:250ms}
.turn.out.reverse{-webkit-transform:rotateY(90deg) scale(.9);-webkit-animation-name:flipouttoright;transform:rotateY(90deg) scale(.9);animation-name:flipouttoright}
.turn.in.reverse{-webkit-animation-name:flipintoleft;animation-name:flipintoleft}
@-webkit-keyframes flipouttoleft{from{-webkit-transform:rotateY(0)}
to{-webkit-transform:rotateY(-90deg) scale(.9)}
}
@keyframes flipouttoleft{from{transform:rotateY(0)}
to{transform:rotateY(-90deg) scale(.9)}
}
@-webkit-keyframes flipouttoright{from{-webkit-transform:rotateY(0)}
to{-webkit-transform:rotateY(90deg) scale(.9)}
}
@keyframes flipouttoright{from{transform:rotateY(0)}
to{transform:rotateY(90deg) scale(.9)}
}
@-webkit-keyframes flipintoleft{from{-webkit-transform:rotateY(-90deg) scale(.9)}
to{-webkit-transform:rotateY(0)}
}
@keyframes flipintoleft{from{transform:rotateY(-90deg) scale(.9)}
to{transform:rotateY(0)}
}
@-webkit-keyframes flipintoright{from{-webkit-transform:rotateY(90deg) scale(.9)}
to{-webkit-transform:rotateY(0)}
}
@keyframes flipintoright{from{transform:rotateY(90deg) scale(.9)}
to{transform:rotateY(0)}
}
.flow{-webkit-transform-origin:50% 30%;transform-origin:50% 30%}
.flow.out{-webkit-transform:translateX(-100%) scale(.7);-webkit-animation-name:flowouttoleft;-webkit-animation-timing-function:ease;-webkit-animation-duration:350ms;transform:translateX(-100%) scale(.7);animation-name:flowouttoleft;animation-timing-function:ease;animation-duration:350ms}
.flow.in{-webkit-transform:translateX(0) scale(1);-webkit-animation-name:flowinfromright;-webkit-animation-timing-function:ease;-webkit-animation-duration:350ms;transform:translateX(0) scale(1);animation-name:flowinfromright;animation-timing-function:ease;animation-duration:350ms}
.flow.out.reverse{-webkit-transform:translateX(100%);-webkit-animation-name:flowouttoright;transform:translateX(100%);animation-name:flowouttoright}
.flow.in.reverse{-webkit-animation-name:flowinfromleft;animation-name:flowinfromleft}
@-webkit-keyframes flowouttoleft{0%{-webkit-transform:translateX(0) scale(1)}
60%,70%{-webkit-transform:translateX(0) scale(.7)}
100%{-webkit-transform:translateX(-100%) scale(.7)}
}
@keyframes flowouttoleft{0%{transform:translateX(0) scale(1)}
60%,70%{transform:translateX(0) scale(.7)}
100%{transform:translateX(-100%) scale(.7)}
}
@-webkit-keyframes flowouttoright{0%{-webkit-transform:translateX(0) scale(1)}
60%,70%{-webkit-transform:translateX(0) scale(.7)}
100%{-webkit-transform:translateX(100%) scale(.7)}
}
@keyframes flowouttoright{0%{transform:translateX(0) scale(1)}
60%,70%{transform:translateX(0) scale(.7)}
100%{transform:translateX(100%) scale(.7)}
}
@-webkit-keyframes flowinfromleft{0%{-webkit-transform:translateX(-100%) scale(.7)}
30%,40%{-webkit-transform:translateX(0) scale(.7)}
100%{-webkit-transform:translateX(0) scale(1)}
}
@keyframes flowinfromleft{0%{transform:translateX(-100%) scale(.7)}
30%,40%{transform:translateX(0) scale(.7)}
100%{transform:translateX(0) scale(1)}
}
@-webkit-keyframes flowinfromright{0%{-webkit-transform:translateX(100%) scale(.7)}
30%,40%{-webkit-transform:translateX(0) scale(.7)}
100%{-webkit-transform:translateX(0) scale(1)}
}
@keyframes flowinfromright{0%{transform:translateX(100%) scale(.7)}
30%,40%{transform:translateX(0) scale(.7)}
100%{transform:translateX(0) scale(1)}
}