From fb34addc27e468e9cf52f9bf2ae22b86263bf619 Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Sat, 24 Mar 2018 20:39:10 -0700 Subject: [PATCH 1/8] Driveby - Ditch react-table related dependencies (unused) --- .storybook/config.js | 1 - package.json | 1 - src/index.js | 1 - .../components/indexTable/indexTable.js | 75 --- src/shared/styles/react-table.global.css | 429 ------------------ stories/components/indexTable/index.js | 44 -- yarn.lock | 6 - 7 files changed, 557 deletions(-) delete mode 100644 src/shared/components/indexTable/indexTable.js delete mode 100644 src/shared/styles/react-table.global.css delete mode 100644 stories/components/indexTable/index.js diff --git a/.storybook/config.js b/.storybook/config.js index 41ed07bcb..5693a5639 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,7 +1,6 @@ import { configure } from '@storybook/react'; import 'shared/styles/normalize.global.css'; -import 'shared/styles/react-table.global.css'; import 'shared/styles/react-select.global.css'; import 'index.css'; diff --git a/package.json b/package.json index 40cd307f6..f5445a55c 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "react-scroll": "^1.5.4", "react-scroll-up-button": "^1.5.9", "react-select": "^1.0.0-rc.5", - "react-table": "^6.0.5", "react-toastr": "^2.9.5", "react-youtube": "^7.5.0", "sinon": "^2.3.2", diff --git a/src/index.js b/src/index.js index 0b7cb8645..e719ff8c5 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom'; import '@fortawesome/fontawesome/styles.css'; import App from './App'; import './shared/styles/normalize.global.css'; -import './shared/styles/react-table.global.css'; import './shared/styles/react-select.global.css'; import './index.css'; diff --git a/src/shared/components/indexTable/indexTable.js b/src/shared/components/indexTable/indexTable.js deleted file mode 100644 index b3275e68e..000000000 --- a/src/shared/components/indexTable/indexTable.js +++ /dev/null @@ -1,75 +0,0 @@ -import React, { Component } from 'react'; -import { Redirect } from 'react-router-dom'; -import PropTypes from 'prop-types'; -import Heading from 'shared/components/heading/heading'; -import ReactTable from 'react-table'; - -class IndexTable extends Component { - state = { - loggedIn: true, - data: [], - }; - - componentDidMount() { - this.props - .fetchRecords() - .then(data => { - this.setState({ data }); - }) - .catch(this.setFetchError); - } - - setFetchError = err => { - const { response } = err; - // The 500 means you the user is not a mentor, should - // update that later - if (response.status === 401 || response.status === 500) { - this.setState({ loggedIn: false }); - } - }; - - handleRowClick = (state, rowInfo) => ({ - onClick: () => { - this.props.onRowClick(this.state.data[rowInfo.index]); - }, - }); - - render() { - if (!this.state.loggedIn) { - return ; - } - - return ( -
- - -
- ); - } -} - -IndexTable.defaultProps = { - onRowClick: () => {}, - showPagination: true, -}; - -IndexTable.propTypes = { - columns: PropTypes.arrayOf( - PropTypes.shape({ - Header: PropTypes.string, - accessor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - }) - ).isRequired, - heading: PropTypes.string.isRequired, - onRowClick: PropTypes.func, - fetchRecords: PropTypes.func.isRequired, - showPagination: PropTypes.bool, -}; - -export default IndexTable; diff --git a/src/shared/styles/react-table.global.css b/src/shared/styles/react-table.global.css deleted file mode 100644 index 6d5b3a299..000000000 --- a/src/shared/styles/react-table.global.css +++ /dev/null @@ -1,429 +0,0 @@ -.ReactModal__Content { - overflow: visible !important; -} - -.ReactModal__Body--open { - overflow: hidden; -} - -.ReactModal__Body--open #root { - position: relative; - z-index: 0; -} - -.ReactTable { - position: relative; - display: flex; - flex-direction: column; - border: 1px solid rgba(0, 0, 0, 0.1); -} - -.ReactTable * { - box-sizing: border-box; -} - -.ReactTable .rt-tr-group:hover { - background: #f3f3f3; - cursor: pointer; - box-shadow: 14px 0px 6px #c2c2c2; -} - -.ReactTable .rt-table { - flex: 1; - display: flex; - flex-direction: column; - align-items: stretch; - width: 100%; - border-collapse: collapse; - overflow: auto; -} - -.ReactTable .rt-thead { - flex: 1 0 auto; - display: flex; - flex-direction: column; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ReactTable .rt-thead.-headerGroups { - background: rgba(0, 0, 0, 0.03); - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-thead.-filters { - border-bottom: 1px solid rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-thead.-filters .rt-th { - border-right: 1px solid rgba(0, 0, 0, 0.02); -} - -.ReactTable .rt-thead.-header { - box-shadow: 0 2px 15px 0px rgba(0, 0, 0, 0.15); -} - -.ReactTable .rt-thead .rt-tr { - text-align: center; -} - -.ReactTable .rt-thead .rt-th, -.ReactTable .rt-thead .rt-td { - padding: 5px 5px; - line-height: normal; - position: relative; - border-right: 1px solid rgba(0, 0, 0, 0.05); - transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - box-shadow: inset 0 0 0 0 transparent; -} - -.ReactTable .rt-thead .rt-th.-sort-asc, -.ReactTable .rt-thead .rt-td.-sort-asc { - box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.6); -} - -.ReactTable .rt-thead .rt-th.-sort-desc, -.ReactTable .rt-thead .rt-td.-sort-desc { - box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.6); -} - -.ReactTable .rt-thead .rt-th.-cursor-pointer, -.ReactTable .rt-thead .rt-td.-cursor-pointer { - cursor: pointer; -} - -.ReactTable .rt-thead .rt-th:last-child, -.ReactTable .rt-thead .rt-td:last-child { - border-right: 0; -} - -.ReactTable .rt-thead .rt-resizable-header { - overflow: visible; -} - -.ReactTable .rt-thead .rt-resizable-header:last-child { - overflow: hidden; -} - -.ReactTable .rt-thead .rt-resizable-header-content { - overflow: hidden; - text-overflow: ellipsis; -} - -.ReactTable .rt-thead .rt-header-pivot { - border-right-color: #f7f7f7; -} - -.ReactTable .rt-thead .rt-header-pivot:after, -.ReactTable .rt-thead .rt-header-pivot:before { - left: 100%; - top: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.ReactTable .rt-thead .rt-header-pivot:after { - border-color: rgba(255, 255, 255, 0); - border-left-color: #fff; - border-width: 8px; - margin-top: -8px; -} - -.ReactTable .rt-thead .rt-header-pivot:before { - border-color: rgba(102, 102, 102, 0); - border-left-color: #f7f7f7; - border-width: 10px; - margin-top: -10px; -} - -.ReactTable .rt-tbody { - flex: 99999 1 auto; - display: flex; - flex-direction: column; - overflow: auto; -} - -.ReactTable .rt-tbody .rt-tr-group { - border-bottom: solid 1px rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-tbody .rt-tr-group:last-child { - border-bottom: 0; -} - -.ReactTable .rt-tbody .rt-td { - border-right: 1px solid rgba(0, 0, 0, 0.02); -} - -.ReactTable .rt-tbody .rt-td:last-child { - border-right: 0; -} - -.ReactTable .rt-tbody .rt-expandable { - cursor: pointer; -} - -.ReactTable .rt-tr-group { - flex: 1 0 auto; - display: flex; - flex-direction: column; - align-items: stretch; -} - -.ReactTable .rt-tr { - flex: 1 0 auto; - display: inline-flex; -} - -.ReactTable .rt-th, -.ReactTable .rt-td { - flex: 1 0 0px; - white-space: nowrap; - text-overflow: ellipsis; - padding: 7px 5px; - overflow: hidden; - transition: 0.3s ease; - transition-property: width, min-width, padding, opacity; -} - -.ReactTable .rt-th.-hidden, -.ReactTable .rt-td.-hidden { - width: 0 !important; - min-width: 0 !important; - padding: 0 !important; - border: 0 !important; - opacity: 0 !important; -} - -.ReactTable .rt-expander { - display: inline-block; - position: relative; - margin: 0; - color: transparent; - margin: 0 10px; -} - -.ReactTable .rt-expander:after { - content: ''; - position: absolute; - width: 0; - height: 0; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(-90deg); - border-left: 5.04px solid transparent; - border-right: 5.04px solid transparent; - border-top: 7px solid rgba(0, 0, 0, 0.8); - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - cursor: pointer; -} - -.ReactTable .rt-expander.-open:after { - transform: translate(-50%, -50%) rotate(0deg); -} - -.ReactTable .rt-resizer { - display: inline-block; - position: absolute; - width: 36px; - top: 0; - bottom: 0; - right: -18px; - cursor: col-resize; - z-index: 10; -} - -.ReactTable .rt-tfoot { - display: flex; - flex-direction: column; - box-shadow: 0 0px 15px 0px rgba(0, 0, 0, 0.15); -} - -.ReactTable .rt-tfoot .rt-td { - border-right: 1px solid rgba(0, 0, 0, 0.05); -} - -.ReactTable .rt-tfoot .rt-td:last-child { - border-right: 0; -} - -.ReactTable.-striped .rt-tr.-odd { - background: rgba(0, 0, 0, 0.03); -} - -.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover { - background: rgba(0, 0, 0, 0.05); -} - -.ReactTable .-pagination { - z-index: 1; - display: flex; - justify-content: space-between; - align-items: stretch; - flex-wrap: wrap; - padding: 3px; - box-shadow: 0 0px 15px 0px rgba(0, 0, 0, 0.1); - border-top: 2px solid rgba(0, 0, 0, 0.1); -} - -.ReactTable .-pagination .-btn { - appearance: none; - display: block; - width: 100%; - height: 100%; - border: 0; - border-radius: 3px; - padding: 6px; - font-size: 1em; - color: rgba(0, 0, 0, 0.6); - background: rgba(0, 0, 0, 0.1); - transition: all 0.1s ease; - cursor: pointer; - outline: none; -} - -.ReactTable .-pagination .-btn[disabled] { - opacity: 0.5; - cursor: default; -} - -.ReactTable .-pagination .-btn:not([disabled]):hover { - background: rgba(0, 0, 0, 0.3); - color: #fff; -} - -.ReactTable .-pagination .-previous, -.ReactTable .-pagination .-next { - flex: 1; - text-align: center; -} - -.ReactTable .-pagination .-center { - flex: 1.5; - text-align: center; - margin-bottom: 0; - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: space-around; -} - -.ReactTable .-pagination .-pageInfo { - display: inline-block; - margin: 3px 10px; - white-space: nowrap; -} - -.ReactTable .-pagination .-pageJump { - display: inline-block; -} - -.ReactTable .-pagination .-pageJump input { - width: 70px; - text-align: center; -} - -.ReactTable .-pagination .-pageSizeOptions { - margin: 3px 10px; -} - -.ReactTable .rt-noData { - display: block; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - background: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - z-index: 1; - pointer-events: none; - padding: 20px; - color: rgba(0, 0, 0, 0.5); -} - -.ReactTable .-loading { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - z-index: 2; - opacity: 0; - pointer-events: none; -} - -.ReactTable .-loading>div { - position: absolute; - display: block; - text-align: center; - width: 100%; - top: 50%; - left: 0; - font-size: 15px; - color: rgba(0, 0, 0, 0.6); - transform: translateY(-52%); - transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -.ReactTable .-loading.-active { - opacity: 1; - pointer-events: all; -} - -.ReactTable .-loading.-active>div { - transform: translateY(50%); -} - -.ReactTable input, -.ReactTable select { - border: 1px solid rgba(0, 0, 0, 0.1); - background: #fff; - padding: 5px 7px; - font-size: inherit; - border-radius: 3px; - font-weight: normal; - outline: none; -} - -.ReactTable input:not([type="checkbox"]):not([type="radio"]), -.ReactTable select { - appearance: none; -} - -.ReactTable .select-wrap { - position: relative; - display: inline-block; -} - -.ReactTable .select-wrap select { - padding: 5px 15px 5px 7px; - min-width: 100px; -} - -.ReactTable .select-wrap:after { - content: ''; - position: absolute; - right: 8px; - top: 50%; - transform: translate(0, -50%); - border-color: #999 transparent transparent; - border-style: solid; - border-width: 5px 5px 2.5px; -} - -.ReactTable .rt-resizing .rt-th, -.ReactTable .rt-resizing .rt-td { - transition: none !important; - cursor: col-resize; - user-select: none; -} diff --git a/stories/components/indexTable/index.js b/stories/components/indexTable/index.js deleted file mode 100644 index 515dc00e4..000000000 --- a/stories/components/indexTable/index.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, { Component } from 'react'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; - -import IndexTable from 'shared/components/indexTable/indexTable'; - -function fetchFakeData() { - return new Promise( - resolve => setTimeout( - () => resolve([ - { id: 1, fullName: 'James Bond', age: 36, profession: 'Developer' }, - { id: 2, fullName: 'John Snow', age: 28, profession: 'Team lead' }, - { id: 3, fullName: 'Methew Fraser', age: 25, profession: 'Frontend developer' }, - ]) - ) - ); -} - -storiesOf('shared/components/indexTable', module) - .add('Default table', () => ( - - )); diff --git a/yarn.lock b/yarn.lock index feb19ad5c..fc19451ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8246,12 +8246,6 @@ react-style-proptype@^3.0.0: dependencies: prop-types "^15.5.4" -react-table@^6.0.5: - version "6.8.0" - resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.8.0.tgz#5ce402eb735df68534c03dabb3faa031478b6a58" - dependencies: - classnames "^2.2.5" - react-toastr@^2.9.5: version "2.9.5" resolved "https://registry.yarnpkg.com/react-toastr/-/react-toastr-2.9.5.tgz#f2263770c8ce13714625e7ce6d0908279353bb31" From 2f9244126c002c636525258d61c3d288522e84fa Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Sat, 24 Mar 2018 20:40:21 -0700 Subject: [PATCH 2/8] Driveby - Bundle notification styles to avoid extra request --- src/index.js | 1 + src/shared/styles/notifications.css | 3456 +++++++++++++++++++++++++++ 2 files changed, 3457 insertions(+) create mode 100644 src/shared/styles/notifications.css diff --git a/src/index.js b/src/index.js index e719ff8c5..e204a548d 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import '@fortawesome/fontawesome/styles.css'; import App from './App'; import './shared/styles/normalize.global.css'; import './shared/styles/react-select.global.css'; +import './shared/styles/notifications.css'; import './index.css'; ReactDOM.render( diff --git a/src/shared/styles/notifications.css b/src/shared/styles/notifications.css new file mode 100644 index 000000000..3759150df --- /dev/null +++ b/src/shared/styles/notifications.css @@ -0,0 +1,3456 @@ +@charset "UTF-8"; +/*! + * animate.css -http://daneden.me/animate + * Version - 3.5.1 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2016 Daniel Eden + */ + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite +} + +.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-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0) + } + 40%, + 43%, + 70% { + -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); + animation-timing-function: cubic-bezier(.755, .05, .855, .06) + } + 70% { + -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-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0) + } + 40%, + 43%, + 70% { + -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); + animation-timing-function: cubic-bezier(.755, .05, .855, .06) + } + 70% { + -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 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 + } +} + +@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 + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown +} + +@-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 + } +} + +@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 + } +} + +.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 + } +} + +@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 + } +} + +.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) + } +} + +@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) + } +} + +.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) + } + 0%, + 40% { + -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) + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); + transform: perspective(400px) translateZ(150px) rotateY(-170deg) + } + 50%, + 80% { + -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) + } + 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) + } + 0%, + 40% { + -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) + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); + transform: perspective(400px) translateZ(150px) rotateY(-170deg) + } + 50%, + 80% { + -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) + } + 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); + opacity: 0 + } + 0%, + 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotateX(-20deg) + } + 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); + opacity: 0 + } + 0%, + 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotateX(-20deg) + } + 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); + opacity: 0 + } + 0%, + 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateY(-20deg); + transform: perspective(400px) rotateY(-20deg) + } + 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); + opacity: 0 + } + 0%, + 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateY(-20deg); + transform: perspective(400px) rotateY(-20deg) + } + 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) + } + 60%, + 80% { + opacity: 1 + } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg) + } + 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) + } + 60%, + 80% { + opacity: 1 + } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg) + } + 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% { + transform-origin: center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateIn { + 0% { + transform-origin: center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn +} + +@-webkit-keyframes rotateInDownLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInDownLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft +} + +@-webkit-keyframes rotateInDownRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInDownRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight +} + +@-webkit-keyframes rotateInUpLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInUpLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft +} + +@-webkit-keyframes rotateInUpRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInUpRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight +} + +@-webkit-keyframes rotateOut { + 0% { + transform-origin: center; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0 + } +} + +@keyframes rotateOut { + 0% { + transform-origin: center; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0 + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut +} + +@-webkit-keyframes rotateOutDownLeft { + 0% { + transform-origin: left bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } +} + +@keyframes rotateOutDownLeft { + 0% { + transform-origin: left bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft +} + +@-webkit-keyframes rotateOutDownRight { + 0% { + transform-origin: right bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } +} + +@keyframes rotateOutDownRight { + 0% { + transform-origin: right bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + 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% { + transform-origin: left bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } +} + +@keyframes rotateOutUpLeft { + 0% { + transform-origin: left bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: left bottom + } + to { + 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% { + transform-origin: right bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0 + } +} + +@keyframes rotateOutUpRight { + 0% { + transform-origin: right bottom; + opacity: 1 + } + 0%, + to { + -webkit-transform-origin: right bottom + } + to { + 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% { + transform-origin: top left + } + 0%, + 20%, + 60% { + -webkit-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); + transform-origin: top left + } + 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% { + transform-origin: top left + } + 0%, + 20%, + 60% { + -webkit-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); + transform-origin: top left + } + 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 + } +} + +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 50% { + 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) + } +} + +@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) + } +} + +.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% { + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 50%, + to { + opacity: 0 + } +} + +@keyframes zoomOut { + 0% { + opacity: 1 + } + 50% { + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 50%, + 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 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 +} + +.toast-title { + font-weight: 700 +} + +.toast-message { + -ms-word-wrap: break-word; + word-wrap: break-word +} + +.toast-message a, +.toast-message label { + color: #FFF +} + +.toast-message a:hover { + color: #CCC; + text-decoration: none +} + +.toast-close-button { + position: relative; + right: -.3em; + top: -.3em; + float: right; + font-size: 20px; + font-weight: 700; + color: #FFF; + -webkit-text-shadow: 0 1px 0 #fff; + text-shadow: 0 1px 0 #fff; + opacity: .8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80); + line-height: 1 +} + +.toast-close-button:focus, +.toast-close-button:hover { + color: #000; + text-decoration: none; + cursor: pointer; + opacity: .4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40) +} + +.rtl .toast-close-button { + left: -.3em; + float: left; + right: .3em +} + +button.toast-close-button { + padding: 0; + cursor: pointer; + background: 0 0; + border: 0; + -webkit-appearance: none +} + +.toast-top-center { + top: 0; + right: 0; + width: 100% +} + +.toast-bottom-center { + bottom: 0; + right: 0; + width: 100% +} + +.toast-top-full-width { + top: 0; + right: 0; + width: 100% +} + +.toast-bottom-full-width { + bottom: 0; + right: 0; + width: 100% +} + +.toast-top-left { + top: 12px; + left: 12px +} + +.toast-top-right { + top: 12px; + right: 12px +} + +.toast-bottom-right { + right: 12px; + bottom: 12px +} + +.toast-bottom-left { + bottom: 12px; + left: 12px +} + +#toast-container { + position: fixed; + z-index: 999999; + pointer-events: none +} + +#toast-container * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +#toast-container>div { + position: relative; + pointer-events: auto; + overflow: hidden; + margin: 0 0 6px; + padding: 15px 15px 15px 50px; + width: 300px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background-position: 15px center; + background-repeat: no-repeat; + -moz-box-shadow: 0 0 12px #999; + -webkit-box-shadow: 0 0 12px #999; + box-shadow: 0 0 12px #999; + color: #FFF; + opacity: .8; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + filter: alpha(opacity=80) +} + +#toast-container>div.rtl { + direction: rtl; + padding: 15px 50px 15px 15px; + background-position: right 15px center +} + +#toast-container>div:hover { + -moz-box-shadow: 0 0 12px #000; + -webkit-box-shadow: 0 0 12px #000; + box-shadow: 0 0 12px #000; + opacity: 1; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + filter: alpha(opacity=100); + cursor: pointer +} + +#toast-container>.toast-info { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=) !important +} + +#toast-container>.toast-error { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=) !important +} + +#toast-container>.toast-success { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==) !important +} + +#toast-container>.toast-warning { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=) !important +} + +#toast-container.toast-bottom-center>div, +#toast-container.toast-top-center>div { + width: 300px; + margin-left: auto; + margin-right: auto +} + +#toast-container.toast-bottom-full-width>div, +#toast-container.toast-top-full-width>div { + width: 96%; + margin-left: auto; + margin-right: auto +} + +.toast { + background-color: #030303 +} + +.toast-success { + background-color: #51A351 +} + +.toast-error { + background-color: #BD362F +} + +.toast-info { + background-color: #2F96B4 +} + +.toast-warning { + background-color: #F89406 +} + +.toast-progress { + position: absolute; + left: 0; + bottom: 0; + height: 4px; + background-color: #000; + opacity: .4; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + filter: alpha(opacity=40) +} + +@media all and (max-width:240px) { + #toast-container>div { + padding: 8px 8px 8px 50px; + width: 11em + } + #toast-container>div.rtl { + padding: 8px 50px 8px 8px + } + #toast-container .toast-close-button { + right: -.2em; + top: -.2em + } + #toast-container .rtl .toast-close-button { + left: -.2em; + right: .2em + } +} + +@media all and (min-width:241px) and (max-width:480px) { + #toast-container>div { + padding: 8px 8px 8px 50px; + width: 18em + } + #toast-container>div.rtl { + padding: 8px 50px 8px 8px + } + #toast-container .toast-close-button { + right: -.2em; + top: -.2em + } + #toast-container .rtl .toast-close-button { + left: -.2em; + right: .2em + } +} + +@media all and (min-width:481px) and (max-width:768px) { + #toast-container>div { + padding: 15px 15px 15px 50px; + width: 25em + } + #toast-container>div.rtl { + padding: 15px 50px 15px 15px + } +} \ No newline at end of file From a8f4ccb857d45d179bbe138addcf42bf58f471c4 Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Sat, 24 Mar 2018 20:40:34 -0700 Subject: [PATCH 3/8] Defer loading of Raven script --- index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index ade64c489..290dafeba 100644 --- a/index.html +++ b/index.html @@ -17,16 +17,15 @@ - + - +
- - - - -
- - - - - From 3d8cc92bc7947ad1b82ed34c04cc1008a61b2b2e Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Fri, 20 Apr 2018 00:13:20 -0700 Subject: [PATCH 7/8] Update index.html to match src changes --- public/index.html | 47 ++++++++++++++++++++++------------------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/public/index.html b/public/index.html index 06a6bbd9d..34baf5df3 100644 --- a/public/index.html +++ b/public/index.html @@ -1,9 +1,11 @@ - + + Operation Code + @@ -18,21 +20,26 @@ - + - - - - - + + + + + + - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will - work correctly both with client-side routing and a non-root public URL. - Learn how to configure a non-root public URL by running `npm run build`. - --> + + + Operation Code @@ -40,21 +47,11 @@
- From d14fa6115a980b958497ef4f022f7b3f2b1928d6 Mon Sep 17 00:00:00 2001 From: John Hampton Date: Fri, 20 Apr 2018 23:10:56 -0400 Subject: [PATCH 8/8] Remove outdated Open Graph meta/link tags Event is in the past, this can be re-added for future event if needed --- public/index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/public/index.html b/public/index.html index 34baf5df3..906b486d0 100644 --- a/public/index.html +++ b/public/index.html @@ -32,10 +32,6 @@ - - -