diff --git a/package-lock.json b/package-lock.json
index ab879e3..1f9ecc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1586,6 +1586,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -10949,6 +10954,11 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scrollmonitor": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/scrollmonitor/-/scrollmonitor-1.2.9.tgz",
+      "integrity": "sha512-pgviMf1xa3nfKvVxH/MhA3o96UVHHWyjUPKfKSfGmRjWpLJLM/IMRlNpqWtgsV9Av2WyI2JmyiSeVJVkt/AV3w=="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -12460,6 +12470,14 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
       "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ=="
     },
+    "v-animate-css": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/v-animate-css/-/v-animate-css-0.0.5.tgz",
+      "integrity": "sha512-FML26yVYX3hCTWTKioTNAIXjaWIFWa1mSczb92cLkMYI9QI6uRacKx7QnBNB17IOFLFEv8mc14aawe2In/ba1w==",
+      "requires": {
+        "scrollmonitor": "^1.2.4"
+      }
+    },
     "v8flags": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
@@ -13196,6 +13214,11 @@
         }
       }
     },
+    "wow.js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/wow.js/-/wow.js-1.2.2.tgz",
+      "integrity": "sha1-JHUZsKNCMZsaY+Iq6prOwanqV/U="
+    },
     "wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
diff --git a/package.json b/package.json
index 7f649ec..9da4da6 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.9.0",
@@ -17,6 +18,7 @@
     "mavon-editor": "^2.6.17",
     "postcss-px2rem": "^0.3.0",
     "px2rem-loader": "^0.1.9",
+    "v-animate-css": "0.0.5",
     "vue": "^2.6.10",
     "vue-cropperjs": "^3.0.0",
     "vue-i18n": "^8.10.0",
@@ -25,7 +27,8 @@
     "vue-router": "^3.0.3",
     "vue-schart": "^2.0.0",
     "vuedraggable": "^2.17.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "wow.js": "^1.2.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",
