diff --git a/.gitignore b/.gitignore index 88f5f6168..a5a294a84 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ -_site/ -.jekyll-cache/ -.htaccess -_config.yml -.DS_Store +_site/ +.jekyll-cache/ +.htaccess +_config.yml +.DS_Store diff --git a/LICENSE b/LICENSE index d4b6b8f97..d5e7c4039 100644 --- a/LICENSE +++ b/LICENSE @@ -1,21 +1,21 @@ -MIT License - -Copyright (c) 2020 Thomas Zühlke - -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. +MIT License + +Copyright (c) 2020 Thomas Zühlke + +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. diff --git a/README.md b/README.md index 70b2936c3..fec3e2c47 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,36 @@ -# Jekyll-Uno with Projects as Timeline -A Jekyll Theme, based on the Uno-Theme with a list of projects as Timeline. - -## How does is look -[Demo](https://www.zuehlke.cloud/) -![Screenshot](screenshot-overview.png) -![jekyll-theme-desktop](https://user-images.githubusercontent.com/32843441/72224870-5451ff00-357f-11ea-8fc2-bfbd4499bc63.gif) -![jekyll-theme-mobil](https://user-images.githubusercontent.com/32843441/72224877-6a5fbf80-357f-11ea-920b-dfae72bf2fbe.gif) - -## Installation/Setup -1. Download or clone repo `git clone https://github.com/tzuehlke/jekyll-uno-timeline.git` -2. Enter the folder: `cd jekyll-uno-timeline/` -3. Build it: `jekyll build` -4. Start Jekyll server: `jekyll serve` -5. Configure: `_config.yml` - * at least set `font_awesome` or download and add the font in `head.html` - -Access via: [http://localhost:4000/](http://localhost:4000/) - -## Details/Features/Changes -* based on the [Uno-Theme](https://github.com/joshgerdes/jekyll-uno), but: - * removed everything with posts - * `content-wrapper` can be shown or hidden with button - * changed all icons to [Font-Awesome](https://fontawesome.com/) - * updated google-analytics snipped - * added [Meetup-Link](https://www.meetup.com/) - * removed RSS - * removed Disqus - * using a Timeline-Design instead of posts, therefore no pagination anymore -* using Timeline ([CSS](https://github.com/le4ker/personal-jekyll-theme/blob/master/css/timeline.scss), [HTML](https://github.com/le4ker/personal-jekyll-theme/blob/master/_includes/timeline.html) ) from [{ Personal } Jekyll Theme](https://github.com/le4ker/personal-jekyll-theme) for a list of projects, but: - * still with 3 layouts for different screen-width, but without images on small screens - * timeline information source is now `_data/projects.yaml` - * always using the `timeline-inverted`-class, for text on the right side of the images -* using [github_api.js](https://github.com/jarrekk/Jalpc/blob/master/static/js/github_api.js) from [Jalpc.](https://github.com/jarrekk/Jalpc), but: - * changed the GitHub-URL for using with persons and organisations +# Jekyll-Uno with Projects as Timeline +A Jekyll Theme, based on the Uno-Theme with a list of projects as Timeline. + +## How does is look +[Demo](https://www.zuehlke.cloud/) +![Screenshot](screenshot-overview.png) +![jekyll-theme-desktop](https://user-images.githubusercontent.com/32843441/72224870-5451ff00-357f-11ea-8fc2-bfbd4499bc63.gif) +![jekyll-theme-mobil](https://user-images.githubusercontent.com/32843441/72224877-6a5fbf80-357f-11ea-920b-dfae72bf2fbe.gif) + +## Installation/Setup +1. Download or clone repo `git clone https://github.com/tzuehlke/jekyll-uno-timeline.git` +2. Enter the folder: `cd jekyll-uno-timeline/` +3. Build it: `jekyll build` +4. Start Jekyll server: `jekyll serve` +5. Configure: `_config.yml` + * at least set `font_awesome` or download and add the font in `head.html` + +Access via: [http://localhost:4000/](http://localhost:4000/) + +## Details/Features/Changes +* based on the [Uno-Theme](https://github.com/joshgerdes/jekyll-uno), but: + * removed everything with posts + * `content-wrapper` can be shown or hidden with button + * changed all icons to [Font-Awesome](https://fontawesome.com/) + * updated google-analytics snipped + * added [Meetup-Link](https://www.meetup.com/) + * removed RSS + * removed Disqus + * using a Timeline-Design instead of posts, therefore no pagination anymore +* using Timeline ([CSS](https://github.com/le4ker/personal-jekyll-theme/blob/master/css/timeline.scss), [HTML](https://github.com/le4ker/personal-jekyll-theme/blob/master/_includes/timeline.html) ) from [{ Personal } Jekyll Theme](https://github.com/le4ker/personal-jekyll-theme) for a list of projects, but: + * still with 3 layouts for different screen-width, but without images on small screens + * timeline information source is now `_data/projects.yaml` + * always using the `timeline-inverted`-class, for text on the right side of the images +* using [github_api.js](https://github.com/jarrekk/Jalpc/blob/master/static/js/github_api.js) from [Jalpc.](https://github.com/jarrekk/Jalpc), but: + * changed the GitHub-URL for using with persons and organisations * added watchers number \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index 4a2e2870e..d03d42c9c 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/_includes/head.html b/_includes/head.html index 1d51be769..0fd47e768 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,68 +1,68 @@ - - - - - {% if page.robots %} - - {% endif %} - - {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - - - - - - - - - - - - {% if site.author.twitter_username %} - - {% endif %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% if site.google_analytics %} - - - - - {% endif %} - - + + + + + {% if page.robots %} + + {% endif %} + + {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} + + + + + + + + + + + + {% if site.author.twitter_username %} + + {% endif %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% if site.google_analytics %} + + + + + {% endif %} + + diff --git a/_includes/header.html b/_includes/header.html index a6b306970..9985b736a 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,121 +1,121 @@ - - - - - -
-
- -
-
- - My Profile Photo -

{{ site.title }}

- -
-

Working at Adesso SE as developer and architect for Azure .

-
- -
- - - - - - -
- -
- -
- -
-
-
+ + + + + +
+
+ +
+
+ + My Profile Photo +

{{ site.title }}

+ +
+

Working at Adesso SE as developer and architect for Azure .

