├── .gitignore ├── dist ├── favicon.ico ├── imgs │ ├── about-bg.9ff76dd3ad24ef92da4b4370a48b5a02.png │ ├── menu-web.613efc3d28898a9476ae8672bd58bfca.png │ ├── smoke01.26f85675a7dd296c686bcdd902334c00.png │ ├── smoke02.0a8c7930aef58b8e738b9cfd1df58b60.png │ ├── smoke03.b3eb56adc920e4743186bd0ca96df738.png │ ├── smoke04.92cc0f1ad1774bc88403712ffc0a0769.png │ ├── smoke05.712980c0c8c6915b3255042b76c63208.png │ ├── smoke06.dff15322968a8a8fcc0419ce008400b4.png │ ├── smoke07.3f8555a4e7d1d5b59f799548df03f10e.png │ ├── smoke08.75aaea4e350ab4f6ba63108f1b5ac868.png │ ├── smoke09.c0a522421adab07f6b20f2d19fb046a4.png │ ├── smoke10.8e3db6dcab42d4d2fc2b2844e87641ee.png │ ├── about-web.8627eecbcde7c3a15fef03523d128775.png │ ├── eevee-food.9af9e2902101198fcb022fd8e4e6bdc3.png │ ├── header-bg.5afd1a3f734882bba399c7a2e667f3ef.png │ ├── eevee-drink.f8b591c2bb596b365db38035b955558b.png │ ├── gengar-drink.1e63d44d6cf39607a4527b2de6413051.png │ ├── snorlax-food.e41957ea4dfa06a60365129480382d06.png │ ├── Take-your-heart.946bc78de3491864a8af6aa7eac109a4.png │ ├── jigglypuff-food.3c71fb31ea4331868b25d30b61a1cb75.png │ ├── pickachu-drink.ca1ac5acb51dfbc95eba7d9cb0bef704.png │ ├── background-spiral.c5d64e2d702a992fed648621f874d2b8.png │ ├── battle-menu-left.49ea2dc0c158fc8f874fd6324afb8d55.png │ ├── battle-menu-right.dec833457dca248f89215c6d6e3260bd.png │ ├── header-total-logo.5b4831794634fe4bc2c17389d450a7de.png │ ├── paper_tear_only_bg.f44efaa060da5d0a8ee4c4561195a14a.png │ ├── Joker-white-outline.4907cb3d3a5aee11cb28787b7f1e61bd.png │ ├── menu-page-background.1a9fae3c635aa820f8d110dcf05ba500.png │ └── Pickachu-no-drop-shadow.0d7ba042df0cf806042a58a99129dcb3.png ├── index.html ├── main.36f373fba564966ec0fe.js └── main.6435e698e6ed93c97b1d.css ├── src ├── assets │ ├── imgs │ │ ├── x.png │ │ ├── home.png │ │ ├── smoke01.png │ │ ├── smoke02.png │ │ ├── smoke03.png │ │ ├── smoke04.png │ │ ├── smoke05.png │ │ ├── smoke06.png │ │ ├── smoke07.png │ │ ├── smoke08.png │ │ ├── smoke09.png │ │ ├── smoke10.png │ │ ├── Eclipses.png │ │ ├── Menu-edit.png │ │ ├── Menu-org.png │ │ ├── Pickachu.png │ │ ├── about-bg.png │ │ ├── about-web.png │ │ ├── eevee-food.png │ │ ├── header-bg.png │ │ ├── menu-web.png │ │ ├── eevee-drink.png │ │ ├── gengar-drink.png │ │ ├── snorlax-food.png │ │ ├── Persona5-Logo.png │ │ ├── Take-your-heart.png │ │ ├── jigglypuff-food.png │ │ ├── pickachu-drink.png │ │ ├── Pokemon-cafe-logo.png │ │ ├── background-joker.png │ │ ├── background-spiral.png │ │ ├── battle-menu-left.png │ │ ├── battle-menu-right.png │ │ ├── header-total-logo.png │ │ ├── tear-bottom-right.png │ │ ├── Joker-white-outline.png │ │ ├── background-no-joker.png │ │ ├── menu-page-background.png │ │ ├── paper_tear_only_bg.png │ │ ├── Pickachu-no-drop-shadow.png │ │ └── Pokemon-cafe-logo-no-drop-shadow.png │ └── icons │ │ └── favicon.ico ├── index.html ├── functions │ ├── render.js │ ├── firstLoad.js │ ├── parallax.js │ └── pageLoad.js ├── styles │ ├── about.css │ ├── pageLoad.css │ ├── menu.css │ ├── home.css │ └── animations.css ├── pages │ ├── about.js │ ├── header.js │ ├── menu.js │ └── home.js └── index.js ├── webpack.dev.js ├── webpack.common.js ├── package.json ├── webpack.prod.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/favicon.ico -------------------------------------------------------------------------------- /src/assets/imgs/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/x.png -------------------------------------------------------------------------------- /src/assets/imgs/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/home.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke01.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke02.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke03.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke04.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke05.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke06.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke07.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke08.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke09.png -------------------------------------------------------------------------------- /src/assets/imgs/smoke10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/smoke10.png -------------------------------------------------------------------------------- /src/assets/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/icons/favicon.ico -------------------------------------------------------------------------------- /src/assets/imgs/Eclipses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Eclipses.png -------------------------------------------------------------------------------- /src/assets/imgs/Menu-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Menu-edit.png -------------------------------------------------------------------------------- /src/assets/imgs/Menu-org.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Menu-org.png -------------------------------------------------------------------------------- /src/assets/imgs/Pickachu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Pickachu.png -------------------------------------------------------------------------------- /src/assets/imgs/about-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/about-bg.png -------------------------------------------------------------------------------- /src/assets/imgs/about-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/about-web.png -------------------------------------------------------------------------------- /src/assets/imgs/eevee-food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/eevee-food.png -------------------------------------------------------------------------------- /src/assets/imgs/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/header-bg.png -------------------------------------------------------------------------------- /src/assets/imgs/menu-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/menu-web.png -------------------------------------------------------------------------------- /src/assets/imgs/eevee-drink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/eevee-drink.png -------------------------------------------------------------------------------- /src/assets/imgs/gengar-drink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/gengar-drink.png -------------------------------------------------------------------------------- /src/assets/imgs/snorlax-food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/snorlax-food.png -------------------------------------------------------------------------------- /src/assets/imgs/Persona5-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Persona5-Logo.png -------------------------------------------------------------------------------- /src/assets/imgs/Take-your-heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Take-your-heart.png -------------------------------------------------------------------------------- /src/assets/imgs/jigglypuff-food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/jigglypuff-food.png -------------------------------------------------------------------------------- /src/assets/imgs/pickachu-drink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/pickachu-drink.png -------------------------------------------------------------------------------- /src/assets/imgs/Pokemon-cafe-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Pokemon-cafe-logo.png -------------------------------------------------------------------------------- /src/assets/imgs/background-joker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/background-joker.png -------------------------------------------------------------------------------- /src/assets/imgs/background-spiral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/background-spiral.png -------------------------------------------------------------------------------- /src/assets/imgs/battle-menu-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/battle-menu-left.png -------------------------------------------------------------------------------- /src/assets/imgs/battle-menu-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/battle-menu-right.png -------------------------------------------------------------------------------- /src/assets/imgs/header-total-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/header-total-logo.png -------------------------------------------------------------------------------- /src/assets/imgs/tear-bottom-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/tear-bottom-right.png -------------------------------------------------------------------------------- /src/assets/imgs/Joker-white-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Joker-white-outline.png -------------------------------------------------------------------------------- /src/assets/imgs/background-no-joker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/background-no-joker.png -------------------------------------------------------------------------------- /src/assets/imgs/menu-page-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/menu-page-background.png -------------------------------------------------------------------------------- /src/assets/imgs/paper_tear_only_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/paper_tear_only_bg.png -------------------------------------------------------------------------------- /src/assets/imgs/Pickachu-no-drop-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Pickachu-no-drop-shadow.png -------------------------------------------------------------------------------- /src/assets/imgs/Pokemon-cafe-logo-no-drop-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/src/assets/imgs/Pokemon-cafe-logo-no-drop-shadow.png -------------------------------------------------------------------------------- /dist/imgs/about-bg.9ff76dd3ad24ef92da4b4370a48b5a02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/about-bg.9ff76dd3ad24ef92da4b4370a48b5a02.png -------------------------------------------------------------------------------- /dist/imgs/menu-web.613efc3d28898a9476ae8672bd58bfca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/menu-web.613efc3d28898a9476ae8672bd58bfca.png -------------------------------------------------------------------------------- /dist/imgs/smoke01.26f85675a7dd296c686bcdd902334c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke01.26f85675a7dd296c686bcdd902334c00.png -------------------------------------------------------------------------------- /dist/imgs/smoke02.0a8c7930aef58b8e738b9cfd1df58b60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke02.0a8c7930aef58b8e738b9cfd1df58b60.png -------------------------------------------------------------------------------- /dist/imgs/smoke03.b3eb56adc920e4743186bd0ca96df738.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke03.b3eb56adc920e4743186bd0ca96df738.png -------------------------------------------------------------------------------- /dist/imgs/smoke04.92cc0f1ad1774bc88403712ffc0a0769.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke04.92cc0f1ad1774bc88403712ffc0a0769.png -------------------------------------------------------------------------------- /dist/imgs/smoke05.712980c0c8c6915b3255042b76c63208.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke05.712980c0c8c6915b3255042b76c63208.png -------------------------------------------------------------------------------- /dist/imgs/smoke06.dff15322968a8a8fcc0419ce008400b4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke06.dff15322968a8a8fcc0419ce008400b4.png -------------------------------------------------------------------------------- /dist/imgs/smoke07.3f8555a4e7d1d5b59f799548df03f10e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke07.3f8555a4e7d1d5b59f799548df03f10e.png -------------------------------------------------------------------------------- /dist/imgs/smoke08.75aaea4e350ab4f6ba63108f1b5ac868.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke08.75aaea4e350ab4f6ba63108f1b5ac868.png -------------------------------------------------------------------------------- /dist/imgs/smoke09.c0a522421adab07f6b20f2d19fb046a4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke09.c0a522421adab07f6b20f2d19fb046a4.png -------------------------------------------------------------------------------- /dist/imgs/smoke10.8e3db6dcab42d4d2fc2b2844e87641ee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/smoke10.8e3db6dcab42d4d2fc2b2844e87641ee.png -------------------------------------------------------------------------------- /dist/imgs/about-web.8627eecbcde7c3a15fef03523d128775.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/about-web.8627eecbcde7c3a15fef03523d128775.png -------------------------------------------------------------------------------- /dist/imgs/eevee-food.9af9e2902101198fcb022fd8e4e6bdc3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/eevee-food.9af9e2902101198fcb022fd8e4e6bdc3.png -------------------------------------------------------------------------------- /dist/imgs/header-bg.5afd1a3f734882bba399c7a2e667f3ef.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/header-bg.5afd1a3f734882bba399c7a2e667f3ef.png -------------------------------------------------------------------------------- /dist/imgs/eevee-drink.f8b591c2bb596b365db38035b955558b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/eevee-drink.f8b591c2bb596b365db38035b955558b.png -------------------------------------------------------------------------------- /dist/imgs/gengar-drink.1e63d44d6cf39607a4527b2de6413051.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/gengar-drink.1e63d44d6cf39607a4527b2de6413051.png -------------------------------------------------------------------------------- /dist/imgs/snorlax-food.e41957ea4dfa06a60365129480382d06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/snorlax-food.e41957ea4dfa06a60365129480382d06.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Restraunt Page 5 | 6 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /dist/imgs/Take-your-heart.946bc78de3491864a8af6aa7eac109a4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/Take-your-heart.946bc78de3491864a8af6aa7eac109a4.png -------------------------------------------------------------------------------- /dist/imgs/jigglypuff-food.3c71fb31ea4331868b25d30b61a1cb75.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/jigglypuff-food.3c71fb31ea4331868b25d30b61a1cb75.png -------------------------------------------------------------------------------- /dist/imgs/pickachu-drink.ca1ac5acb51dfbc95eba7d9cb0bef704.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/pickachu-drink.ca1ac5acb51dfbc95eba7d9cb0bef704.png -------------------------------------------------------------------------------- /dist/imgs/background-spiral.c5d64e2d702a992fed648621f874d2b8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/background-spiral.c5d64e2d702a992fed648621f874d2b8.png -------------------------------------------------------------------------------- /dist/imgs/battle-menu-left.49ea2dc0c158fc8f874fd6324afb8d55.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/battle-menu-left.49ea2dc0c158fc8f874fd6324afb8d55.png -------------------------------------------------------------------------------- /dist/imgs/battle-menu-right.dec833457dca248f89215c6d6e3260bd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/battle-menu-right.dec833457dca248f89215c6d6e3260bd.png -------------------------------------------------------------------------------- /dist/imgs/header-total-logo.5b4831794634fe4bc2c17389d450a7de.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/header-total-logo.5b4831794634fe4bc2c17389d450a7de.png -------------------------------------------------------------------------------- /dist/imgs/paper_tear_only_bg.f44efaa060da5d0a8ee4c4561195a14a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/paper_tear_only_bg.f44efaa060da5d0a8ee4c4561195a14a.png -------------------------------------------------------------------------------- /dist/imgs/Joker-white-outline.4907cb3d3a5aee11cb28787b7f1e61bd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/Joker-white-outline.4907cb3d3a5aee11cb28787b7f1e61bd.png -------------------------------------------------------------------------------- /dist/imgs/menu-page-background.1a9fae3c635aa820f8d110dcf05ba500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/menu-page-background.1a9fae3c635aa820f8d110dcf05ba500.png -------------------------------------------------------------------------------- /dist/imgs/Pickachu-no-drop-shadow.0d7ba042df0cf806042a58a99129dcb3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pret3nti0u5/Restaurant-Page/HEAD/dist/imgs/Pickachu-no-drop-shadow.0d7ba042df0cf806042a58a99129dcb3.png -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Restraunt Page
-------------------------------------------------------------------------------- /src/functions/render.js: -------------------------------------------------------------------------------- 1 | // removes all content style attributes and removes children till only header remains as the sole children 2 | const render = function(){ 3 | const content = document.querySelector('#content'); 4 | content.style=""; 5 | while(content.children.length > 1){ 6 | content.children[1].remove(); 7 | } 8 | } 9 | 10 | export default render; 11 | -------------------------------------------------------------------------------- /src/styles/about.css: -------------------------------------------------------------------------------- 1 | #background-about{ 2 | display: flex; 3 | position: absolute; 4 | top:0px; 5 | left:0px; 6 | width: 100%; 7 | height: 0; 8 | background-image: url(../assets/imgs/about-bg.png); 9 | background-size: cover; 10 | padding-top: 143.385%; /* (img-height/img-width)*100 */ 11 | } 12 | 13 | #header-bg{ 14 | position: fixed; 15 | top: 0px; 16 | left: 0px; 17 | width: 100.8vw; 18 | } -------------------------------------------------------------------------------- /src/functions/firstLoad.js: -------------------------------------------------------------------------------- 1 | // preps site the first time it's opened by making a header and loading home page 2 | import headerDiv from "../pages/header"; 3 | import home from "../pages/home"; 4 | import pageLoad from "./pageLoad"; 5 | 6 | const firstLoad = function(){ 7 | const content = document.querySelector("#content"); 8 | const header = headerDiv(); 9 | content.appendChild(header); 10 | home(); 11 | pageLoad(); 12 | } 13 | 14 | export default firstLoad; -------------------------------------------------------------------------------- /src/functions/parallax.js: -------------------------------------------------------------------------------- 1 | // provides parallax effect on homepage speed of different elements with respect to mouse movement can be adjusted by data-speed attribute 2 | const parallax = document.addEventListener('mousemove', function(e){ 3 | this.querySelectorAll('.parallax').forEach(layer => { 4 | const speed = layer.getAttribute("data-speed"); 5 | const x = (window.innerWidth - e.pageX*speed)/100; 6 | const y = (window.innerHeight - e.pageY*speed)/100; 7 | layer.style.transform = `translateX(${x}px) translateY(${y}px)`; 8 | }) 9 | }); 10 | 11 | export default parallax; -------------------------------------------------------------------------------- /src/functions/pageLoad.js: -------------------------------------------------------------------------------- 1 | // initiates smoke animation on page change or load. Cycles through loadimg=no. which has different frame of smoke as backgroung and then adds class animated to change display to none 2 | const pageLoad = function(){ 3 | const pageLoad = document.querySelector(".pageLoad"); 4 | for(let i=1; i<12; i++){ 5 | load(i); 6 | } 7 | function load(i){ 8 | setTimeout(function(){ 9 | if(i<11){ 10 | pageLoad.setAttribute("loadimg", i); 11 | } 12 | else{ 13 | pageLoad.className="animated" 14 | } 15 | },i*70); 16 | } 17 | } 18 | 19 | export default pageLoad; -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import headerBgImage from "../assets/imgs/header-bg.png"; 2 | 3 | const about = function(){ 4 | const content = document.querySelector("#content"); 5 | content.style= "overflow: scroll"; 6 | 7 | const backgroundAbout = document.createElement("div"); 8 | backgroundAbout.id="background-about"; 9 | content.appendChild(backgroundAbout); 10 | 11 | const headerBg = document.createElement("img"); 12 | headerBg.src=headerBgImage; 13 | headerBg.id="header-bg"; 14 | content.appendChild(headerBg); 15 | 16 | const pageLoad = document.createElement("div"); 17 | pageLoad.className="pageLoad"; 18 | content.appendChild(pageLoad); 19 | } 20 | 21 | export default about; -------------------------------------------------------------------------------- /webpack.dev.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const common = require("./webpack.common"); 3 | const { merge } = require("webpack-merge"); 4 | var HtmlWebpackPlugin = require("html-webpack-plugin"); 5 | 6 | module.exports = merge(common, { 7 | mode: "development", 8 | output: { 9 | filename: "main.js", 10 | path: path.resolve(__dirname, "dist") 11 | }, 12 | plugins: [ 13 | new HtmlWebpackPlugin({ 14 | template: "./src/index.html" 15 | }) 16 | ], 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.css$/, 21 | use: [ 22 | "style-loader", //2. Inject styles into DOM 23 | "css-loader", //1. Turns css into commonjs 24 | ] 25 | } 26 | ] 27 | } 28 | }); 29 | 30 | 31 | -------------------------------------------------------------------------------- /webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | var HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: "./src/index.js", 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.html$/, 10 | use: ["html-loader"] 11 | }, 12 | { 13 | test: /\.(svg|png|jpg|gif)$/, 14 | use: { 15 | loader: "file-loader", 16 | options: { 17 | esModule: false, 18 | name: "[name].[hash].[ext]", 19 | outputPath: "imgs" 20 | } 21 | } 22 | }, 23 | { 24 | test: /\.(woff|woff2|eot|ttf|otf)$/, 25 | use: { 26 | loader: "file-loader", 27 | options: { 28 | esModule: false, 29 | name: "[name].[hash].[ext]", 30 | outputPath: "fonts" 31 | } 32 | } 33 | } 34 | ] 35 | } 36 | }; -------------------------------------------------------------------------------- /src/pages/header.js: -------------------------------------------------------------------------------- 1 | import headerTotalLogoImage from "../assets/imgs/header-total-logo.png"; 2 | import menuWebImage from "../assets/imgs/menu-web.png"; 3 | import aboutWebImage from "../assets/imgs/about-web.png"; 4 | 5 | const headerDiv = function(){ 6 | const header = document.createElement("div"); 7 | header.id="header"; 8 | 9 | const headerTotalLogo = document.createElement("img"); 10 | headerTotalLogo.src=headerTotalLogoImage; 11 | headerTotalLogo.id="header-total-logo"; 12 | 13 | header.appendChild(headerTotalLogo); 14 | 15 | const menuWeb = document.createElement("img"); 16 | menuWeb.src=menuWebImage; 17 | menuWeb.id="menu-web"; 18 | 19 | header.appendChild(menuWeb); 20 | 21 | const aboutWeb = document.createElement("img"); 22 | aboutWeb.src=aboutWebImage; 23 | aboutWeb.id="about-web"; 24 | 25 | header.appendChild(aboutWeb); 26 | 27 | return header; 28 | } 29 | 30 | export default headerDiv; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restraunt-page", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack-dev-server --config webpack.dev.js --open", 9 | "build": "webpack --config webpack.prod.js" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@babel/core": "^7.2.2", 15 | "@babel/preset-env": "^7.3.1", 16 | "babel-loader": "^8.0.5", 17 | "clean-webpack-plugin": "^3.0.0", 18 | "css-loader": "^4.3.0", 19 | "file-loader": "^6.1.0", 20 | "html-loader": "^1.3.1", 21 | "html-webpack-plugin": "^4.5.0", 22 | "mini-css-extract-plugin": "^0.11.2", 23 | "optimize-css-assets-webpack-plugin": "^5.0.4", 24 | "path": "^0.12.7", 25 | "style-loader": "^1.2.1", 26 | "webpack": "^4.29.0", 27 | "webpack-cli": "^3.2.1", 28 | "webpack-dev-server": "^3.11.0", 29 | "webpack-merge": "^5.1.4" 30 | }, 31 | "dependencies": { 32 | "css-reset-and-normalize": "^2.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // entrypoint for the app 2 | import "./styles/home.css"; 3 | import "./styles/menu.css"; 4 | import "./styles/pageLoad.css"; 5 | import "./styles/animations.css"; 6 | import "./styles/about.css"; 7 | import "./functions/parallax"; 8 | import home from "./pages/home"; 9 | import menu from "./pages/menu"; 10 | import about from "./pages/about"; 11 | import render from "./functions/render"; 12 | import pageLoad from "./functions/pageLoad"; 13 | import firstLoad from "./functions/firstLoad"; 14 | 15 | firstLoad(); 16 | 17 | const homeButton = document.querySelector("#header-total-logo"); 18 | const menuButton = document.querySelector("#menu-web"); 19 | const aboutButton = document.querySelector("#about-web"); 20 | 21 | homeButton.addEventListener('click', function(){ 22 | render(); 23 | home(); 24 | pageLoad(); 25 | }); 26 | 27 | menuButton.addEventListener('click', function(){ 28 | render(); 29 | menu(); 30 | pageLoad(); 31 | }); 32 | 33 | aboutButton.addEventListener('click', function(){ 34 | render(); 35 | about(); 36 | pageLoad(); 37 | }); 38 | 39 | -------------------------------------------------------------------------------- /webpack.prod.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const common = require("./webpack.common"); 3 | const { merge } = require("webpack-merge"); 4 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 5 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 6 | const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 7 | const TerserPlugin = require("terser-webpack-plugin"); 8 | var HtmlWebpackPlugin = require("html-webpack-plugin"); 9 | 10 | module.exports = merge(common, { 11 | mode: "production", 12 | output: { 13 | filename: "main.[contentHash].js", 14 | path: path.resolve(__dirname, "dist") 15 | }, 16 | optimization: { 17 | minimizer: [ 18 | new OptimizeCssAssetsPlugin(), 19 | new TerserPlugin(), 20 | new HtmlWebpackPlugin({ 21 | template: "./src/index.html", 22 | favicon: "./src/assets/icons/favicon.ico", 23 | minify: { 24 | removeAttributeQuotes: true, 25 | collapseWhitespace: true, 26 | removeComments: true 27 | } 28 | }) 29 | ] 30 | }, 31 | plugins: [ 32 | new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }), 33 | new CleanWebpackPlugin() 34 | ], 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.css$/, 39 | use: [ 40 | MiniCssExtractPlugin.loader, //2. Extract css into files 41 | "css-loader", //1. Turns css into commonjs 42 | ] 43 | } 44 | ] 45 | } 46 | }); -------------------------------------------------------------------------------- /src/styles/pageLoad.css: -------------------------------------------------------------------------------- 1 | .pageLoad{ 2 | display: flex; 3 | position: absolute; 4 | left: 0; 5 | top: 0; 6 | width: 100%; 7 | height: 100%; 8 | overflow: hidden; 9 | background-image: url(../assets/imgs/smoke01.png), url(../assets/imgs/smoke02.png), url(../assets/imgs/smoke03.png), url(../assets/imgs/smoke04.png), url(../assets/imgs/smoke05.png), url(../assets/imgs/smoke06.png), url(../assets/imgs/smoke07.png), url(../assets/imgs/smoke08.png), url(../assets/imgs/smoke09.png), url(../assets/imgs/smoke10.png); 10 | background-repeat: no-repeat; 11 | background-position: center; 12 | background-size: cover, cover, cover, cover, cover, cover, cover, cover, cover, cover; 13 | transition: all 0.1s ease-out; 14 | } 15 | 16 | .animated{ 17 | display: none; 18 | } 19 | 20 | .pageLoad[loadimg="1"]{ 21 | background-image: url(../assets/imgs/smoke01.png); 22 | } 23 | .pageLoad[loadimg="2"]{ 24 | background-image: url(../assets/imgs/smoke02.png); 25 | } 26 | .pageLoad[loadimg="3"]{ 27 | background-image: url(../assets/imgs/smoke03.png); 28 | } 29 | .pageLoad[loadimg="4"]{ 30 | background-image: url(../assets/imgs/smoke04.png); 31 | } 32 | .pageLoad[loadimg="5"]{ 33 | background-image: url(../assets/imgs/smoke05.png); 34 | } 35 | .pageLoad[loadimg="6"]{ 36 | background-image: url(../assets/imgs/smoke06.png); 37 | } 38 | .pageLoad[loadimg="7"]{ 39 | background-image: url(../assets/imgs/smoke07.png); 40 | } 41 | .pageLoad[loadimg="8"]{ 42 | background-image: url(../assets/imgs/smoke08.png); 43 | } 44 | .pageLoad[loadimg="9"]{ 45 | background-image: url(../assets/imgs/smoke09.png); 46 | } 47 | .pageLoad[loadimg="10"]{ 48 | background-image: url(../assets/imgs/smoke10.png); 49 | } -------------------------------------------------------------------------------- /src/styles/menu.css: -------------------------------------------------------------------------------- 1 | #background-menu{ 2 | display: flex; 3 | position: absolute; 4 | top:0px; 5 | left:0px; 6 | width: 100%; 7 | height: 100%; 8 | background-image: url(../assets/imgs/menu-page-background.png); 9 | background-size: cover; 10 | } 11 | 12 | #menu-container{ 13 | display: flex; 14 | flex-direction: column; 15 | width: 100%; 16 | height: 100%; 17 | } 18 | 19 | #snorlax-food { 20 | position: fixed; 21 | top: 17vw; 22 | left: 5.5vw; 23 | width: 30vw; 24 | cursor: pointer; 25 | } 26 | 27 | #snorlax-food:hover{ 28 | animation: tada 1s; 29 | /* transform: scale(1.2); 30 | transition: all 0.2s ease-out; */ 31 | } 32 | 33 | #eevee-food { 34 | position: fixed; 35 | top: 26vw; 36 | left: 29vw; 37 | width: 27.8vw; 38 | cursor: pointer; 39 | } 40 | 41 | #eevee-food:hover { 42 | animation: tada 1s; 43 | } 44 | 45 | #jigglypuff-food { 46 | position: fixed; 47 | top: 36.45vw; 48 | left: 6.65vw; 49 | width: 29.9vw; 50 | cursor: pointer; 51 | } 52 | 53 | #jigglypuff-food:hover{ 54 | animation: tada 1s; 55 | } 56 | 57 | #eevee-drink { 58 | position: fixed; 59 | top: 25.4vw; 60 | left: 62vw; 61 | width: 26.7vw; 62 | cursor: pointer; 63 | } 64 | 65 | #eevee-drink:hover{ 66 | animation: tada 1s; 67 | } 68 | 69 | #pickachu-drink { 70 | position: fixed; 71 | left: 65.4vw; 72 | top: 15vw; 73 | width: 30.8vw; 74 | cursor: pointer; 75 | } 76 | 77 | #pickachu-drink:hover{ 78 | animation: tada 1s; 79 | } 80 | 81 | #gengar-drink { 82 | position: fixed; 83 | top: 33vw; 84 | left: 65vw; 85 | width: 27.6vw; 86 | cursor: pointer; 87 | } 88 | 89 | #gengar-drink:hover{ 90 | animation: tada 1s; 91 | } -------------------------------------------------------------------------------- /src/pages/menu.js: -------------------------------------------------------------------------------- 1 | import snorlaxFoodImage from "../assets/imgs/snorlax-food.png"; 2 | import eeveeFoodImage from "../assets/imgs/eevee-food.png"; 3 | import jigglypuffFoodImage from "../assets/imgs/jigglypuff-food.png"; 4 | import pickachuDrinkImage from "../assets/imgs/pickachu-drink.png"; 5 | import eeveeDrinkImage from "../assets/imgs/eevee-drink.png"; 6 | import gengarDrinkImage from "../assets/imgs/gengar-drink.png"; 7 | 8 | const menu = function(){ 9 | const content = document.querySelector("#content"); 10 | 11 | const backgroundMenu = document.createElement("div"); 12 | backgroundMenu.id="background-menu"; 13 | content.appendChild(backgroundMenu); 14 | 15 | const menuContainer = document.createElement("div"); 16 | menuContainer.id = "menu-container"; 17 | 18 | const snorlaxFood = document.createElement("img"); 19 | snorlaxFood.src=snorlaxFoodImage; 20 | snorlaxFood.id="snorlax-food"; 21 | menuContainer.appendChild(snorlaxFood); 22 | 23 | const eeveeFood = document.createElement("img"); 24 | eeveeFood.src=eeveeFoodImage; 25 | eeveeFood.id="eevee-food"; 26 | menuContainer.appendChild(eeveeFood); 27 | 28 | const jigglypuffFood = document.createElement("img"); 29 | jigglypuffFood.src=jigglypuffFoodImage; 30 | jigglypuffFood.id="jigglypuff-food"; 31 | menuContainer.appendChild(jigglypuffFood); 32 | 33 | const pickachuDrink = document.createElement("img"); 34 | pickachuDrink.src=pickachuDrinkImage; 35 | pickachuDrink.id="pickachu-drink"; 36 | menuContainer.appendChild(pickachuDrink); 37 | 38 | const eeveeDrink = document.createElement("img"); 39 | eeveeDrink.src=eeveeDrinkImage; 40 | eeveeDrink.id="eevee-drink"; 41 | menuContainer.appendChild(eeveeDrink); 42 | 43 | const gengarDrink = document.createElement("img"); 44 | gengarDrink.src=gengarDrinkImage; 45 | gengarDrink.id="gengar-drink"; 46 | menuContainer.appendChild(gengarDrink); 47 | 48 | content.appendChild(menuContainer); 49 | 50 | const pageLoad = document.createElement("div"); 51 | pageLoad.className="pageLoad"; 52 | 53 | content.appendChild(pageLoad); 54 | } 55 | 56 | export default menu; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Persona 5 X Pokémon Cafe 2 | 3 | ### This is a Restaurant Web Page for a fictional collab between Persona 5 and Pokemon. 4 | 5 | `P.S: I know the premise for the website doesn't make a whole lot of sense, it was just the first two things that came to my mind when I thought of making this website.` 6 | 7 |
screenshot of website
8 | 9 | **Note:** This Website works best with High Resolution Screens (1080p and up). Check the [improvements section](#improvements) for future updates. 10 | 11 | This project was completed for The Odin Project Javascript Restaurant Page Assignment. The aim of the project was to make a functional multi page Restaurant website using WebPack to bundle files. 12 | 13 | ## Built With 14 | 15 | - Vanilla JS 16 | - HTML5 17 | - CSS3 18 | 19 | ## Live Demo 20 | 21 | [Persona 5 X Pokémon Cafe:coffee:](https://pret3nti0u5.github.io/Restaurant-Page) 22 | 23 | 24 | ## Getting Started 25 | 26 | In order to setup and work on this project on your own, you will need to: 27 | 28 | 1. Clone this project: 29 | `git clone https://github.com/pret3nti0u5/Restaurant-Page.git` 30 | 31 | 2. Once you have cloned this project, you can install the required dependencies by using: 32 | `npm install` 33 | 34 | 3. A live demo of the project can be started by using: 35 | `npm start` 36 | 37 | 4. Distribution files can be produced using: 38 | `npm run build` 39 | 40 | ### Usage 41 | 42 | ##### Once you are on the Home Page, you have three links in the navbar 43 | - **Home**.- To return to the Home Page 44 | - **Menu**.- A small fraction of the Dishes and Drinks that we serve 45 | - **About**.- About Us section, what Persona 5 is all about 46 | 47 | ## Deployed on GitHub Pages 48 | 49 | Deployed on [GitHub Pages](https://pages.github.com/) 50 | 51 | ## Improvements 52 | 53 | Features we are going to add to this app: 54 | - Approach a Responsive Web Design(RWD) 55 | - Move from HTML and Vanilla CSS to React JS Framework 56 | 57 | ## Acknowledgement 58 | 59 | Design inspired by [Persona 5](https://atlus.com/persona5) 60 | 61 | ## 🤝 Contributing 62 | 63 | Contributions, issues, and feature requests are welcome! 64 | 65 | ## Show your support 66 | 67 | If you got until here, show your love hitting the ⭐️ button, I'd really appreciate it. 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/pages/home.js: -------------------------------------------------------------------------------- 1 | import backgroundSpiralImage from "../assets/imgs/background-spiral.png"; 2 | import jokerImage from "../assets/imgs/Joker-white-outline.png"; 3 | import takeYourHeartImage from "../assets/imgs/Take-your-heart.png"; 4 | import pickachuFoodImage from "../assets/imgs/Pickachu-no-drop-shadow.png"; 5 | import battleMenuLeftImage from "../assets/imgs/battle-menu-left.png"; 6 | import battleMenuRightImage from "../assets/imgs/battle-menu-right.png"; 7 | 8 | const home = function(){ 9 | const content = document.querySelector('#content'); 10 | 11 | const background = document.createElement("div"); 12 | background.id="background"; 13 | content.appendChild(background); 14 | 15 | const parallaxContainer = document.createElement("div"); 16 | parallaxContainer.id="parallax-container" 17 | 18 | const spiralContainer = document.createElement("div"); 19 | spiralContainer.id="spiral-container"; 20 | spiralContainer.className="parallax" 21 | spiralContainer.setAttribute("data-speed", 1); 22 | 23 | const backgroundSpiral = document.createElement("img"); 24 | backgroundSpiral.src=backgroundSpiralImage; 25 | backgroundSpiral.id="background-spiral"; 26 | backgroundSpiral.className="parallax"; 27 | 28 | spiralContainer.appendChild(backgroundSpiral); 29 | 30 | const jokerContainer = document.createElement("div"); 31 | jokerContainer.id="joker-container"; 32 | jokerContainer.className="parallax" 33 | jokerContainer.setAttribute("data-speed", 6); 34 | 35 | const joker = document.createElement("img"); 36 | joker.src=jokerImage; 37 | joker.id="joker"; 38 | joker.className="parallax"; 39 | 40 | jokerContainer.appendChild(joker); 41 | 42 | parallaxContainer.appendChild(spiralContainer); 43 | parallaxContainer.appendChild(jokerContainer); 44 | 45 | content.appendChild(parallaxContainer); 46 | 47 | const footer = document.createElement("div"); 48 | footer.id="footer"; 49 | 50 | const takeYourHeart = document.createElement("img"); 51 | takeYourHeart.src=takeYourHeartImage; 52 | takeYourHeart.id="Take-your-heart"; 53 | footer.appendChild(takeYourHeart); 54 | 55 | const food = document.createElement("div"); 56 | food.id="food"; 57 | 58 | const pickachuFood = document.createElement("img"); 59 | pickachuFood.src=pickachuFoodImage; 60 | pickachuFood.id="pickachu-food"; 61 | food.appendChild(pickachuFood); 62 | 63 | const battleMenuLeft = document.createElement("img"); 64 | battleMenuLeft.src=battleMenuLeftImage; 65 | battleMenuLeft.id="battle-menu-left"; 66 | food.appendChild(battleMenuLeft); 67 | 68 | const battleMenuRight = document.createElement("img"); 69 | battleMenuRight.src=battleMenuRightImage; 70 | battleMenuRight.id="battle-menu-right"; 71 | food.appendChild(battleMenuRight); 72 | 73 | footer.appendChild(food); 74 | 75 | content.appendChild(footer); 76 | 77 | const pageLoad = document.createElement("div"); 78 | pageLoad.className="pageLoad"; 79 | 80 | content.appendChild(pageLoad); 81 | } 82 | 83 | export default home; -------------------------------------------------------------------------------- /src/styles/home.css: -------------------------------------------------------------------------------- 1 | html, body, #content{ 2 | height: 100%; 3 | } 4 | 5 | body{ 6 | padding: 0%; 7 | margin: 0px; 8 | background-color: #ff1001; 9 | } 10 | 11 | #background{ 12 | display: flex; 13 | position: absolute; 14 | top:0px; 15 | left:0px; 16 | width: 100%; 17 | height: 100%; 18 | background-image: url(../assets/imgs/paper_tear_only_bg.png); 19 | background-size: cover; 20 | } 21 | 22 | #parallax-container{ 23 | display: flex; 24 | width: 100%; 25 | height: 100%; 26 | } 27 | 28 | #spiral-container{ 29 | position: fixed; 30 | z-index: -2; 31 | left: -8%; 32 | top: -6%; 33 | width: 110%; 34 | } 35 | 36 | #background-spiral{ 37 | width: 100%; 38 | } 39 | 40 | #joker-container{ 41 | position: fixed; 42 | top: 14%; 43 | left: 7.5%; 44 | z-index: -1; 45 | } 46 | 47 | #joker{ 48 | width: 84vw; 49 | } 50 | 51 | #header { 52 | display: flex; 53 | position: fixed; 54 | top: 0px; 55 | left: 0px; 56 | width: 100%; 57 | height: 19.5%; 58 | justify-content: space-between; 59 | align-items: center; 60 | z-index: 100; 61 | } 62 | 63 | #content{ 64 | overflow: hidden; 65 | } 66 | 67 | #header-total-logo { 68 | margin-top: 2.1%; 69 | margin-left: 1.6%; 70 | object-fit: cover; 71 | width:21.4%; 72 | height: auto; 73 | cursor: pointer; 74 | } 75 | 76 | #header-total-logo:hover{ 77 | animation: rubberBand 0.5s; 78 | } 79 | 80 | #menu-web { 81 | position: relative; 82 | width: 12.7%; 83 | height: auto; 84 | right: 4.38%; 85 | bottom: 5.03%; 86 | cursor: pointer; 87 | } 88 | 89 | #menu-web:hover{ 90 | animation: rubberBand 0.5s; 91 | } 92 | 93 | #about-web { 94 | position: relative; 95 | width: 14.85%; 96 | height: auto; 97 | bottom: 20.12%; 98 | right: 4.17%; 99 | cursor: pointer; 100 | } 101 | 102 | #about-web:hover{ 103 | animation: rubberBand 0.5s; 104 | } 105 | 106 | #footer{ 107 | display: flex; 108 | width: 100%; 109 | height: 40.49%; 110 | justify-content: space-between; 111 | position: fixed; 112 | bottom: 0px; 113 | left: 0px; 114 | } 115 | 116 | #Take-your-heart { 117 | object-fit: contain; 118 | width: 17.4%; 119 | margin-left: 2.6%; 120 | margin-bottom: 2.6%; 121 | cursor: pointer; 122 | } 123 | 124 | #Take-your-heart:hover { 125 | animation: tada 1s; 126 | } 127 | 128 | #food { 129 | display: flex; 130 | position: relative; 131 | right: 2.87%; 132 | bottom: 15.74%; 133 | width: 26.05%; 134 | cursor: pointer; 135 | } 136 | 137 | #pickachu-food { 138 | object-fit: contain; 139 | width: 100%; 140 | height: auto; 141 | cursor: pointer; 142 | } 143 | 144 | #food:hover > #pickachu-food{ 145 | transform: scale(1.1); 146 | filter: drop-shadow(20px 20px #fe2b10); 147 | transition: all 0.2s ease-out; 148 | } 149 | 150 | #food:hover > #battle-menu-left{ 151 | visibility: visible; 152 | opacity: 1; 153 | transition: all 0.2s ease-out; 154 | animation: zoomInLeft 0.2s; 155 | } 156 | 157 | #food:hover > #battle-menu-right{ 158 | visibility: visible; 159 | opacity: 1; 160 | transition: all 0.2s ease-out; 161 | animation: zoomInRight 0.2s; 162 | } 163 | 164 | #battle-menu-left { 165 | visibility: hidden; 166 | opacity: 0; 167 | position: absolute; 168 | left: -29%; 169 | top: -11.4%; 170 | object-fit: contain; 171 | width: 50.4%; 172 | } 173 | 174 | #battle-menu-right { 175 | visibility: hidden; 176 | opacity: 0; 177 | position: absolute; 178 | object-fit: contain; 179 | width: 63.39%; 180 | left: 47%; 181 | bottom: 19.38%; 182 | } -------------------------------------------------------------------------------- /dist/main.36f373fba564966ec0fe.js: -------------------------------------------------------------------------------- 1 | !function(e){var n={};function t(c){if(n[c])return n[c].exports;var o=n[c]={i:c,l:!1,exports:{}};return e[c].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,c){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:c})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(t.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(c,o,function(n){return e[n]}.bind(null,o));return c},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=21)}([function(e,n,t){e.exports=t.p+"imgs/background-spiral.c5d64e2d702a992fed648621f874d2b8.png"},function(e,n,t){e.exports=t.p+"imgs/Joker-white-outline.4907cb3d3a5aee11cb28787b7f1e61bd.png"},function(e,n,t){e.exports=t.p+"imgs/Take-your-heart.946bc78de3491864a8af6aa7eac109a4.png"},function(e,n,t){e.exports=t.p+"imgs/Pickachu-no-drop-shadow.0d7ba042df0cf806042a58a99129dcb3.png"},function(e,n,t){e.exports=t.p+"imgs/battle-menu-left.49ea2dc0c158fc8f874fd6324afb8d55.png"},function(e,n,t){e.exports=t.p+"imgs/battle-menu-right.dec833457dca248f89215c6d6e3260bd.png"},function(e,n,t){e.exports=t.p+"imgs/snorlax-food.e41957ea4dfa06a60365129480382d06.png"},function(e,n,t){e.exports=t.p+"imgs/eevee-food.9af9e2902101198fcb022fd8e4e6bdc3.png"},function(e,n,t){e.exports=t.p+"imgs/jigglypuff-food.3c71fb31ea4331868b25d30b61a1cb75.png"},function(e,n,t){e.exports=t.p+"imgs/pickachu-drink.ca1ac5acb51dfbc95eba7d9cb0bef704.png"},function(e,n,t){e.exports=t.p+"imgs/eevee-drink.f8b591c2bb596b365db38035b955558b.png"},function(e,n,t){e.exports=t.p+"imgs/gengar-drink.1e63d44d6cf39607a4527b2de6413051.png"},function(e,n,t){e.exports=t.p+"imgs/header-bg.5afd1a3f734882bba399c7a2e667f3ef.png"},function(e,n,t){e.exports=t.p+"imgs/header-total-logo.5b4831794634fe4bc2c17389d450a7de.png"},function(e,n,t){e.exports=t.p+"imgs/menu-web.613efc3d28898a9476ae8672bd58bfca.png"},function(e,n,t){e.exports=t.p+"imgs/about-web.8627eecbcde7c3a15fef03523d128775.png"},function(e,n,t){},function(e,n,t){},function(e,n,t){},function(e,n,t){},function(e,n,t){},function(e,n,t){"use strict";t.r(n);t(16),t(17),t(18),t(19),t(20);document.addEventListener("mousemove",(function(e){this.querySelectorAll(".parallax").forEach(n=>{const t=n.getAttribute("data-speed"),c=(window.innerWidth-e.pageX*t)/100,o=(window.innerHeight-e.pageY*t)/100;n.style.transform=`translateX(${c}px) translateY(${o}px)`})}));var c=t(0),o=t.n(c),a=t(1),d=t.n(a),r=t(2),i=t.n(r),u=t(3),l=t.n(u),p=t(4),s=t.n(p),m=t(5),f=t.n(m);var g=function(){const e=document.querySelector("#content"),n=document.createElement("div");n.id="background",e.appendChild(n);const t=document.createElement("div");t.id="parallax-container";const c=document.createElement("div");c.id="spiral-container",c.className="parallax",c.setAttribute("data-speed",1);const a=document.createElement("img");a.src=o.a,a.id="background-spiral",a.className="parallax",c.appendChild(a);const r=document.createElement("div");r.id="joker-container",r.className="parallax",r.setAttribute("data-speed",6);const u=document.createElement("img");u.src=d.a,u.id="joker",u.className="parallax",r.appendChild(u),t.appendChild(c),t.appendChild(r),e.appendChild(t);const p=document.createElement("div");p.id="footer";const m=document.createElement("img");m.src=i.a,m.id="Take-your-heart",p.appendChild(m);const g=document.createElement("div");g.id="food";const b=document.createElement("img");b.src=l.a,b.id="pickachu-food",g.appendChild(b);const h=document.createElement("img");h.src=s.a,h.id="battle-menu-left",g.appendChild(h);const v=document.createElement("img");v.src=f.a,v.id="battle-menu-right",g.appendChild(v),p.appendChild(g),e.appendChild(p);const E=document.createElement("div");E.className="pageLoad",e.appendChild(E)},b=t(6),h=t.n(b),v=t(7),E=t.n(v),x=t(8),y=t.n(x),C=t(9),k=t.n(C),S=t(10),w=t.n(S),j=t(11),q=t.n(j);var L=function(){const e=document.querySelector("#content"),n=document.createElement("div");n.id="background-menu",e.appendChild(n);const t=document.createElement("div");t.id="menu-container";const c=document.createElement("img");c.src=h.a,c.id="snorlax-food",t.appendChild(c);const o=document.createElement("img");o.src=E.a,o.id="eevee-food",t.appendChild(o);const a=document.createElement("img");a.src=y.a,a.id="jigglypuff-food",t.appendChild(a);const d=document.createElement("img");d.src=k.a,d.id="pickachu-drink",t.appendChild(d);const r=document.createElement("img");r.src=w.a,r.id="eevee-drink",t.appendChild(r);const i=document.createElement("img");i.src=q.a,i.id="gengar-drink",t.appendChild(i),e.appendChild(t);const u=document.createElement("div");u.className="pageLoad",e.appendChild(u)},N=t(12),O=t.n(N);var P=function(){const e=document.querySelector("#content");e.style="overflow: scroll";const n=document.createElement("div");n.id="background-about",e.appendChild(n);const t=document.createElement("img");t.src=O.a,t.id="header-bg",e.appendChild(t);const c=document.createElement("div");c.className="pageLoad",e.appendChild(c)};var _=function(){const e=document.querySelector("#content");for(e.style="";e.children.length>1;)e.children[1].remove()};var A=function(){const e=document.querySelector(".pageLoad");for(let e=1;e<12;e++)n(e);function n(n){setTimeout((function(){n<11?e.setAttribute("loadimg",n):e.className="animated"}),70*n)}},T=t(13),M=t.n(T),X=t(14),Y=t.n(X),$=t(15),H=t.n($);var J=function(){const e=document.createElement("div");e.id="header";const n=document.createElement("img");n.src=M.a,n.id="header-total-logo",e.appendChild(n);const t=document.createElement("img");t.src=Y.a,t.id="menu-web",e.appendChild(t);const c=document.createElement("img");return c.src=H.a,c.id="about-web",e.appendChild(c),e};(function(){const e=document.querySelector("#content"),n=J();e.appendChild(n),g(),A()})();const W=document.querySelector("#header-total-logo"),z=document.querySelector("#menu-web"),B=document.querySelector("#about-web");W.addEventListener("click",(function(){_(),g(),A()})),z.addEventListener("click",(function(){_(),L(),A()})),B.addEventListener("click",(function(){_(),P(),A()}))}]); -------------------------------------------------------------------------------- /dist/main.6435e698e6ed93c97b1d.css: -------------------------------------------------------------------------------- 1 | #content,body,html{height:100%}body{padding:0;margin:0;background-color:#ff1001}#background{position:absolute;top:0;left:0;background-image:url(imgs/paper_tear_only_bg.f44efaa060da5d0a8ee4c4561195a14a.png);background-size:cover}#background,#parallax-container{display:flex;width:100%;height:100%}#spiral-container{position:fixed;z-index:-2;left:-8%;top:-6%;width:110%}#background-spiral{width:100%}#joker-container{position:fixed;top:14%;left:7.5%;z-index:-1}#joker{width:84vw}#header{display:flex;position:fixed;top:0;left:0;width:100%;height:19.5%;justify-content:space-between;align-items:center;z-index:100}#content{overflow:hidden}#header-total-logo{margin-top:2.1%;margin-left:1.6%;object-fit:cover;width:21.4%;height:auto;cursor:pointer}#header-total-logo:hover{animation:rubberBand .5s}#menu-web{position:relative;width:12.7%;height:auto;right:4.38%;bottom:5.03%;cursor:pointer}#menu-web:hover{animation:rubberBand .5s}#about-web{position:relative;width:14.85%;height:auto;bottom:20.12%;right:4.17%;cursor:pointer}#about-web:hover{animation:rubberBand .5s}#footer{display:flex;width:100%;height:40.49%;justify-content:space-between;position:fixed;bottom:0;left:0}#Take-your-heart{object-fit:contain;width:17.4%;margin-left:2.6%;margin-bottom:2.6%;cursor:pointer}#Take-your-heart:hover{animation:tada 1s}#food{display:flex;position:relative;right:2.87%;bottom:15.74%;width:26.05%;cursor:pointer}#pickachu-food{object-fit:contain;width:100%;height:auto;cursor:pointer}#food:hover>#pickachu-food{transform:scale(1.1);filter:drop-shadow(20px 20px #fe2b10);transition:all .2s ease-out}#food:hover>#battle-menu-left{visibility:visible;opacity:1;transition:all .2s ease-out;animation:zoomInLeft .2s}#food:hover>#battle-menu-right{visibility:visible;opacity:1;transition:all .2s ease-out;animation:zoomInRight .2s}#battle-menu-left{left:-29%;top:-11.4%;width:50.4%}#battle-menu-left,#battle-menu-right{visibility:hidden;opacity:0;position:absolute;object-fit:contain}#battle-menu-right{width:63.39%;left:47%;bottom:19.38%}#background-menu{position:absolute;top:0;left:0;background-image:url(imgs/menu-page-background.1a9fae3c635aa820f8d110dcf05ba500.png);background-size:cover}#background-menu,#menu-container{display:flex;width:100%;height:100%}#menu-container{flex-direction:column}#snorlax-food{position:fixed;top:17vw;left:5.5vw;width:30vw;cursor:pointer}#snorlax-food:hover{animation:tada 1s}#eevee-food{position:fixed;top:26vw;left:29vw;width:27.8vw;cursor:pointer}#eevee-food:hover{animation:tada 1s}#jigglypuff-food{position:fixed;top:36.45vw;left:6.65vw;width:29.9vw;cursor:pointer}#jigglypuff-food:hover{animation:tada 1s}#eevee-drink{position:fixed;top:25.4vw;left:62vw;width:26.7vw;cursor:pointer}#eevee-drink:hover{animation:tada 1s}#pickachu-drink{position:fixed;left:65.4vw;top:15vw;width:30.8vw;cursor:pointer}#pickachu-drink:hover{animation:tada 1s}#gengar-drink{position:fixed;top:33vw;left:65vw;width:27.6vw;cursor:pointer}#gengar-drink:hover{animation:tada 1s}.pageLoad{display:flex;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background-image:url(imgs/smoke01.26f85675a7dd296c686bcdd902334c00.png),url(imgs/smoke02.0a8c7930aef58b8e738b9cfd1df58b60.png),url(imgs/smoke03.b3eb56adc920e4743186bd0ca96df738.png),url(imgs/smoke04.92cc0f1ad1774bc88403712ffc0a0769.png),url(imgs/smoke05.712980c0c8c6915b3255042b76c63208.png),url(imgs/smoke06.dff15322968a8a8fcc0419ce008400b4.png),url(imgs/smoke07.3f8555a4e7d1d5b59f799548df03f10e.png),url(imgs/smoke08.75aaea4e350ab4f6ba63108f1b5ac868.png),url(imgs/smoke09.c0a522421adab07f6b20f2d19fb046a4.png),url(imgs/smoke10.8e3db6dcab42d4d2fc2b2844e87641ee.png);background-repeat:no-repeat;background-position:50%;background-size:cover,cover,cover,cover,cover,cover,cover,cover,cover,cover;transition:all .1s ease-out}.animated{display:none}.pageLoad[loadimg="1"]{background-image:url(imgs/smoke01.26f85675a7dd296c686bcdd902334c00.png)}.pageLoad[loadimg="2"]{background-image:url(imgs/smoke02.0a8c7930aef58b8e738b9cfd1df58b60.png)}.pageLoad[loadimg="3"]{background-image:url(imgs/smoke03.b3eb56adc920e4743186bd0ca96df738.png)}.pageLoad[loadimg="4"]{background-image:url(imgs/smoke04.92cc0f1ad1774bc88403712ffc0a0769.png)}.pageLoad[loadimg="5"]{background-image:url(imgs/smoke05.712980c0c8c6915b3255042b76c63208.png)}.pageLoad[loadimg="6"]{background-image:url(imgs/smoke06.dff15322968a8a8fcc0419ce008400b4.png)}.pageLoad[loadimg="7"]{background-image:url(imgs/smoke07.3f8555a4e7d1d5b59f799548df03f10e.png)}.pageLoad[loadimg="8"]{background-image:url(imgs/smoke08.75aaea4e350ab4f6ba63108f1b5ac868.png)}.pageLoad[loadimg="9"]{background-image:url(imgs/smoke09.c0a522421adab07f6b20f2d19fb046a4.png)}.pageLoad[loadimg="10"]{background-image:url(imgs/smoke10.8e3db6dcab42d4d2fc2b2844e87641ee.png)}.animated-slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated-half{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear}.animated-quarter{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear}.animated-fast{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes pulseOn{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(.75,.75,.75);transform:scale3d(.75,.75,.75)}to{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}}@keyframes pulseOn{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(.75,.75,.75);transform:scale3d(.75,.75,.75)}to{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}}.pulseOn{-webkit-animation-name:pulseOn;animation-name:pulseOn}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-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)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@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)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none;opacity:1}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInDownLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-60px,-60px,0);transform:translate3d(-60px,-60px,0)}60%{opacity:1;-webkit-transform:translate3d(25px,25px,0);transform:translate3d(25px,25px,0)}75%{-webkit-transform:translate3d(-10px,-10px,0);transform:translate3d(-10px,-10px,0)}90%{-webkit-transform:translate3d(5px,5px,0);transform:translate3d(5px,5px,0)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes bounceInDownLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-60px,-60px,0);transform:translate3d(-60px,-60px,0)}60%{opacity:1;-webkit-transform:translate3d(25px,25px,0);transform:translate3d(25px,25px,0)}75%{-webkit-transform:translate3d(-10px,-10px,0);transform:translate3d(-10px,-10px,0)}90%{-webkit-transform:translate3d(5px,5px,0);transform:translate3d(5px,5px,0)}to{-webkit-transform:none;transform:none;opacity:1}}.bounceInDownLeft{-webkit-animation-name:bounceInDownLeft;animation-name:bounceInDownLeft}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-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);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-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);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-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;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}to{-webkit-transform:none;transform:none;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%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) 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;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;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(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;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(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;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(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;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}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-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;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes tearRightLeft{0%{-webkit-transform-origin:left top;transform-origin:left top;opacity:1}to{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate(25deg) translate(10%,100%);transform:rotate(25deg) translate(10%,100%);opacity:1}}@keyframes tearRightLeft{0%{-webkit-transform-origin:left top;transform-origin:left top;opacity:1}to{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate(25deg) translate(10%,100%);transform:rotate(25deg) translate(10%,100%);opacity:0}}.tearRightLeft{-webkit-animation-name:tearRightLeft;animation-name:tearRightLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-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;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{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%,80%{-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;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{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%,80%{-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;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}to{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}to{opacity:1}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}to{opacity:1}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInDownSkewRight{0%{-webkit-transform:translate3d(0,-25%,0) skewY(-15deg);transform:translate3d(0,-25%,0) skewY(-15deg);visibility:visible}50%{-webkit-transform:skewY(10deg);transform:skewY(10deg)}to{-webkit-transform:translateZ(0) skewY(10deg);transform:translateZ(0) skewY(10deg)}}@keyframes slideInDownSkewRight{0%{-webkit-transform:translate3d(0,-25%,0) skewY(-15deg);transform:translate3d(0,-25%,0) skewY(-15deg);visibility:visible}50%{-webkit-transform:skewY(10deg);transform:skewY(10deg)}to{-webkit-transform:translateZ(0) skewY(10deg);transform:translateZ(0) skewY(10deg)}}.slideInDownSkewRight{-webkit-animation-name:slideInDownSkewRight;animation-name:slideInDownSkewRight}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@keyframes skewRubberband{0%{transform-style:preserve-3d;transform:skewX(45deg) rotateX(65deg) rotateY(15deg) rotate(-20deg) perspective(150px)}50%{transform:skewX(-45deg)}to{transform:skewX(45deg) rotateX(-65deg) rotateY(-15deg) rotate(-20deg) perspective(150px)}}.infinite-jello{-webkit-animation-name:skewRubberband;animation-name:skewRubberband;-webkit-transform-origin:center;transform-origin:center;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes flipInYInfinite{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg)}to{-webkit-transform:perspective(400px) rotateY(359deg);transform:perspective(400px) rotateY(359deg)}}@keyframes flipInYInfinite{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg)}to{-webkit-transform:perspective(400px) rotateY(359deg);transform:perspective(400px) rotateY(359deg)}}.flipInYInfinite{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInYInfinite;animation-name:flipInYInfinite;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}#background-about{display:flex;position:absolute;top:0;left:0;width:100%;height:0;background-image:url(imgs/about-bg.9ff76dd3ad24ef92da4b4370a48b5a02.png);background-size:cover;padding-top:143.385%}#header-bg{position:fixed;top:0;left:0;width:100.8vw} -------------------------------------------------------------------------------- /src/styles/animations.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .animated-slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;animation-fill-mode:both} 3 | .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both} 4 | .animated-half{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear} 5 | .animated-quarter{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear} 6 | .animated-fast{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear} 7 | .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} 8 | .animated.hinge{-webkit-animation-duration:2s;animation-duration:2s} 9 | .animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s} 10 | @-webkit-keyframes bounce { 11 | from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 12 | 40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)} 13 | 70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)} 14 | 90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)} 15 | } 16 | @keyframes bounce { 17 | from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 18 | 40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)} 19 | 70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)} 20 | 90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)} 21 | } 22 | .bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom} 23 | @-webkit-keyframes flash { 24 | from,50%,to{opacity:1} 25 | 25%,75%{opacity:0} 26 | } 27 | @keyframes flash { 28 | from,50%,to{opacity:1} 29 | 25%,75%{opacity:0} 30 | } 31 | .flash{-webkit-animation-name:flash;animation-name:flash} 32 | @-webkit-keyframes pulse { 33 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 34 | 50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)} 35 | to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 36 | } 37 | @keyframes pulse { 38 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 39 | 50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)} 40 | to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 41 | } 42 | .pulse{-webkit-animation-name:pulse;animation-name:pulse} 43 | @-webkit-keyframes pulseOn { 44 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 45 | 50%{-webkit-transform:scale3d(.75,.75,.75);transform:scale3d(.75,.75,.75)} 46 | to{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 47 | } 48 | @keyframes pulseOn { 49 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 50 | 50%{-webkit-transform:scale3d(.75,.75,.75);transform:scale3d(.75,.75,.75)} 51 | to{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 52 | } 53 | .pulseOn{-webkit-animation-name:pulseOn;animation-name:pulseOn} 54 | @-webkit-keyframes rubberBand { 55 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 56 | 30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)} 57 | 40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)} 58 | 50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)} 59 | 65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)} 60 | 75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)} 61 | to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 62 | } 63 | @keyframes rubberBand { 64 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 65 | 30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)} 66 | 40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)} 67 | 50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)} 68 | 65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)} 69 | 75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)} 70 | to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 71 | } 72 | .rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand} 73 | @-webkit-keyframes shake { 74 | from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 75 | 10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)} 76 | 20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)} 77 | } 78 | @keyframes shake { 79 | from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 80 | 10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)} 81 | 20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)} 82 | } 83 | .shake{-webkit-animation-name:shake;animation-name:shake} 84 | @-webkit-keyframes headShake { 85 | 0%{-webkit-transform:translateX(0);transform:translateX(0)} 86 | 6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)} 87 | 18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)} 88 | 31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)} 89 | 43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)} 90 | 50%{-webkit-transform:translateX(0);transform:translateX(0)} 91 | } 92 | @keyframes headShake { 93 | 0%{-webkit-transform:translateX(0);transform:translateX(0)} 94 | 6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)} 95 | 18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)} 96 | 31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)} 97 | 43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)} 98 | 50%{-webkit-transform:translateX(0);transform:translateX(0)} 99 | } 100 | .headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake} 101 | @-webkit-keyframes swing { 102 | 20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)} 103 | 40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)} 104 | 60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)} 105 | 80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)} 106 | to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)} 107 | } 108 | @keyframes swing { 109 | 20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)} 110 | 40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)} 111 | 60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)} 112 | 80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)} 113 | to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)} 114 | } 115 | .swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing} 116 | @-webkit-keyframes tada { 117 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 118 | 10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)} 119 | 30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 120 | 40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} 121 | to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 122 | } 123 | @keyframes tada { 124 | from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 125 | 10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)} 126 | 30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 127 | 40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} 128 | to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 129 | } 130 | .tada{-webkit-animation-name:tada;animation-name:tada} 131 | @-webkit-keyframes wobble { 132 | from{-webkit-transform:none;transform:none} 133 | 15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)} 134 | 30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)} 135 | 45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)} 136 | 60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)} 137 | 75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)} 138 | to{-webkit-transform:none;transform:none} 139 | } 140 | @keyframes wobble { 141 | from{-webkit-transform:none;transform:none} 142 | 15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)} 143 | 30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)} 144 | 45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)} 145 | 60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)} 146 | 75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)} 147 | to{-webkit-transform:none;transform:none} 148 | } 149 | .wobble{-webkit-animation-name:wobble;animation-name:wobble} 150 | @-webkit-keyframes jello { 151 | from,11.1%,to{-webkit-transform:none;transform:none} 152 | 22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)} 153 | 33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)} 154 | 44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)} 155 | 55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)} 156 | 66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)} 157 | 77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)} 158 | 88.8%{-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);transform:skewX(-0.1953125deg) skewY(-0.1953125deg)} 159 | } 160 | @keyframes jello { 161 | from,11.1%,to{-webkit-transform:none;transform:none} 162 | 22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)} 163 | 33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)} 164 | 44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)} 165 | 55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)} 166 | 66.6%{-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);transform:skewX(-0.78125deg) skewY(-0.78125deg)} 167 | 77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)} 168 | 88.8%{-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);transform:skewX(-0.1953125deg) skewY(-0.1953125deg)} 169 | } 170 | .jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center} 171 | @-webkit-keyframes bounceIn { 172 | from,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 173 | 0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 174 | 20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 175 | 40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)} 176 | 60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)} 177 | 80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)} 178 | to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 179 | } 180 | @keyframes bounceIn { 181 | from,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 182 | 0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 183 | 20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 184 | 40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)} 185 | 60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)} 186 | 80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)} 187 | to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 188 | } 189 | .bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn} 190 | @-webkit-keyframes bounceInDown { 191 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 192 | 0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)} 193 | 60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)} 194 | 75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)} 195 | 90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)} 196 | to{-webkit-transform:none;transform:none;opacity:1} 197 | } 198 | @keyframes bounceInDown { 199 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 200 | 0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)} 201 | 60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)} 202 | 75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)} 203 | 90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)} 204 | to{-webkit-transform:none;transform:none;opacity:1} 205 | } 206 | .bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown} 207 | @-webkit-keyframes bounceInDownLeft { 208 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 209 | 0%{opacity:0;-webkit-transform:translate3d(-60px,-60px,0);transform:translate3d(-60px,-60px,0)} 210 | 60%{opacity:1;-webkit-transform:translate3d(25px,25px,0);transform:translate3d(25px,25px,0)} 211 | 75%{-webkit-transform:translate3d(-10px,-10px,0);transform:translate3d(-10px,-10px,0)} 212 | 90%{-webkit-transform:translate3d(5px,5px,0);transform:translate3d(5px,5px,0)} 213 | to{-webkit-transform:none;transform:none;opacity:1} 214 | } 215 | @keyframes bounceInDownLeft { 216 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 217 | 0%{opacity:0;-webkit-transform:translate3d(-60px,-60px,0);transform:translate3d(-60px,-60px,0)} 218 | 60%{opacity:1;-webkit-transform:translate3d(25px,25px,0);transform:translate3d(25px,25px,0)} 219 | 75%{-webkit-transform:translate3d(-10px,-10px,0);transform:translate3d(-10px,-10px,0)} 220 | 90%{-webkit-transform:translate3d(5px,5px,0);transform:translate3d(5px,5px,0)} 221 | to{-webkit-transform:none;transform:none;opacity:1} 222 | } 223 | .bounceInDownLeft{-webkit-animation-name:bounceInDownLeft;animation-name:bounceInDownLeft} 224 | @-webkit-keyframes bounceInLeft { 225 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 226 | 0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)} 227 | 60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)} 228 | 75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)} 229 | 90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)} 230 | to{-webkit-transform:none;transform:none;opacity:1} 231 | } 232 | @keyframes bounceInLeft { 233 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 234 | 0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)} 235 | 60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)} 236 | 75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)} 237 | 90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)} 238 | to{-webkit-transform:none;transform:none;opacity:1} 239 | } 240 | .bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft} 241 | @-webkit-keyframes bounceInRight { 242 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 243 | from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)} 244 | 60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)} 245 | 75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)} 246 | 90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)} 247 | to{-webkit-transform:none;transform:none;opacity:1} 248 | } 249 | @keyframes bounceInRight { 250 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 251 | from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)} 252 | 60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)} 253 | 75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)} 254 | 90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)} 255 | to{-webkit-transform:none;transform:none;opacity:1} 256 | } 257 | .bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight} 258 | @-webkit-keyframes bounceInUp { 259 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 260 | from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)} 261 | 60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)} 262 | 75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)} 263 | 90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)} 264 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1} 265 | } 266 | @keyframes bounceInUp { 267 | from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)} 268 | from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)} 269 | 60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)} 270 | 75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)} 271 | 90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)} 272 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1} 273 | } 274 | .bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp} 275 | @-webkit-keyframes bounceOut { 276 | 20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)} 277 | 50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 278 | to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 279 | } 280 | @keyframes bounceOut { 281 | 20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)} 282 | 50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)} 283 | to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 284 | } 285 | .bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut} 286 | @-webkit-keyframes bounceOutDown { 287 | 20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)} 288 | 40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)} 289 | to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)} 290 | } 291 | @keyframes bounceOutDown { 292 | 20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)} 293 | 40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)} 294 | to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)} 295 | } 296 | .bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown} 297 | @-webkit-keyframes bounceOutLeft { 298 | 20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)} 299 | to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)} 300 | } 301 | @keyframes bounceOutLeft { 302 | 20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)} 303 | to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)} 304 | } 305 | .bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft} 306 | @-webkit-keyframes bounceOutRight { 307 | 20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)} 308 | to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)} 309 | } 310 | @keyframes bounceOutRight { 311 | 20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)} 312 | to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)} 313 | } 314 | .bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight} 315 | @-webkit-keyframes bounceOutUp { 316 | 20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)} 317 | 40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)} 318 | to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)} 319 | } 320 | @keyframes bounceOutUp { 321 | 20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)} 322 | 40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)} 323 | to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)} 324 | } 325 | .bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp} 326 | @-webkit-keyframes fadeIn { 327 | from{opacity:0} 328 | to{opacity:1} 329 | } 330 | @keyframes fadeIn { 331 | from{opacity:0} 332 | to{opacity:1} 333 | } 334 | .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn} 335 | @-webkit-keyframes fadeInDown { 336 | from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 337 | to{opacity:1;-webkit-transform:none;transform:none} 338 | } 339 | @keyframes fadeInDown { 340 | from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 341 | to{opacity:1;-webkit-transform:none;transform:none} 342 | } 343 | .fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown} 344 | @-webkit-keyframes fadeInDownBig { 345 | from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)} 346 | to{opacity:1;-webkit-transform:none;transform:none} 347 | } 348 | @keyframes fadeInDownBig { 349 | from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)} 350 | to{opacity:1;-webkit-transform:none;transform:none} 351 | } 352 | .fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig} 353 | @-webkit-keyframes fadeInLeft { 354 | from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} 355 | to{opacity:1;-webkit-transform:none;transform:none} 356 | } 357 | @keyframes fadeInLeft { 358 | from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} 359 | to{opacity:1;-webkit-transform:none;transform:none} 360 | } 361 | .fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft} 362 | @-webkit-keyframes fadeInLeftBig { 363 | from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)} 364 | to{opacity:1;-webkit-transform:none;transform:none} 365 | } 366 | @keyframes fadeInLeftBig { 367 | from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)} 368 | to{opacity:1;-webkit-transform:none;transform:none} 369 | } 370 | .fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig} 371 | @-webkit-keyframes fadeInRight { 372 | from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} 373 | to{opacity:1;-webkit-transform:none;transform:none} 374 | } 375 | @keyframes fadeInRight { 376 | from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} 377 | to{opacity:1;-webkit-transform:none;transform:none} 378 | } 379 | .fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight} 380 | @-webkit-keyframes fadeInRightBig { 381 | from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)} 382 | to{opacity:1;-webkit-transform:none;transform:none} 383 | } 384 | @keyframes fadeInRightBig { 385 | from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)} 386 | to{opacity:1;-webkit-transform:none;transform:none} 387 | } 388 | .fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig} 389 | @-webkit-keyframes fadeInUp { 390 | from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} 391 | to{opacity:1;-webkit-transform:none;transform:none} 392 | } 393 | @keyframes fadeInUp { 394 | from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} 395 | to{opacity:1;-webkit-transform:none;transform:none} 396 | } 397 | .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} 398 | @-webkit-keyframes fadeInUpBig { 399 | from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)} 400 | to{opacity:1;-webkit-transform:none;transform:none} 401 | } 402 | @keyframes fadeInUpBig { 403 | from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)} 404 | to{opacity:1;-webkit-transform:none;transform:none} 405 | } 406 | .fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig} 407 | @-webkit-keyframes fadeOut { 408 | from{opacity:1} 409 | to{opacity:0} 410 | } 411 | @keyframes fadeOut { 412 | from{opacity:1} 413 | to{opacity:0} 414 | } 415 | .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut} 416 | @-webkit-keyframes fadeOutDown { 417 | from{opacity:1} 418 | to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} 419 | } 420 | @keyframes fadeOutDown { 421 | from{opacity:1} 422 | to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} 423 | } 424 | .fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown} 425 | @-webkit-keyframes fadeOutDownBig { 426 | from{opacity:1} 427 | to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)} 428 | } 429 | @keyframes fadeOutDownBig { 430 | from{opacity:1} 431 | to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)} 432 | } 433 | .fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig} 434 | @-webkit-keyframes fadeOutLeft { 435 | from{opacity:1} 436 | to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} 437 | } 438 | @keyframes fadeOutLeft { 439 | from{opacity:1} 440 | to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} 441 | } 442 | .fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft} 443 | @-webkit-keyframes fadeOutLeftBig { 444 | from{opacity:1} 445 | to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)} 446 | } 447 | @keyframes fadeOutLeftBig { 448 | from{opacity:1} 449 | to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)} 450 | } 451 | .fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig} 452 | @-webkit-keyframes fadeOutRight { 453 | from{opacity:1} 454 | to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} 455 | } 456 | @keyframes fadeOutRight { 457 | from{opacity:1} 458 | to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} 459 | } 460 | .fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight} 461 | @-webkit-keyframes fadeOutRightBig { 462 | from{opacity:1} 463 | to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)} 464 | } 465 | @keyframes fadeOutRightBig { 466 | from{opacity:1} 467 | to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)} 468 | } 469 | .fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig} 470 | @-webkit-keyframes fadeOutUp { 471 | from{opacity:1} 472 | to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 473 | } 474 | @keyframes fadeOutUp { 475 | from{opacity:1} 476 | to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 477 | } 478 | .fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp} 479 | @-webkit-keyframes fadeOutUpBig { 480 | from{opacity:1} 481 | to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)} 482 | } 483 | @keyframes fadeOutUpBig { 484 | from{opacity:1} 485 | to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)} 486 | } 487 | .fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig} 488 | @-webkit-keyframes flip { 489 | from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 490 | 40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 491 | 50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 492 | 80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 493 | to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 494 | } 495 | @keyframes flip { 496 | from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 497 | 40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 498 | 50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 499 | 80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 500 | to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 501 | } 502 | .animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip} 503 | @-webkit-keyframes flipInX { 504 | from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0} 505 | 40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 506 | 60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1} 507 | 80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)} 508 | to{-webkit-transform:perspective(400px);transform:perspective(400px)} 509 | } 510 | @keyframes flipInX { 511 | from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0} 512 | 40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 513 | 60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1} 514 | 80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)} 515 | to{-webkit-transform:perspective(400px);transform:perspective(400px)} 516 | } 517 | .flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX} 518 | @-webkit-keyframes flipInY { 519 | from{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0} 520 | 40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 521 | 60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1} 522 | 80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)} 523 | to{-webkit-transform:perspective(400px);transform:perspective(400px)} 524 | } 525 | @keyframes flipInY { 526 | from{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0} 527 | 40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 528 | 60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1} 529 | 80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)} 530 | to{-webkit-transform:perspective(400px);transform:perspective(400px)} 531 | } 532 | .flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY} 533 | @-webkit-keyframes flipOutX { 534 | from{-webkit-transform:perspective(400px);transform:perspective(400px)} 535 | 30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1} 536 | to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0} 537 | } 538 | @keyframes flipOutX { 539 | from{-webkit-transform:perspective(400px);transform:perspective(400px)} 540 | 30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1} 541 | to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0} 542 | } 543 | .flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important} 544 | @-webkit-keyframes flipOutY { 545 | from{-webkit-transform:perspective(400px);transform:perspective(400px)} 546 | 30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1} 547 | to{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0} 548 | } 549 | @keyframes flipOutY { 550 | from{-webkit-transform:perspective(400px);transform:perspective(400px)} 551 | 30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1} 552 | to{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0} 553 | } 554 | .flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY} 555 | @-webkit-keyframes lightSpeedIn { 556 | from{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0} 557 | 60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1} 558 | 80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1} 559 | to{-webkit-transform:none;transform:none;opacity:1} 560 | } 561 | @keyframes lightSpeedIn { 562 | from{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0} 563 | 60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1} 564 | 80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1} 565 | to{-webkit-transform:none;transform:none;opacity:1} 566 | } 567 | .lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 568 | @-webkit-keyframes lightSpeedOut { 569 | from{opacity:1} 570 | to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0} 571 | } 572 | @keyframes lightSpeedOut { 573 | from{opacity:1} 574 | to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0} 575 | } 576 | .lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 577 | @-webkit-keyframes rotateIn { 578 | from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0} 579 | to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1} 580 | } 581 | @keyframes rotateIn { 582 | from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0} 583 | to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1} 584 | } 585 | .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn} 586 | @-webkit-keyframes rotateInDownLeft { 587 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0} 588 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1} 589 | } 590 | @keyframes rotateInDownLeft { 591 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0} 592 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1} 593 | } 594 | .rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft} 595 | @-webkit-keyframes rotateInDownRight { 596 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0} 597 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1} 598 | } 599 | @keyframes rotateInDownRight { 600 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0} 601 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1} 602 | } 603 | .rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight} 604 | @-webkit-keyframes rotateInUpLeft { 605 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0} 606 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1} 607 | } 608 | @keyframes rotateInUpLeft { 609 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0} 610 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1} 611 | } 612 | .rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft} 613 | @-webkit-keyframes rotateInUpRight { 614 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0} 615 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1} 616 | } 617 | @keyframes rotateInUpRight { 618 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0} 619 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1} 620 | } 621 | .rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight} 622 | @-webkit-keyframes rotateOut { 623 | from{-webkit-transform-origin:center;transform-origin:center;opacity:1} 624 | to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0} 625 | } 626 | @keyframes rotateOut { 627 | from{-webkit-transform-origin:center;transform-origin:center;opacity:1} 628 | to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0} 629 | } 630 | .rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut} 631 | @-webkit-keyframes rotateOutDownLeft { 632 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1} 633 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0} 634 | } 635 | @keyframes rotateOutDownLeft { 636 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1} 637 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0} 638 | } 639 | .rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft} 640 | @-webkit-keyframes tearRightLeft { 641 | from{-webkit-transform-origin:left top;transform-origin:left top;opacity:1} 642 | to{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate3d(0,0,1,25deg) translate(10%,100%);transform:rotate3d(0,0,1,25deg) translate(10%,100%);opacity:1} 643 | } 644 | @keyframes tearRightLeft { 645 | from{-webkit-transform-origin:left top;transform-origin:left top;opacity:1} 646 | to{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate3d(0,0,1,25deg) translate(10%,100%);transform:rotate3d(0,0,1,25deg) translate(10%,100%);opacity:0} 647 | } 648 | .tearRightLeft{-webkit-animation-name:tearRightLeft;animation-name:tearRightLeft} 649 | @-webkit-keyframes rotateOutDownRight { 650 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1} 651 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0} 652 | } 653 | @keyframes rotateOutDownRight { 654 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1} 655 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0} 656 | } 657 | .rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight} 658 | @-webkit-keyframes rotateOutUpLeft { 659 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1} 660 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0} 661 | } 662 | @keyframes rotateOutUpLeft { 663 | from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1} 664 | to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0} 665 | } 666 | .rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft} 667 | @-webkit-keyframes rotateOutUpRight { 668 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1} 669 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0} 670 | } 671 | @keyframes rotateOutUpRight { 672 | from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1} 673 | to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0} 674 | } 675 | .rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight} 676 | @-webkit-keyframes hinge { 677 | 0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out} 678 | 20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out} 679 | 40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1} 680 | to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0} 681 | } 682 | @keyframes hinge { 683 | 0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out} 684 | 20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out} 685 | 40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1} 686 | to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0} 687 | } 688 | .hinge{-webkit-animation-name:hinge;animation-name:hinge} 689 | @-webkit-keyframes rollIn { 690 | from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)} 691 | to{opacity:1;-webkit-transform:none;transform:none} 692 | } 693 | @keyframes rollIn { 694 | from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)} 695 | to{opacity:1;-webkit-transform:none;transform:none} 696 | } 697 | .rollIn{-webkit-animation-name:rollIn;animation-name:rollIn} 698 | @-webkit-keyframes rollOut { 699 | from{opacity:1} 700 | to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)} 701 | } 702 | @keyframes rollOut { 703 | from{opacity:1} 704 | to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)} 705 | } 706 | .rollOut{-webkit-animation-name:rollOut;animation-name:rollOut} 707 | @-webkit-keyframes zoomIn { 708 | from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 709 | 50%{opacity:1} 710 | to{opacity:1} 711 | } 712 | @keyframes zoomIn { 713 | from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 714 | 50%{opacity:1} 715 | to{opacity:1} 716 | } 717 | .zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn} 718 | @-webkit-keyframes zoomInDown { 719 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 720 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 721 | } 722 | @keyframes zoomInDown { 723 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 724 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 725 | } 726 | .zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown} 727 | @-webkit-keyframes zoomInLeft { 728 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 729 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 730 | } 731 | @keyframes zoomInLeft { 732 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 733 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 734 | } 735 | .zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft} 736 | @-webkit-keyframes zoomInRight { 737 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 738 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 739 | to{opacity:1} 740 | } 741 | @keyframes zoomInRight { 742 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 743 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 744 | to{opacity:1} 745 | } 746 | .zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight} 747 | @-webkit-keyframes zoomInUp { 748 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 749 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 750 | } 751 | @keyframes zoomInUp { 752 | from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 753 | 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 754 | } 755 | .zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp} 756 | @-webkit-keyframes zoomOut { 757 | from{opacity:1} 758 | 50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 759 | to{opacity:0} 760 | } 761 | @keyframes zoomOut { 762 | from{opacity:1} 763 | 50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)} 764 | to{opacity:0} 765 | } 766 | .zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut} 767 | @-webkit-keyframes zoomOutDown { 768 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 769 | to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 770 | } 771 | @keyframes zoomOutDown { 772 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 773 | to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 774 | } 775 | .zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown} 776 | @-webkit-keyframes zoomOutLeft { 777 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)} 778 | to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center} 779 | } 780 | @keyframes zoomOutLeft { 781 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)} 782 | to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center} 783 | } 784 | .zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft} 785 | @-webkit-keyframes zoomOutRight { 786 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)} 787 | to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center} 788 | } 789 | @keyframes zoomOutRight { 790 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)} 791 | to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center} 792 | } 793 | .zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight} 794 | @-webkit-keyframes zoomOutUp { 795 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 796 | to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 797 | } 798 | @keyframes zoomOutUp { 799 | 40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)} 800 | to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)} 801 | } 802 | .zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp} 803 | @-webkit-keyframes slideInDown { 804 | from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible} 805 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 806 | } 807 | @keyframes slideInDown { 808 | from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible} 809 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 810 | } 811 | .slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown} 812 | @-webkit-keyframes slideInDownSkewRight { 813 | 0%{-webkit-transform:translate3d(0,-25%,0) skewY(-15deg);transform:translate3d(0,-25%,0) skewY(-15deg);visibility:visible} 814 | 50%{-webkit-transform:skewY(10deg);transform:skewY(10deg)} 815 | 100%{-webkit-transform:translate3d(0,0,0) skewY(10deg);transform:translate3d(0,0,0) skewY(10deg)} 816 | } 817 | @keyframes slideInDownSkewRight { 818 | 0%{-webkit-transform:translate3d(0,-25%,0) skewY(-15deg);transform:translate3d(0,-25%,0) skewY(-15deg);visibility:visible} 819 | 50%{-webkit-transform:skewY(10deg);transform:skewY(10deg)} 820 | 100%{-webkit-transform:translate3d(0,0,0) skewY(10deg);transform:translate3d(0,0,0) skewY(10deg)} 821 | } 822 | .slideInDownSkewRight{-webkit-animation-name:slideInDownSkewRight;animation-name:slideInDownSkewRight} 823 | @-webkit-keyframes slideInLeft { 824 | from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible} 825 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 826 | } 827 | @keyframes slideInLeft { 828 | from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible} 829 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 830 | } 831 | .slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft} 832 | @-webkit-keyframes slideInRight { 833 | from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible} 834 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 835 | } 836 | @keyframes slideInRight { 837 | from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible} 838 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 839 | } 840 | .slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight} 841 | @-webkit-keyframes slideInUp { 842 | from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible} 843 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 844 | } 845 | @keyframes slideInUp { 846 | from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible} 847 | to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 848 | } 849 | .slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp} 850 | @-webkit-keyframes slideOutDown { 851 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 852 | to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} 853 | } 854 | @keyframes slideOutDown { 855 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 856 | to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)} 857 | } 858 | .slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown} 859 | @-webkit-keyframes slideOutLeft { 860 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 861 | to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} 862 | } 863 | @keyframes slideOutLeft { 864 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 865 | to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} 866 | } 867 | .slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft} 868 | @-webkit-keyframes slideOutRight { 869 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 870 | to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} 871 | } 872 | @keyframes slideOutRight { 873 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 874 | to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} 875 | } 876 | .slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight} 877 | @-webkit-keyframes slideOutUp { 878 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 879 | to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 880 | } 881 | @keyframes slideOutUp { 882 | from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 883 | to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 884 | } 885 | .slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} 886 | @keyframes skewRubberband{ 887 | from{transform-style:preserve-3d;transform: skewX(45deg) rotateX(65deg) rotateY(15deg) rotateZ(-20deg) perspective(150px);} 888 | 50%{transform:skewX(-45deg);} 889 | to{transform:skewX(45deg) rotateX(-65deg) rotateY(-15deg) rotateZ(-20deg) perspective(150px);} 890 | } 891 | .infinite-jello{ 892 | -webkit-animation-name:skewRubberband;animation-name:skewRubberband;-webkit-transform-origin:center;transform-origin:center;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: linear;animation-timing-function: linear; 893 | } 894 | @-webkit-keyframes flipInYInfinite { 895 | 0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);} 896 | 100%{-webkit-transform:perspective(400px) rotateY(359deg);transform:perspective(400px) rotateY(359deg)} 897 | } 898 | @keyframes flipInYInfinite { 899 | 0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);} 900 | 100%{-webkit-transform:perspective(400px) rotateY(359deg);transform:perspective(400px) rotateY(359deg)} 901 | } 902 | .flipInYInfinite{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInYInfinite;animation-name:flipInYInfinite;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: linear;animation-timing-function: linear;} --------------------------------------------------------------------------------