diff --git a/src/assets/img/arrow.png b/src/assets/img/arrow.png
index 066334d..2ed1b66 100644
Binary files a/src/assets/img/arrow.png and b/src/assets/img/arrow.png differ
diff --git a/src/assets/img/close.png b/src/assets/img/close.png
index 8478817..e201d51 100644
Binary files a/src/assets/img/close.png and b/src/assets/img/close.png differ
diff --git a/src/assets/img/data1.png b/src/assets/img/data1.png
index 7f8c2cd..9593de5 100644
Binary files a/src/assets/img/data1.png and b/src/assets/img/data1.png differ
diff --git a/src/assets/img/data2.png b/src/assets/img/data2.png
index 06dfca7..e5f1a17 100644
Binary files a/src/assets/img/data2.png and b/src/assets/img/data2.png differ
diff --git a/src/assets/img/data3.png b/src/assets/img/data3.png
index 1ee01f8..7e54e28 100644
Binary files a/src/assets/img/data3.png and b/src/assets/img/data3.png differ
diff --git a/src/assets/img/download.png b/src/assets/img/download.png
index 7ed98be..ccfdec1 100644
Binary files a/src/assets/img/download.png and b/src/assets/img/download.png differ
diff --git a/src/assets/img/index/index1.png b/src/assets/img/index/index1.png
index 154a715..6105dc0 100644
Binary files a/src/assets/img/index/index1.png and b/src/assets/img/index/index1.png differ
diff --git a/src/assets/img/index/index10.png b/src/assets/img/index/index10.png
index bc6ca78..f063dc8 100644
Binary files a/src/assets/img/index/index10.png and b/src/assets/img/index/index10.png differ
diff --git a/src/assets/img/index/index11.png b/src/assets/img/index/index11.png
index 4c2e04c..075dbb6 100644
Binary files a/src/assets/img/index/index11.png and b/src/assets/img/index/index11.png differ
diff --git a/src/assets/img/index/index12.png b/src/assets/img/index/index12.png
deleted file mode 100644
index 76e1b29..0000000
Binary files a/src/assets/img/index/index12.png and /dev/null differ
diff --git a/src/assets/img/index/index13.png b/src/assets/img/index/index13.png
index 080437a..9057046 100644
Binary files a/src/assets/img/index/index13.png and b/src/assets/img/index/index13.png differ
diff --git a/src/assets/img/index/index14.png b/src/assets/img/index/index14.png
deleted file mode 100644
index 62eb609..0000000
Binary files a/src/assets/img/index/index14.png and /dev/null differ
diff --git a/src/assets/img/index/index15.png b/src/assets/img/index/index15.png
index d63e3b7..0c4d706 100644
Binary files a/src/assets/img/index/index15.png and b/src/assets/img/index/index15.png differ
diff --git a/src/assets/img/index/index16.png b/src/assets/img/index/index16.png
deleted file mode 100644
index 6b8ad03..0000000
Binary files a/src/assets/img/index/index16.png and /dev/null differ
diff --git a/src/assets/img/index/index17.png b/src/assets/img/index/index17.png
index 5dd283d..76704be 100644
Binary files a/src/assets/img/index/index17.png and b/src/assets/img/index/index17.png differ
diff --git a/src/assets/img/index/index18.png b/src/assets/img/index/index18.png
deleted file mode 100644
index a411830..0000000
Binary files a/src/assets/img/index/index18.png and /dev/null differ
diff --git a/src/assets/img/index/index19.png b/src/assets/img/index/index19.png
index 73ca46f..800efd5 100644
Binary files a/src/assets/img/index/index19.png and b/src/assets/img/index/index19.png differ
diff --git a/src/assets/img/index/index2.png b/src/assets/img/index/index2.png
index cd393e8..3add809 100644
Binary files a/src/assets/img/index/index2.png and b/src/assets/img/index/index2.png differ
diff --git a/src/assets/img/index/index20.png b/src/assets/img/index/index20.png
index b481e8c..eedcc51 100644
Binary files a/src/assets/img/index/index20.png and b/src/assets/img/index/index20.png differ
diff --git a/src/assets/img/index/index3.png b/src/assets/img/index/index3.png
index 8ac5eb9..15ec748 100644
Binary files a/src/assets/img/index/index3.png and b/src/assets/img/index/index3.png differ
diff --git a/src/assets/img/index/index4.png b/src/assets/img/index/index4.png
index 159be5a..3c923a3 100644
Binary files a/src/assets/img/index/index4.png and b/src/assets/img/index/index4.png differ
diff --git a/src/assets/img/index/index5.png b/src/assets/img/index/index5.png
index 114d12b..c151071 100644
Binary files a/src/assets/img/index/index5.png and b/src/assets/img/index/index5.png differ
diff --git a/src/assets/img/index/index6.png b/src/assets/img/index/index6.png
index 4375f8b..7bb0b89 100644
Binary files a/src/assets/img/index/index6.png and b/src/assets/img/index/index6.png differ
diff --git a/src/assets/img/index/index7.png b/src/assets/img/index/index7.png
index a1712a1..afdae3e 100644
Binary files a/src/assets/img/index/index7.png and b/src/assets/img/index/index7.png differ
diff --git a/src/assets/img/index/index8.png b/src/assets/img/index/index8.png
index b68ca15..ccd360a 100644
Binary files a/src/assets/img/index/index8.png and b/src/assets/img/index/index8.png differ
diff --git a/src/assets/img/index/index9.png b/src/assets/img/index/index9.png
index 9de1b11..47a4761 100644
Binary files a/src/assets/img/index/index9.png and b/src/assets/img/index/index9.png differ
diff --git a/src/assets/img/index/pro-bg1-1.png b/src/assets/img/index/pro-bg1-1.png
new file mode 100644
index 0000000..aecce15
Binary files /dev/null and b/src/assets/img/index/pro-bg1-1.png differ
diff --git a/src/assets/img/index/pro-bg1-2.png b/src/assets/img/index/pro-bg1-2.png
new file mode 100644
index 0000000..5d548d1
Binary files /dev/null and b/src/assets/img/index/pro-bg1-2.png differ
diff --git a/src/assets/img/index/pro-bg1-3.png b/src/assets/img/index/pro-bg1-3.png
new file mode 100644
index 0000000..017b385
Binary files /dev/null and b/src/assets/img/index/pro-bg1-3.png differ
diff --git a/src/assets/img/index/pro-bg1-4.png b/src/assets/img/index/pro-bg1-4.png
new file mode 100644
index 0000000..d2fad0d
Binary files /dev/null and b/src/assets/img/index/pro-bg1-4.png differ
diff --git a/src/assets/img/index/pro-bg2-1.png b/src/assets/img/index/pro-bg2-1.png
new file mode 100644
index 0000000..47b731e
Binary files /dev/null and b/src/assets/img/index/pro-bg2-1.png differ
diff --git a/src/assets/img/index/pro-bg2-2.png b/src/assets/img/index/pro-bg2-2.png
new file mode 100644
index 0000000..bb84b37
Binary files /dev/null and b/src/assets/img/index/pro-bg2-2.png differ
diff --git a/src/assets/img/index/pro-bg2-3.png b/src/assets/img/index/pro-bg2-3.png
new file mode 100644
index 0000000..0d08007
Binary files /dev/null and b/src/assets/img/index/pro-bg2-3.png differ
diff --git a/src/assets/img/index/pro-bg3-1.png b/src/assets/img/index/pro-bg3-1.png
new file mode 100644
index 0000000..d02fee8
Binary files /dev/null and b/src/assets/img/index/pro-bg3-1.png differ
diff --git a/src/assets/img/index/pro-bg3-2.png b/src/assets/img/index/pro-bg3-2.png
new file mode 100644
index 0000000..7c996e9
Binary files /dev/null and b/src/assets/img/index/pro-bg3-2.png differ
diff --git a/src/assets/img/index/pro-bg3-3.png b/src/assets/img/index/pro-bg3-3.png
new file mode 100644
index 0000000..8ee816b
Binary files /dev/null and b/src/assets/img/index/pro-bg3-3.png differ
diff --git a/src/assets/img/index/pro-bg3-4.png b/src/assets/img/index/pro-bg3-4.png
new file mode 100644
index 0000000..4b699e5
Binary files /dev/null and b/src/assets/img/index/pro-bg3-4.png differ
diff --git a/src/assets/img/index/pro-bg3-5.png b/src/assets/img/index/pro-bg3-5.png
new file mode 100644
index 0000000..d66cdea
Binary files /dev/null and b/src/assets/img/index/pro-bg3-5.png differ
diff --git a/src/assets/img/index/pro-bg3-6.png b/src/assets/img/index/pro-bg3-6.png
new file mode 100644
index 0000000..7b68d41
Binary files /dev/null and b/src/assets/img/index/pro-bg3-6.png differ
diff --git a/src/assets/img/index/pro-bg3-7.png b/src/assets/img/index/pro-bg3-7.png
new file mode 100644
index 0000000..2e793dc
Binary files /dev/null and b/src/assets/img/index/pro-bg3-7.png differ
diff --git a/src/assets/img/index/pro-bg4-1.png b/src/assets/img/index/pro-bg4-1.png
new file mode 100644
index 0000000..624ecf4
Binary files /dev/null and b/src/assets/img/index/pro-bg4-1.png differ
diff --git a/src/assets/img/index/pro-bg4-2.png b/src/assets/img/index/pro-bg4-2.png
new file mode 100644
index 0000000..977bc2c
Binary files /dev/null and b/src/assets/img/index/pro-bg4-2.png differ
diff --git a/src/assets/img/index/pro-bg4-3.png b/src/assets/img/index/pro-bg4-3.png
new file mode 100644
index 0000000..9ea295c
Binary files /dev/null and b/src/assets/img/index/pro-bg4-3.png differ
diff --git a/src/assets/img/index/search.png b/src/assets/img/index/search.png
index 4991f3d..1c62bc3 100644
Binary files a/src/assets/img/index/search.png and b/src/assets/img/index/search.png differ
diff --git a/src/assets/img/info1.png b/src/assets/img/info1.png
index 24fc5f8..0ad7d0e 100644
Binary files a/src/assets/img/info1.png and b/src/assets/img/info1.png differ
diff --git a/src/assets/img/info2.png b/src/assets/img/info2.png
index 45db3ac..f1c90f3 100644
Binary files a/src/assets/img/info2.png and b/src/assets/img/info2.png differ
diff --git a/src/assets/img/info3.png b/src/assets/img/info3.png
index d99a2c6..555bb59 100644
Binary files a/src/assets/img/info3.png and b/src/assets/img/info3.png differ
diff --git a/src/assets/img/login-bg.png b/src/assets/img/login-bg.png
index 20d8507..d09f29c 100644
Binary files a/src/assets/img/login-bg.png and b/src/assets/img/login-bg.png differ
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
index eea0dbb..51072f3 100644
Binary files a/src/assets/img/logo.png and b/src/assets/img/logo.png differ
diff --git a/src/assets/img/product.png b/src/assets/img/product.png
index cd22cfd..53009e3 100644
Binary files a/src/assets/img/product.png and b/src/assets/img/product.png differ
diff --git a/src/assets/img/remove-black.png b/src/assets/img/remove-black.png
index a023959..e4edc11 100644
Binary files a/src/assets/img/remove-black.png and b/src/assets/img/remove-black.png differ
diff --git a/src/assets/img/remove-gray.png b/src/assets/img/remove-gray.png
index f8bf9f4..969f0b7 100644
Binary files a/src/assets/img/remove-gray.png and b/src/assets/img/remove-gray.png differ
diff --git a/src/assets/img/remove.png b/src/assets/img/remove.png
index 7803099..5c9d013 100644
Binary files a/src/assets/img/remove.png and b/src/assets/img/remove.png differ
diff --git a/src/assets/img/search-gray.png b/src/assets/img/search-gray.png
index 551dbc3..1d09df9 100644
Binary files a/src/assets/img/search-gray.png and b/src/assets/img/search-gray.png differ
diff --git a/src/assets/img/search.png b/src/assets/img/search.png
index c1139bb..1de0f2e 100644
Binary files a/src/assets/img/search.png and b/src/assets/img/search.png differ
diff --git a/src/assets/img/setting.png b/src/assets/img/setting.png
index d60611f..1717560 100644
Binary files a/src/assets/img/setting.png and b/src/assets/img/setting.png differ
diff --git a/src/assets/img/shapes/shape1.png b/src/assets/img/shapes/shape1.png
index 5a36716..db0da73 100644
Binary files a/src/assets/img/shapes/shape1.png and b/src/assets/img/shapes/shape1.png differ
diff --git a/src/assets/img/shapes/shape2.png b/src/assets/img/shapes/shape2.png
index a30f35c..394a0b7 100644
Binary files a/src/assets/img/shapes/shape2.png and b/src/assets/img/shapes/shape2.png differ
diff --git a/src/assets/img/shapes/shape3.png b/src/assets/img/shapes/shape3.png
index b7168b3..b18f50e 100644
Binary files a/src/assets/img/shapes/shape3.png and b/src/assets/img/shapes/shape3.png differ
diff --git a/src/assets/img/shapes/shape4.png b/src/assets/img/shapes/shape4.png
index 310f036..afc5ab2 100644
Binary files a/src/assets/img/shapes/shape4.png and b/src/assets/img/shapes/shape4.png differ
diff --git a/src/assets/img/shapes/shape5.png b/src/assets/img/shapes/shape5.png
index 5bc390f..daebb3a 100644
Binary files a/src/assets/img/shapes/shape5.png and b/src/assets/img/shapes/shape5.png differ
diff --git a/src/assets/img/shapes/shape6.png b/src/assets/img/shapes/shape6.png
index b7d173e..1dd085e 100644
Binary files a/src/assets/img/shapes/shape6.png and b/src/assets/img/shapes/shape6.png differ
diff --git a/src/assets/img/shapes/shape7.png b/src/assets/img/shapes/shape7.png
index 5addc56..6c099b7 100644
Binary files a/src/assets/img/shapes/shape7.png and b/src/assets/img/shapes/shape7.png differ
diff --git a/src/assets/img/shapes/shape8.png b/src/assets/img/shapes/shape8.png
index d01e647..997398c 100644
Binary files a/src/assets/img/shapes/shape8.png and b/src/assets/img/shapes/shape8.png differ
diff --git a/src/assets/img/shapes/shape9.png b/src/assets/img/shapes/shape9.png
index e1e9def..bfbd0fb 100644
Binary files a/src/assets/img/shapes/shape9.png and b/src/assets/img/shapes/shape9.png differ
diff --git a/src/assets/img/stat1.png b/src/assets/img/stat1.png
index e67f3fb..3f860ad 100644
Binary files a/src/assets/img/stat1.png and b/src/assets/img/stat1.png differ
diff --git a/src/assets/img/stat2.png b/src/assets/img/stat2.png
index a597f52..56fc134 100644
Binary files a/src/assets/img/stat2.png and b/src/assets/img/stat2.png differ
diff --git a/src/assets/img/stat3.png b/src/assets/img/stat3.png
index ac5eed9..0b48a60 100644
Binary files a/src/assets/img/stat3.png and b/src/assets/img/stat3.png differ
diff --git a/src/assets/img/stat4.png b/src/assets/img/stat4.png
index df07f14..c290337 100644
Binary files a/src/assets/img/stat4.png and b/src/assets/img/stat4.png differ
diff --git a/src/assets/img/stat5.png b/src/assets/img/stat5.png
index e230f5f..01ca453 100644
Binary files a/src/assets/img/stat5.png and b/src/assets/img/stat5.png differ
diff --git a/src/assets/img/stat6.png b/src/assets/img/stat6.png
index 7f8c2cd..9593de5 100644
Binary files a/src/assets/img/stat6.png and b/src/assets/img/stat6.png differ
diff --git a/src/assets/img/stat7.png b/src/assets/img/stat7.png
index 15ff213..1186e8c 100644
Binary files a/src/assets/img/stat7.png and b/src/assets/img/stat7.png differ
diff --git a/src/assets/img/three.png b/src/assets/img/three.png
index 5a681fd..893ddee 100644
Binary files a/src/assets/img/three.png and b/src/assets/img/three.png differ
diff --git a/src/assets/img/trash.png b/src/assets/img/trash.png
index 275feeb..9e0bbda 100644
Binary files a/src/assets/img/trash.png and b/src/assets/img/trash.png differ
diff --git a/src/assets/img/upload.png b/src/assets/img/upload.png
index 6ff9bee..10dd164 100644
Binary files a/src/assets/img/upload.png and b/src/assets/img/upload.png differ
diff --git a/src/assets/img/user.png b/src/assets/img/user.png
index 0bebcc5..f67610d 100644
Binary files a/src/assets/img/user.png and b/src/assets/img/user.png differ
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index 49d19ad..dc05c3f 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -51,21 +51,21 @@
         <template v-else>
             <!-- 简介 -->
             <ul class="intro">
