flink-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From se...@apache.org
Subject [38/51] [abbrv] flink git commit: [FLINK-2357] [web dashboard] Add subtasks to vertex display
Date Thu, 17 Sep 2015 18:20:10 GMT
[FLINK-2357] [web dashboard] Add subtasks to vertex display


Project: http://git-wip-us.apache.org/repos/asf/flink/repo
Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/93a4d31d
Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/93a4d31d
Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/93a4d31d

Branch: refs/heads/master
Commit: 93a4d31d9e5d0ffa1ef2b578d1eee8088fa7c0e1
Parents: b3f7917
Author: Piotr Godek <piotr.godek@gmail.com>
Authored: Fri Sep 11 22:37:13 2015 +0200
Committer: Stephan Ewen <sewen@apache.org>
Committed: Thu Sep 17 14:21:52 2015 +0200

----------------------------------------------------------------------
 .../jobs/job.plan.node-list.accumulators.jade   |    4 +-
 .../jobs/job.plan.node-list.overview.jade       |    2 +-
 .../jobs/job.plan.node.accumulators.jade        |   53 +-
 .../partials/jobs/job.plan.node.subtasks.jade   |    4 +-
 .../app/partials/jobs/job.timeline.jade         |    2 +-
 .../app/partials/jobs/job.timeline.vertex.jade  |    3 -
 .../app/scripts/modules/jobs/jobs.ctrl.coffee   |   44 +-
 .../app/scripts/modules/jobs/jobs.dir.coffee    |   55 +-
 .../app/scripts/modules/jobs/jobs.svc.coffee    |   35 +-
 .../web-dashboard/app/styles/animate.styl       | 1907 ------------------
 .../web-dashboard/app/styles/index.styl         |    1 -
 .../web-dashboard/app/styles/job.styl           |    5 +
 flink-runtime-web/web-dashboard/bower.json      |    2 +-
 .../web-dashboard/web/css/index.css             |    5 +
 flink-runtime-web/web-dashboard/web/js/index.js |  168 +-
 .../jobs/job.plan.node-list.accumulators.html   |    4 +-
 .../jobs/job.plan.node-list.overview.html       |    2 +-
 .../jobs/job.plan.node.accumulators.html        |   46 +-
 .../partials/jobs/job.plan.node.subtasks.html   |    4 +-
 .../web/partials/jobs/job.timeline.html         |    2 +-
 20 files changed, 291 insertions(+), 2057 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.accumulators.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.accumulators.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.accumulators.jade
index b3f1f54..ac210af 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.accumulators.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.accumulators.jade
@@ -21,8 +21,8 @@ table.table.table-body-hover.table-clickable.table-activable
       th Name
       th Status
 
-  tbody(ng-repeat="v in job.vertices" ng-class="{ active: v.id == nodeid }" ng-click="changeNode(v.id)")
-    tr
+  tbody(ng-repeat="v in job.vertices" ng-class="{ active: v.id == nodeid }" ng-click="v.id == nodeid || changeNode(v.id)")
+    tr(ng-if="v.type == 'regular'")
       td {{ v.name | humanizeText }}
       td 
         bs-label(status="{{v.status}}") {{v.status}}

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
index fbdc012..5145bf9 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
@@ -30,7 +30,7 @@ table.table.table-body-hover.table-clickable.table-activable
       th Status
 
   tbody(ng-repeat="v in job.vertices" ng-class="{ active: v.id == nodeid }" ng-click="changeNode(v.id)")
