You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kylin.apache.org by lu...@apache.org on 2015/07/15 08:44:44 UTC
[36/43] incubator-kylin git commit: KYLIN-884 re-structure website,
using new menu, move to root dir
http://git-wip-us.apache.org/repos/asf/incubator-kylin/blob/b37a7809/website/_posts/blog/2015-06-10-release-v0.7.1-incubating.md
----------------------------------------------------------------------
diff --git a/website/_posts/blog/2015-06-10-release-v0.7.1-incubating.md b/website/_posts/blog/2015-06-10-release-v0.7.1-incubating.md
new file mode 100644
index 0000000..c695490
--- /dev/null
+++ b/website/_posts/blog/2015-06-10-release-v0.7.1-incubating.md
@@ -0,0 +1,149 @@
+---
+layout: post-blog
+title: "Release v0.7.1-incubating"
+date: 2015-06-10 12:28:00
+author: Luke Han
+categories: blog
+---
+
+Apache Kylin v0.7.1-incubating has rolled out on June 10, 2015. This is also the first Apache release after join incubating.
+
+To download this release, please visit: [http://kylin.incubator.apache.org/download/](http://kylin.incubator.apache.org/download/), there are source code package, binary package, ODBC driver and installation guide avaliable.
+
+Any problem or issue, please send to Apache Kylin mailing list: [dev@kylin.incubator.apache.org](mailto:dev@kylin.incubator.apache.org)
+
+Or, report to Apache Kylin JIRA project: [https://issues.apache.org/jira/browse/KYLIN](https://issues.apache.org/jira/browse/KYLIN)
+
+__Main Changes:__
+
+* Package renamed from com.kylinolap to org.apache.kylin
+* Code cleaned up to apply Apache License policy
+* Easy install and setup with bunch of scripts and automation
+* Job engine refactor to be generic job manager for all jobs, and improved efficiency
+* Support Hive database other than 'default'
+* JDBC driver avaliable for client to interactive with Kylin server
+* Binary pacakge avaliable download
+
+__New Feature__
+
+ * [KYLIN-327] - Binary distribution
+ * [KYLIN-368] - Move MailService to Common module
+ * [KYLIN-540] - Data model upgrade for legacy cube descs
+ * [KYLIN-576] - Refactor expansion rate expression
+
+__Task__
+
+ * [KYLIN-361] - Rename package name with Apache Kylin
+ * [KYLIN-531] - Rename package name to org.apache.kylin
+ * [KYLIN-533] - Job Engine Refactoring
+ * [KYLIN-585] - Simplify deployment
+ * [KYLIN-586] - Add Apache License header in each source file
+ * [KYLIN-587] - Remove hard copy of javascript libraries
+ * [KYLIN-624] - Add dimension and metric info into DataModel
+ * [KYLIN-650] - Move all document from github wiki to code repository (using md file)
+ * [KYLIN-669] - Release v0.7.1 as first apache release
+
+__Sub-task__
+
+ * [KYLIN-670] - Update pom with "incubating" in version number
+ * [KYLIN-737] - Generate and sign release package for review and vote
+ * [KYLIN-795] - Release after success vote
+
+__Bug__
+
+ * [KYLIN-132] - Job framework
+ * [KYLIN-194] - Dict & ColumnValueContainer does not support number comparison, they do string comparison right now
+ * [KYLIN-220] - Enable swap column of Rowkeys in Cube Designer
+ * [KYLIN-230] - Error when create HTable
+ * [KYLIN-255] - Error when a aggregated function appear twice in select clause
+ * [KYLIN-383] - Sample Hive EDW database name should be replaced by "default" in the sample
+ * [KYLIN-399] - refreshed segment not correctly published to cube
+ * [KYLIN-412] - No exception or message when sync up table which can't access
+ * [KYLIN-421] - Hive table metadata issue
+ * [KYLIN-436] - Can't sync Hive table metadata from other database rather than "default"
+ * [KYLIN-508] - Too high cardinality is not suitable for dictionary!
+ * [KYLIN-509] - Order by on fact table not works correctly
+ * [KYLIN-517] - Always delete the last one of Add Lookup page buttom even if deleting the first join condition
+ * [KYLIN-524] - Exception will throw out if dimension is created on a lookup table, then deleting the lookup table.
+ * [KYLIN-547] - Create cube failed if column dictionary sets false and column length value greater than 0
+ * [KYLIN-556] - error tip enhance when cube detail return empty
+ * [KYLIN-570] - Need not to call API before sending login request
+ * [KYLIN-571] - Dimensions lost when creating cube though Joson Editor
+ * [KYLIN-572] - HTable size is wrong
+ * [KYLIN-581] - unable to build cube
+ * [KYLIN-583] - Dependency of Hive conf/jar in II branch will affect auto deploy
+ * [KYLIN-588] - Error when run package.sh
+ * [KYLIN-593] - angular.min.js.map and angular-resource.min.js.map are missing in kylin.war
+ * [KYLIN-594] - Making changes in build and packaging with respect to apache release process
+ * [KYLIN-595] - Kylin JDBC driver should not assume Kylin server listen on either 80 or 443
+ * [KYLIN-605] - Issue when install Kylin on a CLI which does not have yarn Resource Manager
+ * [KYLIN-614] - find hive dependency shell fine is unable to set the hive dependency correctly
+ * [KYLIN-615] - Unable add measures in Kylin web UI
+ * [KYLIN-619] - Cube build fails with hive+tez
+ * [KYLIN-620] - Wrong duration number
+ * [KYLIN-621] - SecurityException when running MR job
+ * [KYLIN-627] - Hive tables' partition column was not sync into Kylin
+ * [KYLIN-628] - Couldn't build a new created cube
+ * [KYLIN-629] - Kylin failed to run mapreduce job if there is no mapreduce.application.classpath in mapred-site.xml
+ * [KYLIN-630] - ArrayIndexOutOfBoundsException when merge cube segments
+ * [KYLIN-638] - kylin.sh stop not working
+ * [KYLIN-639] - Get "Table 'xxxx' not found while executing SQL" error after a cube be successfully built
+ * [KYLIN-640] - sum of float not working
+ * [KYLIN-642] - Couldn't refresh cube segment
+ * [KYLIN-643] - JDBC couldn't connect to Kylin: "java.sql.SQLException: Authentication Failed"
+ * [KYLIN-644] - join table as null error when build the cube
+ * [KYLIN-652] - Lookup table alias will be set to null
+ * [KYLIN-657] - JDBC Driver not register into DriverManager
+ * [KYLIN-658] - java.lang.IllegalArgumentException: Cannot find rowkey column XXX in cube CubeDesc
+ * [KYLIN-659] - Couldn't adjust the rowkey sequence when create cube
+ * [KYLIN-666] - Select float type column got class cast exception
+ * [KYLIN-681] - Failed to build dictionary if the rowkey's dictionary property is "date(yyyy-mm-dd)"
+ * [KYLIN-682] - Got "No aggregator for func 'MIN' and return type 'decimal(19,4)'" error when build cube
+ * [KYLIN-684] - Remove holistic distinct count and multiple column distinct count from sample cube
+ * [KYLIN-691] - update tomcat download address in download-tomcat.sh
+ * [KYLIN-696] - Dictionary couldn't recognize a value and throw IllegalArgumentException: "Not a valid value"
+ * [KYLIN-703] - UT failed due to unknown host issue
+ * [KYLIN-711] - UT failure in REST module
+ * [KYLIN-739] - Dimension as metrics does not work with PK-FK derived column
+ * [KYLIN-761] - Tables are not shown in the "Query" tab, and couldn't run SQL query after cube be built
+
+__Improvement__
+
+ * [KYLIN-168] - Installation fails if multiple ZK
+ * [KYLIN-182] - Validation Rule: columns used in Join condition should have same datatype
+ * [KYLIN-204] - Kylin web not works properly in IE
+ * [KYLIN-217] - Enhance coprocessor with endpoints
+ * [KYLIN-251] - job engine refactoring
+ * [KYLIN-261] - derived column validate when create cube
+ * [KYLIN-317] - note: grunt.json need to be configured when add new javascript or css file
+ * [KYLIN-324] - Refactor metadata to support InvertedIndex
+ * [KYLIN-407] - Validation: There's should no Hive table column using "binary" data type
+ * [KYLIN-445] - Rename cube_desc/cube folder
+ * [KYLIN-452] - Automatically create local cluster for running tests
+ * [KYLIN-498] - Merge metadata tables
+ * [KYLIN-532] - Refactor data model in kylin front end
+ * [KYLIN-539] - use hbase command to launch tomcat
+ * [KYLIN-542] - add project property feature for cube
+ * [KYLIN-553] - From cube instance, couldn't easily find the project instance that it belongs to
+ * [KYLIN-563] - Wrap kylin start and stop with a script
+ * [KYLIN-567] - More flexible validation of new segments
+ * [KYLIN-569] - Support increment+merge job
+ * [KYLIN-578] - add more generic configuration for ssh
+ * [KYLIN-601] - Extract content from kylin.tgz to "kylin" folder
+ * [KYLIN-616] - Validation Rule: partition date column should be in dimension columns
+ * [KYLIN-634] - Script to import sample data and cube metadata
+ * [KYLIN-636] - wiki/On-Hadoop-CLI-installation is not up to date
+ * [KYLIN-637] - add start&end date for hbase info in cubeDesigner
+ * [KYLIN-714] - Add Apache RAT to pom.xml
+ * [KYLIN-753] - Make the dependency on hbase-common to "provided"
+ * [KYLIN-758] - Updating port forwarding issue Hadoop Installation on Hortonworks Sandbox.
+ * [KYLIN-779] - [UI] jump to cube list after create cube
+ * [KYLIN-796] - Add REST API to trigger storage cleanup/GC
+
+__Wish__
+
+ * [KYLIN-608] - Distinct count for ii storage
+
+
+
+
http://git-wip-us.apache.org/repos/asf/incubator-kylin/blob/b37a7809/website/_sass/_base.scss
----------------------------------------------------------------------
diff --git a/website/_sass/_base.scss b/website/_sass/_base.scss
new file mode 100644
index 0000000..6fed5eb
--- /dev/null
+++ b/website/_sass/_base.scss
@@ -0,0 +1,221 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+ margin: 0;
+ padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+ font-family: $base-font-family;
+ font-size: $base-font-size;
+ line-height: $base-line-height;
+ font-weight: 300;
+ color: $text-color;
+ background-color: $background-color;
+ -webkit-text-size-adjust: 100%;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+ margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+ max-width: 100%;
+ vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+ display: block;
+}
+
+figcaption {
+ font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+ margin-left: $spacing-unit;
+}
+
+li {
+ > ul,
+ > ol {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 300;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+ color: $brand-color;
+ text-decoration: none;
+
+ &:visited {
+ color: darken($brand-color, 15%);
+ }
+
+ &:hover {
+ color: $text-color;
+ text-decoration: underline;
+ }
+}
+
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+ color: $grey-color;
+ border-left: 4px solid $grey-color-light;
+ padding-left: $spacing-unit / 2;
+ font-size: 18px;
+ letter-spacing: -1px;
+ font-style: italic;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+ font-size: 15px;
+ border: 1px solid $grey-color-light;
+ border-radius: 3px;
+ background-color: #eef;
+}
+
+code {
+ padding: 1px 5px;
+}
+
+pre {
+ padding: 8px 12px;
+ overflow-x: scroll;
+
+ > code {
+ border: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: $spacing-unit;
+ padding-left: $spacing-unit;
+ @extend %clearfix;
+
+ @include media-query($on-laptop) {
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
+ padding-right: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+ }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix {
+
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+}
+
+
+
+/**
+ * Icons
+ */
+.icon {
+
+ > svg {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+
+ path {
+ fill: $grey-color;
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/incubator-kylin/blob/b37a7809/website/_sass/_layout.scss
----------------------------------------------------------------------
diff --git a/website/_sass/_layout.scss b/website/_sass/_layout.scss
new file mode 100644
index 0000000..01c4336
--- /dev/null
+++ b/website/_sass/_layout.scss
@@ -0,0 +1,253 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Site header
+ */
+.site-header {
+ border-top: 5px solid $grey-color-dark;
+ border-bottom: 1px solid $grey-color-light;
+ min-height: 56px;
+
+ // Positioning context for the mobile navigation icon
+ position: relative;
+}
+
+.site-title {
+ font-size: 26px;
+ line-height: 56px;
+ letter-spacing: -1px;
+ margin-bottom: 0;
+ float: left;
+
+ &,
+ &:visited {
+ color: $grey-color-dark;
+ }
+}
+
+.site-nav {
+ float: right;
+ line-height: 56px;
+
+ .menu-icon {
+ display: none;
+ }
+
+ .page-link {
+ color: $text-color;
+ line-height: $base-line-height;
+
+ // Gaps between nav items, but not on the first one
+ &:not(:first-child) {
+ margin-left: 20px;
+ }
+ }
+
+ @include media-query($on-palm) {
+ position: absolute;
+ top: 9px;
+ right: 30px;
+ background-color: $background-color;
+ border: 1px solid $grey-color-light;
+ border-radius: 5px;
+ text-align: right;
+
+ .menu-icon {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 26px;
+ line-height: 0;
+ padding-top: 10px;
+ text-align: center;
+
+ > svg {
+ width: 18px;
+ height: 15px;
+
+ path {
+ fill: $grey-color-dark;
+ }
+ }
+ }
+
+ .trigger {
+ clear: both;
+ display: none;
+ }
+
+ &:hover .trigger {
+ display: block;
+ padding-bottom: 5px;
+ }
+
+ .page-link {
+ display: block;
+ padding: 5px 10px;
+ }
+ }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+ border-top: 1px solid $grey-color-light;
+ padding: $spacing-unit 0;
+}
+
+.footer-heading {
+ font-size: 18px;
+ margin-bottom: $spacing-unit / 2;
+}
+
+.contact-list,
+.social-media-list {
+ list-style: none;
+ margin-left: 0;
+}
+
+.footer-col-wrapper {
+ font-size: 15px;
+ color: $grey-color;
+ margin-left: -$spacing-unit / 2;
+ @extend %clearfix;
+}
+
+.footer-col {
+ float: left;
+ margin-bottom: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+}
+
+.footer-col-1 {
+ width: -webkit-calc(35% - (#{$spacing-unit} / 2));
+ width: calc(35% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+ width: -webkit-calc(20% - (#{$spacing-unit} / 2));
+ width: calc(20% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+ width: -webkit-calc(45% - (#{$spacing-unit} / 2));
+ width: calc(45% - (#{$spacing-unit} / 2));
+}
+
+@include media-query($on-laptop) {
+ .footer-col-1,
+ .footer-col-2 {
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
+ width: calc(50% - (#{$spacing-unit} / 2));
+ }
+
+ .footer-col-3 {
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+ width: calc(100% - (#{$spacing-unit} / 2));
+ }
+}
+
+@include media-query($on-palm) {
+ .footer-col {
+ float: none;
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+ width: calc(100% - (#{$spacing-unit} / 2));
+ }
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+ padding: $spacing-unit 0;
+}
+
+.page-heading {
+ font-size: 20px;
+}
+
+.post-list {
+ margin-left: 0;
+ list-style: none;
+
+ > li {
+ margin-bottom: $spacing-unit;
+ }
+}
+
+.post-meta {
+ font-size: $small-font-size;
+ color: $grey-color;
+}
+
+.post-link {
+ display: block;
+ font-size: 24px;
+}
+
+
+
+/**
+ * Posts
+ */
+.post-header {
+ margin-bottom: $spacing-unit;
+}
+
+.post-title {
+ font-size: 42px;
+ letter-spacing: -1px;
+ line-height: 1;
+
+ @include media-query($on-laptop) {
+ font-size: 36px;
+ }
+}
+
+.post-content {
+ margin-bottom: $spacing-unit;
+
+ h2 {
+ font-size: 32px;
+
+ @include media-query($on-laptop) {
+ font-size: 28px;
+ }
+ }
+
+ h3 {
+ font-size: 26px;
+
+ @include media-query($on-laptop) {
+ font-size: 22px;
+ }
+ }
+
+ h4 {
+ font-size: 20px;
+
+ @include media-query($on-laptop) {
+ font-size: 18px;
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/incubator-kylin/blob/b37a7809/website/_sass/_syntax-highlighting.scss
----------------------------------------------------------------------
diff --git a/website/_sass/_syntax-highlighting.scss b/website/_sass/_syntax-highlighting.scss
new file mode 100644
index 0000000..44e482c
--- /dev/null
+++ b/website/_sass/_syntax-highlighting.scss
@@ -0,0 +1,84 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+ background: #fff;
+ @extend %vertical-rhythm;
+
+ .c { color: #998; font-style: italic } // Comment
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
+ .k { font-weight: bold } // Keyword
+ .o { font-weight: bold } // Operator
+ .cm { color: #998; font-style: italic } // Comment.Multiline
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
+ .c1 { color: #998; font-style: italic } // Comment.Single
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+ .ge { font-style: italic } // Generic.Emph
+ .gr { color: #a00 } // Generic.Error
+ .gh { color: #999 } // Generic.Heading
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+ .go { color: #888 } // Generic.Output
+ .gp { color: #555 } // Generic.Prompt
+ .gs { font-weight: bold } // Generic.Strong
+ .gu { color: #aaa } // Generic.Subheading
+ .gt { color: #a00 } // Generic.Traceback
+ .kc { font-weight: bold } // Keyword.Constant
+ .kd { font-weight: bold } // Keyword.Declaration
+ .kp { font-weight: bold } // Keyword.Pseudo
+ .kr { font-weight: bold } // Keyword.Reserved
+ .kt { color: #458; font-weight: bold } // Keyword.Type
+ .m { color: #099 } // Literal.Number
+ .s { color: #d14 } // Literal.String
+ .na { color: #008080 } // Name.Attribute
+ .nb { color: #0086B3 } // Name.Builtin
+ .nc { color: #458; font-weight: bold } // Name.Class
+ .no { color: #008080 } // Name.Constant
+ .ni { color: #800080 } // Name.Entity
+ .ne { color: #900; font-weight: bold } // Name.Exception
+ .nf { color: #900; font-weight: bold } // Name.Function
+ .nn { color: #555 } // Name.Namespace
+ .nt { color: #000080 } // Name.Tag
+ .nv { color: #008080 } // Name.Variable
+ .ow { font-weight: bold } // Operator.Word
+ .w { color: #bbb } // Text.Whitespace
+ .mf { color: #099 } // Literal.Number.Float
+ .mh { color: #099 } // Literal.Number.Hex
+ .mi { color: #099 } // Literal.Number.Integer
+ .mo { color: #099 } // Literal.Number.Oct
+ .sb { color: #d14 } // Literal.String.Backtick
+ .sc { color: #d14 } // Literal.String.Char
+ .sd { color: #d14 } // Literal.String.Doc
+ .s2 { color: #d14 } // Literal.String.Double
+ .se { color: #d14 } // Literal.String.Escape
+ .sh { color: #d14 } // Literal.String.Heredoc
+ .si { color: #d14 } // Literal.String.Interpol
+ .sx { color: #d14 } // Literal.String.Other
+ .sr { color: #009926 } // Literal.String.Regex
+ .s1 { color: #d14 } // Literal.String.Single
+ .ss { color: #990073 } // Literal.String.Symbol
+ .bp { color: #999 } // Name.Builtin.Pseudo
+ .vc { color: #008080 } // Name.Variable.Class
+ .vg { color: #008080 } // Name.Variable.Global
+ .vi { color: #008080 } // Name.Variable.Instance
+ .il { color: #099 } // Literal.Number.Integer.Long
+}
http://git-wip-us.apache.org/repos/asf/incubator-kylin/blob/b37a7809/website/about/index.md
----------------------------------------------------------------------
diff --git a/website/about/index.md b/website/about/index.md
new file mode 100644
index 0000000..facf995
--- /dev/null
+++ b/website/about/index.md
@@ -0,0 +1,35 @@
+---
+layout: default
+title: About
+---
+
+
+<main id="main" >
+<section id="first" class="main">
+ <header style="padding:2em 0 4em 0;">
+ <div class="container" >
+ <h4 class="section-title"><span> About Kylin </span></h4>
+ <!-- second-->
+ <div class="row">
+ <div class="col-sm-12 col-md-12">
+ <div >
+ <p>Video on Youtube: <a href="http://youtu.be/xg4sm_N2_CM" target="_blank">Apache Kylin</a></p>
+ <p class="aboutkylin" style="font-size:1.2em">Apache Kylin, which is a distributed and scalable OLAP engine built on Hadoop to support
+extremely large datasets, developed and contributed by <a href="http://www.ebayinc.com/" target="_blank">eBay Inc</a> to open source community on Oct 1, 2014 and has been Apache Incubator Project since Nov 25, 2014. Refer to announcement on eBay Tech Blog for more detail: <a href="http://www.ebaytechblog.com/2014/10/20/announcing-kylin-extreme-olap-engine-for-big-data" target="_blank">Announcing Kylin: Extreme OLAP Engine for Big Data</a> </p>
+
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /container -->
+
+ </header>
+ </section>
+ <!-- / section -->
+ </div>
+ <!-- /container -->
+
+ </header>
+ </section>
+</main>
http://git-wip-us.apache.org/repos/asf/incubator-kylin/blob/b37a7809/website/assets/css/animate.css
----------------------------------------------------------------------
diff --git a/website/assets/css/animate.css b/website/assets/css/animate.css
new file mode 100644
index 0000000..b090c1e
--- /dev/null
+++ b/website/assets/css/animate.css
@@ -0,0 +1,2761 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@charset "UTF-8";
+
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+.animated {
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.animated.hinge {
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+}
+
+@-webkit-keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 40% {
+ -webkit-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+
+ 60% {
+ -webkit-transform: translateY(-15px);
+ transform: translateY(-15px);
+ }
+}
+
+@keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 40% {
+ -webkit-transform: translateY(-30px);
+ -ms-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+
+ 60% {
+ -webkit-transform: translateY(-15px);
+ -ms-transform: translateY(-15px);
+ transform: translateY(-15px);
+ }
+}
+
+.bounce {
+ -webkit-animation-name: bounce;
+ animation-name: bounce;
+}
+
+@-webkit-keyframes flash {
+ 0%, 50%, 100% {
+ opacity: 1;
+ }
+
+ 25%, 75% {
+ opacity: 0;
+ }
+}
+
+@keyframes flash {
+ 0%, 50%, 100% {
+ opacity: 1;
+ }
+
+ 25%, 75% {
+ opacity: 0;
+ }
+}
+
+.flash {
+ -webkit-animation-name: flash;
+ animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 50% {
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 50% {
+ -webkit-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+.pulse {
+ -webkit-animation-name: pulse;
+ animation-name: pulse;
+}
+
+@-webkit-keyframes shake {
+ 0%, 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 10%, 30%, 50%, 70%, 90% {
+ -webkit-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+
+ 20%, 40%, 60%, 80% {
+ -webkit-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+}
+
+@keyframes shake {
+ 0%, 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 10%, 30%, 50%, 70%, 90% {
+ -webkit-transform: translateX(-10px);
+ -ms-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+
+ 20%, 40%, 60%, 80% {
+ -webkit-transform: translateX(10px);
+ -ms-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+}
+
+.shake {
+ -webkit-animation-name: shake;
+ animation-name: shake;
+}
+
+@-webkit-keyframes swing {
+ 20% {
+ -webkit-transform: rotate(15deg);
+ transform: rotate(15deg);
+ }
+
+ 40% {
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ }
+
+ 60% {
+ -webkit-transform: rotate(5deg);
+ transform: rotate(5deg);
+ }
+
+ 80% {
+ -webkit-transform: rotate(-5deg);
+ transform: rotate(-5deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes swing {
+ 20% {
+ -webkit-transform: rotate(15deg);
+ -ms-transform: rotate(15deg);
+ transform: rotate(15deg);
+ }
+
+ 40% {
+ -webkit-transform: rotate(-10deg);
+ -ms-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ }
+
+ 60% {
+ -webkit-transform: rotate(5deg);
+ -ms-transform: rotate(5deg);
+ transform: rotate(5deg);
+ }
+
+ 80% {
+ -webkit-transform: rotate(-5deg);
+ -ms-transform: rotate(-5deg);
+ transform: rotate(-5deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+}
+
+.swing {
+ -webkit-transform-origin: top center;
+ -ms-transform-origin: top center;
+ transform-origin: top center;
+ -webkit-animation-name: swing;
+ animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 10%, 20% {
+ -webkit-transform: scale(0.9) rotate(-3deg);
+ transform: scale(0.9) rotate(-3deg);
+ }
+
+ 30%, 50%, 70%, 90% {
+ -webkit-transform: scale(1.1) rotate(3deg);
+ transform: scale(1.1) rotate(3deg);
+ }
+
+ 40%, 60%, 80% {
+ -webkit-transform: scale(1.1) rotate(-3deg);
+ transform: scale(1.1) rotate(-3deg);
+ }
+
+ 100% {
+ -webkit-transform: scale(1) rotate(0);
+ transform: scale(1) rotate(0);
+ }
+}
+
+@keyframes tada {
+ 0% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 10%, 20% {
+ -webkit-transform: scale(0.9) rotate(-3deg);
+ -ms-transform: scale(0.9) rotate(-3deg);
+ transform: scale(0.9) rotate(-3deg);
+ }
+
+ 30%, 50%, 70%, 90% {
+ -webkit-transform: scale(1.1) rotate(3deg);
+ -ms-transform: scale(1.1) rotate(3deg);
+ transform: scale(1.1) rotate(3deg);
+ }
+
+ 40%, 60%, 80% {
+ -webkit-transform: scale(1.1) rotate(-3deg);
+ -ms-transform: scale(1.1) rotate(-3deg);
+ transform: scale(1.1) rotate(-3deg);
+ }
+
+ 100% {
+ -webkit-transform: scale(1) rotate(0);
+ -ms-transform: scale(1) rotate(0);
+ transform: scale(1) rotate(0);
+ }
+}
+
+.tada {
+ -webkit-animation-name: tada;
+ animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+ 0% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+
+ 15% {
+ -webkit-transform: translateX(-25%) rotate(-5deg);
+ transform: translateX(-25%) rotate(-5deg);
+ }
+
+ 30% {
+ -webkit-transform: translateX(20%) rotate(3deg);
+ transform: translateX(20%) rotate(3deg);
+ }
+
+ 45% {
+ -webkit-transform: translateX(-15%) rotate(-3deg);
+ transform: translateX(-15%) rotate(-3deg);
+ }
+
+ 60% {
+ -webkit-transform: translateX(10%) rotate(2deg);
+ transform: translateX(10%) rotate(2deg);
+ }
+
+ 75% {
+ -webkit-transform: translateX(-5%) rotate(-1deg);
+ transform: translateX(-5%) rotate(-1deg);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+}
+
+@keyframes wobble {
+ 0% {
+ -webkit-transform: translateX(0%);
+ -ms-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+
+ 15% {
+ -webkit-transform: translateX(-25%) rotate(-5deg);
+ -ms-transform: translateX(-25%) rotate(-5deg);
+ transform: translateX(-25%) rotate(-5deg);
+ }
+
+ 30% {
+ -webkit-transform: translateX(20%) rotate(3deg);
+ -ms-transform: translateX(20%) rotate(3deg);
+ transform: translateX(20%) rotate(3deg);
+ }
+
+ 45% {
+ -webkit-transform: translateX(-15%) rotate(-3deg);
+ -ms-transform: translateX(-15%) rotate(-3deg);
+ transform: translateX(-15%) rotate(-3deg);
+ }
+
+ 60% {
+ -webkit-transform: translateX(10%) rotate(2deg);
+ -ms-transform: translateX(10%) rotate(2deg);
+ transform: translateX(10%) rotate(2deg);
+ }
+
+ 75% {
+ -webkit-transform: translateX(-5%) rotate(-1deg);
+ -ms-transform: translateX(-5%) rotate(-1deg);
+ transform: translateX(-5%) rotate(-1deg);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0%);
+ -ms-transform: translateX(0%);
+ transform: translateX(0%);
+ }
+}
+
+.wobble {
+ -webkit-animation-name: wobble;
+ animation-name: wobble;
+}
+
+@-webkit-keyframes bounceIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(.3);
+ transform: scale(.3);
+ }
+
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+ }
+
+ 70% {
+ -webkit-transform: scale(.9);
+ transform: scale(.9);
+ }
+
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+@keyframes bounceIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale(.3);
+ -ms-transform: scale(.3);
+ transform: scale(.3);
+ }
+
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.05);
+ -ms-transform: scale(1.05);
+ transform: scale(1.05);
+ }
+
+ 70% {
+ -webkit-transform: scale(.9);
+ -ms-transform: scale(.9);
+ transform: scale(.9);
+ }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+.bounceIn {
+ -webkit-animation-name: bounceIn;
+ animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(30px);
+ transform: translateY(30px);
+ }
+
+ 80% {
+ -webkit-transform: translateY(-10px);
+ transform: translateY(-10px);
+ }
+
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+@keyframes bounceInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(30px);
+ -ms-transform: translateY(30px);
+ transform: translateY(30px);
+ }
+
+ 80% {
+ -webkit-transform: translateY(-10px);
+ -ms-transform: translateY(-10px);
+ transform: translateY(-10px);
+ }
+
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+.bounceInDown {
+ -webkit-animation-name: bounceInDown;
+ animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(30px);
+ transform: translateX(30px);
+ }
+
+ 80% {
+ -webkit-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes bounceInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(30px);
+ -ms-transform: translateX(30px);
+ transform: translateX(30px);
+ }
+
+ 80% {
+ -webkit-transform: translateX(-10px);
+ -ms-transform: translateX(-10px);
+ transform: translateX(-10px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.bounceInLeft {
+ -webkit-animation-name: bounceInLeft;
+ animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(-30px);
+ transform: translateX(-30px);
+ }
+
+ 80% {
+ -webkit-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes bounceInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateX(-30px);
+ -ms-transform: translateX(-30px);
+ transform: translateX(-30px);
+ }
+
+ 80% {
+ -webkit-transform: translateX(10px);
+ -ms-transform: translateX(10px);
+ transform: translateX(10px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.bounceInRight {
+ -webkit-animation-name: bounceInRight;
+ animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+
+ 80% {
+ -webkit-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+@keyframes bounceInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translateY(-30px);
+ -ms-transform: translateY(-30px);
+ transform: translateY(-30px);
+ }
+
+ 80% {
+ -webkit-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ transform: translateY(10px);
+ }
+
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+.bounceInUp {
+ -webkit-animation-name: bounceInUp;
+ animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 25% {
+ -webkit-transform: scale(.95);
+ transform: scale(.95);
+ }
+
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: scale(.3);
+ transform: scale(.3);
+ }
+}
+
+@keyframes bounceOut {
+ 0% {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+ }
+
+ 25% {
+ -webkit-transform: scale(.95);
+ -ms-transform: scale(.95);
+ transform: scale(.95);
+ }
+
+ 50% {
+ opacity: 1;
+ -webkit-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: scale(.3);
+ -ms-transform: scale(.3);
+ transform: scale(.3);
+ }
+}
+
+.bounceOut {
+ -webkit-animation-name: bounceOut;
+ animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+
+@keyframes bounceOutDown {
+ 0% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+
+.bounceOutDown {
+ -webkit-animation-name: bounceOutDown;
+ animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+
+@keyframes bounceOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(20px);
+ -ms-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+
+.bounceOutLeft {
+ -webkit-animation-name: bounceOutLeft;
+ animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+
+@keyframes bounceOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateX(-20px);
+ -ms-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+
+.bounceOutRight {
+ -webkit-animation-name: bounceOutRight;
+ animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+
+@keyframes bounceOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 20% {
+ opacity: 1;
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+
+.bounceOutUp {
+ -webkit-animation-name: bounceOutUp;
+ animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+.fadeInDown {
+ -webkit-animation-name: fadeInDown;
+ animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInDownBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+.fadeInDownBig {
+ -webkit-animation-name: fadeInDownBig;
+ animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes fadeInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ -ms-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.fadeInLeft {
+ -webkit-animation-name: fadeInLeft;
+ animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes fadeInLeftBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.fadeInLeftBig {
+ -webkit-animation-name: fadeInLeftBig;
+ animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes fadeInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ -ms-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.fadeInRight {
+ -webkit-animation-name: fadeInRight;
+ animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes fadeInRightBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.fadeInRightBig {
+ -webkit-animation-name: fadeInRightBig;
+ animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+.fadeInUp {
+ -webkit-animation-name: fadeInUp;
+ animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInUpBig {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+.fadeInUpBig {
+ -webkit-animation-name: fadeInUpBig;
+ animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+.fadeOut {
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+}
+
+@keyframes fadeOutDown {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ transform: translateY(20px);
+ }
+}
+
+.fadeOutDown {
+ -webkit-animation-name: fadeOutDown;
+ animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+
+@keyframes fadeOutDownBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(2000px);
+ -ms-transform: translateY(2000px);
+ transform: translateY(2000px);
+ }
+}
+
+.fadeOutDownBig {
+ -webkit-animation-name: fadeOutDownBig;
+ animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+}
+
+@keyframes fadeOutLeft {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-20px);
+ -ms-transform: translateX(-20px);
+ transform: translateX(-20px);
+ }
+}
+
+.fadeOutLeft {
+ -webkit-animation-name: fadeOutLeft;
+ animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+
+@keyframes fadeOutLeftBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+
+.fadeOutLeftBig {
+ -webkit-animation-name: fadeOutLeftBig;
+ animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+}
+
+@keyframes fadeOutRight {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(20px);
+ -ms-transform: translateX(20px);
+ transform: translateX(20px);
+ }
+}
+
+.fadeOutRight {
+ -webkit-animation-name: fadeOutRight;
+ animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+
+@keyframes fadeOutRightBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+
+.fadeOutRightBig {
+ -webkit-animation-name: fadeOutRightBig;
+ animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+}
+
+@keyframes fadeOutUp {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-20px);
+ -ms-transform: translateY(-20px);
+ transform: translateY(-20px);
+ }
+}
+
+.fadeOutUp {
+ -webkit-animation-name: fadeOutUp;
+ animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+
+@keyframes fadeOutUpBig {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+
+.fadeOutUpBig {
+ -webkit-animation-name: fadeOutUpBig;
+ animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+ 0% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 50% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+
+@keyframes flip {
+ 0% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 50% {
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+ -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+
+.animated.flip {
+ -webkit-backface-visibility: visible;
+ -ms-backface-visibility: visible;
+ backface-visibility: visible;
+ -webkit-animation-name: flip;
+ animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(-10deg);
+ transform: perspective(400px) rotateX(-10deg);
+ }
+
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(10deg);
+ transform: perspective(400px) rotateX(10deg);
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+}
+
+@keyframes flipInX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ -ms-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotateX(-10deg);
+ -ms-transform: perspective(400px) rotateX(-10deg);
+ transform: perspective(400px) rotateX(-10deg);
+ }
+
+ 70% {
+ -webkit-transform: perspective(400px) rotateX(10deg);
+ -ms-transform: perspective(400px) rotateX(10deg);
+ transform: perspective(400px) rotateX(10deg);
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ -ms-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+}
+
+.flipInX {
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInX;
+ animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(-10deg);
+ transform: perspective(400px) rotateY(-10deg);
+ }
+
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(10deg);
+ transform: perspective(400px) rotateY(10deg);
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+}
+
+@keyframes flipInY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ -ms-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotateY(-10deg);
+ -ms-transform: perspective(400px) rotateY(-10deg);
+ transform: perspective(400px) rotateY(-10deg);
+ }
+
+ 70% {
+ -webkit-transform: perspective(400px) rotateY(10deg);
+ -ms-transform: perspective(400px) rotateY(10deg);
+ transform: perspective(400px) rotateY(10deg);
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ -ms-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+}
+
+.flipInY {
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInY;
+ animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes flipOutX {
+ 0% {
+ -webkit-transform: perspective(400px) rotateX(0deg);
+ -ms-transform: perspective(400px) rotateX(0deg);
+ transform: perspective(400px) rotateX(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateX(90deg);
+ -ms-transform: perspective(400px) rotateX(90deg);
+ transform: perspective(400px) rotateX(90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutX {
+ -webkit-animation-name: flipOutX;
+ animation-name: flipOutX;
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes flipOutY {
+ 0% {
+ -webkit-transform: perspective(400px) rotateY(0deg);
+ -ms-transform: perspective(400px) rotateY(0deg);
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: perspective(400px) rotateY(90deg);
+ -ms-transform: perspective(400px) rotateY(90deg);
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutY {
+ -webkit-backface-visibility: visible !important;
+ -ms-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipOutY;
+ animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+ 0% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+
+ 60% {
+ -webkit-transform: translateX(-20%) skewX(30deg);
+ transform: translateX(-20%) skewX(30deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: translateX(0%) skewX(-15deg);
+ transform: translateX(0%) skewX(-15deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+}
+
+@keyframes lightSpeedIn {
+ 0% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ -ms-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+
+ 60% {
+ -webkit-transform: translateX(-20%) skewX(30deg);
+ -ms-transform: translateX(-20%) skewX(30deg);
+ transform: translateX(-20%) skewX(30deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: translateX(0%) skewX(-15deg);
+ -ms-transform: translateX(0%) skewX(-15deg);
+ transform: translateX(0%) skewX(-15deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ -ms-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+}
+
+.lightSpeedIn {
+ -webkit-animation-name: lightSpeedIn;
+ animation-name: lightSpeedIn;
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+ 0% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+}
+
+@keyframes lightSpeedOut {
+ 0% {
+ -webkit-transform: translateX(0%) skewX(0deg);
+ -ms-transform: translateX(0%) skewX(0deg);
+ transform: translateX(0%) skewX(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform: translateX(100%) skewX(-30deg);
+ -ms-transform: translateX(100%) skewX(-30deg);
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+}
+
+.lightSpeedOut {
+ -webkit-animation-name: lightSpeedOut;
+ animation-name: lightSpeedOut;
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+ 0% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(-200deg);
+ transform: rotate(-200deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateIn {
+ 0% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(-200deg);
+ -ms-transform: rotate(-200deg);
+ transform: rotate(-200deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+.rotateIn {
+ -webkit-animation-name: rotateIn;
+ animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+.rotateInDownLeft {
+ -webkit-animation-name: rotateInDownLeft;
+ animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+.rotateInDownRight {
+ -webkit-animation-name: rotateInDownRight;
+ animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+.rotateInUpLeft {
+ -webkit-animation-name: rotateInUpLeft;
+ animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+}
+
+.rotateInUpRight {
+ -webkit-animation-name: rotateInUpRight;
+ animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+ 0% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(200deg);
+ transform: rotate(200deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOut {
+ 0% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: center center;
+ -ms-transform-origin: center center;
+ transform-origin: center center;
+ -webkit-transform: rotate(200deg);
+ -ms-transform: rotate(200deg);
+ transform: rotate(200deg);
+ opacity: 0;
+ }
+}
+
+.rotateOut {
+ -webkit-animation-name: rotateOut;
+ animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutDownLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownLeft {
+ -webkit-animation-name: rotateOutDownLeft;
+ animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutDownRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownRight {
+ -webkit-animation-name: rotateOutDownRight;
+ animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutUpLeft {
+ 0% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: left bottom;
+ -ms-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpLeft {
+ -webkit-animation-name: rotateOutUpLeft;
+ animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutUpRight {
+ 0% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ opacity: 1;
+ }
+
+ 100% {
+ -webkit-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpRight {
+ -webkit-animation-name: rotateOutUpRight;
+ animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes slideInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideInDown {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+}
+
+.slideInDown {
+ -webkit-animation-name: slideInDown;
+ animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideInLeft {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.slideInLeft {
+ -webkit-animation-name: slideInLeft;
+ animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideInRight {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.slideInRight {
+ -webkit-animation-name: slideInRight;
+ animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+
+@keyframes slideOutLeft {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(-2000px);
+ -ms-transform: translateX(-2000px);
+ transform: translateX(-2000px);
+ }
+}
+
+.slideOutLeft {
+ -webkit-animation-name: slideOutLeft;
+ animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+
+@keyframes slideOutRight {
+ 0% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(2000px);
+ -ms-transform: translateX(2000px);
+ transform: translateX(2000px);
+ }
+}
+
+.slideOutRight {
+ -webkit-animation-name: slideOutRight;
+ animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+
+@keyframes slideOutUp {
+ 0% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateY(-2000px);
+ -ms-transform: translateY(-2000px);
+ transform: translateY(-2000px);
+ }
+}
+
+.slideOutUp {
+ -webkit-animation-name: slideOutUp;
+ animation-name: slideOutUp;
+}
+
+@-webkit-keyframes hinge {
+ 0% {
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 20%, 60% {
+ -webkit-transform: rotate(80deg);
+ transform: rotate(80deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 40% {
+ -webkit-transform: rotate(60deg);
+ transform: rotate(60deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 80% {
+ -webkit-transform: rotate(60deg) translateY(0);
+ transform: rotate(60deg) translateY(0);
+ opacity: 1;
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 100% {
+ -webkit-transform: translateY(700px);
+ transform: translateY(700px);
+ opacity: 0;
+ }
+}
+
+@keyframes hinge {
+ 0% {
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 20%, 60% {
+ -webkit-transform: rotate(80deg);
+ -ms-transform: rotate(80deg);
+ transform: rotate(80deg);
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 40% {
+ -webkit-transform: rotate(60deg);
+ -ms-transform: rotate(60deg);
+ transform: rotate(60deg);
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 80% {
+ -webkit-transform: rotate(60deg) translateY(0);
+ -ms-transform: rotate(60deg) translateY(0);
+ transform: rotate(60deg) translateY(0);
+ opacity: 1;
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 100% {
+ -webkit-transform: translateY(700px);
+ -ms-transform: translateY(700px);
+ transform: translateY(700px);
+ opacity: 0;
+ }
+}
+
+.hinge {
+ -webkit-animation-name: hinge;
+ animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-100%) rotate(-120deg);
+ transform: translateX(-100%) rotate(-120deg);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+}
+
+@keyframes rollIn {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateX(-100%) rotate(-120deg);
+ -ms-transform: translateX(-100%) rotate(-120deg);
+ transform: translateX(-100%) rotate(-120deg);
+ }
+
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ -ms-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+}
+
+.rollIn {
+ -webkit-animation-name: rollIn;
+ animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(100%) rotate(120deg);
+ transform: translateX(100%) rotate(120deg);
+ }
+}
+
+@keyframes rollOut {
+ 0% {
+ opacity: 1;
+ -webkit-transform: translateX(0px) rotate(0deg);
+ -ms-transform: translateX(0px) rotate(0deg);
+ transform: translateX(0px) rotate(0deg);
+ }
+
+ 100% {
+ opacity: 0;
+ -webkit-transform: translateX(100%) rotate(120deg);
+ -ms-transform: translateX(100%) rotate(120deg);
+ transform: translateX(100%) rotate(120deg);
+ }
+}
+
+.rollOut {
+ -webkit-animation-name: rollOut;
+ animation-name: rollOut;
+}
\ No newline at end of file