-                <li :class="{active: active === 1}" @click="toPart(1)">
+                <li class="wow fadeInUp" :class="{active: active === 1}" data-wow-delay="0.2s" @click="toPart(1)">
                     <img src="@/assets/img/index/index1.png" alt="">
                     <div class="text">
                         <h6>平台概览</h6>
                         <p class="desc">值得信赖的财经数据平台</p>
                     </div>
                 </li>
-                <li :class="{active: active === 2}" @click="toPart(2)">
+                <li class="wow fadeInUp" :class="{active: active === 2}" data-wow-delay="0.5s" @click="toPart(2)">
                     <img src="@/assets/img/index/index2.png" alt="">
                     <div class="text">
                         <h6>平台特色与优势</h6>
                         <p class="desc">海量数据，轻松下载</p>
                     </div>
                 </li>
-                <li :class="{active: active === 3}" @click="toPart(3)">
+                <li class="wow fadeInUp" :class="{active: active === 3}" data-wow-delay="0.8s" @click="toPart(3)">
                     <img src="@/assets/img/index/index20.png" alt="">
                     <div class="text">
                         <h6>平台产品介绍</h6>
@@ -76,7 +76,7 @@
             <!-- 关于 -->
             <div class="about" id="part1">
                 <div class="inner">
-                    <h6 class="i-title">关于Dataforward</h6>
+                    <h6 class="i-title wow fadeInDown">关于Dataforward</h6>
                     <div class="desc">欢迎使用 Dataforward——数据前瞻，这是我们的财经数据库。我们的数据涵盖股票数据，期货数据，债券数据，期权数据，利率数据，公募数据和宏观数据，拥有超40年的历史数据，可为您解读、预测、分析，模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。我们的数据均来源于各大专业财经权威网站和数据官方发布平台，并经过专业的数据分类和整理，可让用户轻松便捷地搜索并批量下载到自己研究所需的数据，极大地减轻自己搜索整理数据的时间，提高研究效率, 从而高效的输出研究成果。</div>
                 </div>
             </div>
