Skip to content

Instantly share code, notes, and snippets.

@P3nny

P3nny/make_it_pretty.ipynb

Created January 16, 2016 00:55
Show Gist options
  • Save P3nny/c2fa0d4583100bbfe670 to your computer and use it in GitHub Desktop.
Save P3nny/c2fa0d4583100bbfe670 to your computer and use it in GitHub Desktop.
Download ZIP
Make it pretty - Playing around with CSS, SVG, Animated CSS in Jupyter Notebook
Display the source blob
Display the rendered blob
Raw
make_it_pretty.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 30,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<style>body {\n",
" margin: 0;\n",
" font-family: fantasy;\n",
"}\n",
"table.dataframe {\n",
" border-collapse: collapse;\n",
" border: none;\n",
"}\n",
"table.dataframe tr {\n",
" border: none;\n",
"}\n",
"table.dataframe td, table.dataframe th {\n",
" margin: 0;\n",
" border: 1px solid white;\n",
" padding-left: 0.5em;\n",
" padding-right: 0.7em;\n",
"}\n",
"table.dataframe th:not(:empty) {\n",
" background-color: #1995AD;\n",
" text-align: left;\n",
" font-weight: bold;\n",
" color: white;\n",
"}\n",
"table.dataframe tr:nth-child(2) th:empty {\n",
" border-left: none;\n",
" border-right: 1px dashed #888;\n",
"}\n",
"table.dataframe td {\n",
" border: 1px solid white;\n",
" background-color: #E2DFA2;\n",
"}\n",
"@charset \"UTF-8\";\n",
"\n",
"/*!\n",
" * animate.css -http://daneden.me/animate\n",
" * Version - 3.5.0\n",
" * Licensed under the MIT license - http://opensource.org/licenses/MIT\n",
" *\n",
" * Copyright (c) 2016 Daniel Eden\n",
" */\n",
"\n",
".animated {\n",
" -webkit-animation-duration: 1s;\n",
" animation-duration: 1s;\n",
" -webkit-animation-fill-mode: both;\n",
" animation-fill-mode: both;\n",
"}\n",
"\n",
".animated.infinite {\n",
" -webkit-animation-iteration-count: infinite;\n",
" animation-iteration-count: infinite;\n",
"}\n",
"\n",
".animated.hinge {\n",
" -webkit-animation-duration: 2s;\n",
" animation-duration: 2s;\n",
"}\n",
"\n",
".animated.flipOutX,\n",
".animated.flipOutY,\n",
".animated.bounceIn,\n",
".animated.bounceOut {\n",
" -webkit-animation-duration: .75s;\n",
" animation-duration: .75s;\n",
"}\n",
"\n",
"@-webkit-keyframes bounce {\n",
" from, 20%, 53%, 80%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" -webkit-transform: translate3d(0,0,0);\n",
" transform: translate3d(0,0,0);\n",
" }\n",
"\n",
" 40%, 43% {\n",
" -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" -webkit-transform: translate3d(0, -30px, 0);\n",
" transform: translate3d(0, -30px, 0);\n",
" }\n",
"\n",
" 70% {\n",
" -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" -webkit-transform: translate3d(0, -15px, 0);\n",
" transform: translate3d(0, -15px, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(0,-4px,0);\n",
" transform: translate3d(0,-4px,0);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounce {\n",
" from, 20%, 53%, 80%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" -webkit-transform: translate3d(0,0,0);\n",
" transform: translate3d(0,0,0);\n",
" }\n",
"\n",
" 40%, 43% {\n",
" -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" -webkit-transform: translate3d(0, -30px, 0);\n",
" transform: translate3d(0, -30px, 0);\n",
" }\n",
"\n",
" 70% {\n",
" -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n",
" -webkit-transform: translate3d(0, -15px, 0);\n",
" transform: translate3d(0, -15px, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(0,-4px,0);\n",
" transform: translate3d(0,-4px,0);\n",
" }\n",
"}\n",
"\n",
".bounce {\n",
" -webkit-animation-name: bounce;\n",
" animation-name: bounce;\n",
" -webkit-transform-origin: center bottom;\n",
" transform-origin: center bottom;\n",
"}\n",
"\n",
"@-webkit-keyframes flash {\n",
" from, 50%, to {\n",
" opacity: 1;\n",
" }\n",
"\n",
" 25%, 75% {\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes flash {\n",
" from, 50%, to {\n",
" opacity: 1;\n",
" }\n",
"\n",
" 25%, 75% {\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".flash {\n",
" -webkit-animation-name: flash;\n",
" animation-name: flash;\n",
"}\n",
"\n",
"/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n",
"\n",
"@-webkit-keyframes pulse {\n",
" from {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: scale3d(1.05, 1.05, 1.05);\n",
" transform: scale3d(1.05, 1.05, 1.05);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes pulse {\n",
" from {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: scale3d(1.05, 1.05, 1.05);\n",
" transform: scale3d(1.05, 1.05, 1.05);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
".pulse {\n",
" -webkit-animation-name: pulse;\n",
" animation-name: pulse;\n",
"}\n",
"\n",
"@-webkit-keyframes rubberBand {\n",
" from {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: scale3d(1.25, 0.75, 1);\n",
" transform: scale3d(1.25, 0.75, 1);\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: scale3d(0.75, 1.25, 1);\n",
" transform: scale3d(0.75, 1.25, 1);\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: scale3d(1.15, 0.85, 1);\n",
" transform: scale3d(1.15, 0.85, 1);\n",
" }\n",
"\n",
" 65% {\n",
" -webkit-transform: scale3d(.95, 1.05, 1);\n",
" transform: scale3d(.95, 1.05, 1);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: scale3d(1.05, .95, 1);\n",
" transform: scale3d(1.05, .95, 1);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes rubberBand {\n",
" from {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: scale3d(1.25, 0.75, 1);\n",
" transform: scale3d(1.25, 0.75, 1);\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: scale3d(0.75, 1.25, 1);\n",
" transform: scale3d(0.75, 1.25, 1);\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: scale3d(1.15, 0.85, 1);\n",
" transform: scale3d(1.15, 0.85, 1);\n",
" }\n",
"\n",
" 65% {\n",
" -webkit-transform: scale3d(.95, 1.05, 1);\n",
" transform: scale3d(.95, 1.05, 1);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: scale3d(1.05, .95, 1);\n",
" transform: scale3d(1.05, .95, 1);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
".rubberBand {\n",
" -webkit-animation-name: rubberBand;\n",
" animation-name: rubberBand;\n",
"}\n",
"\n",
"@-webkit-keyframes shake {\n",
" from, to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" 10%, 30%, 50%, 70%, 90% {\n",
" -webkit-transform: translate3d(-10px, 0, 0);\n",
" transform: translate3d(-10px, 0, 0);\n",
" }\n",
"\n",
" 20%, 40%, 60%, 80% {\n",
" -webkit-transform: translate3d(10px, 0, 0);\n",
" transform: translate3d(10px, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes shake {\n",
" from, to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" 10%, 30%, 50%, 70%, 90% {\n",
" -webkit-transform: translate3d(-10px, 0, 0);\n",
" transform: translate3d(-10px, 0, 0);\n",
" }\n",
"\n",
" 20%, 40%, 60%, 80% {\n",
" -webkit-transform: translate3d(10px, 0, 0);\n",
" transform: translate3d(10px, 0, 0);\n",
" }\n",
"}\n",
"\n",
".shake {\n",
" -webkit-animation-name: shake;\n",
" animation-name: shake;\n",
"}\n",
"\n",
"@-webkit-keyframes headShake {\n",
" 0% {\n",
" -webkit-transform: translateX(0);\n",
" transform: translateX(0);\n",
" }\n",
"\n",
" 6.5% {\n",
" -webkit-transform: translateX(-6px) rotateY(-9deg);\n",
" transform: translateX(-6px) rotateY(-9deg);\n",
" }\n",
"\n",
" 18.5% {\n",
" -webkit-transform: translateX(5px) rotateY(7deg);\n",
" transform: translateX(5px) rotateY(7deg);\n",
" }\n",
"\n",
" 31.5% {\n",
" -webkit-transform: translateX(-3px) rotateY(-5deg);\n",
" transform: translateX(-3px) rotateY(-5deg);\n",
" }\n",
"\n",
" 43.5% {\n",
" -webkit-transform: translateX(2px) rotateY(3deg);\n",
" transform: translateX(2px) rotateY(3deg);\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: translateX(0);\n",
" transform: translateX(0);\n",
" }\n",
"}\n",
"\n",
"@keyframes headShake {\n",
" 0% {\n",
" -webkit-transform: translateX(0);\n",
" transform: translateX(0);\n",
" }\n",
"\n",
" 6.5% {\n",
" -webkit-transform: translateX(-6px) rotateY(-9deg);\n",
" transform: translateX(-6px) rotateY(-9deg);\n",
" }\n",
"\n",
" 18.5% {\n",
" -webkit-transform: translateX(5px) rotateY(7deg);\n",
" transform: translateX(5px) rotateY(7deg);\n",
" }\n",
"\n",
" 31.5% {\n",
" -webkit-transform: translateX(-3px) rotateY(-5deg);\n",
" transform: translateX(-3px) rotateY(-5deg);\n",
" }\n",
"\n",
" 43.5% {\n",
" -webkit-transform: translateX(2px) rotateY(3deg);\n",
" transform: translateX(2px) rotateY(3deg);\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: translateX(0);\n",
" transform: translateX(0);\n",
" }\n",
"}\n",
"\n",
".headShake {\n",
" -webkit-animation-timing-function: ease-in-out;\n",
" animation-timing-function: ease-in-out;\n",
" -webkit-animation-name: headShake;\n",
" animation-name: headShake;\n",
"}\n",
"\n",
"@-webkit-keyframes swing {\n",
" 20% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 15deg);\n",
" transform: rotate3d(0, 0, 1, 15deg);\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: rotate3d(0, 0, 1, -10deg);\n",
" transform: rotate3d(0, 0, 1, -10deg);\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 5deg);\n",
" transform: rotate3d(0, 0, 1, 5deg);\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: rotate3d(0, 0, 1, -5deg);\n",
" transform: rotate3d(0, 0, 1, -5deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: rotate3d(0, 0, 1, 0deg);\n",
" transform: rotate3d(0, 0, 1, 0deg);\n",
" }\n",
"}\n",
"\n",
"@keyframes swing {\n",
" 20% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 15deg);\n",
" transform: rotate3d(0, 0, 1, 15deg);\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: rotate3d(0, 0, 1, -10deg);\n",
" transform: rotate3d(0, 0, 1, -10deg);\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 5deg);\n",
" transform: rotate3d(0, 0, 1, 5deg);\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: rotate3d(0, 0, 1, -5deg);\n",
" transform: rotate3d(0, 0, 1, -5deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: rotate3d(0, 0, 1, 0deg);\n",
" transform: rotate3d(0, 0, 1, 0deg);\n",
" }\n",
"}\n",
"\n",
".swing {\n",
" -webkit-transform-origin: top center;\n",
" transform-origin: top center;\n",
" -webkit-animation-name: swing;\n",
" animation-name: swing;\n",
"}\n",
"\n",
"@-webkit-keyframes tada {\n",
" from {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"\n",
" 10%, 20% {\n",
" -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n",
" transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n",
" }\n",
"\n",
" 30%, 50%, 70%, 90% {\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n",
" transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n",
" }\n",
"\n",
" 40%, 60%, 80% {\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n",
" transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes tada {\n",
" from {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"\n",
" 10%, 20% {\n",
" -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n",
" transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n",
" }\n",
"\n",
" 30%, 50%, 70%, 90% {\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n",
" transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n",
" }\n",
"\n",
" 40%, 60%, 80% {\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n",
" transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
".tada {\n",
" -webkit-animation-name: tada;\n",
" animation-name: tada;\n",
"}\n",
"\n",
"/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n",
"\n",
"@-webkit-keyframes wobble {\n",
" from {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"\n",
" 15% {\n",
" -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n",
" transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n",
" transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n",
" }\n",
"\n",
" 45% {\n",
" -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n",
" transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n",
" transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n",
" transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes wobble {\n",
" from {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"\n",
" 15% {\n",
" -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n",
" transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n",
" transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n",
" }\n",
"\n",
" 45% {\n",
" -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n",
" transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n",
" transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n",
" transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".wobble {\n",
" -webkit-animation-name: wobble;\n",
" animation-name: wobble;\n",
"}\n",
"\n",
"@-webkit-keyframes jello {\n",
" from, 11.1%, to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"\n",
" 22.2% {\n",
" -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);\n",
" transform: skewX(-12.5deg) skewY(-12.5deg);\n",
" }\n",
"\n",
" 33.3% {\n",
" -webkit-transform: skewX(6.25deg) skewY(6.25deg);\n",
" transform: skewX(6.25deg) skewY(6.25deg);\n",
" }\n",
"\n",
" 44.4% {\n",
" -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);\n",
" transform: skewX(-3.125deg) skewY(-3.125deg);\n",
" }\n",
"\n",
" 55.5% {\n",
" -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);\n",
" transform: skewX(1.5625deg) skewY(1.5625deg);\n",
" }\n",
"\n",
" 66.6% {\n",
" -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);\n",
" transform: skewX(-0.78125deg) skewY(-0.78125deg);\n",
" }\n",
"\n",
" 77.7% {\n",
" -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);\n",
" transform: skewX(0.390625deg) skewY(0.390625deg);\n",
" }\n",
"\n",
" 88.8% {\n",
" -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n",
" transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n",
" }\n",
"}\n",
"\n",
"@keyframes jello {\n",
" from, 11.1%, to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"\n",
" 22.2% {\n",
" -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);\n",
" transform: skewX(-12.5deg) skewY(-12.5deg);\n",
" }\n",
"\n",
" 33.3% {\n",
" -webkit-transform: skewX(6.25deg) skewY(6.25deg);\n",
" transform: skewX(6.25deg) skewY(6.25deg);\n",
" }\n",
"\n",
" 44.4% {\n",
" -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);\n",
" transform: skewX(-3.125deg) skewY(-3.125deg);\n",
" }\n",
"\n",
" 55.5% {\n",
" -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);\n",
" transform: skewX(1.5625deg) skewY(1.5625deg);\n",
" }\n",
"\n",
" 66.6% {\n",
" -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);\n",
" transform: skewX(-0.78125deg) skewY(-0.78125deg);\n",
" }\n",
"\n",
" 77.7% {\n",
" -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);\n",
" transform: skewX(0.390625deg) skewY(0.390625deg);\n",
" }\n",
"\n",
" 88.8% {\n",
" -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n",
" transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n",
" }\n",
"}\n",
"\n",
".jello {\n",
" -webkit-animation-name: jello;\n",
" animation-name: jello;\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceIn {\n",
" from, 20%, 40%, 60%, 80%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" 0% {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"\n",
" 20% {\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1);\n",
" transform: scale3d(1.1, 1.1, 1.1);\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: scale3d(.9, .9, .9);\n",
" transform: scale3d(.9, .9, .9);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(1.03, 1.03, 1.03);\n",
" transform: scale3d(1.03, 1.03, 1.03);\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: scale3d(.97, .97, .97);\n",
" transform: scale3d(.97, .97, .97);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceIn {\n",
" from, 20%, 40%, 60%, 80%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" 0% {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"\n",
" 20% {\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1);\n",
" transform: scale3d(1.1, 1.1, 1.1);\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: scale3d(.9, .9, .9);\n",
" transform: scale3d(.9, .9, .9);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(1.03, 1.03, 1.03);\n",
" transform: scale3d(1.03, 1.03, 1.03);\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: scale3d(.97, .97, .97);\n",
" transform: scale3d(.97, .97, .97);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(1, 1, 1);\n",
" transform: scale3d(1, 1, 1);\n",
" }\n",
"}\n",
"\n",
".bounceIn {\n",
" -webkit-animation-name: bounceIn;\n",
" animation-name: bounceIn;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceInDown {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" 0% {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -3000px, 0);\n",
" transform: translate3d(0, -3000px, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, 25px, 0);\n",
" transform: translate3d(0, 25px, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(0, -10px, 0);\n",
" transform: translate3d(0, -10px, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(0, 5px, 0);\n",
" transform: translate3d(0, 5px, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceInDown {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" 0% {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -3000px, 0);\n",
" transform: translate3d(0, -3000px, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, 25px, 0);\n",
" transform: translate3d(0, 25px, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(0, -10px, 0);\n",
" transform: translate3d(0, -10px, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(0, 5px, 0);\n",
" transform: translate3d(0, 5px, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".bounceInDown {\n",
" -webkit-animation-name: bounceInDown;\n",
" animation-name: bounceInDown;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceInLeft {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" 0% {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-3000px, 0, 0);\n",
" transform: translate3d(-3000px, 0, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(25px, 0, 0);\n",
" transform: translate3d(25px, 0, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(-10px, 0, 0);\n",
" transform: translate3d(-10px, 0, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(5px, 0, 0);\n",
" transform: translate3d(5px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceInLeft {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" 0% {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-3000px, 0, 0);\n",
" transform: translate3d(-3000px, 0, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(25px, 0, 0);\n",
" transform: translate3d(25px, 0, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(-10px, 0, 0);\n",
" transform: translate3d(-10px, 0, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(5px, 0, 0);\n",
" transform: translate3d(5px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".bounceInLeft {\n",
" -webkit-animation-name: bounceInLeft;\n",
" animation-name: bounceInLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceInRight {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(3000px, 0, 0);\n",
" transform: translate3d(3000px, 0, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(-25px, 0, 0);\n",
" transform: translate3d(-25px, 0, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(10px, 0, 0);\n",
" transform: translate3d(10px, 0, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(-5px, 0, 0);\n",
" transform: translate3d(-5px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceInRight {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(3000px, 0, 0);\n",
" transform: translate3d(3000px, 0, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(-25px, 0, 0);\n",
" transform: translate3d(-25px, 0, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(10px, 0, 0);\n",
" transform: translate3d(10px, 0, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(-5px, 0, 0);\n",
" transform: translate3d(-5px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".bounceInRight {\n",
" -webkit-animation-name: bounceInRight;\n",
" animation-name: bounceInRight;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceInUp {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 3000px, 0);\n",
" transform: translate3d(0, 3000px, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, -20px, 0);\n",
" transform: translate3d(0, -20px, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(0, 10px, 0);\n",
" transform: translate3d(0, 10px, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(0, -5px, 0);\n",
" transform: translate3d(0, -5px, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceInUp {\n",
" from, 60%, 75%, 90%, to {\n",
" -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n",
" }\n",
"\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 3000px, 0);\n",
" transform: translate3d(0, 3000px, 0);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, -20px, 0);\n",
" transform: translate3d(0, -20px, 0);\n",
" }\n",
"\n",
" 75% {\n",
" -webkit-transform: translate3d(0, 10px, 0);\n",
" transform: translate3d(0, 10px, 0);\n",
" }\n",
"\n",
" 90% {\n",
" -webkit-transform: translate3d(0, -5px, 0);\n",
" transform: translate3d(0, -5px, 0);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
".bounceInUp {\n",
" -webkit-animation-name: bounceInUp;\n",
" animation-name: bounceInUp;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceOut {\n",
" 20% {\n",
" -webkit-transform: scale3d(.9, .9, .9);\n",
" transform: scale3d(.9, .9, .9);\n",
" }\n",
"\n",
" 50%, 55% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1);\n",
" transform: scale3d(1.1, 1.1, 1.1);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceOut {\n",
" 20% {\n",
" -webkit-transform: scale3d(.9, .9, .9);\n",
" transform: scale3d(.9, .9, .9);\n",
" }\n",
"\n",
" 50%, 55% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(1.1, 1.1, 1.1);\n",
" transform: scale3d(1.1, 1.1, 1.1);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"}\n",
"\n",
".bounceOut {\n",
" -webkit-animation-name: bounceOut;\n",
" animation-name: bounceOut;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceOutDown {\n",
" 20% {\n",
" -webkit-transform: translate3d(0, 10px, 0);\n",
" transform: translate3d(0, 10px, 0);\n",
" }\n",
"\n",
" 40%, 45% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, -20px, 0);\n",
" transform: translate3d(0, -20px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 2000px, 0);\n",
" transform: translate3d(0, 2000px, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceOutDown {\n",
" 20% {\n",
" -webkit-transform: translate3d(0, 10px, 0);\n",
" transform: translate3d(0, 10px, 0);\n",
" }\n",
"\n",
" 40%, 45% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, -20px, 0);\n",
" transform: translate3d(0, -20px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 2000px, 0);\n",
" transform: translate3d(0, 2000px, 0);\n",
" }\n",
"}\n",
"\n",
".bounceOutDown {\n",
" -webkit-animation-name: bounceOutDown;\n",
" animation-name: bounceOutDown;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceOutLeft {\n",
" 20% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(20px, 0, 0);\n",
" transform: translate3d(20px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-2000px, 0, 0);\n",
" transform: translate3d(-2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceOutLeft {\n",
" 20% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(20px, 0, 0);\n",
" transform: translate3d(20px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-2000px, 0, 0);\n",
" transform: translate3d(-2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
".bounceOutLeft {\n",
" -webkit-animation-name: bounceOutLeft;\n",
" animation-name: bounceOutLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceOutRight {\n",
" 20% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(-20px, 0, 0);\n",
" transform: translate3d(-20px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(2000px, 0, 0);\n",
" transform: translate3d(2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceOutRight {\n",
" 20% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(-20px, 0, 0);\n",
" transform: translate3d(-20px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(2000px, 0, 0);\n",
" transform: translate3d(2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
".bounceOutRight {\n",
" -webkit-animation-name: bounceOutRight;\n",
" animation-name: bounceOutRight;\n",
"}\n",
"\n",
"@-webkit-keyframes bounceOutUp {\n",
" 20% {\n",
" -webkit-transform: translate3d(0, -10px, 0);\n",
" transform: translate3d(0, -10px, 0);\n",
" }\n",
"\n",
" 40%, 45% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, 20px, 0);\n",
" transform: translate3d(0, 20px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -2000px, 0);\n",
" transform: translate3d(0, -2000px, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes bounceOutUp {\n",
" 20% {\n",
" -webkit-transform: translate3d(0, -10px, 0);\n",
" transform: translate3d(0, -10px, 0);\n",
" }\n",
"\n",
" 40%, 45% {\n",
" opacity: 1;\n",
" -webkit-transform: translate3d(0, 20px, 0);\n",
" transform: translate3d(0, 20px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -2000px, 0);\n",
" transform: translate3d(0, -2000px, 0);\n",
" }\n",
"}\n",
"\n",
".bounceOutUp {\n",
" -webkit-animation-name: bounceOutUp;\n",
" animation-name: bounceOutUp;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeIn {\n",
" from {\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeIn {\n",
" from {\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".fadeIn {\n",
" -webkit-animation-name: fadeIn;\n",
" animation-name: fadeIn;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInDown {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInDown {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInDown {\n",
" -webkit-animation-name: fadeInDown;\n",
" animation-name: fadeInDown;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInDownBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -2000px, 0);\n",
" transform: translate3d(0, -2000px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInDownBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -2000px, 0);\n",
" transform: translate3d(0, -2000px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInDownBig {\n",
" -webkit-animation-name: fadeInDownBig;\n",
" animation-name: fadeInDownBig;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInLeft {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInLeft {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInLeft {\n",
" -webkit-animation-name: fadeInLeft;\n",
" animation-name: fadeInLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInLeftBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-2000px, 0, 0);\n",
" transform: translate3d(-2000px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInLeftBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-2000px, 0, 0);\n",
" transform: translate3d(-2000px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInLeftBig {\n",
" -webkit-animation-name: fadeInLeftBig;\n",
" animation-name: fadeInLeftBig;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInRight {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInRight {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInRight {\n",
" -webkit-animation-name: fadeInRight;\n",
" animation-name: fadeInRight;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInRightBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(2000px, 0, 0);\n",
" transform: translate3d(2000px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInRightBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(2000px, 0, 0);\n",
" transform: translate3d(2000px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInRightBig {\n",
" -webkit-animation-name: fadeInRightBig;\n",
" animation-name: fadeInRightBig;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInUp {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInUp {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInUp {\n",
" -webkit-animation-name: fadeInUp;\n",
" animation-name: fadeInUp;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeInUpBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 2000px, 0);\n",
" transform: translate3d(0, 2000px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeInUpBig {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 2000px, 0);\n",
" transform: translate3d(0, 2000px, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".fadeInUpBig {\n",
" -webkit-animation-name: fadeInUpBig;\n",
" animation-name: fadeInUpBig;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".fadeOut {\n",
" -webkit-animation-name: fadeOut;\n",
" animation-name: fadeOut;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutDown {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutDown {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutDown {\n",
" -webkit-animation-name: fadeOutDown;\n",
" animation-name: fadeOutDown;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutDownBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 2000px, 0);\n",
" transform: translate3d(0, 2000px, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutDownBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, 2000px, 0);\n",
" transform: translate3d(0, 2000px, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutDownBig {\n",
" -webkit-animation-name: fadeOutDownBig;\n",
" animation-name: fadeOutDownBig;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutLeft {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutLeft {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutLeft {\n",
" -webkit-animation-name: fadeOutLeft;\n",
" animation-name: fadeOutLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutLeftBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-2000px, 0, 0);\n",
" transform: translate3d(-2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutLeftBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-2000px, 0, 0);\n",
" transform: translate3d(-2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutLeftBig {\n",
" -webkit-animation-name: fadeOutLeftBig;\n",
" animation-name: fadeOutLeftBig;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutRight {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutRight {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutRight {\n",
" -webkit-animation-name: fadeOutRight;\n",
" animation-name: fadeOutRight;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutRightBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(2000px, 0, 0);\n",
" transform: translate3d(2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutRightBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(2000px, 0, 0);\n",
" transform: translate3d(2000px, 0, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutRightBig {\n",
" -webkit-animation-name: fadeOutRightBig;\n",
" animation-name: fadeOutRightBig;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutUp {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutUp {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutUp {\n",
" -webkit-animation-name: fadeOutUp;\n",
" animation-name: fadeOutUp;\n",
"}\n",
"\n",
"@-webkit-keyframes fadeOutUpBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -2000px, 0);\n",
" transform: translate3d(0, -2000px, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes fadeOutUpBig {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(0, -2000px, 0);\n",
" transform: translate3d(0, -2000px, 0);\n",
" }\n",
"}\n",
"\n",
".fadeOutUpBig {\n",
" -webkit-animation-name: fadeOutUpBig;\n",
" animation-name: fadeOutUpBig;\n",
"}\n",
"\n",
"@-webkit-keyframes flip {\n",
" from {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n",
" -webkit-animation-timing-function: ease-out;\n",
" animation-timing-function: ease-out;\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n",
" transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n",
" -webkit-animation-timing-function: ease-out;\n",
" animation-timing-function: ease-out;\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n",
" transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: perspective(400px) scale3d(.95, .95, .95);\n",
" transform: perspective(400px) scale3d(.95, .95, .95);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"}\n",
"\n",
"@keyframes flip {\n",
" from {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n",
" -webkit-animation-timing-function: ease-out;\n",
" animation-timing-function: ease-out;\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n",
" transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n",
" -webkit-animation-timing-function: ease-out;\n",
" animation-timing-function: ease-out;\n",
" }\n",
"\n",
" 50% {\n",
" -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n",
" transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: perspective(400px) scale3d(.95, .95, .95);\n",
" transform: perspective(400px) scale3d(.95, .95, .95);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"}\n",
"\n",
".animated.flip {\n",
" -webkit-backface-visibility: visible;\n",
" backface-visibility: visible;\n",
" -webkit-animation-name: flip;\n",
" animation-name: flip;\n",
"}\n",
"\n",
"@-webkit-keyframes flipInX {\n",
" from {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" opacity: 0;\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"}\n",
"\n",
"@keyframes flipInX {\n",
" from {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" opacity: 0;\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"}\n",
"\n",
".flipInX {\n",
" -webkit-backface-visibility: visible !important;\n",
" backface-visibility: visible !important;\n",
" -webkit-animation-name: flipInX;\n",
" animation-name: flipInX;\n",
"}\n",
"\n",
"@-webkit-keyframes flipInY {\n",
" from {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" opacity: 0;\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"}\n",
"\n",
"@keyframes flipInY {\n",
" from {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" opacity: 0;\n",
" }\n",
"\n",
" 40% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"}\n",
"\n",
".flipInY {\n",
" -webkit-backface-visibility: visible !important;\n",
" backface-visibility: visible !important;\n",
" -webkit-animation-name: flipInY;\n",
" animation-name: flipInY;\n",
"}\n",
"\n",
"@-webkit-keyframes flipOutX {\n",
" from {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes flipOutX {\n",
" from {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".flipOutX {\n",
" -webkit-animation-name: flipOutX;\n",
" animation-name: flipOutX;\n",
" -webkit-backface-visibility: visible !important;\n",
" backface-visibility: visible !important;\n",
"}\n",
"\n",
"@-webkit-keyframes flipOutY {\n",
" from {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes flipOutY {\n",
" from {\n",
" -webkit-transform: perspective(400px);\n",
" transform: perspective(400px);\n",
" }\n",
"\n",
" 30% {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".flipOutY {\n",
" -webkit-backface-visibility: visible !important;\n",
" backface-visibility: visible !important;\n",
" -webkit-animation-name: flipOutY;\n",
" animation-name: flipOutY;\n",
"}\n",
"\n",
"@-webkit-keyframes lightSpeedIn {\n",
" from {\n",
" -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n",
" transform: translate3d(100%, 0, 0) skewX(-30deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: skewX(20deg);\n",
" transform: skewX(20deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: skewX(-5deg);\n",
" transform: skewX(-5deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes lightSpeedIn {\n",
" from {\n",
" -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n",
" transform: translate3d(100%, 0, 0) skewX(-30deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" 60% {\n",
" -webkit-transform: skewX(20deg);\n",
" transform: skewX(20deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" 80% {\n",
" -webkit-transform: skewX(-5deg);\n",
" transform: skewX(-5deg);\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".lightSpeedIn {\n",
" -webkit-animation-name: lightSpeedIn;\n",
" animation-name: lightSpeedIn;\n",
" -webkit-animation-timing-function: ease-out;\n",
" animation-timing-function: ease-out;\n",
"}\n",
"\n",
"@-webkit-keyframes lightSpeedOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);\n",
" transform: translate3d(100%, 0, 0) skewX(30deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes lightSpeedOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);\n",
" transform: translate3d(100%, 0, 0) skewX(30deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".lightSpeedOut {\n",
" -webkit-animation-name: lightSpeedOut;\n",
" animation-name: lightSpeedOut;\n",
" -webkit-animation-timing-function: ease-in;\n",
" animation-timing-function: ease-in;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateIn {\n",
" from {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" -webkit-transform: rotate3d(0, 0, 1, -200deg);\n",
" transform: rotate3d(0, 0, 1, -200deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateIn {\n",
" from {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" -webkit-transform: rotate3d(0, 0, 1, -200deg);\n",
" transform: rotate3d(0, 0, 1, -200deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".rotateIn {\n",
" -webkit-animation-name: rotateIn;\n",
" animation-name: rotateIn;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateInDownLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -45deg);\n",
" transform: rotate3d(0, 0, 1, -45deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateInDownLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -45deg);\n",
" transform: rotate3d(0, 0, 1, -45deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".rotateInDownLeft {\n",
" -webkit-animation-name: rotateInDownLeft;\n",
" animation-name: rotateInDownLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateInDownRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 45deg);\n",
" transform: rotate3d(0, 0, 1, 45deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateInDownRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 45deg);\n",
" transform: rotate3d(0, 0, 1, 45deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".rotateInDownRight {\n",
" -webkit-animation-name: rotateInDownRight;\n",
" animation-name: rotateInDownRight;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateInUpLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 45deg);\n",
" transform: rotate3d(0, 0, 1, 45deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateInUpLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 45deg);\n",
" transform: rotate3d(0, 0, 1, 45deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".rotateInUpLeft {\n",
" -webkit-animation-name: rotateInUpLeft;\n",
" animation-name: rotateInUpLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateInUpRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -90deg);\n",
" transform: rotate3d(0, 0, 1, -90deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateInUpRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -90deg);\n",
" transform: rotate3d(0, 0, 1, -90deg);\n",
" opacity: 0;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".rotateInUpRight {\n",
" -webkit-animation-name: rotateInUpRight;\n",
" animation-name: rotateInUpRight;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateOut {\n",
" from {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" -webkit-transform: rotate3d(0, 0, 1, 200deg);\n",
" transform: rotate3d(0, 0, 1, 200deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateOut {\n",
" from {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: center;\n",
" transform-origin: center;\n",
" -webkit-transform: rotate3d(0, 0, 1, 200deg);\n",
" transform: rotate3d(0, 0, 1, 200deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".rotateOut {\n",
" -webkit-animation-name: rotateOut;\n",
" animation-name: rotateOut;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateOutDownLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 45deg);\n",
" transform: rotate3d(0, 0, 1, 45deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateOutDownLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 45deg);\n",
" transform: rotate3d(0, 0, 1, 45deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".rotateOutDownLeft {\n",
" -webkit-animation-name: rotateOutDownLeft;\n",
" animation-name: rotateOutDownLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateOutDownRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -45deg);\n",
" transform: rotate3d(0, 0, 1, -45deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateOutDownRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -45deg);\n",
" transform: rotate3d(0, 0, 1, -45deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".rotateOutDownRight {\n",
" -webkit-animation-name: rotateOutDownRight;\n",
" animation-name: rotateOutDownRight;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateOutUpLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -45deg);\n",
" transform: rotate3d(0, 0, 1, -45deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateOutUpLeft {\n",
" from {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: left bottom;\n",
" transform-origin: left bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, -45deg);\n",
" transform: rotate3d(0, 0, 1, -45deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".rotateOutUpLeft {\n",
" -webkit-animation-name: rotateOutUpLeft;\n",
" animation-name: rotateOutUpLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes rotateOutUpRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 90deg);\n",
" transform: rotate3d(0, 0, 1, 90deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes rotateOutUpRight {\n",
" from {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform-origin: right bottom;\n",
" transform-origin: right bottom;\n",
" -webkit-transform: rotate3d(0, 0, 1, 90deg);\n",
" transform: rotate3d(0, 0, 1, 90deg);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".rotateOutUpRight {\n",
" -webkit-animation-name: rotateOutUpRight;\n",
" animation-name: rotateOutUpRight;\n",
"}\n",
"\n",
"@-webkit-keyframes hinge {\n",
" 0% {\n",
" -webkit-transform-origin: top left;\n",
" transform-origin: top left;\n",
" -webkit-animation-timing-function: ease-in-out;\n",
" animation-timing-function: ease-in-out;\n",
" }\n",
"\n",
" 20%, 60% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 80deg);\n",
" transform: rotate3d(0, 0, 1, 80deg);\n",
" -webkit-transform-origin: top left;\n",
" transform-origin: top left;\n",
" -webkit-animation-timing-function: ease-in-out;\n",
" animation-timing-function: ease-in-out;\n",
" }\n",
"\n",
" 40%, 80% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 60deg);\n",
" transform: rotate3d(0, 0, 1, 60deg);\n",
" -webkit-transform-origin: top left;\n",
" transform-origin: top left;\n",
" -webkit-animation-timing-function: ease-in-out;\n",
" animation-timing-function: ease-in-out;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 700px, 0);\n",
" transform: translate3d(0, 700px, 0);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes hinge {\n",
" 0% {\n",
" -webkit-transform-origin: top left;\n",
" transform-origin: top left;\n",
" -webkit-animation-timing-function: ease-in-out;\n",
" animation-timing-function: ease-in-out;\n",
" }\n",
"\n",
" 20%, 60% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 80deg);\n",
" transform: rotate3d(0, 0, 1, 80deg);\n",
" -webkit-transform-origin: top left;\n",
" transform-origin: top left;\n",
" -webkit-animation-timing-function: ease-in-out;\n",
" animation-timing-function: ease-in-out;\n",
" }\n",
"\n",
" 40%, 80% {\n",
" -webkit-transform: rotate3d(0, 0, 1, 60deg);\n",
" transform: rotate3d(0, 0, 1, 60deg);\n",
" -webkit-transform-origin: top left;\n",
" transform-origin: top left;\n",
" -webkit-animation-timing-function: ease-in-out;\n",
" animation-timing-function: ease-in-out;\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 700px, 0);\n",
" transform: translate3d(0, 700px, 0);\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".hinge {\n",
" -webkit-animation-name: hinge;\n",
" animation-name: hinge;\n",
"}\n",
"\n",
"/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n",
"\n",
"@-webkit-keyframes rollIn {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n",
" transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
"@keyframes rollIn {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n",
" transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n",
" }\n",
"\n",
" to {\n",
" opacity: 1;\n",
" -webkit-transform: none;\n",
" transform: none;\n",
" }\n",
"}\n",
"\n",
".rollIn {\n",
" -webkit-animation-name: rollIn;\n",
" animation-name: rollIn;\n",
"}\n",
"\n",
"/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n",
"\n",
"@-webkit-keyframes rollOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n",
" transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n",
" }\n",
"}\n",
"\n",
"@keyframes rollOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n",
" transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n",
" }\n",
"}\n",
"\n",
".rollOut {\n",
" -webkit-animation-name: rollOut;\n",
" animation-name: rollOut;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomIn {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"\n",
" 50% {\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomIn {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"\n",
" 50% {\n",
" opacity: 1;\n",
" }\n",
"}\n",
"\n",
".zoomIn {\n",
" -webkit-animation-name: zoomIn;\n",
" animation-name: zoomIn;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomInDown {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomInDown {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
".zoomInDown {\n",
" -webkit-animation-name: zoomInDown;\n",
" animation-name: zoomInDown;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomInLeft {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomInLeft {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
".zoomInLeft {\n",
" -webkit-animation-name: zoomInLeft;\n",
" animation-name: zoomInLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomInRight {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomInRight {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
".zoomInRight {\n",
" -webkit-animation-name: zoomInRight;\n",
" animation-name: zoomInRight;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomInUp {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomInUp {\n",
" from {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" 60% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
".zoomInUp {\n",
" -webkit-animation-name: zoomInUp;\n",
" animation-name: zoomInUp;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" 50% {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomOut {\n",
" from {\n",
" opacity: 1;\n",
" }\n",
"\n",
" 50% {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.3, .3, .3);\n",
" transform: scale3d(.3, .3, .3);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" }\n",
"}\n",
"\n",
".zoomOut {\n",
" -webkit-animation-name: zoomOut;\n",
" animation-name: zoomOut;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomOutDown {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n",
" -webkit-transform-origin: center bottom;\n",
" transform-origin: center bottom;\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomOutDown {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n",
" -webkit-transform-origin: center bottom;\n",
" transform-origin: center bottom;\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
".zoomOutDown {\n",
" -webkit-animation-name: zoomOutDown;\n",
" animation-name: zoomOutDown;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomOutLeft {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);\n",
" transform: scale(.1) translate3d(-2000px, 0, 0);\n",
" -webkit-transform-origin: left center;\n",
" transform-origin: left center;\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomOutLeft {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);\n",
" transform: scale(.1) translate3d(-2000px, 0, 0);\n",
" -webkit-transform-origin: left center;\n",
" transform-origin: left center;\n",
" }\n",
"}\n",
"\n",
".zoomOutLeft {\n",
" -webkit-animation-name: zoomOutLeft;\n",
" animation-name: zoomOutLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomOutRight {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale(.1) translate3d(2000px, 0, 0);\n",
" transform: scale(.1) translate3d(2000px, 0, 0);\n",
" -webkit-transform-origin: right center;\n",
" transform-origin: right center;\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomOutRight {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale(.1) translate3d(2000px, 0, 0);\n",
" transform: scale(.1) translate3d(2000px, 0, 0);\n",
" -webkit-transform-origin: right center;\n",
" transform-origin: right center;\n",
" }\n",
"}\n",
"\n",
".zoomOutRight {\n",
" -webkit-animation-name: zoomOutRight;\n",
" animation-name: zoomOutRight;\n",
"}\n",
"\n",
"@-webkit-keyframes zoomOutUp {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n",
" -webkit-transform-origin: center bottom;\n",
" transform-origin: center bottom;\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
"@keyframes zoomOutUp {\n",
" 40% {\n",
" opacity: 1;\n",
" -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n",
" -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n",
" }\n",
"\n",
" to {\n",
" opacity: 0;\n",
" -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n",
" transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n",
" -webkit-transform-origin: center bottom;\n",
" transform-origin: center bottom;\n",
" -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n",
" }\n",
"}\n",
"\n",
".zoomOutUp {\n",
" -webkit-animation-name: zoomOutUp;\n",
" animation-name: zoomOutUp;\n",
"}\n",
"\n",
"@-webkit-keyframes slideInDown {\n",
" from {\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideInDown {\n",
" from {\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
".slideInDown {\n",
" -webkit-animation-name: slideInDown;\n",
" animation-name: slideInDown;\n",
"}\n",
"\n",
"@-webkit-keyframes slideInLeft {\n",
" from {\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideInLeft {\n",
" from {\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
".slideInLeft {\n",
" -webkit-animation-name: slideInLeft;\n",
" animation-name: slideInLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes slideInRight {\n",
" from {\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideInRight {\n",
" from {\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
".slideInRight {\n",
" -webkit-animation-name: slideInRight;\n",
" animation-name: slideInRight;\n",
"}\n",
"\n",
"@-webkit-keyframes slideInUp {\n",
" from {\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideInUp {\n",
" from {\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" visibility: visible;\n",
" }\n",
"\n",
" to {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"}\n",
"\n",
".slideInUp {\n",
" -webkit-animation-name: slideInUp;\n",
" animation-name: slideInUp;\n",
"}\n",
"\n",
"@-webkit-keyframes slideOutDown {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideOutDown {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(0, 100%, 0);\n",
" transform: translate3d(0, 100%, 0);\n",
" }\n",
"}\n",
"\n",
".slideOutDown {\n",
" -webkit-animation-name: slideOutDown;\n",
" animation-name: slideOutDown;\n",
"}\n",
"\n",
"@-webkit-keyframes slideOutLeft {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideOutLeft {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(-100%, 0, 0);\n",
" transform: translate3d(-100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
".slideOutLeft {\n",
" -webkit-animation-name: slideOutLeft;\n",
" animation-name: slideOutLeft;\n",
"}\n",
"\n",
"@-webkit-keyframes slideOutRight {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideOutRight {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(100%, 0, 0);\n",
" transform: translate3d(100%, 0, 0);\n",
" }\n",
"}\n",
"\n",
".slideOutRight {\n",
" -webkit-animation-name: slideOutRight;\n",
" animation-name: slideOutRight;\n",
"}\n",
"\n",
"@-webkit-keyframes slideOutUp {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" }\n",
"}\n",
"\n",
"@keyframes slideOutUp {\n",
" from {\n",
" -webkit-transform: translate3d(0, 0, 0);\n",
" transform: translate3d(0, 0, 0);\n",
" }\n",
"\n",
" to {\n",
" visibility: hidden;\n",
" -webkit-transform: translate3d(0, -100%, 0);\n",
" transform: translate3d(0, -100%, 0);\n",
" }\n",
"}\n",
"\n",
".slideOutUp {\n",
" -webkit-animation-name: slideOutUp;\n",
" animation-name: slideOutUp;\n",
"}\n",
"body{\n",
" color: #283655;\n",
"}\n",
"\n",
"form{\n",
" color: #283655;\n",
" background-color: white;\n",
" padding: 0.5em;\n",
" font-weight: bold;\n",
"}\n",
"\n",
"h1 {\n",
" color: #283655;\n",
" background-color: white;\n",
" padding: 0.5em;\n",
" font-weight: bold;\n",
"}\n",
"\n",
"h3 {\n",
" color: white;\n",
" background-color: #283655;\n",
" padding: 0.5em;\n",
"}\n",
"\n",
"button {\n",
" color: #283655;\n",
" background-color: white;\n",
" padding: 0.5em;\n",
" font-weight: bold;\n",
"}</style>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"execution_count": 30,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from IPython.core.display import HTML\n",
"css = open('style-table.css').read() + open('animate.css').read() + open('style-notebook.css').read()\n",
"HTML('<style>{}</style>'.format(css))"
]
},
{
"cell_type": "code",
"execution_count": 23,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<script>\n",
"code_show=true; \n",
"function code_toggle() {\n",
" if (code_show){\n",
" $('div.input').hide();\n",
" } else {\n",
" $('div.input').show();\n",
" }\n",
" code_show = !code_show\n",
"} \n",
"$( document ).ready(code_toggle);\n",
"</script>\n",
"<form action=\"javascript:code_toggle()\"><input type=\"submit\" value=\"On/off raw code.\"></form>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"execution_count": 23,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from IPython.display import HTML\n",
"\n",
"HTML('''<script>\n",
"code_show=true; \n",
"function code_toggle() {\n",
" if (code_show){\n",
" $('div.input').hide();\n",
" } else {\n",
" $('div.input').show();\n",
" }\n",
" code_show = !code_show\n",
"} \n",
"$( document ).ready(code_toggle);\n",
"</script>\n",
"<form action=\"javascript:code_toggle()\"><input type=\"submit\" value=\"On/off raw code.\"></form>''')"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"%matplotlib inline\n",
"import pandas as pd"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Make it pretty # "
]
},
{
"cell_type": "code",
"execution_count": 47,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"# Load the ipython display and image module\n",
"from IPython.display import Image\n",
"from IPython.display import display"
]
},
{
"cell_type": "code",
"execution_count": 48,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<img src=\"glitter.gif\"/>"
],
"text/plain": [
"<IPython.core.display.Image object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"# display this image\n",
"display(Image(url='glitter.gif'))"
]
},
{
"cell_type": "code",
"execution_count": 49,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<svg height=\"210\" width=\"500\">\n",
" <polygon points=\"100,10 40,198 190,78 10,78 160,198\" \n",
" style=\"fill:#283655;\n",
" stroke:white;\n",
" stroke-width:1;\n",
" fill-rule:nonzero;\"/>\n",
" Sorry, your browser does not support inline SVG.\n",
"</svg>\n",
"\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"execution_count": 49,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from IPython.display import HTML\n",
"\n",
"HTML('''\n",
"<svg height=\"210\" width=\"500\">\n",
" <polygon points=\"100,10 40,198 190,78 10,78 160,198\" \n",
" style=\"fill:#283655;\n",
" stroke:white;\n",
" stroke-width:1;\n",
" fill-rule:nonzero;\"/>\n",
" Sorry, your browser does not support inline SVG.\n",
"</svg>\n",
"\n",
"''')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This is the data: "
]
},
{
"cell_type": "code",
"execution_count": 50,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<div>\n",
"<table border=\"1\" class=\"dataframe\">\n",
" <thead>\n",
" <tr style=\"text-align: right;\">\n",
" <th></th>\n",
" <th>1</th>\n",
" <th>2</th>\n",
" <th>4</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th>1</th>\n",
" <td>2</td>\n",
" <td>3</td>\n",
" <td>5</td>\n",
" </tr>\n",
" <tr>\n",
" <th>2</th>\n",
" <td>2</td>\n",
" <td>3</td>\n",
" <td>5</td>\n",
" </tr>\n",
" <tr>\n",
" <th>3</th>\n",
" <td>2</td>\n",
" <td>3</td>\n",
" <td>5</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n",
"</div>"
],
"text/plain": [
" 1 2 4\n",
"1 2 3 5\n",
"2 2 3 5\n",
"3 2 3 5"
]
},
"execution_count": 50,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"df = pd.DataFrame({1:2, 2:3, 4:5}, [1,2,3])\n",
"df"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### H3 ###"
]
},
{
"cell_type": "code",
"execution_count": 51,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
" <button type=\"button\", class = \"animated bounce\">Click Me!</button>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"execution_count": 51,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"HTML('''\n",
" <button type=\"button\", class = \"animated bounce\">Click Me!</button>\n",
"''')"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Credits ###\n",
"\n",
"[https://www.youtube.com/watch?v=RuhPekX3wsQ]\n",
"[http://chrisalbon.com/jupyter/ipython_display_image.html]\n",
"[http://www.w3schools.com/svg/]\n",
"[http://yaypython.com/]\n",
"[https://designschool.canva.com/blog/100-color-combinations/]"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.5.1"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment