flink-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From se...@apache.org
Subject [31/51] [abbrv] flink git commit: [FLINK-2357] [web dashboard] Adjust view for details of a job
Date Thu, 17 Sep 2015 18:20:03 GMT
http://git-wip-us.apache.org/repos/asf/flink/blob/c36b3d7a/flink-runtime-web/web-dashboard/app/styles/animate.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/animate.styl b/flink-runtime-web/web-dashboard/app/styles/animate.styl
new file mode 100644
index 0000000..14fd938
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/app/styles/animate.styl
@@ -0,0 +1,1889 @@
+// Animate.css - http://daneden.me/animate
+// Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+// Copyright (c) 2015 Daniel Eden
+
+22
+  &.2%
+    -webkit-transform skewX(-12.5deg) skewY(-12.5deg)
+    transform skewX(-12.5deg) skewY(-12.5deg)
+    -webkit-transform skewX(-12.5deg) skewY(-12.5deg)
+    transform skewX(-12.5deg) skewY(-12.5deg)
+
+33
+  &.3%
+    -webkit-transform skewX(6.25deg) skewY(6.25deg)
+    transform skewX(6.25deg) skewY(6.25deg)
+    -webkit-transform skewX(6.25deg) skewY(6.25deg)
+    transform skewX(6.25deg) skewY(6.25deg)
+
+44
+  &.4%
+    -webkit-transform skewX(-3.125deg) skewY(-3.125deg)
+    transform skewX(-3.125deg) skewY(-3.125deg)
+    -webkit-transform skewX(-3.125deg) skewY(-3.125deg)
+    transform skewX(-3.125deg) skewY(-3.125deg)
+
+55
+  &.5%
+    -webkit-transform skewX(1.5625deg) skewY(1.5625deg)
+    transform skewX(1.5625deg) skewY(1.5625deg)
+    -webkit-transform skewX(1.5625deg) skewY(1.5625deg)
+    transform skewX(1.5625deg) skewY(1.5625deg)
+
+66
+  &.6%
+    -webkit-transform skewX(-0.78125deg) skewY(-0.78125deg)
+    transform skewX(-0.78125deg) skewY(-0.78125deg)
+    -webkit-transform skewX(-0.78125deg) skewY(-0.78125deg)
+    transform skewX(-0.78125deg) skewY(-0.78125deg)
+
+77
+  &.7%
+    -webkit-transform skewX(0.390625deg) skewY(0.390625deg)
+    transform skewX(0.390625deg) skewY(0.390625deg)
+    -webkit-transform skewX(0.390625deg) skewY(0.390625deg)
+    transform skewX(0.390625deg) skewY(0.390625deg)
+
+88
+  &.8%
+    -webkit-transform skewX(-0.1953125deg) skewY(-0.1953125deg)
+    transform skewX(-0.1953125deg) skewY(-0.1953125deg)
+    -webkit-transform skewX(-0.1953125deg) skewY(-0.1953125deg)
+    transform skewX(-0.1953125deg) skewY(-0.1953125deg)
+
+@charset
+  "UTF-8";
+    .animated
+      -webkit-animation-duration 1s
+      animation-duration 1s
+      -webkit-animation-fill-mode both
+      animation-fill-mode both
+
+.animated
+  &.infinite
+    -webkit-animation-iteration-count infinite
+    animation-iteration-count infinite
+  &.hinge
+    -webkit-animation-duration 2s
+    animation-duration 2s
+
+.animated.bounceIn,
+.animated.bounceOut
+  -webkit-animation-duration .75s
+  animation-duration .75s
+
+.animated.flipOutX,
+.animated.flipOutY
+  -webkit-animation-duration .75s
+  animation-duration .75s
+
+@-webkit-keyframes
+  bounce
+    0%, 20%, 53%, 80%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    -webkit-transform translate3d(0,0,0)
+    transform translate3d(0,0,0)
+  flash
+    0%, 50%, 100% {
+    opacity 1
+  pulse
+    0% {
+    -webkit-transform scale3d(1, 1, 1)
+    transform scale3d(1, 1, 1)
+  rubberBand
+    0% {
+    -webkit-transform scale3d(1, 1, 1)
+    transform scale3d(1, 1, 1)
+  shake
+    0%, 100% {
+    -webkit-transform translate3d(0, 0, 0)
+    transform translate3d(0, 0, 0)
+  swing
+    20% {
+    -webkit-transform rotate3d(0, 0, 1, 15deg)
+    transform rotate3d(0, 0, 1, 15deg)
+  tada
+    0% {
+    -webkit-transform scale3d(1, 1, 1)
+    transform scale3d(1, 1, 1)
+  wobble
+    0% {
+    -webkit-transform none
+    transform none
+  jello
+    0%, 11.1%, 100% {
+    -webkit-transform none
+    transform none
+  bounceIn
+    0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+  bounceInDown
+    0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+  bounceInLeft
+    0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+  bounceInRight
+    0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+  bounceInUp
+    0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+  bounceOut
+    20% {
+    -webkit-transform scale3d(.9, .9, .9)
+    transform scale3d(.9, .9, .9)
+  bounceOutDown
+    20% {
+    -webkit-transform translate3d(0, 10px, 0)
+    transform translate3d(0, 10px, 0)
+  bounceOutLeft
+    20% {
+    opacity 1
+    -webkit-transform translate3d(20px, 0, 0)
+    transform translate3d(20px, 0, 0)
+  bounceOutRight
+    20% {
+    opacity 1
+    -webkit-transform translate3d(-20px, 0, 0)
+    transform translate3d(-20px, 0, 0)
+  bounceOutUp
+    20% {
+    -webkit-transform translate3d(0, -10px, 0)
+    transform translate3d(0, -10px, 0)
+  fadeIn
+    0% {
+    opacity 0
+  fadeInDown
+    0% {
+    opacity 0
+    -webkit-transform translate3d(0, -100%, 0)
+    transform translate3d(0, -100%, 0)
+  fadeInDownBig
+    0% {
+    opacity 0
+    -webkit-transform translate3d(0, -2000px, 0)
+    transform translate3d(0, -2000px, 0)
+  fadeInLeft
+    0% {
+    opacity 0
+    -webkit-transform translate3d(-100%, 0, 0)
+    transform translate3d(-100%, 0, 0)
+  fadeInLeftBig
+    0% {
+    opacity 0
+    -webkit-transform translate3d(-2000px, 0, 0)
+    transform translate3d(-2000px, 0, 0)
+  fadeInRight
+    0% {
+    opacity 0
+    -webkit-transform translate3d(100%, 0, 0)
+    transform translate3d(100%, 0, 0)
+  fadeInRightBig
+    0% {
+    opacity 0
+    -webkit-transform translate3d(2000px, 0, 0)
+    transform translate3d(2000px, 0, 0)
+  fadeInUp
+    0% {
+    opacity 0
+    -webkit-transform translate3d(0, 100%, 0)
+    transform translate3d(0, 100%, 0)
+  fadeInUpBig
+    0% {
+    opacity 0
+    -webkit-transform translate3d(0, 2000px, 0)
+    transform translate3d(0, 2000px, 0)
+  fadeOut
+    0% {
+    opacity 1
+  fadeOutDown
+    0% {
+    opacity 1
+  fadeOutDownBig
+    0% {
+    opacity 1
+  fadeOutLeft
+    0% {
+    opacity 1
+  fadeOutLeftBig
+    0% {
+    opacity 1
+  fadeOutRight
+    0% {
+    opacity 1
+  fadeOutRightBig
+    0% {
+    opacity 1
+  fadeOutUp
+    0% {
+    opacity 1
+  fadeOutUpBig
+    0% {
+    opacity 1
+  flip
+    0% {
+    -webkit-transform perspective(400px) rotate3d(0, 1, 0, -360deg)
+    transform perspective(400px) rotate3d(0, 1, 0, -360deg)
+    -webkit-animation-timing-function ease-out
+    animation-timing-function ease-out
+  flipInX
+    0% {
+    -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+    transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+    -webkit-animation-timing-function ease-in
+    animation-timing-function ease-in
+    opacity 0
+  flipInY
+    0% {
+    -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+    transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+    -webkit-animation-timing-function ease-in
+    animation-timing-function ease-in
+    opacity 0
+  flipOutX
+    0% {
+    -webkit-transform perspective(400px)
+    transform perspective(400px)
+  flipOutY
+    0% {
+    -webkit-transform perspective(400px)
+    transform perspective(400px)
+  lightSpeedIn
+    0% {
+    -webkit-transform translate3d(100%, 0, 0) skewX(-30deg)
+    transform translate3d(100%, 0, 0) skewX(-30deg)
+    opacity 0
+  lightSpeedOut
+    0% {
+    opacity 1
+  rotateIn
+    0% {
+    -webkit-transform-origin center
+    transform-origin center
+    -webkit-transform rotate3d(0, 0, 1, -200deg)
+    transform rotate3d(0, 0, 1, -200deg)
+    opacity 0
+  rotateInDownLeft
+    0% {
+    -webkit-transform-origin left bottom
+    transform-origin left bottom
+    -webkit-transform rotate3d(0, 0, 1, -45deg)
+    transform rotate3d(0, 0, 1, -45deg)
+    opacity 0
+  rotateInDownRight
+    0% {
+    -webkit-transform-origin right bottom
+    transform-origin right bottom
+    -webkit-transform rotate3d(0, 0, 1, 45deg)
+    transform rotate3d(0, 0, 1, 45deg)
+    opacity 0
+  rotateInUpLeft
+    0% {
+    -webkit-transform-origin left bottom
+    transform-origin left bottom
+    -webkit-transform rotate3d(0, 0, 1, 45deg)
+    transform rotate3d(0, 0, 1, 45deg)
+    opacity 0
+  rotateInUpRight
+    0% {
+    -webkit-transform-origin right bottom
+    transform-origin right bottom
+    -webkit-transform rotate3d(0, 0, 1, -90deg)
+    transform rotate3d(0, 0, 1, -90deg)
+    opacity 0
+  rotateOut
+    0% {
+    -webkit-transform-origin center
+    transform-origin center
+    opacity 1
+  rotateOutDownLeft
+    0% {
+    -webkit-transform-origin left bottom
+    transform-origin left bottom
+    opacity 1
+  rotateOutDownRight
+    0% {
+    -webkit-transform-origin right bottom
+    transform-origin right bottom
+    opacity 1
+  rotateOutUpLeft
+    0% {
+    -webkit-transform-origin left bottom
+    transform-origin left bottom
+    opacity 1
+  rotateOutUpRight
+    0% {
+    -webkit-transform-origin right bottom
+    transform-origin right bottom
+    opacity 1
+  hinge
+    0% {
+    -webkit-transform-origin top left
+    transform-origin top left
+    -webkit-animation-timing-function ease-in-out
+    animation-timing-function ease-in-out
+  rollIn
+    0% {
+    opacity 0
+    -webkit-transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
+    transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
+  rollOut
+    0% {
+    opacity 1
+  zoomIn
+    0% {
+    opacity 0
+    -webkit-transform scale3d(.3, .3, .3)
+    transform scale3d(.3, .3, .3)
+  zoomInDown
+    0% {
+    opacity 0
+    -webkit-transform scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
+    transform scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
+    -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+  zoomInLeft
+    0% {
+    opacity 0
+    -webkit-transform scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
+    transform scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
+    -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+  zoomInRight
+    0% {
+    opacity 0
+    -webkit-transform scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
+    transform scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
+    -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+  zoomInUp
+    0% {
+    opacity 0
+    -webkit-transform scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
+    transform scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
+    -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+  zoomOut
+    0% {
+    opacity 1
+  zoomOutDown
+    40% {
+    opacity 1
+    -webkit-transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+    transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+    -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+  zoomOutLeft
+    40% {
+    opacity 1
+    -webkit-transform scale3d(.475, .475, .475) translate3d(42px, 0, 0)
+    transform scale3d(.475, .475, .475) translate3d(42px, 0, 0)
+  zoomOutRight
+    40% {
+    opacity 1
+    -webkit-transform scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
+    transform scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
+  zoomOutUp
+    40% {
+    opacity 1
+    -webkit-transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+    transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+    -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+  slideInDown
+    0% {
+    -webkit-transform translate3d(0, -100%, 0)
+    transform translate3d(0, -100%, 0)
+    visibility visible
+  slideInLeft
+    0% {
+    -webkit-transform translate3d(-100%, 0, 0)
+    transform translate3d(-100%, 0, 0)
+    visibility visible
+  slideInRight
+    0% {
+    -webkit-transform translate3d(100%, 0, 0)
+    transform translate3d(100%, 0, 0)
+    visibility visible
+  slideInUp
+    0% {
+    -webkit-transform translate3d(0, 100%, 0)
+    transform translate3d(0, 100%, 0)
+    visibility visible
+  slideOutDown
+    0% {
+    -webkit-transform translate3d(0, 0, 0)
+    transform translate3d(0, 0, 0)
+  slideOutLeft
+    0% {
+    -webkit-transform translate3d(0, 0, 0)
+    transform translate3d(0, 0, 0)
+  slideOutRight
+    0% {
+    -webkit-transform translate3d(0, 0, 0)
+    transform translate3d(0, 0, 0)
+  slideOutUp
+    0% {
+    -webkit-transform translate3d(0, 0, 0)
+    transform translate3d(0, 0, 0)
+
+40%, 43%
+  -webkit-animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  -webkit-transform translate3d(0, -30px, 0)
+  transform translate3d(0, -30px, 0)
+  -webkit-animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  -webkit-transform translate3d(0, -30px, 0)
+  transform translate3d(0, -30px, 0)
+
+70%
+  -webkit-animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  -webkit-transform translate3d(0, -15px, 0)
+  transform translate3d(0, -15px, 0)
+  -webkit-animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  animation-timing-function cubic-bezier(0.755, 0.050, 0.855, 0.060)
+  -webkit-transform translate3d(0, -15px, 0)
+  transform translate3d(0, -15px, 0)
+
+90%
+  -webkit-transform translate3d(0,-4px,0)
+  transform translate3d(0,-4px,0)
+  -webkit-transform translate3d(0,-4px,0)
+  transform translate3d(0,-4px,0)
+  -webkit-transform translate3d(0, 5px, 0)
+  transform translate3d(0, 5px, 0)
+  -webkit-transform translate3d(0, 5px, 0)
+  transform translate3d(0, 5px, 0)
+  -webkit-transform translate3d(5px, 0, 0)
+  transform translate3d(5px, 0, 0)
+  -webkit-transform translate3d(5px, 0, 0)
+  transform translate3d(5px, 0, 0)
+  -webkit-transform translate3d(-5px, 0, 0)
+  transform translate3d(-5px, 0, 0)
+  -webkit-transform translate3d(-5px, 0, 0)
+  transform translate3d(-5px, 0, 0)
+  -webkit-transform translate3d(0, -5px, 0)
+  transform translate3d(0, -5px, 0)
+  -webkit-transform translate3d(0, -5px, 0)
+  transform translate3d(0, -5px, 0)
+
+}
+  @keyframes
+    bounce
+      0%, 20%, 53%, 80%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+      animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+      -webkit-transform translate3d(0,0,0)
+      transform translate3d(0,0,0)
+    flash
+      0%, 50%, 100% {
+    opacity 1
+    pulse
+      0% {
+    -webkit-transform scale3d(1, 1, 1)
+      transform scale3d(1, 1, 1)
+    rubberBand
+      0% {
+    -webkit-transform scale3d(1, 1, 1)
+      transform scale3d(1, 1, 1)
+    shake
+      0%, 100% {
+    -webkit-transform translate3d(0, 0, 0)
+      transform translate3d(0, 0, 0)
+    swing
+      20% {
+    -webkit-transform rotate3d(0, 0, 1, 15deg)
+      transform rotate3d(0, 0, 1, 15deg)
+    tada
+      0% {
+    -webkit-transform scale3d(1, 1, 1)
+      transform scale3d(1, 1, 1)
+    wobble
+      0% {
+    -webkit-transform none
+      transform none
+    jello
+      0%, 11.1%, 100% {
+    -webkit-transform none
+      transform none
+    bounceIn
+      0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+      animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    bounceInDown
+      0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+      animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    bounceInLeft
+      0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+      animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    bounceInRight
+      0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+      animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    bounceInUp
+      0%, 60%, 75%, 90%, 100% {
+    -webkit-animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+      animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
+    bounceOut
+      20% {
+    -webkit-transform scale3d(.9, .9, .9)
+      transform scale3d(.9, .9, .9)
+    bounceOutDown
+      20% {
+    -webkit-transform translate3d(0, 10px, 0)
+      transform translate3d(0, 10px, 0)
+    bounceOutLeft
+      20% {
+    opacity 1
+      -webkit-transform translate3d(20px, 0, 0)
+      transform translate3d(20px, 0, 0)
+    bounceOutRight
+      20% {
+    opacity 1
+      -webkit-transform translate3d(-20px, 0, 0)
+      transform translate3d(-20px, 0, 0)
+    bounceOutUp
+      20% {
+    -webkit-transform translate3d(0, -10px, 0)
+      transform translate3d(0, -10px, 0)
+    fadeIn
+      0% {
+    opacity 0
+    fadeInDown
+      0% {
+    opacity 0
+      -webkit-transform translate3d(0, -100%, 0)
+      transform translate3d(0, -100%, 0)
+    fadeInDownBig
+      0% {
+    opacity 0
+      -webkit-transform translate3d(0, -2000px, 0)
+      transform translate3d(0, -2000px, 0)
+    fadeInLeft
+      0% {
+    opacity 0
+      -webkit-transform translate3d(-100%, 0, 0)
+      transform translate3d(-100%, 0, 0)
+    fadeInLeftBig
+      0% {
+    opacity 0
+      -webkit-transform translate3d(-2000px, 0, 0)
+      transform translate3d(-2000px, 0, 0)
+    fadeInRight
+      0% {
+    opacity 0
+      -webkit-transform translate3d(100%, 0, 0)
+      transform translate3d(100%, 0, 0)
+    fadeInRightBig
+      0% {
+    opacity 0
+      -webkit-transform translate3d(2000px, 0, 0)
+      transform translate3d(2000px, 0, 0)
+    fadeInUp
+      0% {
+    opacity 0
+      -webkit-transform translate3d(0, 100%, 0)
+      transform translate3d(0, 100%, 0)
+    fadeInUpBig
+      0% {
+    opacity 0
+      -webkit-transform translate3d(0, 2000px, 0)
+      transform translate3d(0, 2000px, 0)
+    fadeOut
+      0% {
+    opacity 1
+    fadeOutDown
+      0% {
+    opacity 1
+    fadeOutDownBig
+      0% {
+    opacity 1
+    fadeOutLeft
+      0% {
+    opacity 1
+    fadeOutLeftBig
+      0% {
+    opacity 1
+    fadeOutRight
+      0% {
+    opacity 1
+    fadeOutRightBig
+      0% {
+    opacity 1
+    fadeOutUp
+      0% {
+    opacity 1
+    fadeOutUpBig
+      0% {
+    opacity 1
+    flip
+      0% {
+    -webkit-transform perspective(400px) rotate3d(0, 1, 0, -360deg)
+      transform perspective(400px) rotate3d(0, 1, 0, -360deg)
+      -webkit-animation-timing-function ease-out
+      animation-timing-function ease-out
+    flipInX
+      0% {
+    -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+      transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+      -webkit-animation-timing-function ease-in
+      animation-timing-function ease-in
+      opacity 0
+    flipInY
+      0% {
+    -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+      transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+      -webkit-animation-timing-function ease-in
+      animation-timing-function ease-in
+      opacity 0
+    flipOutX
+      0% {
+    -webkit-transform perspective(400px)
+      transform perspective(400px)
+    flipOutY
+      0% {
+    -webkit-transform perspective(400px)
+      transform perspective(400px)
+    lightSpeedIn
+      0% {
+    -webkit-transform translate3d(100%, 0, 0) skewX(-30deg)
+      transform translate3d(100%, 0, 0) skewX(-30deg)
+      opacity 0
+    lightSpeedOut
+      0% {
+    opacity 1
+    rotateIn
+      0% {
+    -webkit-transform-origin center
+      transform-origin center
+      -webkit-transform rotate3d(0, 0, 1, -200deg)
+      transform rotate3d(0, 0, 1, -200deg)
+      opacity 0
+    rotateInDownLeft
+      0% {
+    -webkit-transform-origin left bottom
+      transform-origin left bottom
+      -webkit-transform rotate3d(0, 0, 1, -45deg)
+      transform rotate3d(0, 0, 1, -45deg)
+      opacity 0
+    rotateInDownRight
+      0% {
+    -webkit-transform-origin right bottom
+      transform-origin right bottom
+      -webkit-transform rotate3d(0, 0, 1, 45deg)
+      transform rotate3d(0, 0, 1, 45deg)
+      opacity 0
+    rotateInUpLeft
+      0% {
+    -webkit-transform-origin left bottom
+      transform-origin left bottom
+      -webkit-transform rotate3d(0, 0, 1, 45deg)
+      transform rotate3d(0, 0, 1, 45deg)
+      opacity 0
+    rotateInUpRight
+      0% {
+    -webkit-transform-origin right bottom
+      transform-origin right bottom
+      -webkit-transform rotate3d(0, 0, 1, -90deg)
+      transform rotate3d(0, 0, 1, -90deg)
+      opacity 0
+    rotateOut
+      0% {
+    -webkit-transform-origin center
+      transform-origin center
+      opacity 1
+    rotateOutDownLeft
+      0% {
+    -webkit-transform-origin left bottom
+      transform-origin left bottom
+      opacity 1
+    rotateOutDownRight
+      0% {
+    -webkit-transform-origin right bottom
+      transform-origin right bottom
+      opacity 1
+    rotateOutUpLeft
+      0% {
+    -webkit-transform-origin left bottom
+      transform-origin left bottom
+      opacity 1
+    rotateOutUpRight
+      0% {
+    -webkit-transform-origin right bottom
+      transform-origin right bottom
+      opacity 1
+    hinge
+      0% {
+    -webkit-transform-origin top left
+      transform-origin top left
+      -webkit-animation-timing-function ease-in-out
+      animation-timing-function ease-in-out
+    rollIn
+      0% {
+    opacity 0
+      -webkit-transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
+      transform translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
+    rollOut
+      0% {
+    opacity 1
+    zoomIn
+      0% {
+    opacity 0
+      -webkit-transform scale3d(.3, .3, .3)
+      transform scale3d(.3, .3, .3)
+    zoomInDown
+      0% {
+    opacity 0
+      -webkit-transform scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
+      transform scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
+      -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+      animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    zoomInLeft
+      0% {
+    opacity 0
+      -webkit-transform scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
+      transform scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
+      -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+      animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    zoomInRight
+      0% {
+    opacity 0
+      -webkit-transform scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
+      transform scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
+      -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+      animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    zoomInUp
+      0% {
+    opacity 0
+      -webkit-transform scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
+      transform scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
+      -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+      animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    zoomOut
+      0% {
+    opacity 1
+    zoomOutDown
+      40% {
+    opacity 1
+      -webkit-transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+      transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+      -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+      animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    zoomOutLeft
+      40% {
+    opacity 1
+      -webkit-transform scale3d(.475, .475, .475) translate3d(42px, 0, 0)
+      transform scale3d(.475, .475, .475) translate3d(42px, 0, 0)
+    zoomOutRight
+      40% {
+    opacity 1
+      -webkit-transform scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
+      transform scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
+    zoomOutUp
+      40% {
+    opacity 1
+      -webkit-transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+      transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+      -webkit-animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+      animation-timing-function cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    slideInDown
+      0% {
+    -webkit-transform translate3d(0, -100%, 0)
+      transform translate3d(0, -100%, 0)
+      visibility visible
+    slideInLeft
+      0% {
+    -webkit-transform translate3d(-100%, 0, 0)
+      transform translate3d(-100%, 0, 0)
+      visibility visible
+    slideInRight
+      0% {
+    -webkit-transform translate3d(100%, 0, 0)
+      transform translate3d(100%, 0, 0)
+      visibility visible
+    slideInUp
+      0% {
+    -webkit-transform translate3d(0, 100%, 0)
+      transform translate3d(0, 100%, 0)
+      visibility visible
+    slideOutDown
+      0% {
+    -webkit-transform translate3d(0, 0, 0)
+      transform translate3d(0, 0, 0)
+    slideOutLeft
+      0% {
+    -webkit-transform translate3d(0, 0, 0)
+      transform translate3d(0, 0, 0)
+    slideOutRight
+      0% {
+    -webkit-transform translate3d(0, 0, 0)
+      transform translate3d(0, 0, 0)
+    slideOutUp
+      0% {
+    -webkit-transform translate3d(0, 0, 0)
+      transform translate3d(0, 0, 0)
+  .bounce
+    -webkit-animation-name bounce
+    animation-name bounce
+    -webkit-transform-origin center bottom
+    transform-origin center bottom
+  .flash
+    -webkit-animation-name flash
+    animation-name flash
+  .pulse
+    -webkit-animation-name pulse
+    animation-name pulse
+  .rubberBand
+    -webkit-animation-name rubberBand
+    animation-name rubberBand
+  .shake
+    -webkit-animation-name shake
+    animation-name shake
+  .swing
+    -webkit-transform-origin top center
+    transform-origin top center
+    -webkit-animation-name swing
+    animation-name swing
+  .tada
+    -webkit-animation-name tada
+    animation-name tada
+  .wobble
+    -webkit-animation-name wobble
+    animation-name wobble
+  .jello
+    -webkit-animation-name jello
+    animation-name jello
+    -webkit-transform-origin center
+    transform-origin center
+  .bounceIn
+    -webkit-animation-name bounceIn
+    animation-name bounceIn
+  .bounceInDown
+    -webkit-animation-name bounceInDown
+    animation-name bounceInDown
+  .bounceInLeft
+    -webkit-animation-name bounceInLeft
+    animation-name bounceInLeft
+  .bounceInRight
+    -webkit-animation-name bounceInRight
+    animation-name bounceInRight
+  .bounceInUp
+    -webkit-animation-name bounceInUp
+    animation-name bounceInUp
+  .bounceOut
+    -webkit-animation-name bounceOut
+    animation-name bounceOut
+  .bounceOutDown
+    -webkit-animation-name bounceOutDown
+    animation-name bounceOutDown
+  .bounceOutLeft
+    -webkit-animation-name bounceOutLeft
+    animation-name bounceOutLeft
+  .bounceOutRight
+    -webkit-animation-name bounceOutRight
+    animation-name bounceOutRight
+  .bounceOutUp
+    -webkit-animation-name bounceOutUp
+    animation-name bounceOutUp
+  .fadeIn
+    -webkit-animation-name fadeIn
+    animation-name fadeIn
+  .fadeInDown
+    -webkit-animation-name fadeInDown
+    animation-name fadeInDown
+  .fadeInDownBig
+    -webkit-animation-name fadeInDownBig
+    animation-name fadeInDownBig
+  .fadeInLeft
+    -webkit-animation-name fadeInLeft
+    animation-name fadeInLeft
+  .fadeInLeftBig
+    -webkit-animation-name fadeInLeftBig
+    animation-name fadeInLeftBig
+  .fadeInRight
+    -webkit-animation-name fadeInRight
+    animation-name fadeInRight
+  .fadeInRightBig
+    -webkit-animation-name fadeInRightBig
+    animation-name fadeInRightBig
+  .fadeInUp
+    -webkit-animation-name fadeInUp
+    animation-name fadeInUp
+  .fadeInUpBig
+    -webkit-animation-name fadeInUpBig
+    animation-name fadeInUpBig
+  .fadeOut
+    -webkit-animation-name fadeOut
+    animation-name fadeOut
+  .fadeOutDown
+    -webkit-animation-name fadeOutDown
+    animation-name fadeOutDown
+  .fadeOutDownBig
+    -webkit-animation-name fadeOutDownBig
+    animation-name fadeOutDownBig
+  .fadeOutLeft
+    -webkit-animation-name fadeOutLeft
+    animation-name fadeOutLeft
+  .fadeOutLeftBig
+    -webkit-animation-name fadeOutLeftBig
+    animation-name fadeOutLeftBig
+  .fadeOutRight
+    -webkit-animation-name fadeOutRight
+    animation-name fadeOutRight
+  .fadeOutRightBig
+    -webkit-animation-name fadeOutRightBig
+    animation-name fadeOutRightBig
+  .fadeOutUp
+    -webkit-animation-name fadeOutUp
+    animation-name fadeOutUp
+  .fadeOutUpBig
+    -webkit-animation-name fadeOutUpBig
+    animation-name fadeOutUpBig
+  .animated
+    &.flip
+      -webkit-backface-visibility visible
+      backface-visibility visible
+      -webkit-animation-name flip
+      animation-name flip
+  .flipInX
+    -webkit-backface-visibility visible !important
+    backface-visibility visible !important
+    -webkit-animation-name flipInX
+    animation-name flipInX
+  .flipInY
+    -webkit-backface-visibility visible !important
+    backface-visibility visible !important
+    -webkit-animation-name flipInY
+    animation-name flipInY
+  .flipOutX
+    -webkit-animation-name flipOutX
+    animation-name flipOutX
+    -webkit-backface-visibility visible !important
+    backface-visibility visible !important
+  .flipOutY
+    -webkit-backface-visibility visible !important
+    backface-visibility visible !important
+    -webkit-animation-name flipOutY
+    animation-name flipOutY
+  .lightSpeedIn
+    -webkit-animation-name lightSpeedIn
+    animation-name lightSpeedIn
+    -webkit-animation-timing-function ease-out
+    animation-timing-function ease-out
+  .lightSpeedOut
+    -webkit-animation-name lightSpeedOut
+    animation-name lightSpeedOut
+    -webkit-animation-timing-function ease-in
+    animation-timing-function ease-in
+  .rotateIn
+    -webkit-animation-name rotateIn
+    animation-name rotateIn
+  .rotateInDownLeft
+    -webkit-animation-name rotateInDownLeft
+    animation-name rotateInDownLeft
+  .rotateInDownRight
+    -webkit-animation-name rotateInDownRight
+    animation-name rotateInDownRight
+  .rotateInUpLeft
+    -webkit-animation-name rotateInUpLeft
+    animation-name rotateInUpLeft
+  .rotateInUpRight
+    -webkit-animation-name rotateInUpRight
+    animation-name rotateInUpRight
+  .rotateOut
+    -webkit-animation-name rotateOut
+    animation-name rotateOut
+  .rotateOutDownLeft
+    -webkit-animation-name rotateOutDownLeft
+    animation-name rotateOutDownLeft
+  .rotateOutDownRight
+    -webkit-animation-name rotateOutDownRight
+    animation-name rotateOutDownRight
+  .rotateOutUpLeft
+    -webkit-animation-name rotateOutUpLeft
+    animation-name rotateOutUpLeft
+  .rotateOutUpRight
+    -webkit-animation-name rotateOutUpRight
+    animation-name rotateOutUpRight
+  .hinge
+    -webkit-animation-name hinge
+    animation-name hinge
+  .rollIn
+    -webkit-animation-name rollIn
+    animation-name rollIn
+  .rollOut
+    -webkit-animation-name rollOut
+    animation-name rollOut
+  .zoomIn
+    -webkit-animation-name zoomIn
+    animation-name zoomIn
+  .zoomInDown
+    -webkit-animation-name zoomInDown
+    animation-name zoomInDown
+  .zoomInLeft
+    -webkit-animation-name zoomInLeft
+    animation-name zoomInLeft
+  .zoomInRight
+    -webkit-animation-name zoomInRight
+    animation-name zoomInRight
+  .zoomInUp
+    -webkit-animation-name zoomInUp
+    animation-name zoomInUp
+  .zoomOut
+    -webkit-animation-name zoomOut
+    animation-name zoomOut
+  .zoomOutDown
+    -webkit-animation-name zoomOutDown
+    animation-name zoomOutDown
+  .zoomOutLeft
+    -webkit-animation-name zoomOutLeft
+    animation-name zoomOutLeft
+  .zoomOutRight
+    -webkit-animation-name zoomOutRight
+    animation-name zoomOutRight
+  .zoomOutUp
+    -webkit-animation-name zoomOutUp
+    animation-name zoomOutUp
+  .slideInDown
+    -webkit-animation-name slideInDown
+    animation-name slideInDown
+  .slideInLeft
+    -webkit-animation-name slideInLeft
+    animation-name slideInLeft
+  .slideInRight
+    -webkit-animation-name slideInRight
+    animation-name slideInRight
+  .slideInUp
+    -webkit-animation-name slideInUp
+    animation-name slideInUp
+  .slideOutDown
+    -webkit-animation-name slideOutDown
+    animation-name slideOutDown
+  .slideOutLeft
+    -webkit-animation-name slideOutLeft
+    animation-name slideOutLeft
+  .slideOutRight
+    -webkit-animation-name slideOutRight
+    animation-name slideOutRight
+  .slideOutUp
+    -webkit-animation-name slideOutUp
+    animation-name slideOutUp
+
+25%, 75%
+  opacity 0
+  opacity 0
+
+50%
+  -webkit-transform scale3d(1.05, 1.05, 1.05)
+  transform scale3d(1.05, 1.05, 1.05)
+  -webkit-transform scale3d(1.05, 1.05, 1.05)
+  transform scale3d(1.05, 1.05, 1.05)
+  -webkit-transform scale3d(1.15, 0.85, 1)
+  transform scale3d(1.15, 0.85, 1)
+  -webkit-transform scale3d(1.15, 0.85, 1)
+  transform scale3d(1.15, 0.85, 1)
+  -webkit-transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)
+  transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)
+  transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  opacity 1
+  opacity 1
+  opacity 0
+  -webkit-transform scale3d(.3, .3, .3)
+  transform scale3d(.3, .3, .3)
+  opacity 0
+  -webkit-transform scale3d(.3, .3, .3)
+  transform scale3d(.3, .3, .3)
+
+100%
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  -webkit-transform rotate3d(0, 0, 1, 0deg)
+  transform rotate3d(0, 0, 1, 0deg)
+  -webkit-transform rotate3d(0, 0, 1, 0deg)
+  transform rotate3d(0, 0, 1, 0deg)
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  -webkit-transform none
+  transform none
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  opacity 1
+  -webkit-transform scale3d(1, 1, 1)
+  transform scale3d(1, 1, 1)
+  -webkit-transform none
+  transform none
+  -webkit-transform none
+  transform none
+  -webkit-transform none
+  transform none
+  -webkit-transform none
+  transform none
+  -webkit-transform none
+  transform none
+  -webkit-transform none
+  transform none
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  opacity 0
+  -webkit-transform scale3d(.3, .3, .3)
+  transform scale3d(.3, .3, .3)
+  opacity 0
+  -webkit-transform scale3d(.3, .3, .3)
+  transform scale3d(.3, .3, .3)
+  opacity 0
+  -webkit-transform translate3d(0, 2000px, 0)
+  transform translate3d(0, 2000px, 0)
+  opacity 0
+  -webkit-transform translate3d(0, 2000px, 0)
+  transform translate3d(0, 2000px, 0)
+  opacity 0
+  -webkit-transform translate3d(-2000px, 0, 0)
+  transform translate3d(-2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(-2000px, 0, 0)
+  transform translate3d(-2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(2000px, 0, 0)
+  transform translate3d(2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(2000px, 0, 0)
+  transform translate3d(2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(0, -2000px, 0)
+  transform translate3d(0, -2000px, 0)
+  opacity 0
+  -webkit-transform translate3d(0, -2000px, 0)
+  transform translate3d(0, -2000px, 0)
+  opacity 1
+  opacity 1
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 0
+  opacity 0
+  opacity 0
+  -webkit-transform translate3d(0, 100%, 0)
+  transform translate3d(0, 100%, 0)
+  opacity 0
+  -webkit-transform translate3d(0, 100%, 0)
+  transform translate3d(0, 100%, 0)
+  opacity 0
+  -webkit-transform translate3d(0, 2000px, 0)
+  transform translate3d(0, 2000px, 0)
+  opacity 0
+  -webkit-transform translate3d(0, 2000px, 0)
+  transform translate3d(0, 2000px, 0)
+  opacity 0
+  -webkit-transform translate3d(-100%, 0, 0)
+  transform translate3d(-100%, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(-100%, 0, 0)
+  transform translate3d(-100%, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(-2000px, 0, 0)
+  transform translate3d(-2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(-2000px, 0, 0)
+  transform translate3d(-2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(100%, 0, 0)
+  transform translate3d(100%, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(100%, 0, 0)
+  transform translate3d(100%, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(2000px, 0, 0)
+  transform translate3d(2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(2000px, 0, 0)
+  transform translate3d(2000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(0, -100%, 0)
+  transform translate3d(0, -100%, 0)
+  opacity 0
+  -webkit-transform translate3d(0, -100%, 0)
+  transform translate3d(0, -100%, 0)
+  opacity 0
+  -webkit-transform translate3d(0, -2000px, 0)
+  transform translate3d(0, -2000px, 0)
+  opacity 0
+  -webkit-transform translate3d(0, -2000px, 0)
+  transform translate3d(0, -2000px, 0)
+  -webkit-transform perspective(400px)
+  transform perspective(400px)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px)
+  transform perspective(400px)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px)
+  transform perspective(400px)
+  -webkit-transform perspective(400px)
+  transform perspective(400px)
+  -webkit-transform perspective(400px)
+  transform perspective(400px)
+  -webkit-transform perspective(400px)
+  transform perspective(400px)
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+  transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+  opacity 0
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+  transform perspective(400px) rotate3d(1, 0, 0, 90deg)
+  opacity 0
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+  transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+  opacity 0
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+  transform perspective(400px) rotate3d(0, 1, 0, 90deg)
+  opacity 0
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform translate3d(100%, 0, 0) skewX(30deg)
+  transform translate3d(100%, 0, 0) skewX(30deg)
+  opacity 0
+  -webkit-transform translate3d(100%, 0, 0) skewX(30deg)
+  transform translate3d(100%, 0, 0) skewX(30deg)
+  opacity 0
+  -webkit-transform-origin center
+  transform-origin center
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin center
+  transform-origin center
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform-origin center
+  transform-origin center
+  -webkit-transform rotate3d(0, 0, 1, 200deg)
+  transform rotate3d(0, 0, 1, 200deg)
+  opacity 0
+  -webkit-transform-origin center
+  transform-origin center
+  -webkit-transform rotate3d(0, 0, 1, 200deg)
+  transform rotate3d(0, 0, 1, 200deg)
+  opacity 0
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform rotate3d(0, 0, 1, 45deg)
+  transform rotate3d(0, 0, 1, 45deg)
+  opacity 0
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform rotate3d(0, 0, 1, 45deg)
+  transform rotate3d(0, 0, 1, 45deg)
+  opacity 0
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform rotate3d(0, 0, 1, -45deg)
+  transform rotate3d(0, 0, 1, -45deg)
+  opacity 0
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform rotate3d(0, 0, 1, -45deg)
+  transform rotate3d(0, 0, 1, -45deg)
+  opacity 0
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform rotate3d(0, 0, 1, -45deg)
+  transform rotate3d(0, 0, 1, -45deg)
+  opacity 0
+  -webkit-transform-origin left bottom
+  transform-origin left bottom
+  -webkit-transform rotate3d(0, 0, 1, -45deg)
+  transform rotate3d(0, 0, 1, -45deg)
+  opacity 0
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform rotate3d(0, 0, 1, 90deg)
+  transform rotate3d(0, 0, 1, 90deg)
+  opacity 0
+  -webkit-transform-origin right bottom
+  transform-origin right bottom
+  -webkit-transform rotate3d(0, 0, 1, 90deg)
+  transform rotate3d(0, 0, 1, 90deg)
+  opacity 0
+  -webkit-transform translate3d(0, 700px, 0)
+  transform translate3d(0, 700px, 0)
+  opacity 0
+  -webkit-transform translate3d(0, 700px, 0)
+  transform translate3d(0, 700px, 0)
+  opacity 0
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 1
+  -webkit-transform none
+  transform none
+  opacity 0
+  -webkit-transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
+  transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
+  opacity 0
+  -webkit-transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
+  transform translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
+  opacity 0
+  opacity 0
+  opacity 0
+  -webkit-transform scale3d(.1, .1, .1) translate3d(0, 2000px, 0)
+  transform scale3d(.1, .1, .1) translate3d(0, 2000px, 0)
+  -webkit-transform-origin center bottom
+  transform-origin center bottom
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 0
+  -webkit-transform scale3d(.1, .1, .1) translate3d(0, 2000px, 0)
+  transform scale3d(.1, .1, .1) translate3d(0, 2000px, 0)
+  -webkit-transform-origin center bottom
+  transform-origin center bottom
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 0
+  -webkit-transform scale(.1) translate3d(-2000px, 0, 0)
+  transform scale(.1) translate3d(-2000px, 0, 0)
+  -webkit-transform-origin left center
+  transform-origin left center
+  opacity 0
+  -webkit-transform scale(.1) translate3d(-2000px, 0, 0)
+  transform scale(.1) translate3d(-2000px, 0, 0)
+  -webkit-transform-origin left center
+  transform-origin left center
+  opacity 0
+  -webkit-transform scale(.1) translate3d(2000px, 0, 0)
+  transform scale(.1) translate3d(2000px, 0, 0)
+  -webkit-transform-origin right center
+  transform-origin right center
+  opacity 0
+  -webkit-transform scale(.1) translate3d(2000px, 0, 0)
+  transform scale(.1) translate3d(2000px, 0, 0)
+  -webkit-transform-origin right center
+  transform-origin right center
+  opacity 0
+  -webkit-transform scale3d(.1, .1, .1) translate3d(0, -2000px, 0)
+  transform scale3d(.1, .1, .1) translate3d(0, -2000px, 0)
+  -webkit-transform-origin center bottom
+  transform-origin center bottom
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 0
+  -webkit-transform scale3d(.1, .1, .1) translate3d(0, -2000px, 0)
+  transform scale3d(.1, .1, .1) translate3d(0, -2000px, 0)
+  -webkit-transform-origin center bottom
+  transform-origin center bottom
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  -webkit-transform translate3d(0, 0, 0)
+  transform translate3d(0, 0, 0)
+  visibility hidden
+  -webkit-transform translate3d(0, 100%, 0)
+  transform translate3d(0, 100%, 0)
+  visibility hidden
+  -webkit-transform translate3d(0, 100%, 0)
+  transform translate3d(0, 100%, 0)
+  visibility hidden
+  -webkit-transform translate3d(-100%, 0, 0)
+  transform translate3d(-100%, 0, 0)
+  visibility hidden
+  -webkit-transform translate3d(-100%, 0, 0)
+  transform translate3d(-100%, 0, 0)
+  visibility hidden
+  -webkit-transform translate3d(100%, 0, 0)
+  transform translate3d(100%, 0, 0)
+  visibility hidden
+  -webkit-transform translate3d(100%, 0, 0)
+  transform translate3d(100%, 0, 0)
+  visibility hidden
+  -webkit-transform translate3d(0, -100%, 0)
+  transform translate3d(0, -100%, 0)
+  visibility hidden
+  -webkit-transform translate3d(0, -100%, 0)
+  transform translate3d(0, -100%, 0)
+
+30%
+  -webkit-transform scale3d(1.25, 0.75, 1)
+  transform scale3d(1.25, 0.75, 1)
+  -webkit-transform scale3d(1.25, 0.75, 1)
+  transform scale3d(1.25, 0.75, 1)
+  -webkit-transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
+  transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
+  -webkit-transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
+  transform translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  opacity 1
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  opacity 1
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, -15deg)
+  transform perspective(400px) rotate3d(0, 1, 0, -15deg)
+  opacity 1
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, -15deg)
+  transform perspective(400px) rotate3d(0, 1, 0, -15deg)
+  opacity 1
+
+40%
+  -webkit-transform scale3d(0.75, 1.25, 1)
+  transform scale3d(0.75, 1.25, 1)
+  -webkit-transform scale3d(0.75, 1.25, 1)
+  transform scale3d(0.75, 1.25, 1)
+  -webkit-transform rotate3d(0, 0, 1, -10deg)
+  transform rotate3d(0, 0, 1, -10deg)
+  -webkit-transform rotate3d(0, 0, 1, -10deg)
+  transform rotate3d(0, 0, 1, -10deg)
+  -webkit-transform scale3d(.9, .9, .9)
+  transform scale3d(.9, .9, .9)
+  -webkit-transform scale3d(.9, .9, .9)
+  transform scale3d(.9, .9, .9)
+  -webkit-transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)
+  transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)
+  -webkit-animation-timing-function ease-out
+  animation-timing-function ease-out
+  -webkit-transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)
+  transform perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)
+  -webkit-animation-timing-function ease-out
+  animation-timing-function ease-out
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  transform perspective(400px) rotate3d(1, 0, 0, -20deg)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, -20deg)
+  transform perspective(400px) rotate3d(0, 1, 0, -20deg)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, -20deg)
+  transform perspective(400px) rotate3d(0, 1, 0, -20deg)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+
+65%
+  -webkit-transform scale3d(.95, 1.05, 1)
+  transform scale3d(.95, 1.05, 1)
+  -webkit-transform scale3d(.95, 1.05, 1)
+  transform scale3d(.95, 1.05, 1)
+
+75%
+  -webkit-transform scale3d(1.05, .95, 1)
+  transform scale3d(1.05, .95, 1)
+  -webkit-transform scale3d(1.05, .95, 1)
+  transform scale3d(1.05, .95, 1)
+  -webkit-transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
+  transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
+  -webkit-transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
+  transform translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
+  -webkit-transform translate3d(0, -10px, 0)
+  transform translate3d(0, -10px, 0)
+  -webkit-transform translate3d(0, -10px, 0)
+  transform translate3d(0, -10px, 0)
+  -webkit-transform translate3d(-10px, 0, 0)
+  transform translate3d(-10px, 0, 0)
+  -webkit-transform translate3d(-10px, 0, 0)
+  transform translate3d(-10px, 0, 0)
+  -webkit-transform translate3d(10px, 0, 0)
+  transform translate3d(10px, 0, 0)
+  -webkit-transform translate3d(10px, 0, 0)
+  transform translate3d(10px, 0, 0)
+  -webkit-transform translate3d(0, 10px, 0)
+  transform translate3d(0, 10px, 0)
+  -webkit-transform translate3d(0, 10px, 0)
+  transform translate3d(0, 10px, 0)
+
+10%, 30%, 50%, 70%, 90%
+  -webkit-transform translate3d(-10px, 0, 0)
+  transform translate3d(-10px, 0, 0)
+  -webkit-transform translate3d(-10px, 0, 0)
+  transform translate3d(-10px, 0, 0)
+
+20%, 40%, 60%, 80%
+  -webkit-transform translate3d(10px, 0, 0)
+  transform translate3d(10px, 0, 0)
+  -webkit-transform translate3d(10px, 0, 0)
+  transform translate3d(10px, 0, 0)
+
+60%
+  -webkit-transform rotate3d(0, 0, 1, 5deg)
+  transform rotate3d(0, 0, 1, 5deg)
+  -webkit-transform rotate3d(0, 0, 1, 5deg)
+  transform rotate3d(0, 0, 1, 5deg)
+  -webkit-transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
+  transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
+  -webkit-transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
+  transform translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
+  opacity 1
+  -webkit-transform scale3d(1.03, 1.03, 1.03)
+  transform scale3d(1.03, 1.03, 1.03)
+  opacity 1
+  -webkit-transform scale3d(1.03, 1.03, 1.03)
+  transform scale3d(1.03, 1.03, 1.03)
+  opacity 1
+  -webkit-transform translate3d(0, 25px, 0)
+  transform translate3d(0, 25px, 0)
+  opacity 1
+  -webkit-transform translate3d(0, 25px, 0)
+  transform translate3d(0, 25px, 0)
+  opacity 1
+  -webkit-transform translate3d(25px, 0, 0)
+  transform translate3d(25px, 0, 0)
+  opacity 1
+  -webkit-transform translate3d(25px, 0, 0)
+  transform translate3d(25px, 0, 0)
+  opacity 1
+  -webkit-transform translate3d(-25px, 0, 0)
+  transform translate3d(-25px, 0, 0)
+  opacity 1
+  -webkit-transform translate3d(-25px, 0, 0)
+  transform translate3d(-25px, 0, 0)
+  opacity 1
+  -webkit-transform translate3d(0, -20px, 0)
+  transform translate3d(0, -20px, 0)
+  opacity 1
+  -webkit-transform translate3d(0, -20px, 0)
+  transform translate3d(0, -20px, 0)
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, 10deg)
+  transform perspective(400px) rotate3d(1, 0, 0, 10deg)
+  opacity 1
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, 10deg)
+  transform perspective(400px) rotate3d(1, 0, 0, 10deg)
+  opacity 1
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, 10deg)
+  transform perspective(400px) rotate3d(0, 1, 0, 10deg)
+  opacity 1
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, 10deg)
+  transform perspective(400px) rotate3d(0, 1, 0, 10deg)
+  opacity 1
+  -webkit-transform skewX(20deg)
+  transform skewX(20deg)
+  opacity 1
+  -webkit-transform skewX(20deg)
+  transform skewX(20deg)
+  opacity 1
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+  transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+  transform scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(10px, 0, 0)
+  transform scale3d(.475, .475, .475) translate3d(10px, 0, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(10px, 0, 0)
+  transform scale3d(.475, .475, .475) translate3d(10px, 0, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
+  transform scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
+  transform scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+  transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  opacity 1
+  -webkit-transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+  transform scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+  -webkit-animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+  animation-timing-function cubic-bezier(0.175, 0.885, 0.320, 1)
+
+80%
+  -webkit-transform rotate3d(0, 0, 1, -5deg)
+  transform rotate3d(0, 0, 1, -5deg)
+  -webkit-transform rotate3d(0, 0, 1, -5deg)
+  transform rotate3d(0, 0, 1, -5deg)
+  -webkit-transform scale3d(.97, .97, .97)
+  transform scale3d(.97, .97, .97)
+  -webkit-transform scale3d(.97, .97, .97)
+  transform scale3d(.97, .97, .97)
+  -webkit-transform perspective(400px) scale3d(.95, .95, .95)
+  transform perspective(400px) scale3d(.95, .95, .95)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px) scale3d(.95, .95, .95)
+  transform perspective(400px) scale3d(.95, .95, .95)
+  -webkit-animation-timing-function ease-in
+  animation-timing-function ease-in
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, -5deg)
+  transform perspective(400px) rotate3d(1, 0, 0, -5deg)
+  -webkit-transform perspective(400px) rotate3d(1, 0, 0, -5deg)
+  transform perspective(400px) rotate3d(1, 0, 0, -5deg)
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, -5deg)
+  transform perspective(400px) rotate3d(0, 1, 0, -5deg)
+  -webkit-transform perspective(400px) rotate3d(0, 1, 0, -5deg)
+  transform perspective(400px) rotate3d(0, 1, 0, -5deg)
+  -webkit-transform skewX(-5deg)
+  transform skewX(-5deg)
+  opacity 1
+  -webkit-transform skewX(-5deg)
+  transform skewX(-5deg)
+  opacity 1
+
+10%, 20%
+  -webkit-transform scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
+  transform scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
+  -webkit-transform scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
+  transform scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
+
+30%, 50%, 70%, 90%
+  -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
+  transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
+  -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
+  transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
+
+40%, 60%, 80%
+  -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
+  transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
+  -webkit-transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
+  transform scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
+
+15%
+  -webkit-transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
+  transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
+  -webkit-transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
+  transform translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
+
+45%
+  -webkit-transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
+  transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
+  -webkit-transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
+  transform translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
+
+0%
+  opacity 0
+  -webkit-transform scale3d(.3, .3, .3)
+  transform scale3d(.3, .3, .3)
+  opacity 0
+  -webkit-transform scale3d(.3, .3, .3)
+  transform scale3d(.3, .3, .3)
+  opacity 0
+  -webkit-transform translate3d(0, -3000px, 0)
+  transform translate3d(0, -3000px, 0)
+  opacity 0
+  -webkit-transform translate3d(0, -3000px, 0)
+  transform translate3d(0, -3000px, 0)
+  opacity 0
+  -webkit-transform translate3d(-3000px, 0, 0)
+  transform translate3d(-3000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(-3000px, 0, 0)
+  transform translate3d(-3000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(3000px, 0, 0)
+  transform translate3d(3000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(3000px, 0, 0)
+  transform translate3d(3000px, 0, 0)
+  opacity 0
+  -webkit-transform translate3d(0, 3000px, 0)
+  transform translate3d(0, 3000px, 0)
+  opacity 0
+  -webkit-transform translate3d(0, 3000px, 0)
+  transform translate3d(0, 3000px, 0)
+
+20%
+  -webkit-transform scale3d(1.1, 1.1, 1.1)
+  transform scale3d(1.1, 1.1, 1.1)
+  -webkit-transform scale3d(1.1, 1.1, 1.1)
+  transform scale3d(1.1, 1.1, 1.1)
+
+50%, 55%
+  opacity 1
+  -webkit-transform scale3d(1.1, 1.1, 1.1)
+  transform scale3d(1.1, 1.1, 1.1)
+  opacity 1
+  -webkit-transform scale3d(1.1, 1.1, 1.1)
+  transform scale3d(1.1, 1.1, 1.1)
+
+40%, 45%
+  opacity 1
+  -webkit-transform translate3d(0, -20px, 0)
+  transform translate3d(0, -20px, 0)
+  opacity 1
+  -webkit-transform translate3d(0, -20px, 0)
+  transform translate3d(0, -20px, 0)
+  opacity 1
+  -webkit-transform translate3d(0, 20px, 0)
+  transform translate3d(0, 20px, 0)
+  opacity 1
+  -webkit-transform translate3d(0, 20px, 0)
+  transform translate3d(0, 20px, 0)
+
+20%, 60%
+  -webkit-transform rotate3d(0, 0, 1, 80deg)
+  transform rotate3d(0, 0, 1, 80deg)
+  -webkit-transform-origin top left
+  transform-origin top left
+  -webkit-animation-timing-function ease-in-out
+  animation-timing-function ease-in-out
+  -webkit-transform rotate3d(0, 0, 1, 80deg)
+  transform rotate3d(0, 0, 1, 80deg)
+  -webkit-transform-origin top left
+  transform-origin top left
+  -webkit-animation-timing-function ease-in-out
+  animation-timing-function ease-in-out
+
+40%, 80%
+  -webkit-transform rotate3d(0, 0, 1, 60deg)
+  transform rotate3d(0, 0, 1, 60deg)
+  -webkit-transform-origin top left
+  transform-origin top left
+  -webkit-animation-timing-function ease-in-out
+  animation-timing-function ease-in-out
+  opacity 1
+  -webkit-transform rotate3d(0, 0, 1, 60deg)
+  transform rotate3d(0, 0, 1, 60deg)
+  -webkit-transform-origin top left
+  transform-origin top left
+  -webkit-animation-timing-function ease-in-out
+  animation-timing-function ease-in-out
+  opacity 1
+

http://git-wip-us.apache.org/repos/asf/flink/blob/c36b3d7a/flink-runtime-web/web-dashboard/app/styles/graph.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/graph.styl b/flink-runtime-web/web-dashboard/app/styles/graph.styl
index 3753f69..6de87c2 100644
--- a/flink-runtime-web/web-dashboard/app/styles/graph.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/graph.styl
@@ -29,6 +29,7 @@ svg.graph
     font-size 14px
 
   .node
+    cursor: pointer
     > rect
       stroke #999
       stroke-width 5px

http://git-wip-us.apache.org/repos/asf/flink/blob/c36b3d7a/flink-runtime-web/web-dashboard/app/styles/index.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/index.styl b/flink-runtime-web/web-dashboard/app/styles/index.styl
index 3c146a5..6299185 100644
--- a/flink-runtime-web/web-dashboard/app/styles/index.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/index.styl
@@ -17,8 +17,10 @@
  */
 
 @import 'nib'
+@import './animate'
 
 sidebar-width = 250px
+sidebar-width-small = 160px
 
 #sidebar
   overflow: hidden
@@ -39,6 +41,14 @@ sidebar-width = 250px
   .logo
     width: auto
     height: 22px
+    img
+      display: inline-block
+
+  .navbar-static-top
+    overflow: hidden
+    height: 51px
+    .navbar-header
+      width: 100%
 
   .navbar-brand.navbar-brand-text
     font-size: 14px
@@ -118,6 +128,14 @@ sidebar-width = 250px
   th
     font-weight: normal
     color: #999999
+    
+  td.td-long
+    width: 20%
+    white-space: pre-wrap
+    white-space: -moz-pre-wrap
+    white-space: -pre-wrap
+    white-space: -o-pre-wrap
+    word-wrap: break-word
 
   &.table-clickable
     tr
@@ -301,11 +319,37 @@ pre.exception
           border-bottom: none
           border-left: 2px solid #000000
 
+.navbar-main, .navbar-secondary, .navbar-main-additional, .navbar-secondary-additional
+  .navbar-title
+    padding: 12px 20px 13px 20px
+
 @import './job'
 @import './graph'
 @import './timeline'
 
-@media (min-width: 768px)
+@media (min-width: 1024px) and (max-width: 1279px)
+  #sidebar
+    left: 0
+    width: sidebar-width-small
+    
+    .navbar-static-top
+      .navbar-brand-text
+        display: none
+
+  #content
+    margin-left: sidebar-width-small
+
+    #fold-button
+      display: none
+
+    .navbar-main, .navbar-main-additional
+      left: sidebar-width-small
+
+  .table
+    td.td-long
+      width: 20%
+
+@media (min-width: 1280px)
   #sidebar
     left: 0
 
@@ -318,6 +362,6 @@ pre.exception
     .navbar-main, .navbar-main-additional
       left: sidebar-width
 
-  .navbar-main, .navbar-secondary, .navbar-main-additional, .navbar-secondary-additional
-    .navbar-title
-      padding: 12px 20px 13px 20px
+  .table
+    td.td-long
+      width: 30%

http://git-wip-us.apache.org/repos/asf/flink/blob/c36b3d7a/flink-runtime-web/web-dashboard/app/styles/job.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/job.styl b/flink-runtime-web/web-dashboard/app/styles/job.styl
index ef12806..f499260 100644
--- a/flink-runtime-web/web-dashboard/app/styles/job.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/job.styl
@@ -43,18 +43,16 @@
   &.table-body-hover
     > tbody
       border-top: none
+      border-left: 2px solid transparent
+      &.active
+        border-left: 2px solid #000000
       &:hover, &.active
         td:not(.tab-column)
           background-color: #f0f0f0
         td.tab-column li.active
-            background-color: #f0f0f0
+          background-color: #f0f0f0
       
   &.table-activable
-    // tbody
-    //   border-left: 2px solid transparent
-    //   &.active
-    //     border-left: 2px solid #000000
-
     th.tab-column, td.tab-column
       border-top: none
       width: 47px

http://git-wip-us.apache.org/repos/asf/flink/blob/c36b3d7a/flink-runtime-web/web-dashboard/web/css/index.css
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/web/css/index.css b/flink-runtime-web/web-dashboard/web/css/index.css
index 2077b14..09f8291 100644
--- a/flink-runtime-web/web-dashboard/web/css/index.css
+++ b/flink-runtime-web/web-dashboard/web/css/index.css
@@ -39,6 +39,16 @@
   width: auto;
   height: 22px;
 }
+#sidebar .logo img {
+  display: inline-block;
+}
+#sidebar .navbar-static-top {
+  overflow: hidden;
+  height: 51px;
+}
+#sidebar .navbar-static-top .navbar-header {
+  width: 100%;
+}
 #sidebar .navbar-brand.navbar-brand-text {
   font-size: 14px;
   font-weight: bold;
@@ -132,6 +142,14 @@
   font-weight: normal;
   color: #999;
 }
+.table td.td-long {
+  width: 20%;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
 .table.table-clickable tr {
   cursor: pointer;
 }
@@ -355,6 +373,12 @@ pre.exception {
   border-bottom: none;
   border-left: 2px solid #000;
 }
+.navbar-main .navbar-title,
+.navbar-secondary .navbar-title,
+.navbar-main-additional .navbar-title,
+.navbar-secondary-additional .navbar-title {
+  padding: 12px 20px 13px 20px;
+}
 .canvas-wrapper {
   border: 1px solid #ddd;
   position: relative;
@@ -382,6 +406,10 @@ pre.exception {
 }
 .table.table-body-hover > tbody {
   border-top: none;
+  border-left: 2px solid transparent;
+}
+.table.table-body-hover > tbody.active {
+  border-left: 2px solid #000;
 }
 .table.table-body-hover > tbody:hover td:not(.tab-column),
 .table.table-body-hover > tbody.active td:not(.tab-column) {
@@ -425,6 +453,9 @@ svg.graph text {
   font-weight: 300;
   font-size: 14px;
 }
+svg.graph .node {
+  cursor: pointer;
+}
 svg.graph .node > rect {
   stroke: #999;
   stroke-width: 5px;
@@ -498,7 +529,29 @@ svg.graph .node-label {
   font-size: 14px;
   line-height: 1.4;
 }
-@media (min-width: 768px) {
+@media (min-width: 1024px) and (max-width: 1279px) {
+  #sidebar {
+    left: 0;
+    width: 160px;
+  }
+  #sidebar .navbar-static-top .navbar-brand-text {
+    display: none;
+  }
+  #content {
+    margin-left: 160px;
+  }
+  #content #fold-button {
+    display: none;
+  }
+  #content .navbar-main,
+  #content .navbar-main-additional {
+    left: 160px;
+  }
+  .table td.td-long {
+    width: 20%;
+  }
+}
+@media (min-width: 1280px) {
   #sidebar {
     left: 0;
   }
@@ -512,10 +565,7 @@ svg.graph .node-label {
   #content .navbar-main-additional {
     left: 250px;
   }
-  .navbar-main .navbar-title,
-  .navbar-secondary .navbar-title,
-  .navbar-main-additional .navbar-title,
-  .navbar-secondary-additional .navbar-title {
-    padding: 12px 20px 13px 20px;
+  .table td.td-long {
+    width: 30%;
   }
 }


Mime
View raw message