@@ -86,19 +86,19 @@
                 <img src="@/assets/img/index/index9.png" alt="" class="shape shape2">
                 <img src="@/assets/img/index/index10.png" alt="" class="shape shape3">
                 <div class="inner">
-                    <h6 class="i-title">特色与优势</h6>
+                    <h6 class="i-title wow fadeInDown">特色与优势</h6>
                     <ul class="list">
-                        <li>
+                        <li class="wow fadeInDown" data-wow-delay="0.5s">
                             <img src="@/assets/img/index/index3.png" alt="">
                             <h6>综合全面的财经数据库</h6>
                             <p class="text">跨越多种主要资产类别，超40 年的历史数据和上千种宏观指标数据</p>
                         </li>
-                        <li>
+                        <li class="wow fadeInRight" data-wow-delay="0.8s">
                             <img src="@/assets/img/index/index4.png" alt="">
                             <h6>权威、多样数据源</h6>
                             <p class="text">原始数据来源权威、可靠，用户可依据自己所需进行数据再加工，以获得更准确的结果</p>
                         </li>
-                        <li>
+                        <li class="wow fadeInUp" data-wow-delay="1.1s">
                             <img src="@/assets/img/index/index5.png" alt="">
                             <h6>实时更新无限下载</h6>
                             <p class="text">数据库实时更新，会员用户可无限量下载平台各种数据表，随时获取最新数据</p>
@@ -109,25 +109,34 @@
             <!-- 产品展示 -->
             <div class="product" id="part3">
                 <div class="inner">
-                    <h6 class="i-title">产品展示</h6>
+                    <h6 class="i-title wow fadeInDown">产品展示</h6>
                     <div class="pics">
                         <div class="text">
-                            <img src="@/assets/img/index/index11.png" alt="" class="icon">
-                            <h6>自定义下载灵活便捷</h6>
-                            <p class="desc">可自选字段，时间区间，数据频率，轻松下载所需的数据。</p>
+                            <img src="@/assets/img/index/index11.png" alt="" class="icon wow flipInX" data-wow-delay="0.2s">
+                            <h6 class="wow fadeInDown" data-wow-delay="0.3s">自定义下载灵活便捷</h6>
+                            <p class="desc wow fadeInDown" data-wow-delay="0.7s">可自选字段，时间区间，数据频率，轻松下载所需的数据。</p>
+                        </div>
+                        <div class="pro-bg1">
+                            <img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.3s">
+                            <img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.8s">
+                            <img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="1.1s">
                         </div>
-                        <img src="@/assets/img/index/index12.png" alt="" class="pro-pic">
                     </div>
                 </div>
             </div>
             <div class="product bg-white">
                 <div class="inner">
                     <div class="pics">
-                        <img src="@/assets/img/index/index14.png" alt="" class="pro-pic">
+                        <div class="pro-bg2">
+                            <img src="@/assets/img/index/pro-bg2-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.3s">
+                            <img src="@/assets/img/index/pro-bg2-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg2-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.8s">
+                        </div>
                         <div class="text">
-                            <img src="@/assets/img/index/index13.png" alt="" class="icon">
-                            <h6>使用概况统计一目了然</h6>
-                            <p class="desc">管理员可随时登录后台查看各种数据统计，了解各类数据的下载情况以及前台用户在数据平台的使用情况。</p>
+                            <img src="@/assets/img/index/index13.png" alt="" class="icon wow fadeInRight" data-wow-delay="0.2s">
+                            <h6 class="wow fadeInLeft" data-wow-delay="0.3s">使用概况统计一目了然</h6>
+                            <p class="desc wow fadeInLeft" data-wow-delay="0.7s">管理员可随时登录后台查看各种数据统计，了解各类数据的下载情况以及前台用户在数据平台的使用情况。</p>
                         </div>
                     </div>
                 </div>