+
+ +
+ + + + + + +
+ +
+ +
+ +
+
+
diff --git a/_layouts/default.html b/_layouts/default.html index bf930854f..95c3735ae 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,20 +1,20 @@ - - - {% include head.html %} - - - {% include header.html %} - -
-
- {{ content }} - - - - -
- - {% include footer.html %} -
- + + + {% include head.html %} + + + {% include header.html %} + +
+
+ {{ content }} + + + + +
+ + {% include footer.html %} +
+ \ No newline at end of file diff --git a/_sass/animate.scss b/_sass/animate.scss index 492bbbd10..7a8e6cc0c 100644 --- a/_sass/animate.scss +++ b/_sass/animate.scss @@ -1,3432 +1,3432 @@ -.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes flash { - 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} -} - -@-moz-keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} - -@-o-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; - -moz-animation-name: flash; - -o-animation-name: flash; - animation-name: flash; -} -@-webkit-keyframes shake { - 0%, 100% {-webkit-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} -} - -@-moz-keyframes shake { - 0%, 100% {-moz-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} -} - -@-o-keyframes shake { - 0%, 100% {-o-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} -} - -@keyframes shake { - 0%, 100% {transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} - 20%, 40%, 60%, 80% {transform: translateX(10px);} -} - -.shake { - -webkit-animation-name: shake; - -moz-animation-name: shake; - -o-animation-name: shake; - animation-name: shake; -} -@-webkit-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} - 40% {-webkit-transform: translateY(-30px);} - 60% {-webkit-transform: translateY(-15px);} -} - -@-moz-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} - 40% {-moz-transform: translateY(-30px);} - 60% {-moz-transform: translateY(-15px);} -} - -@-o-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} - 40% {-o-transform: translateY(-30px);} - 60% {-o-transform: translateY(-15px);} -} -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} - 40% {transform: translateY(-30px);} - 60% {transform: translateY(-15px);} -} - -.bounce { - -webkit-animation-name: bounce; - -moz-animation-name: bounce; - -o-animation-name: bounce; - animation-name: bounce; -} -@-webkit-keyframes tada { - 0% {-webkit-transform: scale(1);} - 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} - 100% {-webkit-transform: scale(1) rotate(0);} -} - -@-moz-keyframes tada { - 0% {-moz-transform: scale(1);} - 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} - 100% {-moz-transform: scale(1) rotate(0);} -} - -@-o-keyframes tada { - 0% {-o-transform: scale(1);} - 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} - 100% {-o-transform: scale(1) rotate(0);} -} - -@keyframes tada { - 0% {transform: scale(1);} - 10%, 20% {transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} - 100% {transform: scale(1) rotate(0);} -} - -.tada { - -webkit-animation-name: tada; - -moz-animation-name: tada; - -o-animation-name: tada; - animation-name: tada; -} -@-webkit-keyframes swing { - 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } - 20% { -webkit-transform: rotate(15deg); } - 40% { -webkit-transform: rotate(-10deg); } - 60% { -webkit-transform: rotate(5deg); } - 80% { -webkit-transform: rotate(-5deg); } - 100% { -webkit-transform: rotate(0deg); } -} - -@-moz-keyframes swing { - 20% { -moz-transform: rotate(15deg); } - 40% { -moz-transform: rotate(-10deg); } - 60% { -moz-transform: rotate(5deg); } - 80% { -moz-transform: rotate(-5deg); } - 100% { -moz-transform: rotate(0deg); } -} - -@-o-keyframes swing { - 20% { -o-transform: rotate(15deg); } - 40% { -o-transform: rotate(-10deg); } - 60% { -o-transform: rotate(5deg); } - 80% { -o-transform: rotate(-5deg); } - 100% { -o-transform: rotate(0deg); } -} - -@keyframes swing { - 20% { transform: rotate(15deg); } - 40% { transform: rotate(-10deg); } - 60% { transform: rotate(5deg); } - 80% { transform: rotate(-5deg); } - 100% { transform: rotate(0deg); } -} - -.swing { - -webkit-transform-origin: top center; - -moz-transform-origin: top center; - -o-transform-origin: top center; - transform-origin: top center; - -webkit-animation-name: swing; - -moz-animation-name: swing; - -o-animation-name: swing; - animation-name: swing; -} -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes wobble { - 0% { -webkit-transform: translateX(0%); } - 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } - 30% { -webkit-transform: translateX(20%) rotate(3deg); } - 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } - 60% { -webkit-transform: translateX(10%) rotate(2deg); } - 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } - 100% { -webkit-transform: translateX(0%); } -} - -@-moz-keyframes wobble { - 0% { -moz-transform: translateX(0%); } - 15% { -moz-transform: translateX(-25%) rotate(-5deg); } - 30% { -moz-transform: translateX(20%) rotate(3deg); } - 45% { -moz-transform: translateX(-15%) rotate(-3deg); } - 60% { -moz-transform: translateX(10%) rotate(2deg); } - 75% { -moz-transform: translateX(-5%) rotate(-1deg); } - 100% { -moz-transform: translateX(0%); } -} - -@-o-keyframes wobble { - 0% { -o-transform: translateX(0%); } - 15% { -o-transform: translateX(-25%) rotate(-5deg); } - 30% { -o-transform: translateX(20%) rotate(3deg); } - 45% { -o-transform: translateX(-15%) rotate(-3deg); } - 60% { -o-transform: translateX(10%) rotate(2deg); } - 75% { -o-transform: translateX(-5%) rotate(-1deg); } - 100% { -o-transform: translateX(0%); } -} - -@keyframes wobble { - 0% { transform: translateX(0%); } - 15% { transform: translateX(-25%) rotate(-5deg); } - 30% { transform: translateX(20%) rotate(3deg); } - 45% { transform: translateX(-15%) rotate(-3deg); } - 60% { transform: translateX(10%) rotate(2deg); } - 75% { transform: translateX(-5%) rotate(-1deg); } - 100% { transform: translateX(0%); } -} - -.wobble { - -webkit-animation-name: wobble; - -moz-animation-name: wobble; - -o-animation-name: wobble; - animation-name: wobble; -} -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes pulse { - 0% { -webkit-transform: scale(1); } - 50% { -webkit-transform: scale(1.1); } - 100% { -webkit-transform: scale(1); } -} -@-moz-keyframes pulse { - 0% { -moz-transform: scale(1); } - 50% { -moz-transform: scale(1.1); } - 100% { -moz-transform: scale(1); } -} -@-o-keyframes pulse { - 0% { -o-transform: scale(1); } - 50% { -o-transform: scale(1.1); } - 100% { -o-transform: scale(1); } -} -@keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } -} - -.pulse { - -webkit-animation-name: pulse; - -moz-animation-name: pulse; - -o-animation-name: pulse; - animation-name: pulse; -} -@-webkit-keyframes flip { - 0% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -webkit-animation-timing-function: ease-out; - } - 40% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -webkit-animation-timing-function: ease-out; - } - 50% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -webkit-animation-timing-function: ease-in; - } - 80% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -webkit-animation-timing-function: ease-in; - } - 100% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -webkit-animation-timing-function: ease-in; - } -} -@-moz-keyframes flip { - 0% { - -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -moz-animation-timing-function: ease-out; - } - 40% { - -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -moz-animation-timing-function: ease-out; - } - 50% { - -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -moz-animation-timing-function: ease-in; - } - 80% { - -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -moz-animation-timing-function: ease-in; - } - 100% { - -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -moz-animation-timing-function: ease-in; - } -} -@-o-keyframes flip { - 0% { - -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -o-animation-timing-function: ease-out; - } - 40% { - -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -o-animation-timing-function: ease-out; - } - 50% { - -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -o-animation-timing-function: ease-in; - } - 80% { - -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -o-animation-timing-function: ease-in; - } - 100% { - -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -o-animation-timing-function: ease-in; - } -} -@keyframes flip { - 0% { - transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - animation-timing-function: ease-out; - } - 40% { - transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - animation-timing-function: ease-out; - } - 50% { - transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - animation-timing-function: ease-in; - } - 80% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - animation-timing-function: ease-in; - } - 100% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - animation-timing-function: ease-in; - } -} - -.animated.flip { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flip; - -moz-backface-visibility: visible !important; - -moz-animation-name: flip; - -o-backface-visibility: visible !important; - -o-animation-name: flip; - backface-visibility: visible !important; - animation-name: flip; -} - -@-webkit-keyframes flipInX { - 0% { - -webkit-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -webkit-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -webkit-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@-moz-keyframes flipInX { - 0% { - -moz-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -moz-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -moz-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -moz-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@-o-keyframes flipInX { - 0% { - -o-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -o-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -o-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -o-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@keyframes flipInX { - 0% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateX(-10deg); - } - - 70% { - transform: perspective(400px) rotateX(10deg); - } - - 100% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} - -.flipInX { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipInX; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipInX; - -o-backface-visibility: visible !important; - -o-animation-name: flipInX; - backface-visibility: visible !important; - animation-name: flipInX; -} -@-webkit-keyframes flipOutX { - 0% { - -webkit-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -webkit-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@-moz-keyframes flipOutX { - 0% { - -moz-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -moz-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@-o-keyframes flipOutX { - 0% { - -o-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -o-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@keyframes flipOutX { - 0% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -.flipOutX { - -webkit-animation-name: flipOutX; - -webkit-backface-visibility: visible !important; - -moz-animation-name: flipOutX; - -moz-backface-visibility: visible !important; - -o-animation-name: flipOutX; - -o-backface-visibility: visible !important; - animation-name: flipOutX; - backface-visibility: visible !important; -} -@-webkit-keyframes flipInY { - 0% { - -webkit-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -webkit-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -webkit-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@-moz-keyframes flipInY { - 0% { - -moz-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -moz-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -moz-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -moz-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@-o-keyframes flipInY { - 0% { - -o-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -o-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -o-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -o-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@keyframes flipInY { - 0% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateY(-10deg); - } - - 70% { - transform: perspective(400px) rotateY(10deg); - } - - 100% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} - -.flipInY { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipInY; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipInY; - -o-backface-visibility: visible !important; - -o-animation-name: flipInY; - backface-visibility: visible !important; - animation-name: flipInY; -} -@-webkit-keyframes flipOutY { - 0% { - -webkit-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -webkit-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@-moz-keyframes flipOutY { - 0% { - -moz-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -moz-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@-o-keyframes flipOutY { - 0% { - -o-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -o-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@keyframes flipOutY { - 0% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} - -.flipOutY { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipOutY; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipOutY; - -o-backface-visibility: visible !important; - -o-animation-name: flipOutY; - backface-visibility: visible !important; - animation-name: flipOutY; -} -@-webkit-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-moz-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-o-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -.fadeIn { - -webkit-animation-name: fadeIn; - -moz-animation-name: fadeIn; - -o-animation-name: fadeIn; - animation-name: fadeIn; -} -@-webkit-keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInUp { - 0% { - opacity: 0; - -moz-transform: translateY(20px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInUp { - 0% { - opacity: 0; - -o-transform: translateY(20px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInUp { - -webkit-animation-name: fadeInUp; - -moz-animation-name: fadeInUp; - -o-animation-name: fadeInUp; - animation-name: fadeInUp; -} -@-webkit-keyframes fadeInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInDown { - 0% { - opacity: 0; - -o-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInDown { - -webkit-animation-name: fadeInDown; - -moz-animation-name: fadeInDown; - -o-animation-name: fadeInDown; - animation-name: fadeInDown; -} -@-webkit-keyframes fadeInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} - -@keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(-20px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInLeft { - -webkit-animation-name: fadeInLeft; - -moz-animation-name: fadeInLeft; - -o-animation-name: fadeInLeft; - animation-name: fadeInLeft; -} -@-webkit-keyframes fadeInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInRight { - 0% { - opacity: 0; - -moz-transform: translateX(20px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInRight { - 0% { - opacity: 0; - -o-transform: translateX(20px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} - -@keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(20px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInRight { - -webkit-animation-name: fadeInRight; - -moz-animation-name: fadeInRight; - -o-animation-name: fadeInRight; - animation-name: fadeInRight; -} -@-webkit-keyframes fadeInUpBig { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInUpBig { - 0% { - opacity: 0; - -moz-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInUpBig { - 0% { - opacity: 0; - -o-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInUpBig { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInUpBig { - -webkit-animation-name: fadeInUpBig; - -moz-animation-name: fadeInUpBig; - -o-animation-name: fadeInUpBig; - animation-name: fadeInUpBig; -} -@-webkit-keyframes fadeInDownBig { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInDownBig { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInDownBig { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInDownBig { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInDownBig { - -webkit-animation-name: fadeInDownBig; - -moz-animation-name: fadeInDownBig; - -o-animation-name: fadeInDownBig; - animation-name: fadeInDownBig; -} -@-webkit-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} -@-moz-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} -@-o-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} -@keyframes fadeInLeftBig { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInLeftBig { - -webkit-animation-name: fadeInLeftBig; - -moz-animation-name: fadeInLeftBig; - -o-animation-name: fadeInLeftBig; - animation-name: fadeInLeftBig; -} -@-webkit-keyframes fadeInRightBig { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInRightBig { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInRightBig { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} - -@keyframes fadeInRightBig { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInRightBig { - -webkit-animation-name: fadeInRightBig; - -moz-animation-name: fadeInRightBig; - -o-animation-name: fadeInRightBig; - animation-name: fadeInRightBig; -} -@-webkit-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@-moz-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@-o-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -.fadeOut { - -webkit-animation-name: fadeOut; - -moz-animation-name: fadeOut; - -o-animation-name: fadeOut; - animation-name: fadeOut; -} -@-webkit-keyframes fadeOutUp { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-20px); - } -} -@-moz-keyframes fadeOutUp { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-20px); - } -} -@-o-keyframes fadeOutUp { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-20px); - } -} -@keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-20px); - } -} - -.fadeOutUp { - -webkit-animation-name: fadeOutUp; - -moz-animation-name: fadeOutUp; - -o-animation-name: fadeOutUp; - animation-name: fadeOutUp; -} -@-webkit-keyframes fadeOutDown { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(20px); - } -} - -@-moz-keyframes fadeOutDown { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(20px); - } -} - -@-o-keyframes fadeOutDown { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(20px); - } -} - -@keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(20px); - } -} - -.fadeOutDown { - -webkit-animation-name: fadeOutDown; - -moz-animation-name: fadeOutDown; - -o-animation-name: fadeOutDown; - animation-name: fadeOutDown; -} -@-webkit-keyframes fadeOutLeft { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-20px); - } -} - -@-moz-keyframes fadeOutLeft { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-20px); - } -} - -@-o-keyframes fadeOutLeft { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-20px); - } -} - -@keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-20px); - } -} - -.fadeOutLeft { - -webkit-animation-name: fadeOutLeft; - -moz-animation-name: fadeOutLeft; - -o-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; -} -@-webkit-keyframes fadeOutRight { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(20px); - } -} - -@-moz-keyframes fadeOutRight { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(20px); - } -} - -@-o-keyframes fadeOutRight { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(20px); - } -} - -@keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(20px); - } -} - -.fadeOutRight { - -webkit-animation-name: fadeOutRight; - -moz-animation-name: fadeOutRight; - -o-animation-name: fadeOutRight; - animation-name: fadeOutRight; -} -@-webkit-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes fadeOutUpBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; - -moz-animation-name: fadeOutUpBig; - -o-animation-name: fadeOutUpBig; - animation-name: fadeOutUpBig; -} -@-webkit-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - } -} - -@-moz-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(2000px); - } -} - -@-o-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(2000px); - } -} - -@keyframes fadeOutDownBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.fadeOutDownBig { - -webkit-animation-name: fadeOutDownBig; - -moz-animation-name: fadeOutDownBig; - -o-animation-name: fadeOutDownBig; - animation-name: fadeOutDownBig; -} -@-webkit-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes fadeOutLeftBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.fadeOutLeftBig { - -webkit-animation-name: fadeOutLeftBig; - -moz-animation-name: fadeOutLeftBig; - -o-animation-name: fadeOutLeftBig; - animation-name: fadeOutLeftBig; -} -@-webkit-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} -@-moz-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} -@-o-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} -@keyframes fadeOutRightBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.fadeOutRightBig { - -webkit-animation-name: fadeOutRightBig; - -moz-animation-name: fadeOutRightBig; - -o-animation-name: fadeOutRightBig; - animation-name: fadeOutRightBig; -} -@-webkit-keyframes slideInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 100% { - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes slideInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes slideInDown { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes slideInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - transform: translateY(0); - } -} - -.slideInDown { - -webkit-animation-name: slideInDown; - -moz-animation-name: slideInDown; - -o-animation-name: slideInDown; - animation-name: slideInDown; -} -@-webkit-keyframes slideInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes slideInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes slideInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes slideInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInLeft { - -webkit-animation-name: slideInLeft; - -moz-animation-name: slideInLeft; - -o-animation-name: slideInLeft; - animation-name: slideInLeft; -} -@-webkit-keyframes slideInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes slideInRight { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes slideInRight { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes slideInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInRight { - -webkit-animation-name: slideInRight; - -moz-animation-name: slideInRight; - -o-animation-name: slideInRight; - animation-name: slideInRight; -} -@-webkit-keyframes slideOutUp { - 0% { - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes slideOutUp { - 0% { - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes slideOutUp { - 0% { - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes slideOutUp { - 0% { - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.slideOutUp { - -webkit-animation-name: slideOutUp; - -moz-animation-name: slideOutUp; - -o-animation-name: slideOutUp; - animation-name: slideOutUp; -} -@-webkit-keyframes slideOutLeft { - 0% { - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes slideOutLeft { - 0% { - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes slideOutLeft { - 0% { - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes slideOutLeft { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.slideOutLeft { - -webkit-animation-name: slideOutLeft; - -moz-animation-name: slideOutLeft; - -o-animation-name: slideOutLeft; - animation-name: slideOutLeft; -} -@-webkit-keyframes slideOutRight { - 0% { - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} - -@-moz-keyframes slideOutRight { - 0% { - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} - -@-o-keyframes slideOutRight { - 0% { - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} - -@keyframes slideOutRight { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.slideOutRight { - -webkit-animation-name: slideOutRight; - -moz-animation-name: slideOutRight; - -o-animation-name: slideOutRight; - animation-name: slideOutRight; -} -@-webkit-keyframes bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.3); - } - - 50% { - opacity: 1; - -webkit-transform: scale(1.05); - } - - 70% { - -webkit-transform: scale(.9); - } - - 100% { - -webkit-transform: scale(1); - } -} - -@-moz-keyframes bounceIn { - 0% { - opacity: 0; - -moz-transform: scale(.3); - } - - 50% { - opacity: 1; - -moz-transform: scale(1.05); - } - - 70% { - -moz-transform: scale(.9); - } - - 100% { - -moz-transform: scale(1); - } -} - -@-o-keyframes bounceIn { - 0% { - opacity: 0; - -o-transform: scale(.3); - } - - 50% { - opacity: 1; - -o-transform: scale(1.05); - } - - 70% { - -o-transform: scale(.9); - } - - 100% { - -o-transform: scale(1); - } -} - -@keyframes bounceIn { - 0% { - opacity: 0; - transform: scale(.3); - } - - 50% { - opacity: 1; - transform: scale(1.05); - } - - 70% { - transform: scale(.9); - } - - 100% { - transform: scale(1); - } -} - -.bounceIn { - -webkit-animation-name: bounceIn; - -moz-animation-name: bounceIn; - -o-animation-name: bounceIn; - animation-name: bounceIn; -} -@-webkit-keyframes bounceInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateY(-30px); - } - - 80% { - -webkit-transform: translateY(10px); - } - - 100% { - -webkit-transform: translateY(0); - } -} -@-moz-keyframes bounceInUp { - 0% { - opacity: 0; - -moz-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateY(-30px); - } - - 80% { - -moz-transform: translateY(10px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes bounceInUp { - 0% { - opacity: 0; - -o-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -o-transform: translateY(-30px); - } - - 80% { - -o-transform: translateY(10px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes bounceInUp { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 60% { - opacity: 1; - transform: translateY(-30px); - } - - 80% { - transform: translateY(10px); - } - - 100% { - transform: translateY(0); - } -} - -.bounceInUp { - -webkit-animation-name: bounceInUp; - -moz-animation-name: bounceInUp; - -o-animation-name: bounceInUp; - animation-name: bounceInUp; -} -@-webkit-keyframes bounceInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateY(30px); - } - - 80% { - -webkit-transform: translateY(-10px); - } - - 100% { - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes bounceInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateY(30px); - } - - 80% { - -moz-transform: translateY(-10px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes bounceInDown { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -o-transform: translateY(30px); - } - - 80% { - -o-transform: translateY(-10px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes bounceInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 60% { - opacity: 1; - transform: translateY(30px); - } - - 80% { - transform: translateY(-10px); - } - - 100% { - transform: translateY(0); - } -} - -.bounceInDown { - -webkit-animation-name: bounceInDown; - -moz-animation-name: bounceInDown; - -o-animation-name: bounceInDown; - animation-name: bounceInDown; -} -@-webkit-keyframes bounceInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - } - - 80% { - -webkit-transform: translateX(-10px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes bounceInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateX(30px); - } - - 80% { - -moz-transform: translateX(-10px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes bounceInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -o-transform: translateX(30px); - } - - 80% { - -o-transform: translateX(-10px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes bounceInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 60% { - opacity: 1; - transform: translateX(30px); - } - - 80% { - transform: translateX(-10px); - } - - 100% { - transform: translateX(0); - } -} - -.bounceInLeft { - -webkit-animation-name: bounceInLeft; - -moz-animation-name: bounceInLeft; - -o-animation-name: bounceInLeft; - animation-name: bounceInLeft; -} -@-webkit-keyframes bounceInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateX(-30px); - } - - 80% { - -webkit-transform: translateX(10px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes bounceInRight { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateX(-30px); - } - - 80% { - -moz-transform: translateX(10px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes bounceInRight { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -o-transform: translateX(-30px); - } - - 80% { - -o-transform: translateX(10px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes bounceInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 60% { - opacity: 1; - transform: translateX(-30px); - } - - 80% { - transform: translateX(10px); - } - - 100% { - transform: translateX(0); - } -} - -.bounceInRight { - -webkit-animation-name: bounceInRight; - -moz-animation-name: bounceInRight; - -o-animation-name: bounceInRight; - animation-name: bounceInRight; -} -@-webkit-keyframes bounceOut { - 0% { - -webkit-transform: scale(1); - } - - 25% { - -webkit-transform: scale(.95); - } - - 50% { - opacity: 1; - -webkit-transform: scale(1.1); - } - - 100% { - opacity: 0; - -webkit-transform: scale(.3); - } -} - -@-moz-keyframes bounceOut { - 0% { - -moz-transform: scale(1); - } - - 25% { - -moz-transform: scale(.95); - } - - 50% { - opacity: 1; - -moz-transform: scale(1.1); - } - - 100% { - opacity: 0; - -moz-transform: scale(.3); - } -} - -@-o-keyframes bounceOut { - 0% { - -o-transform: scale(1); - } - - 25% { - -o-transform: scale(.95); - } - - 50% { - opacity: 1; - -o-transform: scale(1.1); - } - - 100% { - opacity: 0; - -o-transform: scale(.3); - } -} - -@keyframes bounceOut { - 0% { - transform: scale(1); - } - - 25% { - transform: scale(.95); - } - - 50% { - opacity: 1; - transform: scale(1.1); - } - - 100% { - opacity: 0; - transform: scale(.3); - } -} - -.bounceOut { - -webkit-animation-name: bounceOut; - -moz-animation-name: bounceOut; - -o-animation-name: bounceOut; - animation-name: bounceOut; -} -@-webkit-keyframes bounceOutUp { - 0% { - -webkit-transform: translateY(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateY(20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes bounceOutUp { - 0% { - -moz-transform: translateY(0); - } - - 20% { - opacity: 1; - -moz-transform: translateY(20px); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes bounceOutUp { - 0% { - -o-transform: translateY(0); - } - - 20% { - opacity: 1; - -o-transform: translateY(20px); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes bounceOutUp { - 0% { - transform: translateY(0); - } - - 20% { - opacity: 1; - transform: translateY(20px); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.bounceOutUp { - -webkit-animation-name: bounceOutUp; - -moz-animation-name: bounceOutUp; - -o-animation-name: bounceOutUp; - animation-name: bounceOutUp; -} -@-webkit-keyframes bounceOutDown { - 0% { - -webkit-transform: translateY(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - } -} - -@-moz-keyframes bounceOutDown { - 0% { - -moz-transform: translateY(0); - } - - 20% { - opacity: 1; - -moz-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -moz-transform: translateY(2000px); - } -} - -@-o-keyframes bounceOutDown { - 0% { - -o-transform: translateY(0); - } - - 20% { - opacity: 1; - -o-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -o-transform: translateY(2000px); - } -} - -@keyframes bounceOutDown { - 0% { - transform: translateY(0); - } - - 20% { - opacity: 1; - transform: translateY(-20px); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.bounceOutDown { - -webkit-animation-name: bounceOutDown; - -moz-animation-name: bounceOutDown; - -o-animation-name: bounceOutDown; - animation-name: bounceOutDown; -} -@-webkit-keyframes bounceOutLeft { - 0% { - -webkit-transform: translateX(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateX(20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes bounceOutLeft { - 0% { - -moz-transform: translateX(0); - } - - 20% { - opacity: 1; - -moz-transform: translateX(20px); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes bounceOutLeft { - 0% { - -o-transform: translateX(0); - } - - 20% { - opacity: 1; - -o-transform: translateX(20px); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes bounceOutLeft { - 0% { - transform: translateX(0); - } - - 20% { - opacity: 1; - transform: translateX(20px); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.bounceOutLeft { - -webkit-animation-name: bounceOutLeft; - -moz-animation-name: bounceOutLeft; - -o-animation-name: bounceOutLeft; - animation-name: bounceOutLeft; -} -@-webkit-keyframes bounceOutRight { - 0% { - -webkit-transform: translateX(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} - -@-moz-keyframes bounceOutRight { - 0% { - -moz-transform: translateX(0); - } - - 20% { - opacity: 1; - -moz-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} - -@-o-keyframes bounceOutRight { - 0% { - -o-transform: translateX(0); - } - - 20% { - opacity: 1; - -o-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} - -@keyframes bounceOutRight { - 0% { - transform: translateX(0); - } - - 20% { - opacity: 1; - transform: translateX(-20px); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.bounceOutRight { - -webkit-animation-name: bounceOutRight; - -moz-animation-name: bounceOutRight; - -o-animation-name: bounceOutRight; - animation-name: bounceOutRight; -} -@-webkit-keyframes rotateIn { - 0% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(0); - opacity: 1; - } -} -@-moz-keyframes rotateIn { - 0% { - -moz-transform-origin: center center; - -moz-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: center center; - -moz-transform: rotate(0); - opacity: 1; - } -} -@-o-keyframes rotateIn { - 0% { - -o-transform-origin: center center; - -o-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -o-transform-origin: center center; - -o-transform: rotate(0); - opacity: 1; - } -} -@keyframes rotateIn { - 0% { - transform-origin: center center; - transform: rotate(-200deg); - opacity: 0; - } - - 100% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } -} - -.rotateIn { - -webkit-animation-name: rotateIn; - -moz-animation-name: rotateIn; - -o-animation-name: rotateIn; - animation-name: rotateIn; -} -@-webkit-keyframes rotateInUpLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInUpLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInUpLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; - -moz-animation-name: rotateInUpLeft; - -o-animation-name: rotateInUpLeft; - animation-name: rotateInUpLeft; -} -@-webkit-keyframes rotateInDownLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInDownLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInDownLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; - -moz-animation-name: rotateInDownLeft; - -o-animation-name: rotateInDownLeft; - animation-name: rotateInDownLeft; -} -@-webkit-keyframes rotateInUpRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInUpRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInUpRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInUpRight { - -webkit-animation-name: rotateInUpRight; - -moz-animation-name: rotateInUpRight; - -o-animation-name: rotateInUpRight; - animation-name: rotateInUpRight; -} -@-webkit-keyframes rotateInDownRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInDownRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInDownRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInDownRight { - -webkit-animation-name: rotateInDownRight; - -moz-animation-name: rotateInDownRight; - -o-animation-name: rotateInDownRight; - animation-name: rotateInDownRight; -} -@-webkit-keyframes rotateOut { - 0% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(200deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOut { - 0% { - -moz-transform-origin: center center; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: center center; - -moz-transform: rotate(200deg); - opacity: 0; - } -} - -@-o-keyframes rotateOut { - 0% { - -o-transform-origin: center center; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: center center; - -o-transform: rotate(200deg); - opacity: 0; - } -} - -@keyframes rotateOut { - 0% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: center center; - transform: rotate(200deg); - opacity: 0; - } -} - -.rotateOut { - -webkit-animation-name: rotateOut; - -moz-animation-name: rotateOut; - -o-animation-name: rotateOut; - animation-name: rotateOut; -} -@-webkit-keyframes rotateOutUpLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutUpLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutUpLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } -} - -@keyframes rotateOutUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - -transform-origin: left bottom; - -transform: rotate(-90deg); - opacity: 0; - } -} - -.rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; - -moz-animation-name: rotateOutUpLeft; - -o-animation-name: rotateOutUpLeft; - animation-name: rotateOutUpLeft; -} -@-webkit-keyframes rotateOutDownLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutDownLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutDownLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(90deg); - opacity: 0; - } -} - -@keyframes rotateOutDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; - -moz-animation-name: rotateOutDownLeft; - -o-animation-name: rotateOutDownLeft; - animation-name: rotateOutDownLeft; -} -@-webkit-keyframes rotateOutUpRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutUpRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutUpRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(90deg); - opacity: 0; - } -} - -@keyframes rotateOutUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; - -moz-animation-name: rotateOutUpRight; - -o-animation-name: rotateOutUpRight; - animation-name: rotateOutUpRight; -} -@-webkit-keyframes rotateOutDownRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutDownRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutDownRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } -} - -@keyframes rotateOutDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } -} - -.rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; - -moz-animation-name: rotateOutDownRight; - -o-animation-name: rotateOutDownRight; - animation-name: rotateOutDownRight; -} -@-webkit-keyframes lightSpeedIn { - 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -@-moz-keyframes lightSpeedIn { - 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -@-o-keyframes lightSpeedIn { - 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -@keyframes lightSpeedIn { - 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -.lightSpeedIn { - -webkit-animation-name: lightSpeedIn; - -moz-animation-name: lightSpeedIn; - -o-animation-name: lightSpeedIn; - animation-name: lightSpeedIn; - - -webkit-animation-timing-function: ease-out; - -moz-animation-timing-function: ease-out; - -o-animation-timing-function: ease-out; - animation-timing-function: ease-out; -} -@-webkit-keyframes lightSpeedOut { - 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -@-moz-keyframes lightSpeedOut { - 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -@-o-keyframes lightSpeedOut { - 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -@keyframes lightSpeedOut { - 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -.lightSpeedOut { - -webkit-animation-name: lightSpeedOut; - -moz-animation-name: lightSpeedOut; - -o-animation-name: lightSpeedOut; - animation-name: lightSpeedOut; - - -webkit-animation-timing-function: ease-in; - -moz-animation-timing-function: ease-in; - -o-animation-timing-function: ease-in; - animation-timing-function: ease-in; -} -@-webkit-keyframes hinge { - 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 100% { -webkit-transform: translateY(700px); opacity: 0; } -} - -@-moz-keyframes hinge { - 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 100% { -moz-transform: translateY(700px); opacity: 0; } -} - -@-o-keyframes hinge { - 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 100% { -o-transform: translateY(700px); opacity: 0; } -} - -@keyframes hinge { - 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } - 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } - 100% { transform: translateY(700px); opacity: 0; } -} - -.hinge { - -webkit-animation-name: hinge; - -moz-animation-name: hinge; - -o-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); } - 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } -} - -@-moz-keyframes rollIn { - 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } -} - -@-o-keyframes rollIn { - 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } -} - -@keyframes rollIn { - 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } -} - -.rollIn { - -webkit-animation-name: rollIn; - -moz-animation-name: rollIn; - -o-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); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(100%) rotate(120deg); - } -} - -@-moz-keyframes rollOut { - 0% { - opacity: 1; - -moz-transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - -moz-transform: translateX(100%) rotate(120deg); - } -} - -@-o-keyframes rollOut { - 0% { - opacity: 1; - -o-transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - -o-transform: translateX(100%) rotate(120deg); - } -} - -@keyframes rollOut { - 0% { - opacity: 1; - transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - transform: translateX(100%) rotate(120deg); - } -} - -.rollOut { - -webkit-animation-name: rollOut; - -moz-animation-name: rollOut; - -o-animation-name: rollOut; - animation-name: rollOut; -} +.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes flash { + 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} +} + +@-moz-keyframes flash { + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} +} + +@-o-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; + -moz-animation-name: flash; + -o-animation-name: flash; + animation-name: flash; +} +@-webkit-keyframes shake { + 0%, 100% {-webkit-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} +} + +@-moz-keyframes shake { + 0%, 100% {-moz-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} +} + +@-o-keyframes shake { + 0%, 100% {-o-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} +} + +@keyframes shake { + 0%, 100% {transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} + 20%, 40%, 60%, 80% {transform: translateX(10px);} +} + +.shake { + -webkit-animation-name: shake; + -moz-animation-name: shake; + -o-animation-name: shake; + animation-name: shake; +} +@-webkit-keyframes bounce { + 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} + 40% {-webkit-transform: translateY(-30px);} + 60% {-webkit-transform: translateY(-15px);} +} + +@-moz-keyframes bounce { + 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} + 40% {-moz-transform: translateY(-30px);} + 60% {-moz-transform: translateY(-15px);} +} + +@-o-keyframes bounce { + 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} + 40% {-o-transform: translateY(-30px);} + 60% {-o-transform: translateY(-15px);} +} +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} + 40% {transform: translateY(-30px);} + 60% {transform: translateY(-15px);} +} + +.bounce { + -webkit-animation-name: bounce; + -moz-animation-name: bounce; + -o-animation-name: bounce; + animation-name: bounce; +} +@-webkit-keyframes tada { + 0% {-webkit-transform: scale(1);} + 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} + 100% {-webkit-transform: scale(1) rotate(0);} +} + +@-moz-keyframes tada { + 0% {-moz-transform: scale(1);} + 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} + 100% {-moz-transform: scale(1) rotate(0);} +} + +@-o-keyframes tada { + 0% {-o-transform: scale(1);} + 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} + 100% {-o-transform: scale(1) rotate(0);} +} + +@keyframes tada { + 0% {transform: scale(1);} + 10%, 20% {transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} + 100% {transform: scale(1) rotate(0);} +} + +.tada { + -webkit-animation-name: tada; + -moz-animation-name: tada; + -o-animation-name: tada; + animation-name: tada; +} +@-webkit-keyframes swing { + 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } + 20% { -webkit-transform: rotate(15deg); } + 40% { -webkit-transform: rotate(-10deg); } + 60% { -webkit-transform: rotate(5deg); } + 80% { -webkit-transform: rotate(-5deg); } + 100% { -webkit-transform: rotate(0deg); } +} + +@-moz-keyframes swing { + 20% { -moz-transform: rotate(15deg); } + 40% { -moz-transform: rotate(-10deg); } + 60% { -moz-transform: rotate(5deg); } + 80% { -moz-transform: rotate(-5deg); } + 100% { -moz-transform: rotate(0deg); } +} + +@-o-keyframes swing { + 20% { -o-transform: rotate(15deg); } + 40% { -o-transform: rotate(-10deg); } + 60% { -o-transform: rotate(5deg); } + 80% { -o-transform: rotate(-5deg); } + 100% { -o-transform: rotate(0deg); } +} + +@keyframes swing { + 20% { transform: rotate(15deg); } + 40% { transform: rotate(-10deg); } + 60% { transform: rotate(5deg); } + 80% { transform: rotate(-5deg); } + 100% { transform: rotate(0deg); } +} + +.swing { + -webkit-transform-origin: top center; + -moz-transform-origin: top center; + -o-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + -moz-animation-name: swing; + -o-animation-name: swing; + animation-name: swing; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes wobble { + 0% { -webkit-transform: translateX(0%); } + 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } + 30% { -webkit-transform: translateX(20%) rotate(3deg); } + 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } + 60% { -webkit-transform: translateX(10%) rotate(2deg); } + 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } + 100% { -webkit-transform: translateX(0%); } +} + +@-moz-keyframes wobble { + 0% { -moz-transform: translateX(0%); } + 15% { -moz-transform: translateX(-25%) rotate(-5deg); } + 30% { -moz-transform: translateX(20%) rotate(3deg); } + 45% { -moz-transform: translateX(-15%) rotate(-3deg); } + 60% { -moz-transform: translateX(10%) rotate(2deg); } + 75% { -moz-transform: translateX(-5%) rotate(-1deg); } + 100% { -moz-transform: translateX(0%); } +} + +@-o-keyframes wobble { + 0% { -o-transform: translateX(0%); } + 15% { -o-transform: translateX(-25%) rotate(-5deg); } + 30% { -o-transform: translateX(20%) rotate(3deg); } + 45% { -o-transform: translateX(-15%) rotate(-3deg); } + 60% { -o-transform: translateX(10%) rotate(2deg); } + 75% { -o-transform: translateX(-5%) rotate(-1deg); } + 100% { -o-transform: translateX(0%); } +} + +@keyframes wobble { + 0% { transform: translateX(0%); } + 15% { transform: translateX(-25%) rotate(-5deg); } + 30% { transform: translateX(20%) rotate(3deg); } + 45% { transform: translateX(-15%) rotate(-3deg); } + 60% { transform: translateX(10%) rotate(2deg); } + 75% { transform: translateX(-5%) rotate(-1deg); } + 100% { transform: translateX(0%); } +} + +.wobble { + -webkit-animation-name: wobble; + -moz-animation-name: wobble; + -o-animation-name: wobble; + animation-name: wobble; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes pulse { + 0% { -webkit-transform: scale(1); } + 50% { -webkit-transform: scale(1.1); } + 100% { -webkit-transform: scale(1); } +} +@-moz-keyframes pulse { + 0% { -moz-transform: scale(1); } + 50% { -moz-transform: scale(1.1); } + 100% { -moz-transform: scale(1); } +} +@-o-keyframes pulse { + 0% { -o-transform: scale(1); } + 50% { -o-transform: scale(1.1); } + 100% { -o-transform: scale(1); } +} +@keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +.pulse { + -webkit-animation-name: pulse; + -moz-animation-name: pulse; + -o-animation-name: pulse; + animation-name: pulse; +} +@-webkit-keyframes flip { + 0% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -webkit-animation-timing-function: ease-out; + } + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -webkit-animation-timing-function: ease-out; + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + } + 80% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + } + 100% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -webkit-animation-timing-function: ease-in; + } +} +@-moz-keyframes flip { + 0% { + -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -moz-animation-timing-function: ease-out; + } + 40% { + -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -moz-animation-timing-function: ease-out; + } + 50% { + -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -moz-animation-timing-function: ease-in; + } + 80% { + -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -moz-animation-timing-function: ease-in; + } + 100% { + -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -moz-animation-timing-function: ease-in; + } +} +@-o-keyframes flip { + 0% { + -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -o-animation-timing-function: ease-out; + } + 40% { + -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -o-animation-timing-function: ease-out; + } + 50% { + -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -o-animation-timing-function: ease-in; + } + 80% { + -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -o-animation-timing-function: ease-in; + } + 100% { + -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -o-animation-timing-function: ease-in; + } +} +@keyframes flip { + 0% { + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + animation-timing-function: ease-out; + } + 40% { + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + animation-timing-function: ease-out; + } + 50% { + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + animation-timing-function: ease-in; + } + 80% { + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + animation-timing-function: ease-in; + } + 100% { + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + animation-timing-function: ease-in; + } +} + +.animated.flip { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flip; + -moz-backface-visibility: visible !important; + -moz-animation-name: flip; + -o-backface-visibility: visible !important; + -o-animation-name: flip; + backface-visibility: visible !important; + animation-name: flip; +} + +@-webkit-keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +@-moz-keyframes flipInX { + 0% { + -moz-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -moz-transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -moz-transform: perspective(400px) rotateX(10deg); + } + + 100% { + -moz-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +@-o-keyframes flipInX { + 0% { + -o-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -o-transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -o-transform: perspective(400px) rotateX(10deg); + } + + 100% { + -o-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} +@keyframes flipInX { + 0% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + transform: perspective(400px) rotateX(-10deg); + } + + 70% { + transform: perspective(400px) rotateX(10deg); + } + + 100% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flipInX; + -moz-backface-visibility: visible !important; + -moz-animation-name: flipInX; + -o-backface-visibility: visible !important; + -o-animation-name: flipInX; + backface-visibility: visible !important; + animation-name: flipInX; +} +@-webkit-keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@-moz-keyframes flipOutX { + 0% { + -moz-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -moz-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@-o-keyframes flipOutX { + 0% { + -o-transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + -o-transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@keyframes flipOutX { + 0% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +.flipOutX { + -webkit-animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + -moz-animation-name: flipOutX; + -moz-backface-visibility: visible !important; + -o-animation-name: flipOutX; + -o-backface-visibility: visible !important; + animation-name: flipOutX; + backface-visibility: visible !important; +} +@-webkit-keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +@-moz-keyframes flipInY { + 0% { + -moz-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -moz-transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -moz-transform: perspective(400px) rotateY(10deg); + } + + 100% { + -moz-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +@-o-keyframes flipInY { + 0% { + -o-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -o-transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -o-transform: perspective(400px) rotateY(10deg); + } + + 100% { + -o-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} +@keyframes flipInY { + 0% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + transform: perspective(400px) rotateY(-10deg); + } + + 70% { + transform: perspective(400px) rotateY(10deg); + } + + 100% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flipInY; + -moz-backface-visibility: visible !important; + -moz-animation-name: flipInY; + -o-backface-visibility: visible !important; + -o-animation-name: flipInY; + backface-visibility: visible !important; + animation-name: flipInY; +} +@-webkit-keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +@-moz-keyframes flipOutY { + 0% { + -moz-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -moz-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +@-o-keyframes flipOutY { + 0% { + -o-transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + -o-transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +@keyframes flipOutY { + 0% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + -moz-backface-visibility: visible !important; + -moz-animation-name: flipOutY; + -o-backface-visibility: visible !important; + -o-animation-name: flipOutY; + backface-visibility: visible !important; + animation-name: flipOutY; +} +@-webkit-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@-moz-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@-o-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +@keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +.fadeIn { + -webkit-animation-name: fadeIn; + -moz-animation-name: fadeIn; + -o-animation-name: fadeIn; + animation-name: fadeIn; +} +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInUp { + 0% { + opacity: 0; + -moz-transform: translateY(20px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInUp { + 0% { + opacity: 0; + -o-transform: translateY(20px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInUp { + -webkit-animation-name: fadeInUp; + -moz-animation-name: fadeInUp; + -o-animation-name: fadeInUp; + animation-name: fadeInUp; +} +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + -moz-animation-name: fadeInDown; + -o-animation-name: fadeInDown; + animation-name: fadeInDown; +} +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInLeft { + 0% { + opacity: 0; + -o-transform: translateX(-20px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(-20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + -moz-animation-name: fadeInLeft; + -o-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInRight { + 0% { + opacity: 0; + -moz-transform: translateX(20px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInRight { + 0% { + opacity: 0; + -o-transform: translateX(20px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInRight { + -webkit-animation-name: fadeInRight; + -moz-animation-name: fadeInRight; + -o-animation-name: fadeInRight; + animation-name: fadeInRight; +} +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInUpBig { + 0% { + opacity: 0; + -moz-transform: translateY(2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInUpBig { + 0% { + opacity: 0; + -o-transform: translateY(2000px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInUpBig { + 0% { + opacity: 0; + transform: translateY(2000px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + -moz-animation-name: fadeInUpBig; + -o-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInDownBig { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInDownBig { + 0% { + opacity: 0; + -o-transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInDownBig { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + -moz-animation-name: fadeInDownBig; + -o-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} +@-moz-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -moz-transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} +@-o-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -o-transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + -moz-animation-name: fadeInLeftBig; + -o-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes fadeInRightBig { + 0% { + opacity: 0; + -moz-transform: translateX(2000px); + } + + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-o-keyframes fadeInRightBig { + 0% { + opacity: 0; + -o-transform: translateX(2000px); + } + + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} + +@keyframes fadeInRightBig { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + -moz-animation-name: fadeInRightBig; + -o-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} +@-webkit-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +@-moz-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +@-o-keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +@keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +.fadeOut { + -webkit-animation-name: fadeOut; + -moz-animation-name: fadeOut; + -o-animation-name: fadeOut; + animation-name: fadeOut; +} +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + } +} +@-moz-keyframes fadeOutUp { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(-20px); + } +} +@-o-keyframes fadeOutUp { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(-20px); + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-20px); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + -moz-animation-name: fadeOutUp; + -o-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + } +} + +@-moz-keyframes fadeOutDown { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(20px); + } +} + +@-o-keyframes fadeOutDown { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(20px); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(20px); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + -moz-animation-name: fadeOutDown; + -o-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + } +} + +@-moz-keyframes fadeOutLeft { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(-20px); + } +} + +@-o-keyframes fadeOutLeft { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(-20px); + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-20px); + } +} + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + -moz-animation-name: fadeOutLeft; + -o-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + } +} + +@-moz-keyframes fadeOutRight { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(20px); + } +} + +@-o-keyframes fadeOutRight { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(20px); + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(20px); + } +} + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + -moz-animation-name: fadeOutRight; + -o-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } +} + +@-moz-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(-2000px); + } +} + +@-o-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(-2000px); + } +} + +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + -moz-animation-name: fadeOutUpBig; + -o-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + } +} + +@-moz-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(2000px); + } +} + +@-o-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(2000px); + } +} + +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(2000px); + } +} + +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + -moz-animation-name: fadeOutDownBig; + -o-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } +} + +@-moz-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(-2000px); + } +} + +@-o-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(-2000px); + } +} + +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + -moz-animation-name: fadeOutLeftBig; + -o-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + } +} +@-moz-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(2000px); + } +} +@-o-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(2000px); + } +} +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + -moz-animation-name: fadeOutRightBig; + -o-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} +@-webkit-keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + + 100% { + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes slideInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + + 100% { + -moz-transform: translateY(0); + } +} + +@-o-keyframes slideInDown { + 0% { + opacity: 0; + -o-transform: translateY(-2000px); + } + + 100% { + -o-transform: translateY(0); + } +} + +@keyframes slideInDown { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 100% { + transform: translateY(0); + } +} + +.slideInDown { + -webkit-animation-name: slideInDown; + -moz-animation-name: slideInDown; + -o-animation-name: slideInDown; + animation-name: slideInDown; +} +@-webkit-keyframes slideInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } + + 100% { + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes slideInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(-2000px); + } + + 100% { + -moz-transform: translateX(0); + } +} + +@-o-keyframes slideInLeft { + 0% { + opacity: 0; + -o-transform: translateX(-2000px); + } + + 100% { + -o-transform: translateX(0); + } +} + +@keyframes slideInLeft { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 100% { + transform: translateX(0); + } +} + +.slideInLeft { + -webkit-animation-name: slideInLeft; + -moz-animation-name: slideInLeft; + -o-animation-name: slideInLeft; + animation-name: slideInLeft; +} +@-webkit-keyframes slideInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + } + + 100% { + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes slideInRight { + 0% { + opacity: 0; + -moz-transform: translateX(2000px); + } + + 100% { + -moz-transform: translateX(0); + } +} + +@-o-keyframes slideInRight { + 0% { + opacity: 0; + -o-transform: translateX(2000px); + } + + 100% { + -o-transform: translateX(0); + } +} + +@keyframes slideInRight { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 100% { + transform: translateX(0); + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + -moz-animation-name: slideInRight; + -o-animation-name: slideInRight; + animation-name: slideInRight; +} +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } +} + +@-moz-keyframes slideOutUp { + 0% { + -moz-transform: translateY(0); + } + + 100% { + opacity: 0; + -moz-transform: translateY(-2000px); + } +} + +@-o-keyframes slideOutUp { + 0% { + -o-transform: translateY(0); + } + + 100% { + opacity: 0; + -o-transform: translateY(-2000px); + } +} + +@keyframes slideOutUp { + 0% { + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.slideOutUp { + -webkit-animation-name: slideOutUp; + -moz-animation-name: slideOutUp; + -o-animation-name: slideOutUp; + animation-name: slideOutUp; +} +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } +} + +@-moz-keyframes slideOutLeft { + 0% { + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(-2000px); + } +} + +@-o-keyframes slideOutLeft { + 0% { + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(-2000px); + } +} + +@keyframes slideOutLeft { + 0% { + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + -moz-animation-name: slideOutLeft; + -o-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + } +} + +@-moz-keyframes slideOutRight { + 0% { + -moz-transform: translateX(0); + } + + 100% { + opacity: 0; + -moz-transform: translateX(2000px); + } +} + +@-o-keyframes slideOutRight { + 0% { + -o-transform: translateX(0); + } + + 100% { + opacity: 0; + -o-transform: translateX(2000px); + } +} + +@keyframes slideOutRight { + 0% { + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + -moz-animation-name: slideOutRight; + -o-animation-name: slideOutRight; + animation-name: slideOutRight; +} +@-webkit-keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.3); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + } + + 70% { + -webkit-transform: scale(.9); + } + + 100% { + -webkit-transform: scale(1); + } +} + +@-moz-keyframes bounceIn { + 0% { + opacity: 0; + -moz-transform: scale(.3); + } + + 50% { + opacity: 1; + -moz-transform: scale(1.05); + } + + 70% { + -moz-transform: scale(.9); + } + + 100% { + -moz-transform: scale(1); + } +} + +@-o-keyframes bounceIn { + 0% { + opacity: 0; + -o-transform: scale(.3); + } + + 50% { + opacity: 1; + -o-transform: scale(1.05); + } + + 70% { + -o-transform: scale(.9); + } + + 100% { + -o-transform: scale(1); + } +} + +@keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(.3); + } + + 50% { + opacity: 1; + transform: scale(1.05); + } + + 70% { + transform: scale(.9); + } + + 100% { + transform: scale(1); + } +} + +.bounceIn { + -webkit-animation-name: bounceIn; + -moz-animation-name: bounceIn; + -o-animation-name: bounceIn; + animation-name: bounceIn; +} +@-webkit-keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + } + + 80% { + -webkit-transform: translateY(10px); + } + + 100% { + -webkit-transform: translateY(0); + } +} +@-moz-keyframes bounceInUp { + 0% { + opacity: 0; + -moz-transform: translateY(2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateY(-30px); + } + + 80% { + -moz-transform: translateY(10px); + } + + 100% { + -moz-transform: translateY(0); + } +} + +@-o-keyframes bounceInUp { + 0% { + opacity: 0; + -o-transform: translateY(2000px); + } + + 60% { + opacity: 1; + -o-transform: translateY(-30px); + } + + 80% { + -o-transform: translateY(10px); + } + + 100% { + -o-transform: translateY(0); + } +} + +@keyframes bounceInUp { + 0% { + opacity: 0; + transform: translateY(2000px); + } + + 60% { + opacity: 1; + transform: translateY(-30px); + } + + 80% { + transform: translateY(10px); + } + + 100% { + transform: translateY(0); + } +} + +.bounceInUp { + -webkit-animation-name: bounceInUp; + -moz-animation-name: bounceInUp; + -o-animation-name: bounceInUp; + animation-name: bounceInUp; +} +@-webkit-keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + } + + 80% { + -webkit-transform: translateY(-10px); + } + + 100% { + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes bounceInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateY(30px); + } + + 80% { + -moz-transform: translateY(-10px); + } + + 100% { + -moz-transform: translateY(0); + } +} + +@-o-keyframes bounceInDown { + 0% { + opacity: 0; + -o-transform: translateY(-2000px); + } + + 60% { + opacity: 1; + -o-transform: translateY(30px); + } + + 80% { + -o-transform: translateY(-10px); + } + + 100% { + -o-transform: translateY(0); + } +} + +@keyframes bounceInDown { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 60% { + opacity: 1; + transform: translateY(30px); + } + + 80% { + transform: translateY(-10px); + } + + 100% { + transform: translateY(0); + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + -moz-animation-name: bounceInDown; + -o-animation-name: bounceInDown; + animation-name: bounceInDown; +} +@-webkit-keyframes bounceInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + } + + 80% { + -webkit-transform: translateX(-10px); + } + + 100% { + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes bounceInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateX(30px); + } + + 80% { + -moz-transform: translateX(-10px); + } + + 100% { + -moz-transform: translateX(0); + } +} + +@-o-keyframes bounceInLeft { + 0% { + opacity: 0; + -o-transform: translateX(-2000px); + } + + 60% { + opacity: 1; + -o-transform: translateX(30px); + } + + 80% { + -o-transform: translateX(-10px); + } + + 100% { + -o-transform: translateX(0); + } +} + +@keyframes bounceInLeft { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 60% { + opacity: 1; + transform: translateX(30px); + } + + 80% { + transform: translateX(-10px); + } + + 100% { + transform: translateX(0); + } +} + +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + -moz-animation-name: bounceInLeft; + -o-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} +@-webkit-keyframes bounceInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + } + + 80% { + -webkit-transform: translateX(10px); + } + + 100% { + -webkit-transform: translateX(0); + } +} + +@-moz-keyframes bounceInRight { + 0% { + opacity: 0; + -moz-transform: translateX(2000px); + } + + 60% { + opacity: 1; + -moz-transform: translateX(-30px); + } + + 80% { + -moz-transform: translateX(10px); + } + + 100% { + -moz-transform: translateX(0); + } +} + +@-o-keyframes bounceInRight { + 0% { + opacity: 0; + -o-transform: translateX(2000px); + } + + 60% { + opacity: 1; + -o-transform: translateX(-30px); + } + + 80% { + -o-transform: translateX(10px); + } + + 100% { + -o-transform: translateX(0); + } +} + +@keyframes bounceInRight { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 60% { + opacity: 1; + transform: translateX(-30px); + } + + 80% { + transform: translateX(10px); + } + + 100% { + transform: translateX(0); + } +} + +.bounceInRight { + -webkit-animation-name: bounceInRight; + -moz-animation-name: bounceInRight; + -o-animation-name: bounceInRight; + animation-name: bounceInRight; +} +@-webkit-keyframes bounceOut { + 0% { + -webkit-transform: scale(1); + } + + 25% { + -webkit-transform: scale(.95); + } + + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.3); + } +} + +@-moz-keyframes bounceOut { + 0% { + -moz-transform: scale(1); + } + + 25% { + -moz-transform: scale(.95); + } + + 50% { + opacity: 1; + -moz-transform: scale(1.1); + } + + 100% { + opacity: 0; + -moz-transform: scale(.3); + } +} + +@-o-keyframes bounceOut { + 0% { + -o-transform: scale(1); + } + + 25% { + -o-transform: scale(.95); + } + + 50% { + opacity: 1; + -o-transform: scale(1.1); + } + + 100% { + opacity: 0; + -o-transform: scale(.3); + } +} + +@keyframes bounceOut { + 0% { + transform: scale(1); + } + + 25% { + transform: scale(.95); + } + + 50% { + opacity: 1; + transform: scale(1.1); + } + + 100% { + opacity: 0; + transform: scale(.3); + } +} + +.bounceOut { + -webkit-animation-name: bounceOut; + -moz-animation-name: bounceOut; + -o-animation-name: bounceOut; + animation-name: bounceOut; +} +@-webkit-keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } +} + +@-moz-keyframes bounceOutUp { + 0% { + -moz-transform: translateY(0); + } + + 20% { + opacity: 1; + -moz-transform: translateY(20px); + } + + 100% { + opacity: 0; + -moz-transform: translateY(-2000px); + } +} + +@-o-keyframes bounceOutUp { + 0% { + -o-transform: translateY(0); + } + + 20% { + opacity: 1; + -o-transform: translateY(20px); + } + + 100% { + opacity: 0; + -o-transform: translateY(-2000px); + } +} + +@keyframes bounceOutUp { + 0% { + transform: translateY(0); + } + + 20% { + opacity: 1; + transform: translateY(20px); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + -moz-animation-name: bounceOutUp; + -o-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} +@-webkit-keyframes bounceOutDown { + 0% { + -webkit-transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + } +} + +@-moz-keyframes bounceOutDown { + 0% { + -moz-transform: translateY(0); + } + + 20% { + opacity: 1; + -moz-transform: translateY(-20px); + } + + 100% { + opacity: 0; + -moz-transform: translateY(2000px); + } +} + +@-o-keyframes bounceOutDown { + 0% { + -o-transform: translateY(0); + } + + 20% { + opacity: 1; + -o-transform: translateY(-20px); + } + + 100% { + opacity: 0; + -o-transform: translateY(2000px); + } +} + +@keyframes bounceOutDown { + 0% { + transform: translateY(0); + } + + 20% { + opacity: 1; + transform: translateY(-20px); + } + + 100% { + opacity: 0; + transform: translateY(2000px); + } +} + +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + -moz-animation-name: bounceOutDown; + -o-animation-name: bounceOutDown; + animation-name: bounceOutDown; +} +@-webkit-keyframes bounceOutLeft { + 0% { + -webkit-transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + } +} + +@-moz-keyframes bounceOutLeft { + 0% { + -moz-transform: translateX(0); + } + + 20% { + opacity: 1; + -moz-transform: translateX(20px); + } + + 100% { + opacity: 0; + -moz-transform: translateX(-2000px); + } +} + +@-o-keyframes bounceOutLeft { + 0% { + -o-transform: translateX(0); + } + + 20% { + opacity: 1; + -o-transform: translateX(20px); + } + + 100% { + opacity: 0; + -o-transform: translateX(-2000px); + } +} + +@keyframes bounceOutLeft { + 0% { + transform: translateX(0); + } + + 20% { + opacity: 1; + transform: translateX(20px); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + -moz-animation-name: bounceOutLeft; + -o-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; +} +@-webkit-keyframes bounceOutRight { + 0% { + -webkit-transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + } +} + +@-moz-keyframes bounceOutRight { + 0% { + -moz-transform: translateX(0); + } + + 20% { + opacity: 1; + -moz-transform: translateX(-20px); + } + + 100% { + opacity: 0; + -moz-transform: translateX(2000px); + } +} + +@-o-keyframes bounceOutRight { + 0% { + -o-transform: translateX(0); + } + + 20% { + opacity: 1; + -o-transform: translateX(-20px); + } + + 100% { + opacity: 0; + -o-transform: translateX(2000px); + } +} + +@keyframes bounceOutRight { + 0% { + transform: translateX(0); + } + + 20% { + opacity: 1; + transform: translateX(-20px); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + -moz-animation-name: bounceOutRight; + -o-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} +@-webkit-keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(0); + opacity: 1; + } +} +@-moz-keyframes rotateIn { + 0% { + -moz-transform-origin: center center; + -moz-transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: center center; + -moz-transform: rotate(0); + opacity: 1; + } +} +@-o-keyframes rotateIn { + 0% { + -o-transform-origin: center center; + -o-transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -o-transform-origin: center center; + -o-transform: rotate(0); + opacity: 1; + } +} +@keyframes rotateIn { + 0% { + transform-origin: center center; + transform: rotate(-200deg); + opacity: 0; + } + + 100% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + -moz-animation-name: rotateIn; + -o-animation-name: rotateIn; + animation-name: rotateIn; +} +@-webkit-keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInUpLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInUpLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpLeft { + 0% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } + + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + -moz-animation-name: rotateInUpLeft; + -o-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; +} +@-webkit-keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInDownLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInDownLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownLeft { + 0% { + transform-origin: left bottom; + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + -moz-animation-name: rotateInDownLeft; + -o-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; +} +@-webkit-keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInUpRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInUpRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpRight { + 0% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + -moz-animation-name: rotateInUpRight; + -o-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; +} +@-webkit-keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } +} + +@-moz-keyframes rotateInDownRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } +} + +@-o-keyframes rotateInDownRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(90deg); + opacity: 0; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownRight { + 0% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } + + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + -moz-animation-name: rotateInDownRight; + -o-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; +} +@-webkit-keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: center center; + -webkit-transform: rotate(200deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOut { + 0% { + -moz-transform-origin: center center; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: center center; + -moz-transform: rotate(200deg); + opacity: 0; + } +} + +@-o-keyframes rotateOut { + 0% { + -o-transform-origin: center center; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: center center; + -o-transform: rotate(200deg); + opacity: 0; + } +} + +@keyframes rotateOut { + 0% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: center center; + transform: rotate(200deg); + opacity: 0; + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + -moz-animation-name: rotateOut; + -o-animation-name: rotateOut; + animation-name: rotateOut; +} +@-webkit-keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutUpLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutUpLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpLeft { + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + -transform-origin: left bottom; + -transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + -moz-animation-name: rotateOutUpLeft; + -o-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; +} +@-webkit-keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutDownLeft { + 0% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: left bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutDownLeft { + 0% { + -o-transform-origin: left bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: left bottom; + -o-transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownLeft { + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + -moz-animation-name: rotateOutDownLeft; + -o-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; +} +@-webkit-keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutUpRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutUpRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpRight { + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + -moz-animation-name: rotateOutUpRight; + -o-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} +@-webkit-keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + opacity: 0; + } +} + +@-moz-keyframes rotateOutDownRight { + 0% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(0); + opacity: 1; + } + + 100% { + -moz-transform-origin: right bottom; + -moz-transform: rotate(-90deg); + opacity: 0; + } +} + +@-o-keyframes rotateOutDownRight { + 0% { + -o-transform-origin: right bottom; + -o-transform: rotate(0); + opacity: 1; + } + + 100% { + -o-transform-origin: right bottom; + -o-transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownRight { + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + -moz-animation-name: rotateOutDownRight; + -o-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} +@-webkit-keyframes lightSpeedIn { + 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +@-moz-keyframes lightSpeedIn { + 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +@-o-keyframes lightSpeedIn { + 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +@keyframes lightSpeedIn { + 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + -moz-animation-name: lightSpeedIn; + -o-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + + -webkit-animation-timing-function: ease-out; + -moz-animation-timing-function: ease-out; + -o-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} +@-webkit-keyframes lightSpeedOut { + 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +@-moz-keyframes lightSpeedOut { + 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +@-o-keyframes lightSpeedOut { + 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +@keyframes lightSpeedOut { + 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + -moz-animation-name: lightSpeedOut; + -o-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +@-webkit-keyframes hinge { + 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 100% { -webkit-transform: translateY(700px); opacity: 0; } +} + +@-moz-keyframes hinge { + 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 100% { -moz-transform: translateY(700px); opacity: 0; } +} + +@-o-keyframes hinge { + 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 100% { -o-transform: translateY(700px); opacity: 0; } +} + +@keyframes hinge { + 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } + 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } + 100% { transform: translateY(700px); opacity: 0; } +} + +.hinge { + -webkit-animation-name: hinge; + -moz-animation-name: hinge; + -o-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); } + 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } +} + +@-moz-keyframes rollIn { + 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } +} + +@-o-keyframes rollIn { + 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } +} + +@keyframes rollIn { + 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } +} + +.rollIn { + -webkit-animation-name: rollIn; + -moz-animation-name: rollIn; + -o-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); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + } +} + +@-moz-keyframes rollOut { + 0% { + opacity: 1; + -moz-transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -moz-transform: translateX(100%) rotate(120deg); + } +} + +@-o-keyframes rollOut { + 0% { + opacity: 1; + -o-transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -o-transform: translateX(100%) rotate(120deg); + } +} + +@keyframes rollOut { + 0% { + opacity: 1; + transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + transform: translateX(100%) rotate(120deg); + } +} + +.rollOut { + -webkit-animation-name: rollOut; + -moz-animation-name: rollOut; + -o-animation-name: rollOut; + animation-name: rollOut; +} diff --git a/_sass/monokai.scss b/_sass/monokai.scss index 1987e2bbd..668bb122d 100644 --- a/_sass/monokai.scss +++ b/_sass/monokai.scss @@ -1,66 +1,66 @@ -pre.highlight, -.highlight pre { background-color: #272822; } -.highlight .hll { background-color: #272822; } -.highlight .c { color: #75715e } /* Comment */ -.highlight .err { color: #960050; background-color: #1e0010 } /* Error */ -.highlight .k { color: #66d9ef } /* Keyword */ -.highlight .l { color: #ae81ff } /* Literal */ -.highlight .n { color: #f8f8f2 } /* Name */ -.highlight .o { color: #f92672 } /* Operator */ -.highlight .p { color: #f8f8f2 } /* Punctuation */ -.highlight .cm { color: #75715e } /* Comment.Multiline */ -.highlight .cp { color: #75715e } /* Comment.Preproc */ -.highlight .c1 { color: #75715e } /* Comment.Single */ -.highlight .cs { color: #75715e } /* Comment.Special */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .kc { color: #66d9ef } /* Keyword.Constant */ -.highlight .kd { color: #66d9ef } /* Keyword.Declaration */ -.highlight .kn { color: #f92672 } /* Keyword.Namespace */ -.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ -.highlight .kr { color: #66d9ef } /* Keyword.Reserved */ -.highlight .kt { color: #66d9ef } /* Keyword.Type */ -.highlight .ld { color: #e6db74 } /* Literal.Date */ -.highlight .m { color: #ae81ff } /* Literal.Number */ -.highlight .s { color: #e6db74 } /* Literal.String */ -.highlight .na { color: #a6e22e } /* Name.Attribute */ -.highlight .nb { color: #f8f8f2 } /* Name.Builtin */ -.highlight .nc { color: #a6e22e } /* Name.Class */ -.highlight .no { color: #66d9ef } /* Name.Constant */ -.highlight .nd { color: #a6e22e } /* Name.Decorator */ -.highlight .ni { color: #f8f8f2 } /* Name.Entity */ -.highlight .ne { color: #a6e22e } /* Name.Exception */ -.highlight .nf { color: #a6e22e } /* Name.Function */ -.highlight .nl { color: #f8f8f2 } /* Name.Label */ -.highlight .nn { color: #f8f8f2 } /* Name.Namespace */ -.highlight .nx { color: #a6e22e } /* Name.Other */ -.highlight .py { color: #f8f8f2 } /* Name.Property */ -.highlight .nt { color: #f92672 } /* Name.Tag */ -.highlight .nv { color: #f8f8f2 } /* Name.Variable */ -.highlight .ow { color: #f92672 } /* Operator.Word */ -.highlight .w { color: #f8f8f2 } /* Text.Whitespace */ -.highlight .mf { color: #ae81ff } /* Literal.Number.Float */ -.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ -.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ -.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ -.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ -.highlight .sc { color: #e6db74 } /* Literal.String.Char */ -.highlight .sd { color: #e6db74 } /* Literal.String.Doc */ -.highlight .s2 { color: #e6db74 } /* Literal.String.Double */ -.highlight .se { color: #ae81ff } /* Literal.String.Escape */ -.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ -.highlight .si { color: #e6db74 } /* Literal.String.Interpol */ -.highlight .sx { color: #e6db74 } /* Literal.String.Other */ -.highlight .sr { color: #e6db74 } /* Literal.String.Regex */ -.highlight .s1 { color: #e6db74 } /* Literal.String.Single */ -.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ -.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ -.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ -.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ -.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ - -.highlight .gh { } /* Generic Heading & Diff Header */ -.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ -.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ +pre.highlight, +.highlight pre { background-color: #272822; } +.highlight .hll { background-color: #272822; } +.highlight .c { color: #75715e } /* Comment */ +.highlight .err { color: #960050; background-color: #1e0010 } /* Error */ +.highlight .k { color: #66d9ef } /* Keyword */ +.highlight .l { color: #ae81ff } /* Literal */ +.highlight .n { color: #f8f8f2 } /* Name */ +.highlight .o { color: #f92672 } /* Operator */ +.highlight .p { color: #f8f8f2 } /* Punctuation */ +.highlight .cm { color: #75715e } /* Comment.Multiline */ +.highlight .cp { color: #75715e } /* Comment.Preproc */ +.highlight .c1 { color: #75715e } /* Comment.Single */ +.highlight .cs { color: #75715e } /* Comment.Special */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .kc { color: #66d9ef } /* Keyword.Constant */ +.highlight .kd { color: #66d9ef } /* Keyword.Declaration */ +.highlight .kn { color: #f92672 } /* Keyword.Namespace */ +.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ +.highlight .kr { color: #66d9ef } /* Keyword.Reserved */ +.highlight .kt { color: #66d9ef } /* Keyword.Type */ +.highlight .ld { color: #e6db74 } /* Literal.Date */ +.highlight .m { color: #ae81ff } /* Literal.Number */ +.highlight .s { color: #e6db74 } /* Literal.String */ +.highlight .na { color: #a6e22e } /* Name.Attribute */ +.highlight .nb { color: #f8f8f2 } /* Name.Builtin */ +.highlight .nc { color: #a6e22e } /* Name.Class */ +.highlight .no { color: #66d9ef } /* Name.Constant */ +.highlight .nd { color: #a6e22e } /* Name.Decorator */ +.highlight .ni { color: #f8f8f2 } /* Name.Entity */ +.highlight .ne { color: #a6e22e } /* Name.Exception */ +.highlight .nf { color: #a6e22e } /* Name.Function */ +.highlight .nl { color: #f8f8f2 } /* Name.Label */ +.highlight .nn { color: #f8f8f2 } /* Name.Namespace */ +.highlight .nx { color: #a6e22e } /* Name.Other */ +.highlight .py { color: #f8f8f2 } /* Name.Property */ +.highlight .nt { color: #f92672 } /* Name.Tag */ +.highlight .nv { color: #f8f8f2 } /* Name.Variable */ +.highlight .ow { color: #f92672 } /* Operator.Word */ +.highlight .w { color: #f8f8f2 } /* Text.Whitespace */ +.highlight .mf { color: #ae81ff } /* Literal.Number.Float */ +.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ +.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ +.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ +.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ +.highlight .sc { color: #e6db74 } /* Literal.String.Char */ +.highlight .sd { color: #e6db74 } /* Literal.String.Doc */ +.highlight .s2 { color: #e6db74 } /* Literal.String.Double */ +.highlight .se { color: #ae81ff } /* Literal.String.Escape */ +.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ +.highlight .si { color: #e6db74 } /* Literal.String.Interpol */ +.highlight .sx { color: #e6db74 } /* Literal.String.Other */ +.highlight .sr { color: #e6db74 } /* Literal.String.Regex */ +.highlight .s1 { color: #e6db74 } /* Literal.String.Single */ +.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ +.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ +.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ +.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ +.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ + +.highlight .gh { } /* Generic Heading & Diff Header */ +.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ +.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ \ No newline at end of file diff --git a/_sass/tables.scss b/_sass/tables.scss index 9e4b1b45f..7265f52c0 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -1,24 +1,24 @@ -table { - margin-bottom: 1.3em; - thead { - font-weight: bold; - - th { - text-align: left; - border-bottom: 4px solid #888; - font-weight: bold; - padding: 12px; - vertical-align: middle; - } - } - - tr { - &:nth-child(even) td { - background: #eee; - } - - td { - padding: 12px; - } - } -} +table { + margin-bottom: 1.3em; + thead { + font-weight: bold; + + th { + text-align: left; + border-bottom: 4px solid #888; + font-weight: bold; + padding: 12px; + vertical-align: middle; + } + } + + tr { + &:nth-child(even) td { + background: #eee; + } + + td { + padding: 12px; + } + } +} diff --git a/_sass/timeline.scss b/_sass/timeline.scss index 4873c47c2..3541c382b 100644 --- a/_sass/timeline.scss +++ b/_sass/timeline.scss @@ -1,223 +1,223 @@ - -.timeline { - position: relative; - padding: 0; - list-style: none; -} - -.timeline:before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 40px; - width: 0px; // draw vertical timeline line (2px) - margin-left: -1.5px; - background-color: #f1f1f1; -} - -.timeline>li { - position: relative; - margin-bottom: 50px; - min-height: 50px; -} - -.timeline>li:before, -.timeline>li:after { - content: " "; - display: table; -} - -.timeline>li:after { - clear: both; -} - -.timeline>li .timeline-panel { - float: right; - position: relative; - width: 100%; - padding: 0 20px 0 20px; - text-align: left; -} - -.timeline>li .timeline-panel:before { - right: auto; - left: -15px; - border-right-width: 15px; - border-left-width: 0; -} - -.timeline>li .timeline-panel:after { - right: auto; - left: -14px; - border-right-width: 14px; - border-left-width: 0; -} - -.timeline>li .timeline-image { - visibility: hidden; - z-index: 100; - position: absolute; - border: 7px solid #f1f1f1; - border-radius: 100%; - text-align: center; - background-color: #fff; - display: flex; -} - -.img-me { - z-index: 100; - width: 100px; - height: 100px; - border-radius: 20%; - text-align: center; - background-color: #fff; - margin: auto auto; - display: block; -} - -.timeline>li .timeline-image h4 { - margin-top: 12px; - font-size: 10px; - line-height: 14px; -} - -.img-me h4 { - margin-top: 12px; - font-size: 10px; - line-height: 14px; -} - -.timeline>li.timeline-inverted>.timeline-panel { - float: right; - padding: 0 20px 0 20px; - text-align: left; -} - -.timeline>li.timeline-inverted>.timeline-panel:before { - right: auto; - left: -15px; - border-right-width: 15px; - border-left-width: 0; -} - -.timeline>li.timeline-inverted>.timeline-panel:after { - right: auto; - left: -14px; - border-right-width: 14px; - border-left-width: 0; -} - -.timeline>li:last-child { - margin-bottom: 0; -} - -.timeline .timeline-heading h4 { - margin-top: 0; - color: inherit; -} - -.timeline .timeline-heading h4.subheading { - text-transform: none; -} - -.timeline .timeline-body>p, -.timeline .timeline-body>ul { - margin-bottom: 0; -} - -@media(min-width:768px) { - .timeline:before { - left: 10%; - width: 2px; - } - - .timeline>li { - margin-bottom: 100px; - min-height: 100px; - } - - .timeline>li .timeline-panel { - float: left; - width: 60%; - padding: 0 20px 20px 30px; - text-align: right; - } - - .timeline>li .timeline-image { - visibility: visible; - left: 9%; - width: 100px; - height: 100px; - margin-left: -50px; - } - - .img-me { - //left: 50%; - width: auto; - height: auto; - max-width: 86px; - max-height: 86px; - } - - .timeline>li .timeline-image h4 { - margin-top: 16px; - font-size: 13px; - line-height: 18px; - } - - .img-me h4 { - margin-top: 16px; - font-size: 13px; - line-height: 18px; - } - - .timeline>li.timeline-inverted>.timeline-panel { - float: right; - padding: 0 30px 20px 20px; - text-align: left; - } -} - -@media(min-width:992px) { - .timeline>li { - min-height: 150px; - } - - .timeline>li .timeline-panel { - float: left; - width: 60%; - padding: 0 20px 20px; - } - - .timeline>li .timeline-image { - visibility: visible; - width: 150px; - height: 150px; - margin-left: -75px; - } - - .img-me { - max-width:120px; - max-height:120px; - width: auto; - height: auto; - } - - .timeline>li .timeline-image h4 { - margin-top: 30px; - font-size: 18px; - line-height: 26px; - } - - .img-me h4 { - margin-top: 30px; - font-size: 18px; - line-height: 26px; - } - - .timeline>li.timeline-inverted>.timeline-panel { - padding: 0 20px 20px; - } -} - + +.timeline { + position: relative; + padding: 0; + list-style: none; +} + +.timeline:before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 40px; + width: 0px; // draw vertical timeline line (2px) + margin-left: -1.5px; + background-color: #f1f1f1; +} + +.timeline>li { + position: relative; + margin-bottom: 50px; + min-height: 50px; +} + +.timeline>li:before, +.timeline>li:after { + content: " "; + display: table; +} + +.timeline>li:after { + clear: both; +} + +.timeline>li .timeline-panel { + float: right; + position: relative; + width: 100%; + padding: 0 20px 0 20px; + text-align: left; +} + +.timeline>li .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} + +.timeline>li .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} + +.timeline>li .timeline-image { + visibility: hidden; + z-index: 100; + position: absolute; + border: 7px solid #f1f1f1; + border-radius: 100%; + text-align: center; + background-color: #fff; + display: flex; +} + +.img-me { + z-index: 100; + width: 100px; + height: 100px; + border-radius: 20%; + text-align: center; + background-color: #fff; + margin: auto auto; + display: block; +} + +.timeline>li .timeline-image h4 { + margin-top: 12px; + font-size: 10px; + line-height: 14px; +} + +.img-me h4 { + margin-top: 12px; + font-size: 10px; + line-height: 14px; +} + +.timeline>li.timeline-inverted>.timeline-panel { + float: right; + padding: 0 20px 0 20px; + text-align: left; +} + +.timeline>li.timeline-inverted>.timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} + +.timeline>li.timeline-inverted>.timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} + +.timeline>li:last-child { + margin-bottom: 0; +} + +.timeline .timeline-heading h4 { + margin-top: 0; + color: inherit; +} + +.timeline .timeline-heading h4.subheading { + text-transform: none; +} + +.timeline .timeline-body>p, +.timeline .timeline-body>ul { + margin-bottom: 0; +} + +@media(min-width:768px) { + .timeline:before { + left: 10%; + width: 2px; + } + + .timeline>li { + margin-bottom: 100px; + min-height: 100px; + } + + .timeline>li .timeline-panel { + float: left; + width: 60%; + padding: 0 20px 20px 30px; + text-align: right; + } + + .timeline>li .timeline-image { + visibility: visible; + left: 9%; + width: 100px; + height: 100px; + margin-left: -50px; + } + + .img-me { + //left: 50%; + width: auto; + height: auto; + max-width: 86px; + max-height: 86px; + } + + .timeline>li .timeline-image h4 { + margin-top: 16px; + font-size: 13px; + line-height: 18px; + } + + .img-me h4 { + margin-top: 16px; + font-size: 13px; + line-height: 18px; + } + + .timeline>li.timeline-inverted>.timeline-panel { + float: right; + padding: 0 30px 20px 20px; + text-align: left; + } +} + +@media(min-width:992px) { + .timeline>li { + min-height: 150px; + } + + .timeline>li .timeline-panel { + float: left; + width: 60%; + padding: 0 20px 20px; + } + + .timeline>li .timeline-image { + visibility: visible; + width: 150px; + height: 150px; + margin-left: -75px; + } + + .img-me { + max-width:120px; + max-height:120px; + width: auto; + height: auto; + } + + .timeline>li .timeline-image h4 { + margin-top: 30px; + font-size: 18px; + line-height: 26px; + } + + .img-me h4 { + margin-top: 30px; + font-size: 18px; + line-height: 26px; + } + + .timeline>li.timeline-inverted>.timeline-panel { + padding: 0 20px 20px; + } +} + diff --git a/_sass/uno.scss b/_sass/uno.scss index b11eef87c..6e836330f 100644 --- a/_sass/uno.scss +++ b/_sass/uno.scss @@ -1,811 +1,811 @@ -@import 'https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400)'; -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ -@import "animate"; -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; } - -body { - line-height: 1; } - -ol, ul { - list-style: none; } - -blockquote, q { - quotes: none; } - -blockquote:before, blockquote:after { - content: ''; - content: none; } - -q:before, q:after { - content: ''; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -body { - width: 100%; - *zoom: 1; } - body:before, body:after { - content: ""; - display: table; } - body:after { - clear: both; } - -html, body { - height: 100%; } - -html { - height: 100%; - max-height: 100%; } - -body { - font-family: "Raleway", sans-serif; - font-size: 1em; - color: #666666; } - -::selection { - background: #fae3df; } - -::-moz-selection { - background: #fae3df; } - -a { - text-decoration: none; - color: #e25440; } - a:hover { - color: #b9301c; - -o-transition: .5s; - -ms-transition: .5s; - -moz-transition: .5s; - -webkit-transition: .5s; } - -h1, -h2, -h3, -h4, -h5, -h5 { - margin-top: .8em; - margin-bottom: .4em; - font-family: "Roboto Slab", serif; - font-weight: lighter; - color: #333333; - -webkit-font-smoothing: antialiased; } - -h1 { - margin-top: 0; - font-size: 3.2em; - line-height: 1.2em; - letter-spacing: .05em; } - -h2 { - font-size: 2.2em; } - -h3 { - font-size: 1.8em; } - -h4 { - font-size: 1.4em; } - -h4 { - font-size: 1.2em; } - -h5 { - font-size: 1em; } - -p { - margin-bottom: 1.3em; - line-height: 1.7em; } - -strong { - font-weight: bold; } - -em { - font-style: italic; } - -blockquote { - margin: 1em 0; - padding: 2em 0; - background: #f8f8f8; - border: 1px solid #eeeeee; - border-radius: 3px; - font-family: "Roboto Slab", serif; - font-weight: lighter; - font-style: italic; - font-size: 1.3em; - text-align: center; } - blockquote p:last-child { - margin-bottom: 0; } - -ol, ul { - margin: 0 0 1.3em 2.5em; } - ol li, ul li { - margin: 0 0 .2em 0; - line-height: 1.6em; } - ol ol, ol ul, ul ol, ul ul { - margin: .1em 0 .2em 2em; } - -ol { - list-style-type: decimal; } - -ul { - list-style-type: disc; } - -code { - padding: .1em .4em; - background: #e8f2fb; - border: 1px solid #c9e1f6; - border-radius: 3px; - font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; - font-size: .85em; } - -pre { - margin-bottom: 1.3em; - /* padding: 1em 2.5%; - background: #e8f2fb; - border: 1px solid #c9e1f6; */ - border-radius: 3px; - font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; - font-size: .9em; - font-weight: normal; - line-height: 1.3em; } - pre code { - padding: 0; - background: none; - border: none; } - -.date, -.time, -.author, -.tags { - font-size: .8em; - color: #c7c7c7; } - .date a, - .time a, - .author a, - .tags a { - color: #666666; } - .date a:hover, - .time a:hover, - .author a:hover, - .tags a:hover { - color: #b9301c; } - -.excerpt { - margin: 0; - font-size: .9em; - color: #999999; } - -.intro { - font-family: "Roboto Slab", serif; - font-size: 1.2em; - font-weight: lighter; - color: #999999; } - -.block-heading { - display: inline; - float: left; - width: 940px; - margin: 0 10px; - position: relative; - bottom: -15px; - font-size: .8em; - font-weight: bold; - text-align: center; - text-transform: uppercase; - letter-spacing: 1px; } - -.label { - position: relative; - display: inline-block; - padding: 8px 18px 9px 18px; - background: #e25440; - border-radius: 3px; - text-align: center; - color: #FFF; } - -.container { - position: relative; - z-index: 500; - width: 940px; - margin: 0 auto; } - -.content-wrapper { - z-index: 800; - width: 60%; - max-width: 800px; - margin-left: 40%; } - -.content-wrapper__inner { - margin: 0 10%; - padding: 50px 0; } - -.footer { - display: block; - padding: 2em 0 0 0; - border-top: 2px solid #dddddd; - font-size: .7em; - color: #b3b3b3; } - -.footer__copyright { - display: block; - margin-bottom: .7em; } - .footer__copyright a { - color: #a6a6a6; - text-decoration: underline; } - .footer__copyright a:hover { - color: #b9301c; } - -.avatar, -.logo { - border-radius: 50%; - border: 3px solid #FFF; - box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); } - -hr { - border: none; } - -.section-title__divider { - width: 30%; - margin: 2.2em 0 2.1em 0; - border-top: 1px solid #dddddd; } - -.hidden { - display: none !important; } - -.post-comments { - border-top: 1px solid #dddddd; - padding: 60px 0; } - -.post-meta { - margin: 0 0 .4em 0; - color: #c7c7c7; } - -.post-meta__date { - margin-right: .5em; } - -.post-meta__tags { - margin-left: .4em; } - -.post-meta__author { - margin-left: 1.5em; } - -.post-meta__avatar { - display: inline-block; - width: 22px; - height: 22px; - margin: 0 .3em -.4em 0; - border: none; - box-shadow: none; } - -.post img { - max-width: 100%; - margin: 0 auto; - border-radius: 3px; - text-align: center; } -.post pre { - width: 95%; } -.post hr { - display: block; - width: 30%; - margin: 2em 0; - border-top: 1px solid #dddddd; } - -.error-code { - font-size: 6em; } - -.panel { - display: table; - width: 100%; - height: 100%; } - -.panel__vertical { - display: table-cell; - vertical-align: middle; } - -.panel-title { - margin: 0 0 5px 0; - font-size: 2.5em; - letter-spacing: 4px; - color: #FFF; } - -.panel-subtitle { - font-family: "Roboto Slab", serif; - font-size: 1.2em; - font-weight: lighter; - letter-spacing: 3px; - color: #cccccc; - -webkit-font-smoothing: antialiased; } - -.panel-cover { - display: block; - position: fixed; - z-index: 900; - width: 100%; - max-width: none; - height: 100%; - background: url(../images/background-cover.jpg) top left no-repeat #666666; - background-size: cover; } - -.panel-cover--collapsed { - width: 40%; - max-width: 530px; } - -.panel-cover--overlay { - display: block; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(68, 68, 68, 0.6); - background-image: -webkit-linear-gradient(-410deg, rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); - background-image: linear-gradient(140deg,rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); } - -.panel-cover__logo { - margin-bottom: .2em; } - -.panel-cover__description { - margin: 0 30px; } - -.panel-cover__divider { - width: 50%; - margin: 20px auto; - border-top: 1px solid rgba(255, 255, 255, 0.14); } - -.panel-cover__divider--secondary { - width: 15%; } - -.panel-main { - display: table; - width: 100%; - height: 100%; } - -.no-js .panel-main { - width: 40%; - max-width: 530px; } - -.panel-main__inner { - display: table-cell; - vertical-align: middle; - position: relative; - z-index: 800; - padding: 0 60px; } - -.panel-main__content { - max-width: 620px; - margin: 0 auto; } - -.panel-main__content--fixed { - width: 480px; - transition: width 1s; - -webkit-transition: width 1s; - /* Safari */ } - -.panel-inverted { - font-weight: 100; - text-align: center; - color: #FFF; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } - .panel-inverted a { - color: #FFF; } - -.cover-navigation { - margin-top: 10px; } - -.cover-navigation--social { - margin-right: 30px; } - -.cover-green { - background-color: rgba(21, 111, 120, 0.6); - background-image: -webkit-linear-gradient(-410deg, rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8)); - background-image: linear-gradient(140deg,rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8)); } - -.cover-purple { - background-color: rgba(73, 50, 82, 0.6); - background-image: -webkit-linear-gradient(-410deg, rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8)); - background-image: linear-gradient(140deg,rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8)); } - -.cover-red { - background-color: rgba(119, 31, 18, 0.6); - background-image: -webkit-linear-gradient(-410deg, rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8)); - background-image: linear-gradient(140deg,rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8)); } - -.cover-slate { - background-color: rgba(61, 66, 96, 0.6); - background-image: -webkit-linear-gradient(-410deg, rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8)); - background-image: linear-gradient(140deg,rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8)); } - -.cover-disabled { - background: none; } - -.btn, .navigation__item a { - padding: 10px 20px; - border: 1px solid #e25440; - border-radius: 20px; - font-size: .9em; - font-weight: bold; - letter-spacing: 1px; - text-shadow: none; - color: #e25440; - -webkit-font-smoothing: antialiased; } - .btn:hover, .navigation__item a:hover { - color: #b9301c; - border-color: #b9301c; } - -.btn-secondary { - border-color: #5ba4e5; - color: #5ba4e5; } - .btn-secondary:hover { - color: #217fd2; - border-color: #217fd2; } - -.btn-tertiary { - border-color: #999999; - color: #999999; } - .btn-tertiary:hover { - color: #737373; - border-color: #737373; } - -.btn-large { - padding: 10px 24px; - font-size: 1.1em; } - -.btn-small { - padding: 8px 12px; - font-size: .7em; } - -.btn-mobile-menu { - display: none; - position: fixed; - z-index: 9999; - top: 0; - right: 0; - left: 0; - width: 100%; - height: 42px; - background: rgba(0, 0, 0, 0.40); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - text-align: center; } - -.btn-mobile-menu__icon, -.btn-mobile-close__icon { - position: relative; - top: 3px; - font-size: 36px; - color: #FFF; } - -nav { - display: inline-block; - position: relative; } - -.navigation { - display: inline-block; - float: left; - position: relative; - margin: 0; - list-style-type: none; } - -.navigation__item { - display: inline-block; - margin: 0 2px 0 0; - line-height: 1em; } - .navigation__item a { - display: block; - position: relative; - border-color: #FFF; - color: #FFF; - opacity: .8; } - .navigation__item a:hover { - color: #FFF; - border-color: #FFF; - opacity: 1; } - -.navigation--social { - margin-right: 1.5em; } - .navigation--social a { - padding: 9px 8px 9px 8px; } - .navigation--social a .label { - display: none; } - .navigation--social a .icon { - display: block; - font-size: 1.7em; } - -.pagination { - display: block; - margin: 0 0 4em 0; } - -.pagination__page-number { - margin: 0; - font-size: .8em; - color: #999999; } - -.pagination__newer { - margin-right: 1em; } - -.pagination__older { - margin-left: 1em; } - -i { - font-family: 'entypo'; - font-weight: normal; - font-style: normal; - font-size: 18px; } - -.icon-social { - font-family: 'entypo-social'; - font-size: 22px; - display: block; - position: relative; } - -.post-list { - margin: 0; - padding: 0; - list-style-type: none; - text-align: left; } - .post-list li { - margin: 0 0 2.2em 0; } - .post-list li:last-child hr { - display: none; } - -.post-list__post-title { - margin-top: 0; - margin-bottom: .2em; - font-size: 1.5em; - line-height: 1.3em; } - .post-list__post-title a { - color: #333333; } - .post-list__post-title a:hover { - color: #b9301c; } - -.post-list__meta { - display: block; - margin: .7em 0 0 0; - font-size: .9em; - color: #c7c7c7; } - -.post-list__meta--date { - margin-right: .5em; - color: #c7c7c7; } - -.post-list__meta--tags { - margin-left: .5em; } - -.post-list__divider { - width: 30%; - margin: 2.2em 0 2.1em 0; - border-top: 1px solid #dddddd; } - -*:focus { - outline: none; } - -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"] { - width: 240px; - padding: 1em 1em; - background: #FFF; - border: 1px solid #dddddd; - border-radius: 3px; - font-size: .9em; - color: #666666; } - input[type="text"]:focus, - input[type="password"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="date"]:focus, - input[type="month"]:focus, - input[type="time"]:focus, - input[type="week"]:focus, - input[type="number"]:focus, - input[type="email"]:focus, - input[type="url"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus { - border-color: #5ba4e5; } - input[type="text"]::-webkit-input-placeholder, - input[type="password"]::-webkit-input-placeholder, - input[type="datetime"]::-webkit-input-placeholder, - input[type="datetime-local"]::-webkit-input-placeholder, - input[type="date"]::-webkit-input-placeholder, - input[type="month"]::-webkit-input-placeholder, - input[type="time"]::-webkit-input-placeholder, - input[type="week"]::-webkit-input-placeholder, - input[type="number"]::-webkit-input-placeholder, - input[type="email"]::-webkit-input-placeholder, - input[type="url"]::-webkit-input-placeholder, - input[type="search"]::-webkit-input-placeholder, - input[type="tel"]::-webkit-input-placeholder { - color: #cccccc; } - input[type="text"]::-moz-placeholder, - input[type="password"]::-moz-placeholder, - input[type="datetime"]::-moz-placeholder, - input[type="datetime-local"]::-moz-placeholder, - input[type="date"]::-moz-placeholder, - input[type="month"]::-moz-placeholder, - input[type="time"]::-moz-placeholder, - input[type="week"]::-moz-placeholder, - input[type="number"]::-moz-placeholder, - input[type="email"]::-moz-placeholder, - input[type="url"]::-moz-placeholder, - input[type="search"]::-moz-placeholder, - input[type="tel"]::-moz-placeholder { - color: #cccccc; } - input[type="text"]:-moz-placeholder, - input[type="password"]:-moz-placeholder, - input[type="datetime"]:-moz-placeholder, - input[type="datetime-local"]:-moz-placeholder, - input[type="date"]:-moz-placeholder, - input[type="month"]:-moz-placeholder, - input[type="time"]:-moz-placeholder, - input[type="week"]:-moz-placeholder, - input[type="number"]:-moz-placeholder, - input[type="email"]:-moz-placeholder, - input[type="url"]:-moz-placeholder, - input[type="search"]:-moz-placeholder, - input[type="tel"]:-moz-placeholder { - color: #cccccc; } - input[type="text"]:-ms-input-placeholder, - input[type="password"]:-ms-input-placeholder, - input[type="datetime"]:-ms-input-placeholder, - input[type="datetime-local"]:-ms-input-placeholder, - input[type="date"]:-ms-input-placeholder, - input[type="month"]:-ms-input-placeholder, - input[type="time"]:-ms-input-placeholder, - input[type="week"]:-ms-input-placeholder, - input[type="number"]:-ms-input-placeholder, - input[type="email"]:-ms-input-placeholder, - input[type="url"]:-ms-input-placeholder, - input[type="search"]:-ms-input-placeholder, - input[type="tel"]:-ms-input-placeholder { - color: #cccccc; } - -@media all and (min-width: 1300px) { - .content-wrapper { - margin-left: 530px; } } -@media all and (max-width: 1100px) { - .panel-cover__logo { - width: 70px; } - - .panel-title { - font-size: 2em; } - - .panel-subtitle { - font-size: 1em; } - - .panel-cover__description { - margin: 0 10px; - font-size: .9em; } - - .navigation--social { - margin-top: 5px; - margin-left: 0; } } -@media all and (max-width: 960px) { - .btn-mobile-menu { - display: block; } - - .panel-main { - display: table; - position: relative; } - - .panel-cover--collapsed { - width: 100%; - max-width: none; } - - .panel-main__inner { - display: table-cell; - padding: 60px 10%; } - - .panel-cover__description { - display: block; - max-width: 600px; - margin: 0 auto; } - - .panel-cover__divider--secondary { - display: none; } - - .panel-cover { - width: 100%; - height: 100%; - background-position: center center; } - .panel-cover.panel-cover--collapsed { - display: block; - position: relative; - height: auto; - padding: 0; - background-position: center center; } - .panel-cover.panel-cover--collapsed .panel-main__inner { - display: block; - padding: 70px 0 30px 0; } - .panel-cover.panel-cover--collapsed .panel-cover__logo { - width: 60px; - border-width: 2px; } - .panel-cover.panel-cover--collapsed .panel-cover__description { - display: none; } - .panel-cover.panel-cover--collapsed .panel-cover__divider { - display: none; - margin: 1em auto; } - - .navigation-wrapper { - display: none; - position: fixed; - top: 42px; - right: 0; - left: 0; - width: 100%; - padding: 20px 0; - background: rgba(51, 51, 51, 0.98); - border-bottom: 1px solid rgba(255, 255, 255, 0.15); } - .navigation-wrapper.visible { - display: block; } - - .cover-navigation { - display: block; - position: relative; - float: left; - clear: left; - width: 100%; } - .cover-navigation .navigation { - display: block; - width: 100%; } - .cover-navigation .navigation li { - width: 80%; - margin-bottom: .4em; } - .cover-navigation.navigation--social { - padding-top: 5px; } - .cover-navigation.navigation--social .navigation li { - display: inline-block; - width: 25.8%; } - - .content-wrapper { - width: 80%; - max-width: none; - margin: 0 auto; } - - .content-wrapper__inner { - margin-right: 0; - margin-left: 0; } - - .navigation__item { - width: 100%; - margin: 0 0 .4em 0; } } -@media all and (max-width: 340px) { - .panel-main__inner { - padding: 0 5%; } - - .panel-title { - margin-bottom: .1em; - font-size: 1.5em; } - - .panel-subtitle { - font-size: .9em; } - - .btn, .navigation__item a { - display: block; - margin-bottom: .4em; } } +@import 'https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400)'; +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +@import "animate"; +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after { + content: ''; + content: none; } + +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +body { + width: 100%; + *zoom: 1; } + body:before, body:after { + content: ""; + display: table; } + body:after { + clear: both; } + +html, body { + height: 100%; } + +html { + height: 100%; + max-height: 100%; } + +body { + font-family: "Raleway", sans-serif; + font-size: 1em; + color: #666666; } + +::selection { + background: #fae3df; } + +::-moz-selection { + background: #fae3df; } + +a { + text-decoration: none; + color: #e25440; } + a:hover { + color: #b9301c; + -o-transition: .5s; + -ms-transition: .5s; + -moz-transition: .5s; + -webkit-transition: .5s; } + +h1, +h2, +h3, +h4, +h5, +h5 { + margin-top: .8em; + margin-bottom: .4em; + font-family: "Roboto Slab", serif; + font-weight: lighter; + color: #333333; + -webkit-font-smoothing: antialiased; } + +h1 { + margin-top: 0; + font-size: 3.2em; + line-height: 1.2em; + letter-spacing: .05em; } + +h2 { + font-size: 2.2em; } + +h3 { + font-size: 1.8em; } + +h4 { + font-size: 1.4em; } + +h4 { + font-size: 1.2em; } + +h5 { + font-size: 1em; } + +p { + margin-bottom: 1.3em; + line-height: 1.7em; } + +strong { + font-weight: bold; } + +em { + font-style: italic; } + +blockquote { + margin: 1em 0; + padding: 2em 0; + background: #f8f8f8; + border: 1px solid #eeeeee; + border-radius: 3px; + font-family: "Roboto Slab", serif; + font-weight: lighter; + font-style: italic; + font-size: 1.3em; + text-align: center; } + blockquote p:last-child { + margin-bottom: 0; } + +ol, ul { + margin: 0 0 1.3em 2.5em; } + ol li, ul li { + margin: 0 0 .2em 0; + line-height: 1.6em; } + ol ol, ol ul, ul ol, ul ul { + margin: .1em 0 .2em 2em; } + +ol { + list-style-type: decimal; } + +ul { + list-style-type: disc; } + +code { + padding: .1em .4em; + background: #e8f2fb; + border: 1px solid #c9e1f6; + border-radius: 3px; + font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + font-size: .85em; } + +pre { + margin-bottom: 1.3em; + /* padding: 1em 2.5%; + background: #e8f2fb; + border: 1px solid #c9e1f6; */ + border-radius: 3px; + font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + font-size: .9em; + font-weight: normal; + line-height: 1.3em; } + pre code { + padding: 0; + background: none; + border: none; } + +.date, +.time, +.author, +.tags { + font-size: .8em; + color: #c7c7c7; } + .date a, + .time a, + .author a, + .tags a { + color: #666666; } + .date a:hover, + .time a:hover, + .author a:hover, + .tags a:hover { + color: #b9301c; } + +.excerpt { + margin: 0; + font-size: .9em; + color: #999999; } + +.intro { + font-family: "Roboto Slab", serif; + font-size: 1.2em; + font-weight: lighter; + color: #999999; } + +.block-heading { + display: inline; + float: left; + width: 940px; + margin: 0 10px; + position: relative; + bottom: -15px; + font-size: .8em; + font-weight: bold; + text-align: center; + text-transform: uppercase; + letter-spacing: 1px; } + +.label { + position: relative; + display: inline-block; + padding: 8px 18px 9px 18px; + background: #e25440; + border-radius: 3px; + text-align: center; + color: #FFF; } + +.container { + position: relative; + z-index: 500; + width: 940px; + margin: 0 auto; } + +.content-wrapper { + z-index: 800; + width: 60%; + max-width: 800px; + margin-left: 40%; } + +.content-wrapper__inner { + margin: 0 10%; + padding: 50px 0; } + +.footer { + display: block; + padding: 2em 0 0 0; + border-top: 2px solid #dddddd; + font-size: .7em; + color: #b3b3b3; } + +.footer__copyright { + display: block; + margin-bottom: .7em; } + .footer__copyright a { + color: #a6a6a6; + text-decoration: underline; } + .footer__copyright a:hover { + color: #b9301c; } + +.avatar, +.logo { + border-radius: 50%; + border: 3px solid #FFF; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); } + +hr { + border: none; } + +.section-title__divider { + width: 30%; + margin: 2.2em 0 2.1em 0; + border-top: 1px solid #dddddd; } + +.hidden { + display: none !important; } + +.post-comments { + border-top: 1px solid #dddddd; + padding: 60px 0; } + +.post-meta { + margin: 0 0 .4em 0; + color: #c7c7c7; } + +.post-meta__date { + margin-right: .5em; } + +.post-meta__tags { + margin-left: .4em; } + +.post-meta__author { + margin-left: 1.5em; } + +.post-meta__avatar { + display: inline-block; + width: 22px; + height: 22px; + margin: 0 .3em -.4em 0; + border: none; + box-shadow: none; } + +.post img { + max-width: 100%; + margin: 0 auto; + border-radius: 3px; + text-align: center; } +.post pre { + width: 95%; } +.post hr { + display: block; + width: 30%; + margin: 2em 0; + border-top: 1px solid #dddddd; } + +.error-code { + font-size: 6em; } + +.panel { + display: table; + width: 100%; + height: 100%; } + +.panel__vertical { + display: table-cell; + vertical-align: middle; } + +.panel-title { + margin: 0 0 5px 0; + font-size: 2.5em; + letter-spacing: 4px; + color: #FFF; } + +.panel-subtitle { + font-family: "Roboto Slab", serif; + font-size: 1.2em; + font-weight: lighter; + letter-spacing: 3px; + color: #cccccc; + -webkit-font-smoothing: antialiased; } + +.panel-cover { + display: block; + position: fixed; + z-index: 900; + width: 100%; + max-width: none; + height: 100%; + background: url(../images/background-cover.jpg) top left no-repeat #666666; + background-size: cover; } + +.panel-cover--collapsed { + width: 40%; + max-width: 530px; } + +.panel-cover--overlay { + display: block; + position: absolute; + z-index: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(68, 68, 68, 0.6); + background-image: -webkit-linear-gradient(-410deg, rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); + background-image: linear-gradient(140deg,rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); } + +.panel-cover__logo { + margin-bottom: .2em; } + +.panel-cover__description { + margin: 0 30px; } + +.panel-cover__divider { + width: 50%; + margin: 20px auto; + border-top: 1px solid rgba(255, 255, 255, 0.14); } + +.panel-cover__divider--secondary { + width: 15%; } + +.panel-main { + display: table; + width: 100%; + height: 100%; } + +.no-js .panel-main { + width: 40%; + max-width: 530px; } + +.panel-main__inner { + display: table-cell; + vertical-align: middle; + position: relative; + z-index: 800; + padding: 0 60px; } + +.panel-main__content { + max-width: 620px; + margin: 0 auto; } + +.panel-main__content--fixed { + width: 480px; + transition: width 1s; + -webkit-transition: width 1s; + /* Safari */ } + +.panel-inverted { + font-weight: 100; + text-align: center; + color: #FFF; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } + .panel-inverted a { + color: #FFF; } + +.cover-navigation { + margin-top: 10px; } + +.cover-navigation--social { + margin-right: 30px; } + +.cover-green { + background-color: rgba(21, 111, 120, 0.6); + background-image: -webkit-linear-gradient(-410deg, rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8)); + background-image: linear-gradient(140deg,rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8)); } + +.cover-purple { + background-color: rgba(73, 50, 82, 0.6); + background-image: -webkit-linear-gradient(-410deg, rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8)); + background-image: linear-gradient(140deg,rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8)); } + +.cover-red { + background-color: rgba(119, 31, 18, 0.6); + background-image: -webkit-linear-gradient(-410deg, rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8)); + background-image: linear-gradient(140deg,rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8)); } + +.cover-slate { + background-color: rgba(61, 66, 96, 0.6); + background-image: -webkit-linear-gradient(-410deg, rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8)); + background-image: linear-gradient(140deg,rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8)); } + +.cover-disabled { + background: none; } + +.btn, .navigation__item a { + padding: 10px 20px; + border: 1px solid #e25440; + border-radius: 20px; + font-size: .9em; + font-weight: bold; + letter-spacing: 1px; + text-shadow: none; + color: #e25440; + -webkit-font-smoothing: antialiased; } + .btn:hover, .navigation__item a:hover { + color: #b9301c; + border-color: #b9301c; } + +.btn-secondary { + border-color: #5ba4e5; + color: #5ba4e5; } + .btn-secondary:hover { + color: #217fd2; + border-color: #217fd2; } + +.btn-tertiary { + border-color: #999999; + color: #999999; } + .btn-tertiary:hover { + color: #737373; + border-color: #737373; } + +.btn-large { + padding: 10px 24px; + font-size: 1.1em; } + +.btn-small { + padding: 8px 12px; + font-size: .7em; } + +.btn-mobile-menu { + display: none; + position: fixed; + z-index: 9999; + top: 0; + right: 0; + left: 0; + width: 100%; + height: 42px; + background: rgba(0, 0, 0, 0.40); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + text-align: center; } + +.btn-mobile-menu__icon, +.btn-mobile-close__icon { + position: relative; + top: 3px; + font-size: 36px; + color: #FFF; } + +nav { + display: inline-block; + position: relative; } + +.navigation { + display: inline-block; + float: left; + position: relative; + margin: 0; + list-style-type: none; } + +.navigation__item { + display: inline-block; + margin: 0 2px 0 0; + line-height: 1em; } + .navigation__item a { + display: block; + position: relative; + border-color: #FFF; + color: #FFF; + opacity: .8; } + .navigation__item a:hover { + color: #FFF; + border-color: #FFF; + opacity: 1; } + +.navigation--social { + margin-right: 1.5em; } + .navigation--social a { + padding: 9px 8px 9px 8px; } + .navigation--social a .label { + display: none; } + .navigation--social a .icon { + display: block; + font-size: 1.7em; } + +.pagination { + display: block; + margin: 0 0 4em 0; } + +.pagination__page-number { + margin: 0; + font-size: .8em; + color: #999999; } + +.pagination__newer { + margin-right: 1em; } + +.pagination__older { + margin-left: 1em; } + +i { + font-family: 'entypo'; + font-weight: normal; + font-style: normal; + font-size: 18px; } + +.icon-social { + font-family: 'entypo-social'; + font-size: 22px; + display: block; + position: relative; } + +.post-list { + margin: 0; + padding: 0; + list-style-type: none; + text-align: left; } + .post-list li { + margin: 0 0 2.2em 0; } + .post-list li:last-child hr { + display: none; } + +.post-list__post-title { + margin-top: 0; + margin-bottom: .2em; + font-size: 1.5em; + line-height: 1.3em; } + .post-list__post-title a { + color: #333333; } + .post-list__post-title a:hover { + color: #b9301c; } + +.post-list__meta { + display: block; + margin: .7em 0 0 0; + font-size: .9em; + color: #c7c7c7; } + +.post-list__meta--date { + margin-right: .5em; + color: #c7c7c7; } + +.post-list__meta--tags { + margin-left: .5em; } + +.post-list__divider { + width: 30%; + margin: 2.2em 0 2.1em 0; + border-top: 1px solid #dddddd; } + +*:focus { + outline: none; } + +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"] { + width: 240px; + padding: 1em 1em; + background: #FFF; + border: 1px solid #dddddd; + border-radius: 3px; + font-size: .9em; + color: #666666; } + input[type="text"]:focus, + input[type="password"]:focus, + input[type="datetime"]:focus, + input[type="datetime-local"]:focus, + input[type="date"]:focus, + input[type="month"]:focus, + input[type="time"]:focus, + input[type="week"]:focus, + input[type="number"]:focus, + input[type="email"]:focus, + input[type="url"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus { + border-color: #5ba4e5; } + input[type="text"]::-webkit-input-placeholder, + input[type="password"]::-webkit-input-placeholder, + input[type="datetime"]::-webkit-input-placeholder, + input[type="datetime-local"]::-webkit-input-placeholder, + input[type="date"]::-webkit-input-placeholder, + input[type="month"]::-webkit-input-placeholder, + input[type="time"]::-webkit-input-placeholder, + input[type="week"]::-webkit-input-placeholder, + input[type="number"]::-webkit-input-placeholder, + input[type="email"]::-webkit-input-placeholder, + input[type="url"]::-webkit-input-placeholder, + input[type="search"]::-webkit-input-placeholder, + input[type="tel"]::-webkit-input-placeholder { + color: #cccccc; } + input[type="text"]::-moz-placeholder, + input[type="password"]::-moz-placeholder, + input[type="datetime"]::-moz-placeholder, + input[type="datetime-local"]::-moz-placeholder, + input[type="date"]::-moz-placeholder, + input[type="month"]::-moz-placeholder, + input[type="time"]::-moz-placeholder, + input[type="week"]::-moz-placeholder, + input[type="number"]::-moz-placeholder, + input[type="email"]::-moz-placeholder, + input[type="url"]::-moz-placeholder, + input[type="search"]::-moz-placeholder, + input[type="tel"]::-moz-placeholder { + color: #cccccc; } + input[type="text"]:-moz-placeholder, + input[type="password"]:-moz-placeholder, + input[type="datetime"]:-moz-placeholder, + input[type="datetime-local"]:-moz-placeholder, + input[type="date"]:-moz-placeholder, + input[type="month"]:-moz-placeholder, + input[type="time"]:-moz-placeholder, + input[type="week"]:-moz-placeholder, + input[type="number"]:-moz-placeholder, + input[type="email"]:-moz-placeholder, + input[type="url"]:-moz-placeholder, + input[type="search"]:-moz-placeholder, + input[type="tel"]:-moz-placeholder { + color: #cccccc; } + input[type="text"]:-ms-input-placeholder, + input[type="password"]:-ms-input-placeholder, + input[type="datetime"]:-ms-input-placeholder, + input[type="datetime-local"]:-ms-input-placeholder, + input[type="date"]:-ms-input-placeholder, + input[type="month"]:-ms-input-placeholder, + input[type="time"]:-ms-input-placeholder, + input[type="week"]:-ms-input-placeholder, + input[type="number"]:-ms-input-placeholder, + input[type="email"]:-ms-input-placeholder, + input[type="url"]:-ms-input-placeholder, + input[type="search"]:-ms-input-placeholder, + input[type="tel"]:-ms-input-placeholder { + color: #cccccc; } + +@media all and (min-width: 1300px) { + .content-wrapper { + margin-left: 530px; } } +@media all and (max-width: 1100px) { + .panel-cover__logo { + width: 70px; } + + .panel-title { + font-size: 2em; } + + .panel-subtitle { + font-size: 1em; } + + .panel-cover__description { + margin: 0 10px; + font-size: .9em; } + + .navigation--social { + margin-top: 5px; + margin-left: 0; } } +@media all and (max-width: 960px) { + .btn-mobile-menu { + display: block; } + + .panel-main { + display: table; + position: relative; } + + .panel-cover--collapsed { + width: 100%; + max-width: none; } + + .panel-main__inner { + display: table-cell; + padding: 60px 10%; } + + .panel-cover__description { + display: block; + max-width: 600px; + margin: 0 auto; } + + .panel-cover__divider--secondary { + display: none; } + + .panel-cover { + width: 100%; + height: 100%; + background-position: center center; } + .panel-cover.panel-cover--collapsed { + display: block; + position: relative; + height: auto; + padding: 0; + background-position: center center; } + .panel-cover.panel-cover--collapsed .panel-main__inner { + display: block; + padding: 70px 0 30px 0; } + .panel-cover.panel-cover--collapsed .panel-cover__logo { + width: 60px; + border-width: 2px; } + .panel-cover.panel-cover--collapsed .panel-cover__description { + display: none; } + .panel-cover.panel-cover--collapsed .panel-cover__divider { + display: none; + margin: 1em auto; } + + .navigation-wrapper { + display: none; + position: fixed; + top: 42px; + right: 0; + left: 0; + width: 100%; + padding: 20px 0; + background: rgba(51, 51, 51, 0.98); + border-bottom: 1px solid rgba(255, 255, 255, 0.15); } + .navigation-wrapper.visible { + display: block; } + + .cover-navigation { + display: block; + position: relative; + float: left; + clear: left; + width: 100%; } + .cover-navigation .navigation { + display: block; + width: 100%; } + .cover-navigation .navigation li { + width: 80%; + margin-bottom: .4em; } + .cover-navigation.navigation--social { + padding-top: 5px; } + .cover-navigation.navigation--social .navigation li { + display: inline-block; + width: 25.8%; } + + .content-wrapper { + width: 80%; + max-width: none; + margin: 0 auto; } + + .content-wrapper__inner { + margin-right: 0; + margin-left: 0; } + + .navigation__item { + width: 100%; + margin: 0 0 .4em 0; } } +@media all and (max-width: 340px) { + .panel-main__inner { + padding: 0 5%; } + + .panel-title { + margin-bottom: .1em; + font-size: 1.5em; } + + .panel-subtitle { + font-size: .9em; } + + .btn, .navigation__item a { + display: block; + margin-bottom: .4em; } } diff --git a/css/main.scss b/css/main.scss index bdc44ccf3..395d6e9ed 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,60 +1,60 @@ ---- ---- -@import "uno"; -@import "tables"; -@import "monokai"; -@import "timeline"; - -/* Modifications */ - -pre.highlight, -.highlight pre { - padding: 10px; -} - -pre.highlight code, -.highlight pre code { - white-space: pre-wrap; -} - -.btn, -.navigation__item a { - margin: 5px 0; - white-space: nowrap; -} - -.pagination__page-number { - display: inline-block; - padding: 10px; -} - -.categories a, -.tags a { - border: 1px solid #e25440; - border-radius: 20px; - color: #e25440; - display: inline-block; - font-size: 12px; - margin: 5px 0; - padding: 5px 10px; - text-shadow: none; - white-space: nowrap; -} - -.post-meta__tags { - font-size: 12px; - padding: 0 5px; -} - -.footer__copyright { - margin: 0 20px 10px; -} - -.user-image { - margin-bottom: 1.2em; - position: relative; - width: 100px; - height: 100px; - border: 3px solid #fff; - border-radius:100%; -} +--- +--- +@import "uno"; +@import "tables"; +@import "monokai"; +@import "timeline"; + +/* Modifications */ + +pre.highlight, +.highlight pre { + padding: 10px; +} + +pre.highlight code, +.highlight pre code { + white-space: pre-wrap; +} + +.btn, +.navigation__item a { + margin: 5px 0; + white-space: nowrap; +} + +.pagination__page-number { + display: inline-block; + padding: 10px; +} + +.categories a, +.tags a { + border: 1px solid #e25440; + border-radius: 20px; + color: #e25440; + display: inline-block; + font-size: 12px; + margin: 5px 0; + padding: 5px 10px; + text-shadow: none; + white-space: nowrap; +} + +.post-meta__tags { + font-size: 12px; + padding: 0 5px; +} + +.footer__copyright { + margin: 0 20px 10px; +} + +.user-image { + margin-bottom: 1.2em; + position: relative; + width: 100px; + height: 100px; + border: 3px solid #fff; + border-radius:100%; +} diff --git a/images/favicons/manifest.json b/images/favicons/manifest.json index c8baf8db7..125bbf802 100644 --- a/images/favicons/manifest.json +++ b/images/favicons/manifest.json @@ -1,41 +1,41 @@ -{ - "name": "Jekyll-Uno", - "icons": [ - { - "src": "\/images\/favicons\/android-chrome-36x36.png", - "sizes": "36x36", - "type": "image\/png", - "density": 0.75 - }, - { - "src": "\/images\/favicons\/android-chrome-48x48.png", - "sizes": "48x48", - "type": "image\/png", - "density": 1 - }, - { - "src": "\/images\/favicons\/android-chrome-72x72.png", - "sizes": "72x72", - "type": "image\/png", - "density": 1.5 - }, - { - "src": "\/images\/favicons\/android-chrome-96x96.png", - "sizes": "96x96", - "type": "image\/png", - "density": 2 - }, - { - "src": "\/images\/favicons\/android-chrome-144x144.png", - "sizes": "144x144", - "type": "image\/png", - "density": 3 - }, - { - "src": "\/images\/favicons\/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image\/png", - "density": 4 - } - ] -} +{ + "name": "Jekyll-Uno", + "icons": [ + { + "src": "\/images\/favicons\/android-chrome-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": 0.75 + }, + { + "src": "\/images\/favicons\/android-chrome-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": 1 + }, + { + "src": "\/images\/favicons\/android-chrome-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": 1.5 + }, + { + "src": "\/images\/favicons\/android-chrome-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": 2 + }, + { + "src": "\/images\/favicons\/android-chrome-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": 3 + }, + { + "src": "\/images\/favicons\/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": 4 + } + ] +} diff --git a/images/favicons/safari-pinned-tab.svg b/images/favicons/safari-pinned-tab.svg index 27d1c2436..20c63fe5f 100644 --- a/images/favicons/safari-pinned-tab.svg +++ b/images/favicons/safari-pinned-tab.svg @@ -1,57 +1,57 @@ - - - - -Created by potrace 1.11, written by Peter Selinger 2001-2013 - - - - - - + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + diff --git a/index.html b/index.html index c9039e326..62b15f395 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,46 @@ ---- -layout: default -robots: noindex ---- - - - - - - - +--- +layout: default +robots: noindex +--- + + + + + + + diff --git a/js/github_api.js b/js/github_api.js index daaa26517..116be157b 100644 --- a/js/github_api.js +++ b/js/github_api.js @@ -1,32 +1,32 @@ -console.log("github_api loaded"); -$(document).ready(function() { - users = [] - repos = [] - $(".ghbtn").each( function () { - var user = $(this).attr('user'); - var repo = $(this).attr('repo'); - repos.push(user + '/' + repo); - if (users.indexOf($(this).attr('user')) === -1) { - users.push($(this).attr('user')) - } - }) - //console.log(1, repos) - for (var i = 0; i < repos.length; i++) { - //console.log("URL: "+"https://api.github.com/repos/" + repos[i]); - $.ajax({ - type: "GET", - url: "https://api.github.com/repos/" + repos[i], - tryCount : 0, - retryLimit : 3, - async: true, - dataType: "json", - success: function (data) { - x = data.name; - //console.log("User/Repo: " + data.full_name + " Star: " + data.stargazers_count+ " Forks: "+data.forks_count + " Watchers: "+data.watchers_count); - $("div[repo='" + x + "']").find("span[class='star']").html(" "+data.stargazers_count); - $("div[repo='" + x + "']").find("span[class='fork']").html(" "+data.forks_count); - $("div[repo='" + x + "']").find("span[class='watchers']").html(" "+data.watchers_count); - $("div[repotext='" + x + "']").find("span[class='desc']").html(data.description); - } - })} -}); +console.log("github_api loaded"); +$(document).ready(function() { + users = [] + repos = [] + $(".ghbtn").each( function () { + var user = $(this).attr('user'); + var repo = $(this).attr('repo'); + repos.push(user + '/' + repo); + if (users.indexOf($(this).attr('user')) === -1) { + users.push($(this).attr('user')) + } + }) + //console.log(1, repos) + for (var i = 0; i < repos.length; i++) { + //console.log("URL: "+"https://api.github.com/repos/" + repos[i]); + $.ajax({ + type: "GET", + url: "https://api.github.com/repos/" + repos[i], + tryCount : 0, + retryLimit : 3, + async: true, + dataType: "json", + success: function (data) { + x = data.name; + //console.log("User/Repo: " + data.full_name + " Star: " + data.stargazers_count+ " Forks: "+data.forks_count + " Watchers: "+data.watchers_count); + $("div[repo='" + x + "']").find("span[class='star']").html(" "+data.stargazers_count); + $("div[repo='" + x + "']").find("span[class='fork']").html(" "+data.forks_count); + $("div[repo='" + x + "']").find("span[class='watchers']").html(" "+data.watchers_count); + $("div[repotext='" + x + "']").find("span[class='desc']").html(data.description); + } + })} +}); diff --git a/js/main.js b/js/main.js index eb454d353..6c263ceed 100755 --- a/js/main.js +++ b/js/main.js @@ -1,55 +1,55 @@ ---- -layout: null -sitemap: - exclude: 'yes' ---- -function toggleMobileMenu() { - $('.navigation-wrapper').toggleClass('visible'); - $('.btn-mobile-menu__icon').toggleClass('hidden'); - $('.btn-mobile-close__icon').toggleClass('hidden'); -} - -$(document).ready(function () { - $('a.panel-button').click(function (e) { - if ($('.content-wrapper').hasClass('showing')){ - $('.content-wrapper').removeClass('animated slideInRight') - $('.panel-cover').removeClass('panel-cover--collapsed') - $('.panel-cover').css('max-width', '100%') - $('.panel-cover').animate({'width': '100%'}, 400, swing = 'swing', function () {}) - $('.content-wrapper').removeClass('showing') - history.pushState("", document.title, window.location.pathname + window.location.search); - //window.location.hash = '' // leaves # - e.preventDefault(); - return; - } - $('.panel-cover').addClass('panel-cover--collapsed'); - currentWidth = $('.panel-cover').width() - if (currentWidth < 960) { - $('.panel-cover').addClass('panel-cover--collapsed') - $('.content-wrapper').addClass('animated slideInRight') - } else { - $('.panel-cover').css('max-width', currentWidth) - $('.panel-cover').animate({'max-width': '530px', 'width': '40%'}, 400, swing = 'swing', function () {}) - } - $('.content-wrapper').addClass('showing'); - }) - - if (window.location.hash && window.location.hash == '#projects') { - $('a.panel-button').click(); - } - - if (window.location.pathname !== '{{ site.baseurl }}/' && window.location.pathname !== '{{ site.baseurl }}/index.html') { - $('.panel-cover').addClass('panel-cover--collapsed') - } - - $('.btn-mobile-menu').click(function () { - if (!$('.navigation-wrapper').hasClass('animated bounceInDown')){ - $('.navigation-wrapper').addClass('animated bounceInDown'); - } - toggleMobileMenu(); - }) - - $('.navigation-wrapper .projects-button').click(function () { - toggleMobileMenu(); - }) -}) +--- +layout: null +sitemap: + exclude: 'yes' +--- +function toggleMobileMenu() { + $('.navigation-wrapper').toggleClass('visible'); + $('.btn-mobile-menu__icon').toggleClass('hidden'); + $('.btn-mobile-close__icon').toggleClass('hidden'); +} + +$(document).ready(function () { + $('a.panel-button').click(function (e) { + if ($('.content-wrapper').hasClass('showing')){ + $('.content-wrapper').removeClass('animated slideInRight') + $('.panel-cover').removeClass('panel-cover--collapsed') + $('.panel-cover').css('max-width', '100%') + $('.panel-cover').animate({'width': '100%'}, 400, swing = 'swing', function () {}) + $('.content-wrapper').removeClass('showing') + history.pushState("", document.title, window.location.pathname + window.location.search); + //window.location.hash = '' // leaves # + e.preventDefault(); + return; + } + $('.panel-cover').addClass('panel-cover--collapsed'); + currentWidth = $('.panel-cover').width() + if (currentWidth < 960) { + $('.panel-cover').addClass('panel-cover--collapsed') + $('.content-wrapper').addClass('animated slideInRight') + } else { + $('.panel-cover').css('max-width', currentWidth) + $('.panel-cover').animate({'max-width': '530px', 'width': '40%'}, 400, swing = 'swing', function () {}) + } + $('.content-wrapper').addClass('showing'); + }) + + if (window.location.hash && window.location.hash == '#projects') { + $('a.panel-button').click(); + } + + if (window.location.pathname !== '{{ site.baseurl }}/' && window.location.pathname !== '{{ site.baseurl }}/index.html') { + $('.panel-cover').addClass('panel-cover--collapsed') + } + + $('.btn-mobile-menu').click(function () { + if (!$('.navigation-wrapper').hasClass('animated bounceInDown')){ + $('.navigation-wrapper').addClass('animated bounceInDown'); + } + toggleMobileMenu(); + }) + + $('.navigation-wrapper .projects-button').click(function () { + toggleMobileMenu(); + }) +})