-    tr
+    tr(ng-if="v.type == 'regular'")
       td
         span(ng-if="v['start-time'] > -1") {{ v['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
       td

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade
index 4cb93fa..8f0313b 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.accumulators.jade
@@ -18,13 +18,14 @@
 //- center(ng-if="!vertex")
 //-   i.fa.fa-circle-o-notch.fa-spin.fa-3x
 
-div(ng-if="vertex")
+//- div
 
-  div(ng-if="vertex.accumulators.length == 0")
-    p
-      i No accumulators
-  
-  table.table.table-hover.table-clickable.table-activable.table-inner(ng-if="vertex.accumulators.length > 0")
+div(ng-if="accumulators.length == 0")
+  p
+    i No accumulators
+
+div(ng-if="accumulators && accumulators.length > 0")
+  table.table.table-hover.table-clickable.table-activable.table-inner
     thead
       tr
         th Name
@@ -32,7 +33,39 @@ div(ng-if="vertex")
         th Value
 
     tbody
-      tr(ng-repeat="accumulator in vertex.accumulators")
-        td {{ accumulator.name }}
-        td {{ accumulator.type }}
-        td {{ accumulator.value }}
+      tr(ng-repeat="accumulator in accumulators")
+        td(width="30%") {{ accumulator.name }}
+        td(width="30%") {{ accumulator.type }}
+        td(width="30%") {{ accumulator.value }}
+
+  div(ng-if="!nodeUnfolded")
+    a.btn.btn-default(ng-click="toggleFold()")
+      | Show subtasks
+      | 
+      i.fa.fa-chevron-down
+
+    a.btn.btn-default.pull-right(ng-click="deactivateNode(); $event.stopPropagation()" title="Fold")
+      i.fa.fa-chevron-up
+
+  div(ng-if="nodeUnfolded && subtaskAccumulators && subtaskAccumulators.length > 0")
+    a.btn.btn-default(ng-click="toggleFold()")
+      | Hide subtasks
+      | 
+      i.fa.fa-chevron-up
+
+    table.table.table-hover.table-clickable.table-activable.table-inner
+      thead
+        tr
+          th Name
+          th Type
+          th Value
+
+      tbody(ng-if="subtask['user-accumulators'] && subtask['user-accumulators'].length > 0" ng-repeat="subtask in subtaskAccumulators")
+        tr
+          td(colwidth="3")
+            .small-label ({{ subtask.subtask }}) {{ subtask.host }}, attempt: {{ subtask.attempt + 1 }}
+
+        tr(ng-repeat="accumulator in subtask['user-accumulators']")
+          td(width="30%") {{ accumulator.name }}
+          td(width="30%") {{ accumulator.type }}
+          td(width="30%") {{ accumulator.value }}

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
index 3169e1a..9cfed06 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
@@ -19,7 +19,7 @@
 //- center(ng-if="!vertex")
 //-   i.fa.fa-circle-o-notch.fa-spin.fa-3x
 
-table.table.table-hover.table-clickable.table-activable.table-inner(ng-if="vertex")
+table.table.table-hover.table-clickable.table-activable.table-inner(ng-if="subtasks")
   thead
     tr
       th Start Time
@@ -34,7 +34,7 @@ table.table.table-hover.table-clickable.table-activable.table-inner(ng-if="verte
       th Status
 
   tbody
-    tr(ng-repeat="subtask in vertex.st")
+    tr(ng-repeat="subtask in subtasks")
       td
         span(ng-if="subtask['start-time'] > -1") {{ subtask['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
       td

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.jade
index d7b4a31..fdf0561 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.jade
@@ -16,6 +16,6 @@
   limitations under the License.
 
 .canvas-wrapper
-  div.timeline-canvas(timeline job="job")
+  div.timeline-canvas(timeline vertices="vertices" jobid="jobid")
 
 div(ui-view="vertex")

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.vertex.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.vertex.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.vertex.jade
index 7ceb328..68b772f 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.vertex.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.timeline.vertex.jade
@@ -20,9 +20,6 @@
     .panel-title
       | {{ vertex.groupvertex.groupvertexname | humanizeText }}
 
-    //- .panel-info.first
-    //-   | Vertex ID: {{ vertex.groupvertex.groupvertexid }}
-
   .panel-body
     .canvas-wrapper
       div.timeline-canvas(vertex data="vertex")

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
index a5f9594..037a7e8 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
@@ -46,25 +46,27 @@ angular.module('flinkApp')
   console.log 'SingleJobController'
 
   $scope.jobid = $stateParams.jobid
-  $rootScope.job = null
-  $rootScope.plan = null
+  $scope.job = null
+  $scope.plan = null
+  $scope.vertices = null
 
   JobsService.loadJob($stateParams.jobid).then (data) ->
-    $rootScope.job = data
-    $rootScope.plan = data.plan
+    $scope.job = data
+    $scope.plan = data.plan
+    $scope.vertices = data.vertices
 
   refresher = $interval ->
     JobsService.loadJob($stateParams.jobid).then (data) ->
-      $rootScope.job = data
-      # $rootScope.plan = data.plan
+      $scope.job = data
 
       $scope.$broadcast 'reload'
 
   , flinkConfig["refresh-interval"]
 
   $scope.$on '$destroy', ->
-    $rootScope.job = null
-    $rootScope.plan = null
+    $scope.job = null
+    $scope.plan = null
+    $scope.vertices = null
 
     $interval.cancel(refresher)
 
@@ -75,18 +77,34 @@ angular.module('flinkApp')
   console.log 'JobPlanController'
 
   $scope.nodeid = null
+  $scope.nodeUnfolded = false
   $scope.stateList = JobsService.stateList()
 
   $scope.changeNode = (nodeid) ->
     if nodeid != $scope.nodeid
       $scope.nodeid = nodeid
       $scope.vertex = null
+      $scope.subtasks = null
+      $scope.accumulators = null
 
       $scope.$broadcast 'reload'
 
     else
       $scope.nodeid = null
+      $scope.nodeUnfolded = false
       $scope.vertex = null
+      $scope.subtasks = null
+      $scope.accumulators = null
+
+  $scope.deactivateNode = ->
+    $scope.nodeid = null
+    $scope.nodeUnfolded = false
+    $scope.vertex = null
+    $scope.subtasks = null
+    $scope.accumulators = null
+
+  $scope.toggleFold = ->
+    $scope.nodeUnfolded = !$scope.nodeUnfolded
 
 # --------------------------------------
 
@@ -95,13 +113,13 @@ angular.module('flinkApp')
 
   if $scope.nodeid and (!$scope.vertex or !$scope.vertex.st)
     JobsService.getSubtasks($scope.nodeid).then (data) ->
-      $scope.vertex = data
+      $scope.subtasks = data
 
   $scope.$on 'reload', (event) ->
     console.log 'JobPlanOverviewController'
     if $scope.nodeid
       JobsService.getSubtasks($scope.nodeid).then (data) ->
-        $scope.vertex = data
+        $scope.subtasks = data
 
 # --------------------------------------
 
@@ -110,13 +128,15 @@ angular.module('flinkApp')
 
   if $scope.nodeid and (!$scope.vertex or !$scope.vertex.accumulators)
     JobsService.getAccumulators($scope.nodeid).then (data) ->
-      $scope.vertex = data
+      $scope.accumulators = data.main
+      $scope.subtaskAccumulators = data.subtasks
 
   $scope.$on 'reload', (event) ->
     console.log 'JobPlanAccumulatorsController'
     if $scope.nodeid
       JobsService.getAccumulators($scope.nodeid).then (data) ->
-        $scope.vertex = data
+        $scope.accumulators = data.main
+        $scope.subtaskAccumulators = data.subtasks
 
 # --------------------------------------
 

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee
index 60d6224..11f9012 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.dir.coffee
@@ -38,8 +38,6 @@ angular.module('flinkApp')
       testData = []
 
       angular.forEach data.subtasks, (subtask, i) ->
-        console.log data.subtasks
-
         times = [
           {
             label: "Scheduled"
@@ -70,7 +68,7 @@ angular.module('flinkApp')
           }
 
         testData.push {
-          label: "#{subtask.host} (#{subtask.subtask})"
+          label: "(#{subtask.subtask}) #{subtask.host}"
           times: times
         }
 
@@ -102,7 +100,8 @@ angular.module('flinkApp')
   template: "<svg class='timeline' width='0' height='0'></svg>"
 
   scope:
-    job: "="
+    vertices: "="
+    jobid: "="
 
   link: (scope, elem, attrs) ->
     svgEl = elem.children()[0]
@@ -118,32 +117,33 @@ angular.module('flinkApp')
 
       testData = []
 
-      testData.push 
-        times: [
-          label: "Scheduled"
-          color: "#cccccc"
-          borderColor: "#555"
-          starting_time: data.timestamps["CREATED"]
-          ending_time: data.timestamps["CREATED"] + 1
-          type: 'scheduled'
-        ]
-
-      angular.forEach data.vertices, (vertex) ->
+      angular.forEach data, (vertex) ->
         if vertex['start-time'] > -1
-          testData.push 
-            times: [
-              label: translateLabel(vertex.name)
-              color: "#d9f1f7"
-              borderColor: "#62cdea"
-              starting_time: vertex['start-time']
-              ending_time: vertex['end-time']
-              link: vertex.id
-              type: 'regular'
-            ]
+          if vertex.type is 'scheduled'
+            testData.push 
+              times: [
+                label: translateLabel(vertex.name)
+                color: "#cccccc"
+                borderColor: "#555555"
+                starting_time: vertex['start-time']
+                ending_time: vertex['end-time']
+                type: vertex.type
+              ]
+          else
+            testData.push 
+              times: [
+                label: translateLabel(vertex.name)
+                color: "#d9f1f7"
+                borderColor: "#62cdea"
+                starting_time: vertex['start-time']
+                ending_time: vertex['end-time']
+                link: vertex.id
+                type: vertex.type
+              ]
 
       chart = d3.timeline().stack().click((d, i, datum) ->
         if d.link
-          $state.go "single-job.timeline.vertex", { jobid: data.jid, vertexId: d.link }
+          $state.go "single-job.timeline.vertex", { jobid: scope.jobid, vertexId: d.link }
 
       )
       .tickFormat({
@@ -162,7 +162,7 @@ angular.module('flinkApp')
       .datum(testData)
       .call(chart)
 
-    scope.$watch attrs.job, (data) ->
+    scope.$watch attrs.vertices, (data) ->
       analyzeTime(data) if data
 
     return
@@ -183,6 +183,7 @@ angular.module('flinkApp')
     setNode: '&'
 
   link: (scope, elem, attrs) ->
+    g = null
     mainZoom = d3.behavior.zoom()
     subgraphs = []
     jobid = attrs.jobid

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
index 2ef6a34..685f90f 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
@@ -21,6 +21,7 @@ angular.module('flinkApp')
 .service 'JobsService', ($http, flinkConfig, $log, amMoment, $q, $timeout) ->
   currentJob = null
   currentPlan = null
+
   deferreds = {}
   jobs = {
     running: []
@@ -71,6 +72,17 @@ angular.module('flinkApp')
       unless item['end-time'] > -1
         item['end-time'] = item['start-time'] + item['duration']
 
+  @processVertices = (data) ->
+    angular.forEach data.vertices, (vertex, i) ->
+      vertex.type = 'regular'
+
+    data.vertices.unshift({
+      name: 'Scheduled'
+      'start-time': data.timestamps['CREATED']
+      'end-time': data.timestamps['CREATED'] + 1
+      type: 'scheduled'
+    })
+
   @listJobs = ->
     deferred = $q.defer()
 
@@ -101,6 +113,7 @@ angular.module('flinkApp')
     $http.get flinkConfig.jobServer + "/jobs/" + jobid
     .success (data, status, headers, config) =>
       @setEndTimes(data.vertices)
+      @processVertices(data)
 
       $http.get flinkConfig.jobServer + "/jobs/" + jobid + "/config"
       .success (jobConfig) ->
@@ -108,7 +121,7 @@ angular.module('flinkApp')
 
         currentJob = data
 
-        deferreds.job.resolve(data)
+        deferreds.job.resolve(currentJob)
 
     deferreds.job.promise
 
@@ -121,7 +134,6 @@ angular.module('flinkApp')
 
       null
 
-
     deferred = $q.defer()
 
     deferreds.job.promise.then (data) =>
@@ -149,8 +161,6 @@ angular.module('flinkApp')
       .success (data) =>
         # TODO: change to subtasktimes
         vertex.subtasks = data.subtasks
-        @setEndTimes(vertex.subtasks)
-        console.log vertex.subtasks
 
         deferred.resolve(vertex)
 
@@ -160,13 +170,13 @@ angular.module('flinkApp')
     deferred = $q.defer()
 
     deferreds.job.promise.then (data) =>
-      vertex = @seekVertex(vertexid)
+      # vertex = @seekVertex(vertexid)
 
       $http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid
       .success (data) ->
-        vertex.st = data.subtasks
+        subtasks = data.subtasks
 
-        deferred.resolve(vertex)
+        deferred.resolve(subtasks)
 
     deferred.promise
 
@@ -174,16 +184,19 @@ angular.module('flinkApp')
     deferred = $q.defer()
 
     deferreds.job.promise.then (data) =>
-      vertex = @seekVertex(vertexid)
+      # vertex = @seekVertex(vertexid)
 
       $http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid + "/accumulators"
       .success (data) ->
-        vertex.accumulators = data['user-accumulators']
+        accumulators = data['user-accumulators']
 
-        deferred.resolve(vertex)
+        $http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid + "/subtasks/accumulators"
+        .success (data) ->
+          subtaskAccumulators = data.subtasks
 
-    deferred.promise
+          deferred.resolve({ main: accumulators, subtasks: subtaskAccumulators })
 
+    deferred.promise
 
   @loadExceptions = ->
     deferred = $q.defer()

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/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
deleted file mode 100644
index 14171a2..0000000
--- a/flink-runtime-web/web-dashboard/app/styles/animate.styl
+++ /dev/null
@@ -1,1907 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// 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/93a4d31d/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 6299185..e033264 100644
--- a/flink-runtime-web/web-dashboard/app/styles/index.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/index.styl
@@ -17,7 +17,6 @@
  */
 
 @import 'nib'
-@import './animate'
 
 sidebar-width = 250px
 sidebar-width-small = 160px

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/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 f499260..0432071 100644
--- a/flink-runtime-web/web-dashboard/app/styles/job.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/job.styl
@@ -62,6 +62,11 @@
       
     td
       position: relative
+      
+  .small-label
+    text-transform: uppercase
+    font-size: 13px
+    color: #999999
 
 
 .label-group

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/flink-runtime-web/web-dashboard/bower.json
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/bower.json b/flink-runtime-web/web-dashboard/bower.json
index 38a9101..0e9b557 100644
--- a/flink-runtime-web/web-dashboard/bower.json
+++ b/flink-runtime-web/web-dashboard/bower.json
@@ -18,7 +18,7 @@
     "angular": "~1.3.15",
     "angular-ui-router": "~0.2.13",
     "d3": "~3.5.5",
-    "dagre-d3": "~0.4.8",
+    "dagre-d3": "~0.4.10",
     "font-awesome": "~4.3.0",
     "angular-moment": "~0.9.2",
     "moment-duration-format": "~1.3.0",

http://git-wip-us.apache.org/repos/asf/flink/blob/93a4d31d/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 09f8291..0ffea9e 100644
--- a/flink-runtime-web/web-dashboard/web/css/index.css
+++ b/flink-runtime-web/web-dashboard/web/css/index.css
@@ -430,6 +430,11 @@ pre.exception {
 .table.table-activable td {
   position: relative;
 }
+.table .small-label {
+  text-transform: uppercase;
+  font-size: 13px;
+  color: #999;
+}
 .label-group .label {
   display: inline-block;
   width: 2em;


Mime
View raw message