@@ -136,22 +145,34 @@
                 <div class="inner">
                     <div class="pics">
                         <div class="text">
-                            <img src="@/assets/img/index/index15.png" alt="" class="icon">
-                            <h6>海量数据随意下载</h6>
-                            <p class="desc">购买后可享受数据免费更新，且不限账号，不限量，畅享全平台数据。</p>
+                            <img src="@/assets/img/index/index15.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s">
+                            <h6 class="wow fadeInUp" data-wow-delay="0.5s">海量数据随意下载</h6>
+                            <p class="desc wow fadeInUp" data-wow-delay="0.5s">购买后可享受数据免费更新，且不限账号，不限量，畅享全平台数据。</p>
+                        </div>
+                        <div class="pro-bg3">
+                            <img src="@/assets/img/index/pro-bg3-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
+                            <img src="@/assets/img/index/pro-bg3-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
+                            <img src="@/assets/img/index/pro-bg3-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
+                            <img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="1s">
+                            <img src="@/assets/img/index/pro-bg3-6.png" alt="" class="bg6 wow fadeInDown" data-wow-delay="1.2s">
+                            <img src="@/assets/img/index/pro-bg3-7.png" alt="" class="bg7 wow fadeInDown" data-wow-delay="1.5s">
                         </div>
-                        <img src="@/assets/img/index/index16.png" alt="" class="pro-pic">
                     </div>
                 </div>
             </div>
             <div class="product bg-white">
                 <div class="inner">
                     <div class="pics">
-                        <img src="@/assets/img/index/index18.png" alt="" class="pro-pic">
+                        <div class="pro-bg4">
+                            <img src="@/assets/img/index/pro-bg4-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.2s">
+                            <img src="@/assets/img/index/pro-bg4-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.5s">
+                            <img src="@/assets/img/index/pro-bg4-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.7s">
+                        </div>
                         <div class="text">
-                            <img src="@/assets/img/index/index17.png" alt="" class="icon">
-                            <h6>模糊搜索高效定位所需数据</h6>
-                            <p class="desc">强大的搜索功能，用户只需输入品种代码、关键词等，系统就会自动搜索出最匹配的数据供用户查看、下载。</p>
+                            <img src="@/assets/img/index/index17.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s">
+                            <h6 class="wow fadeInUp" data-wow-delay="0.5s">模糊搜索高效定位所需数据</h6>
+                            <p class="desc wow fadeInUp" data-wow-delay="0.5s">强大的搜索功能，用户只需输入品种代码、关键词等，系统就会自动搜索出最匹配的数据供用户查看、下载。</p>
                         </div>
                     </div>
                 </div>
@@ -212,6 +233,8 @@ import { mapState } from 'vuex'
 import Setting from '@/setting'
 import util from '@/libs/util'
 import axios from 'axios'
+// import '@/plugins/wow/wow.min.js'
+import WOW from 'wow.js'
 let startTimeLimit = ''
 let endTimeLimit = ''
 export default {
@@ -288,6 +311,7 @@ export default {
         }
     },
     mounted() {
+        new WOW().init()
         this.getHot()
     },
     methods: {
@@ -538,252 +562,424 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .wrap{
-        position: relative;
-        background-color: #F3F6FA;
-        .banner{
-            padding: 160px 0;
-            background:  url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
+@import url(../../../plugins/wow/animate.css);
+.wrap{
+    position: relative;
+    background-color: #F3F6FA;
+    .banner{
+        padding: 160px 0;
+        background:  url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
+    }
+    .title{
+        margin-bottom: 37px;
+        font-size: 45px;
+        color: #fff;
+        text-align: center;
+    }
+    .list-wrap{
+        padding: 20px 40px;
+        background-color: #fff;
+    }
+    .search-wrap{
+        width: 700px;
+        margin: 0 auto;
+    }
+    .search{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 62px;
+        margin: 0 auto;
+        background-color: #fff;
+        border-radius: 4px;
+        overflow: hidden;
+        .icon-wrap{
+            width: 20px;
+            margin: 0 20px;
         }
-        .title{
-            margin-bottom: 37px;
-            font-size: 45px;
-            color: #fff;
-            text-align: center;
+        input{
+            flex: 1;
+            padding-left: 15px;
+            font-size: 18px;
+            color: #919191;
+            background-color: transparent;
+            border: 0;
+            border-left: 2px solid #fff;
+            &::-webkit-input-placeholder{color: #999}
+            &::-moz-placeholder{color: #f5f5f5}
+            &:-moz-placeholder{color: #f5f5f5}
+            &:focus{
+                outline: none;
+            }
         }
-        .list-wrap{
-            padding: 20px 40px;
-            background-color: #fff;
+        .remove{
+            margin-left: 20px;
+            cursor: pointer;
         }
-        .search-wrap{
-            width: 700px;
-            margin: 0 auto;
+    }
+    .hot{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 20px auto 0;
+        .name{
+            font-size: 14px;
+            color: #efefef;
         }
-        .search{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            height: 62px;
-            margin: 0 auto;
-            background-color: #fff;
-            border-radius: 4px;
-            overflow: hidden;
-            .icon-wrap{
-                width: 20px;
-                margin: 0 20px;
-            }
-            input{
-                flex: 1;
-                padding-left: 15px;
-                font-size: 18px;
-                color: #919191;
-                background-color: transparent;
-                border: 0;
-                border-left: 2px solid #fff;
-                &::-webkit-input-placeholder{color: #999}
-                &::-moz-placeholder{color: #f5f5f5}
-                &:-moz-placeholder{color: #f5f5f5}
-                &:focus{
-                    outline: none;
-                }
-            }
-            .remove{
-                margin-left: 20px;
+        .list{
+            display: inline-flex;
+            margin-left: 20px;
+            li{
+                margin-right: 50px;
+                color: #fff;
+                font-size: 14px;
                 cursor: pointer;
             }
         }
-        .hot{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin: 20px auto 0;
-            .name{
+    }
+    &.result{
+        .banner{
+            padding: 46px 0;
+        }
+        .tips{
+            margin-bottom: 22px;
+            .result{
+                margin: 30px 0 10px;
+                font-size: 17px;
+                color: $main-color;
+            }
+            img{
+                width: 22px;
+                margin-right: 5px;
+            }
+            .num{
                 font-size: 14px;
-                color: #efefef;
-            }
-            .list{
-                display: inline-flex;
-                margin-left: 20px;
-                li{
-                    margin-right: 50px;
-                    color: #fff;
-                    font-size: 14px;
-                    cursor: pointer;
-                }
+                color: #515151;
             }
         }
-        &.result{
-            .banner{
-                padding: 46px 0;
-            }
-            .tips{
-                margin-bottom: 22px;
-                .result{
-                    margin: 30px 0 10px;
-                    font-size: 17px;
-                    color: $main-color;
-                }
-                img{
-                    width: 22px;
-                    margin-right: 5px;
+    }
+    .i-title{
+        position: relative;
+        margin-bottom: 37px;
+        font-size: 30px;
+        text-align: center;
+        color: #0B1D30;
+        &:after{
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            width: 30px;
+            height: 4px;
+            transform: translate(-50%);
+            background-color: #006EFF;
+        }
+    }
+    .intro{
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        height: 138px;
+        padding: 43px 0;
+        background-color: #fff;
+        li{
+            display: inline-flex;
+            align-items: center;
+            cursor: pointer;
+            transition: .3s;
+            &.active{
+                h6, .desc{
+                    color: #006EFF;
                 }
-                .num{
-                    font-size: 14px;
-                    color: #515151;
+            }
+            &:hover{
+                margin-top: -15px;
+                h6, .desc{
+                    color: #006EFF;
                 }
             }
         }
-        .i-title{
-            position: relative;
-            margin-bottom: 37px;
-            font-size: 30px;
-            text-align: center;
+        img{
+            width: 50px;
+            margin-right: 15px;
+        }
+        h6{
+            margin-bottom: 5px;
+            font-size: 16px;
             color: #0B1D30;
-            &:after{
-                content: '';
-                position: absolute;
-                bottom: -10px;
-                left: 50%;
-                width: 30px;
-                height: 4px;
-                transform: translate(-50%);
-                background-color: #006EFF;
-            }
+            transition: .5s;
+        }
+        .desc{
+            font-size: 13px;
+            color: #757F92;
+            transition: .5s;
         }
-        .intro{
+    }
+    .inner{
+        width: 1200px;
+        padding: 67px 0;
+        margin: 0 auto;
+    }
+    .about{
+        .inner{
+            padding: 67px;
+        }
+        .desc{
+            min-height: 200px;
+            padding: 35px 280px 35px 55px;
+            font-size: 14px;
+            color: #0B1D30;
+            line-height: 30px;
+            background: url(../../../assets/img/index/index6.png) 0 0/100% 100% no-repeat;
+        }
+    }
+    .adv{
+        position: relative;
+        background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat;
+        .shape{
+            position: absolute;
+        }
+        .shape1{
+            top: 25px;
+            right: 0;
+        }
+        .shape2{
+            bottom: 30px;
+            left: 50px;
+        }
+        .shape3{
+            bottom: 25px;
+            right: 50px;
+        }
+        .list{
             display: flex;
-            justify-content: space-around;
-            align-items: center;
-            padding: 43px 0;
-            background-color: #fff;
+            flex: 1;
+            height: 370px;
             li{
-                display: inline-flex;
-                align-items: center;
-                cursor: pointer;
-                &.active, &:hover{
-                    h6, .desc{
-                        color: #006EFF;
+                padding: 107px 35px 0;
+                margin-right: 20px;
+                text-align: center;
+                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+                border-radius: 10px;
+                &:last-child{
+                    margin-right: 0;
+                }
+                &:hover {
+                    img {
+                        transform: rotateY(180deg)
+                    }
+                    h6 {
+                        margin-top: 40px;
                     }
                 }
             }
             img{
-                width: 50px;
-                margin-right: 15px;
+                width: 64px;
+                transition: .6s;
             }
             h6{
-                margin-bottom: 5px;
-                font-size: 16px;
+                margin: 45px 0 16px;
+                font-size: 18px;
                 color: #0B1D30;
+                transition: .3s;
             }
-            .desc{
-                font-size: 13px;
+            .text{
+                font-size: 14px;
                 color: #757F92;
             }
         }
-        .inner{
-            width: 1200px;
-            padding: 67px 0;
-            margin: 0 auto;
+    }
+    .pics{
+        display: flex;
+        justify-content: space-between;
+        .icon{
+            width: 60px;
+        }
+        .text{
+            width: 340px;
+        }
+        h6{
+            margin: 30px 0 10px;
+            font-size: 28px;
+            color: #0B1D30;
+        }
+        .desc{
+            font-size: 15px;
+            color: #757F92;
         }
-        .about{
-            .inner{
-                padding: 67px;
+        .pro-pic{
+            width: 460px;
+        }
+        .pro-bg1 {
+            position: relative;
+            width: 555px;
+            height: 353px;
+            img {
+                position: absolute;
+                transition: .5s;
             }
-            .desc{
-                min-height: 200px;
-                padding: 35px 280px 35px 55px;
-                font-size: 14px;
-                color: #0B1D30;
-                line-height: 30px;
-                background: url(../../../assets/img/index/index6.png) 0 0/100% 100% no-repeat;
+            .bg1 {
+                top: 0;
+                left: 0;
+            }
+            .bg2 {
+                top: 84px;
+                left: 222px;
+            }
+            .bg3 {
+                top: 160px;
+                left: 91px;
+            }
+            .bg4 {
+                top: 29px;
+                right: 0;
+            }
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
+                }
+                .bg2 {
+                    transform: scale(1.05);
+                }
+                .bg3 {
+                    transform: translate(-20px, -10px);
+                }
+                .bg4 {
+                    transform: translate(10px, -20px);
+                }
             }
         }
-        .adv{
+        .pro-bg2 {
             position: relative;
-            background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat;
-            .shape{
+            width: 635px;
+            height: 352px;
+            img {
                 position: absolute;
+                transition: .5s;
             }
-            .shape1{
-                top: 25px;
+            .bg1 {
+                top: 16px;
+                left: 36px;
+            }
+            .bg2 {
+                bottom: 0;
+                left: 0;
+            }
+            .bg3 {
+                top: 0;
                 right: 0;
             }
-            .shape2{
-                bottom: 30px;
-                left: 50px;
-            }
-            .shape3{
-                bottom: 25px;
-                right: 50px;
-            }
-            .list{
-                display: flex;
-                flex: 1;
-                height: 370px;
-                li{
-                    padding: 107px 35px 0;
-                    margin-right: 20px;
-                    text-align: center;
-                    box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
-                    border-radius: 10px;
-                    &:last-child{
-                        margin-right: 0;
-                    }
-                }
-                img{
-                    width: 64px;
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
                 }
-                h6{
-                    margin: 45px 0 16px;
-                    font-size: 18px;
-                    color: #0B1D30;
+                .bg2 {
+                    transform: translate(-20px, 40px);
                 }
-                .text{
-                    font-size: 14px;
-                    color: #757F92;
+                .bg3 {
+                    transform: translate(20px, -30px);
                 }
             }
         }
-        .pics{
-            display: flex;
-            justify-content: space-between;
-            .icon{
-                width: 60px;
+        .pro-bg3 {
+            position: relative;
+            width: 565px;
+            height: 308px;
+            img {
+                position: absolute;
+                transition: .5s;
             }
-            .text{
-                width: 340px;
+            .bg1 {
+                top: 0;
+                left: 38px;
             }
-            h6{
-                margin: 30px 0 10px;
-                font-size: 28px;
-                color: #0B1D30;
+            .bg2 {
+                top: 47px;
+                left: 0;
             }
-            .desc{
-                font-size: 15px;
-                color: #757F92;
+            .bg3 {
+                top: 131px;
+                left: 0;
+            }
+            .bg4 {
+                top: 209px;
+                left: 0;
+            }
+            .bg5 {
+                top: 79px;
+                right: 0;
             }
-            .pro-pic{
-                width: 460px;
+            .bg6 {
+                top: 123px;
+                right: 0;
+            }
+            .bg7 {
+                top: 172px;
+                right: 0;
+            }
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
+                }
+                .bg2, .bg3, .bg4 {
+                    transform: translateX(-40px);
+                }
+                .bg5, .bg6, .bg7 {
+                    transform: translate(20px, -30px);
+                }
             }
         }
-        .none{
-            padding: 50px 0;
-            text-align: center;
-            img{
-                width: 324px;
-                margin-bottom: 42px;
+        .pro-bg4 {
+            position: relative;
+            width: 600px;
+            height: 330px;
+            img {
+                position: absolute;
+                transition: .5s;
             }
-            .text{
-                font-size: 12px;
-                color: #333;
+            .bg1 {
+                top: 0;
+                left: 0;
+            }
+            .bg2 {
+                top: 89px;
+                left: 42px;
+            }
+            .bg3 {
+                top: 27px;
+                right: 0;
             }
+            &:hover {
+                .bg1 {
+                    transform: scale(1.1);
+                }
+                .bg2 {
+                    transform: translate(-120px, 40px);
+                }
+                .bg3 {
+                    transform: translate(20px, -30px);
+                }
+            }
+        }
+    }
+    .none{
+        padding: 50px 0;
+        text-align: center;
+        img{
+            width: 324px;
+            margin-bottom: 42px;
+        }
+        .text{
+            font-size: 12px;
+            color: #333;
         }
     }
-    /deep/.preview-dia{
-      padding: 20px;
-      .preview-wrap{
-        height: calc(100vh - 80px);
-        overflow: auto;
-      }
+}
+/deep/.preview-dia{
+    padding: 20px;
+    .preview-wrap{
+    height: calc(100vh - 80px);
+    overflow: auto;
     }
+}
 </style>
\ No newline at end of file
diff --git a/src/plugins/wow/animate.css b/src/plugins/wow/animate.css
new file mode 100644
index 0000000..60f0c96
--- /dev/null
+++ b/src/plugins/wow/animate.css
@@ -0,0 +1,2744 @@
+@charset "UTF-8";
+
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    -ms-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+}
+
+@-webkit-keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  -webkit-animation-name: flash;
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    -ms-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    -ms-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    -ms-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    -ms-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+  -ms-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    -ms-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    -ms-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    -ms-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    -ms-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    -ms-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    -ms-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    -ms-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    -ms-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    -ms-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    -ms-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    -ms-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    -ms-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    -ms-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+@keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    -ms-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  -ms-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    -ms-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    -ms-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    -ms-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    -ms-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    -ms-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    -ms-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+  animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    -ms-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    opacity: 1;
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    -ms-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    -ms-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    -ms-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    opacity: 1;
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    -ms-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+@keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    -ms-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+@keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    -ms-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
diff --git a/src/plugins/wow/wow.min.js b/src/plugins/wow/wow.min.js
new file mode 100644
index 0000000..a123b5e
--- /dev/null
+++ b/src/plugins/wow/wow.min.js
@@ -0,0 +1,3 @@
+/*! WOW wow.js - v1.3.0 - 2016-10-04
+* https://wowjs.uk
+* Copyright (c) 2016 Thomas Grainger; Licensed MIT */!function(a,b){if("function"==typeof define&&define.amd)define(["module","exports"],b);else if("undefined"!=typeof exports)b(module,exports);else{var c={exports:{}};b(c,c.exports),a.WOW=c.exports}}(this,function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){return b.indexOf(a)>=0}function e(a,b){for(var c in b)if(null==a[c]){var d=b[c];a[c]=d}return a}function f(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)}function g(a){var b=arguments.length<=1||void 0===arguments[1]?!1:arguments[1],c=arguments.length<=2||void 0===arguments[2]?!1:arguments[2],d=arguments.length<=3||void 0===arguments[3]?null:arguments[3],e=void 0;return null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e}function h(a,b){null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)&&a["on"+b]()}function i(a,b,c){null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c}function j(a,b,c){null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]}function k(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight}Object.defineProperty(b,"__esModule",{value:!0});var l,m,n=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),o=window.WeakMap||window.MozWeakMap||function(){function a(){c(this,a),this.keys=[],this.values=[]}return n(a,[{key:"get",value:function(a){for(var b=0;b<this.keys.length;b++){var c=this.keys[b];if(c===a)return this.values[b]}}},{key:"set",value:function(a,b){for(var c=0;c<this.keys.length;c++){var d=this.keys[c];if(d===a)return this.values[c]=b,this}return this.keys.push(a),this.values.push(b),this}}]),a}(),p=window.MutationObserver||window.WebkitMutationObserver||window.MozMutationObserver||(m=l=function(){function a(){c(this,a),"undefined"!=typeof console&&null!==console&&(console.warn("MutationObserver is not supported by your browser."),console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content."))}return n(a,[{key:"observe",value:function(){}}]),a}(),l.notSupported=!0,m),q=window.getComputedStyle||function(a){var b=/(\-([a-z]){1})/g;return{getPropertyValue:function(c){"float"===c&&(c="styleFloat"),b.test(c)&&c.replace(b,function(a,b){return b.toUpperCase()});var d=a.currentStyle;return(null!=d?d[c]:void 0)||null}}},r=function(){function a(){var b=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];c(this,a),this.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null,scrollContainer:null,resetAnimation:!0},this.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),this.vendors=["moz","webkit"],this.start=this.start.bind(this),this.resetAnimation=this.resetAnimation.bind(this),this.scrollHandler=this.scrollHandler.bind(this),this.scrollCallback=this.scrollCallback.bind(this),this.scrolled=!0,this.config=e(b,this.defaults),null!=b.scrollContainer&&(this.config.scrollContainer=document.querySelector(b.scrollContainer)),this.animationNameCache=new o,this.wowEvent=g(this.config.boxClass)}return n(a,[{key:"init",value:function(){this.element=window.document.documentElement,d(document.readyState,["interactive","complete"])?this.start():i(document,"DOMContentLoaded",this.start),this.finished=[]}},{key:"start",value:function(){var a=this;if(this.stopped=!1,this.boxes=[].slice.call(this.element.querySelectorAll("."+this.config.boxClass)),this.all=this.boxes.slice(0),this.boxes.length)if(this.disabled())this.resetStyle();else for(var b=0;b<this.boxes.length;b++){var c=this.boxes[b];this.applyStyle(c,!0)}if(this.disabled()||(i(this.config.scrollContainer||window,"scroll",this.scrollHandler),i(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live){var d=new p(function(b){for(var c=0;c<b.length;c++)for(var d=b[c],e=0;e<d.addedNodes.length;e++){var f=d.addedNodes[e];a.doSync(f)}});d.observe(document.body,{childList:!0,subtree:!0})}}},{key:"stop",value:function(){this.stopped=!0,j(this.config.scrollContainer||window,"scroll",this.scrollHandler),j(window,"resize",this.scrollHandler),null!=this.interval&&clearInterval(this.interval)}},{key:"sync",value:function(){p.notSupported&&this.doSync(this.element)}},{key:"doSync",value:function(a){if("undefined"!=typeof a&&null!==a||(a=this.element),1===a.nodeType){a=a.parentNode||a;for(var b=a.querySelectorAll("."+this.config.boxClass),c=0;c<b.length;c++){var e=b[c];d(e,this.all)||(this.boxes.push(e),this.all.push(e),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(e,!0),this.scrolled=!0)}}}},{key:"show",value:function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),h(a,this.wowEvent),this.config.resetAnimation&&(i(a,"animationend",this.resetAnimation),i(a,"oanimationend",this.resetAnimation),i(a,"webkitAnimationEnd",this.resetAnimation),i(a,"MSAnimationEnd",this.resetAnimation)),a}},{key:"applyStyle",value:function(a,b){var c=this,d=a.getAttribute("data-wow-duration"),e=a.getAttribute("data-wow-delay"),f=a.getAttribute("data-wow-iteration");return this.animate(function(){return c.customStyle(a,b,d,e,f)})}},{key:"resetStyle",value:function(){for(var a=0;a<this.boxes.length;a++){var b=this.boxes[a];b.style.visibility="visible"}}},{key:"resetAnimation",value:function(a){if(a.type.toLowerCase().indexOf("animationend")>=0){var b=a.target||a.srcElement;b.className=b.className.replace(this.config.animateClass,"").trim()}}},{key:"customStyle",value:function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a}},{key:"vendorSet",value:function(a,b){for(var c in b)if(b.hasOwnProperty(c)){var d=b[c];a[""+c]=d;for(var e=0;e<this.vendors.length;e++){var f=this.vendors[e];a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=d}}}},{key:"vendorCSS",value:function(a,b){for(var c=q(a),d=c.getPropertyCSSValue(b),e=0;e<this.vendors.length;e++){var f=this.vendors[e];d=d||c.getPropertyCSSValue("-"+f+"-"+b)}return d}},{key:"animationName",value:function(a){var b=void 0;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=q(a).getPropertyValue("animation-name")}return"none"===b?"":b}},{key:"cacheAnimationName",value:function(a){return this.animationNameCache.set(a,this.animationName(a))}},{key:"cachedAnimationName",value:function(a){return this.animationNameCache.get(a)}},{key:"scrollHandler",value:function(){this.scrolled=!0}},{key:"scrollCallback",value:function(){if(this.scrolled){this.scrolled=!1;for(var a=[],b=0;b<this.boxes.length;b++){var c=this.boxes[b];if(c){if(this.isVisible(c)){this.show(c);continue}a.push(c)}}this.boxes=a,this.boxes.length||this.config.live||this.stop()}}},{key:"offsetTop",value:function(a){for(;void 0===a.offsetTop;)a=a.parentNode;for(var b=a.offsetTop;a.offsetParent;)a=a.offsetParent,b+=a.offsetTop;return b}},{key:"isVisible",value:function(a){var b=a.getAttribute("data-wow-offset")||this.config.offset,c=this.config.scrollContainer&&this.config.scrollContainer.scrollTop||window.pageYOffset,d=c+Math.min(this.element.clientHeight,k())-b,e=this.offsetTop(a),f=e+a.clientHeight;return d>=e&&f>=c}},{key:"disabled",value:function(){return!this.config.mobile&&f(navigator.userAgent)}}]),a}();b["default"]=r,a.exports=b["default"]});
\ No newline at end of file