Difference between revisions of "Template:IONIS Paris/CSS2"

Line 1: Line 1:
 +
<html>
 +
<style type="text/css">
 +
  .grid {
 +
position: relative;
 +
margin: 0 auto;
 +
list-style: none;
 +
text-align: center;
 +
}
 +
 +
/* Common style */
 +
.grid figure {
 +
position: relative;
 +
float: left;
 +
overflow: hidden;
 +
margin: 0; /*change here for spacing*/
 +
width: 33.333333333%;
 +
text-align: center;
 +
cursor: pointer;
 +
}
 +
 +
.grid figure img {
 +
position: relative;
 +
display: block;
 +
max-width: 102%;
 +
opacity: 1;
 +
}
 +
 +
.grid figure figcaption {
 +
padding: 2em;
 +
color: #fff;
 +
text-transform: uppercase;
 +
font-size: 1.25em;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
 +
.grid figure figcaption::before,
 +
.grid figure figcaption::after {
 +
pointer-events: none;
 +
}
 +
 +
.grid figure figcaption,
 +
.grid figure figcaption > a {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 +
/* Anchor will cover the whole item by default */
 +
/* For some effects it will show as a button */
 +
.grid figure figcaption > a {
 +
z-index: 1000;
 +
text-indent: 200%;
 +
white-space: nowrap;
 +
font-size: 0;
 +
opacity: 0;
 +
}
 +
 +
.grid figure h2 {
 +
padding: 0
 +
word-spacing: -0.15em;
 +
font-weight: 700;
 +
}
 +
 +
.grid figure h2,
 +
.grid figure p {
 +
margin: 0;
 +
}
 +
 +
.grid figure p {
 +
letter-spacing: 1px;
 +
font-size: 68.5%;
 +
}
 +
 +
/* Individual effects */
 +
 +
 +
 +
 +
/*---------------*/
 +
/***** Oscar *****/
 +
/*---------------*/
 +
 +
figure.effect-oscar {
 +
/* background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
 +
background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/
 +
}
 +
 +
/*figure.effect-oscar img {
 +
opacity: 0.9;
 +
-webkit-transition: opacity 0.35s;
 +
transition: opacity 0.35s;
 +
}
 +
*/
 +
figure.effect-oscar figcaption {
 +
padding: 15%;
 +
/* background-color: rgba(58,52,42,0.7);
 +
-webkit-transition: background-color 0.35s;
 +
transition: background-color 0.35s;*/
 +
}
 +
 +
figure.effect-oscar figcaption::before {
 +
position: absolute;
 +
top: 30px;
 +
right: 30px;
 +
bottom: 30px;
 +
left: 30px;
 +
border: 1px solid #fff;
 +
content: '';
 +
}
 +
 +
figure.effect-oscar h2 {
 +
margin: 0;
 +
line-height: 1em;
 +
-webkit-transition: -webkit-transform 0.35s;
 +
transition: transform 0.35s;
 +
-webkit-transform: translate3d(0,100%,0);
 +
transform: translate3d(0,100%,0);
 +
}
 +
 +
figure.effect-oscar figcaption::before,
 +
figure.effect-oscar p {
 +
opacity: 0;
 +
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 +
transition: opacity 0.35s, transform 0.35s;
 +
-webkit-transform: scale(0);
 +
transform: scale(0);
 +
}
 +
 +
figure.effect-oscar:hover h2 {
 +
-webkit-transform: translate3d(0,0,0);
 +
transform: translate3d(0,0,0);
 +
}
 +
 +
figure.effect-oscar:hover figcaption::before,
 +
figure.effect-oscar:hover p {
 +
opacity: 1;
 +
-webkit-transform: scale(1);
 +
transform: scale(1);
 +
}
 +
 +
figure.effect-oscar:hover figcaption {
 +
background-color: rgba(0,0,0,0.8);
 +
}
 +
 +
figure.effect-oscar:hover img {
 +
opacity: 0.4;
 +
}
 +
 +
 +
 +
 +
/*---------------*/
 +
/***** Chico *****/
 +
/*---------------*/
 +
 +
figure.effect-chico img {
 +
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 +
transition: opacity 0.35s, transform 0.35s;
 +
-webkit-transform: scale(1.12);
 +
transform: scale(1.12);
 +
}
 +
 +
figure.effect-chico:hover img {
 +
opacity: 0.5;
 +
-webkit-transform: scale(1);
 +
transform: scale(1);
 +
}
 +
 +
figure.effect-chico figcaption {
 +
padding: 2em;
 +
}
 +
 +
figure.effect-chico figcaption::before {
 +
position: absolute;
 +
top: 30px;
 +
right: 30px;
 +
bottom: 30px;
 +
left: 30px;
 +
border: 1px solid #fff;
 +
content: '';
 +
-webkit-transform: scale(1.1);
 +
transform: scale(1.1);
 +
background: rgba(0,0,0,0.5);
 +
}
 +
 +
figure.effect-chico figcaption::before,
 +
figure.effect-chico p {
 +
opacity: 0;
 +
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 +
transition: opacity 0.35s, transform 0.35s;
 +
}
 +
 +
figure.effect-chico h2 {
 +
padding: 20% 0 20px 0;
 +
}
 +
 +
figure.effect-chico p {
 +
margin: 0 auto;
 +
max-width: 200px;
 +
-webkit-transform: scale(1.5);
 +
transform: scale(1.5);
 +
}
 +
 +
figure.effect-chico:hover figcaption::before,
 +
figure.effect-chico:hover p {
 +
opacity: 1;
 +
-webkit-transform: scale(1);
 +
transform: scale(1);
 +
}
 +
 +
@media screen and (max-width: 50em) {
 +
.content {
 +
padding: 0 10px;
 +
text-align: center;
 +
}
 +
.grid figure {
 +
width: 50%;
 +
}
 +
}
 +
 +
 +
@media (max-width: 639px) {
 +
.grid figure {width: 100%;}
 +
}
 +
 +
 +
@charset "UTF-8";
 +
 +
/*!
 +
Animate.css - http://daneden.me/animate
 +
Licensed under the MIT license
 +
 +
Copyright (c) 2013 Daniel Eden
 +
 +
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 +
 +
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 +
 +
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 +
*/
 +
 +
.animated {
 +
  -webkit-animation-duration: 1s;
 +
  animation-duration: 1s;
 +
  -webkit-animation-fill-mode: both;
 +
  animation-fill-mode: both;
 +
}
 +
 +
.animated.hinge {
 +
  -webkit-animation-duration: 2s;
 +
  animation-duration: 2s;
 +
}
 +
 +
@-webkit-keyframes bounce {
 +
  0%, 20%, 50%, 80%, 100% {
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: translateY(-30px);
 +
    transform: translateY(-30px);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: translateY(-15px);
 +
    transform: translateY(-15px);
 +
  }
 +
}
 +
 +
@keyframes bounce {
 +
  0%, 20%, 50%, 80%, 100% {
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: translateY(-30px);
 +
    -ms-transform: translateY(-30px);
 +
    transform: translateY(-30px);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: translateY(-15px);
 +
    -ms-transform: translateY(-15px);
 +
    transform: translateY(-15px);
 +
  }
 +
}
 +
 +
.bounce {
 +
  -webkit-animation-name: bounce;
 +
  animation-name: bounce;
 +
}
 +
 +
@-webkit-keyframes flash {
 +
  0%, 50%, 100% {
 +
    opacity: 1;
 +
  }
 +
 +
  25%, 75% {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes flash {
 +
  0%, 50%, 100% {
 +
    opacity: 1;
 +
  }
 +
 +
  25%, 75% {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.flash {
 +
  -webkit-animation-name: flash;
 +
  animation-name: flash;
 +
}
 +
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes pulse {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  50% {
 +
    -webkit-transform: scale(1.1);
 +
    transform: scale(1.1);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
}
 +
 +
@keyframes pulse {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  50% {
 +
    -webkit-transform: scale(1.1);
 +
    -ms-transform: scale(1.1);
 +
    transform: scale(1.1);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
}
 +
 +
.pulse {
 +
  -webkit-animation-name: pulse;
 +
  animation-name: pulse;
 +
}
 +
 +
@-webkit-keyframes rubberBand {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  30% {
 +
    -webkit-transform: scaleX(1.25) scaleY(0.75);
 +
    transform: scaleX(1.25) scaleY(0.75);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: scaleX(0.75) scaleY(1.25);
 +
    transform: scaleX(0.75) scaleY(1.25);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: scaleX(1.15) scaleY(0.85);
 +
    transform: scaleX(1.15) scaleY(0.85);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
}
 +
 +
@keyframes rubberBand {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  30% {
 +
    -webkit-transform: scaleX(1.25) scaleY(0.75);
 +
    -ms-transform: scaleX(1.25) scaleY(0.75);
 +
    transform: scaleX(1.25) scaleY(0.75);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: scaleX(0.75) scaleY(1.25);
 +
    -ms-transform: scaleX(0.75) scaleY(1.25);
 +
    transform: scaleX(0.75) scaleY(1.25);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: scaleX(1.15) scaleY(0.85);
 +
    -ms-transform: scaleX(1.15) scaleY(0.85);
 +
    transform: scaleX(1.15) scaleY(0.85);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
}
 +
 +
.rubberBand {
 +
  -webkit-animation-name: rubberBand;
 +
  animation-name: rubberBand;
 +
}
 +
 +
@-webkit-keyframes shake {
 +
  0%, 100% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  10%, 30%, 50%, 70%, 90% {
 +
    -webkit-transform: translateX(-10px);
 +
    transform: translateX(-10px);
 +
  }
 +
 +
  20%, 40%, 60%, 80% {
 +
    -webkit-transform: translateX(10px);
 +
    transform: translateX(10px);
 +
  }
 +
}
 +
 +
@keyframes shake {
 +
  0%, 100% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  10%, 30%, 50%, 70%, 90% {
 +
    -webkit-transform: translateX(-10px);
 +
    -ms-transform: translateX(-10px);
 +
    transform: translateX(-10px);
 +
  }
 +
 +
  20%, 40%, 60%, 80% {
 +
    -webkit-transform: translateX(10px);
 +
    -ms-transform: translateX(10px);
 +
    transform: translateX(10px);
 +
  }
 +
}
 +
 +
.shake {
 +
  -webkit-animation-name: shake;
 +
  animation-name: shake;
 +
}
 +
 +
@-webkit-keyframes swing {
 +
  20% {
 +
    -webkit-transform: rotate(15deg);
 +
    transform: rotate(15deg);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: rotate(-10deg);
 +
    transform: rotate(-10deg);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: rotate(5deg);
 +
    transform: rotate(5deg);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: rotate(-5deg);
 +
    transform: rotate(-5deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: rotate(0deg);
 +
    transform: rotate(0deg);
 +
  }
 +
}
 +
 +
@keyframes swing {
 +
  20% {
 +
    -webkit-transform: rotate(15deg);
 +
    -ms-transform: rotate(15deg);
 +
    transform: rotate(15deg);
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: rotate(-10deg);
 +
    -ms-transform: rotate(-10deg);
 +
    transform: rotate(-10deg);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: rotate(5deg);
 +
    -ms-transform: rotate(5deg);
 +
    transform: rotate(5deg);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: rotate(-5deg);
 +
    -ms-transform: rotate(-5deg);
 +
    transform: rotate(-5deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: rotate(0deg);
 +
    -ms-transform: rotate(0deg);
 +
    transform: rotate(0deg);
 +
  }
 +
}
 +
 +
.swing {
 +
  -webkit-transform-origin: top center;
 +
  -ms-transform-origin: top center;
 +
  transform-origin: top center;
 +
  -webkit-animation-name: swing;
 +
  animation-name: swing;
 +
}
 +
 +
@-webkit-keyframes tada {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  10%, 20% {
 +
    -webkit-transform: scale(0.9) rotate(-3deg);
 +
    transform: scale(0.9) rotate(-3deg);
 +
  }
 +
 +
  30%, 50%, 70%, 90% {
 +
    -webkit-transform: scale(1.1) rotate(3deg);
 +
    transform: scale(1.1) rotate(3deg);
 +
  }
 +
 +
  40%, 60%, 80% {
 +
    -webkit-transform: scale(1.1) rotate(-3deg);
 +
    transform: scale(1.1) rotate(-3deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: scale(1) rotate(0);
 +
    transform: scale(1) rotate(0);
 +
  }
 +
}
 +
 +
@keyframes tada {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  10%, 20% {
 +
    -webkit-transform: scale(0.9) rotate(-3deg);
 +
    -ms-transform: scale(0.9) rotate(-3deg);
 +
    transform: scale(0.9) rotate(-3deg);
 +
  }
 +
 +
  30%, 50%, 70%, 90% {
 +
    -webkit-transform: scale(1.1) rotate(3deg);
 +
    -ms-transform: scale(1.1) rotate(3deg);
 +
    transform: scale(1.1) rotate(3deg);
 +
  }
 +
 +
  40%, 60%, 80% {
 +
    -webkit-transform: scale(1.1) rotate(-3deg);
 +
    -ms-transform: scale(1.1) rotate(-3deg);
 +
    transform: scale(1.1) rotate(-3deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: scale(1) rotate(0);
 +
    -ms-transform: scale(1) rotate(0);
 +
    transform: scale(1) rotate(0);
 +
  }
 +
}
 +
 +
.tada {
 +
  -webkit-animation-name: tada;
 +
  animation-name: tada;
 +
}
 +
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes wobble {
 +
  0% {
 +
    -webkit-transform: translateX(0%);
 +
    transform: translateX(0%);
 +
  }
 +
 +
  15% {
 +
    -webkit-transform: translateX(-25%) rotate(-5deg);
 +
    transform: translateX(-25%) rotate(-5deg);
 +
  }
 +
 +
  30% {
 +
    -webkit-transform: translateX(20%) rotate(3deg);
 +
    transform: translateX(20%) rotate(3deg);
 +
  }
 +
 +
  45% {
 +
    -webkit-transform: translateX(-15%) rotate(-3deg);
 +
    transform: translateX(-15%) rotate(-3deg);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: translateX(10%) rotate(2deg);
 +
    transform: translateX(10%) rotate(2deg);
 +
  }
 +
 +
  75% {
 +
    -webkit-transform: translateX(-5%) rotate(-1deg);
 +
    transform: translateX(-5%) rotate(-1deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0%);
 +
    transform: translateX(0%);
 +
  }
 +
}
 +
 +
@keyframes wobble {
 +
  0% {
 +
    -webkit-transform: translateX(0%);
 +
    -ms-transform: translateX(0%);
 +
    transform: translateX(0%);
 +
  }
 +
 +
  15% {
 +
    -webkit-transform: translateX(-25%) rotate(-5deg);
 +
    -ms-transform: translateX(-25%) rotate(-5deg);
 +
    transform: translateX(-25%) rotate(-5deg);
 +
  }
 +
 +
  30% {
 +
    -webkit-transform: translateX(20%) rotate(3deg);
 +
    -ms-transform: translateX(20%) rotate(3deg);
 +
    transform: translateX(20%) rotate(3deg);
 +
  }
 +
 +
  45% {
 +
    -webkit-transform: translateX(-15%) rotate(-3deg);
 +
    -ms-transform: translateX(-15%) rotate(-3deg);
 +
    transform: translateX(-15%) rotate(-3deg);
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: translateX(10%) rotate(2deg);
 +
    -ms-transform: translateX(10%) rotate(2deg);
 +
    transform: translateX(10%) rotate(2deg);
 +
  }
 +
 +
  75% {
 +
    -webkit-transform: translateX(-5%) rotate(-1deg);
 +
    -ms-transform: translateX(-5%) rotate(-1deg);
 +
    transform: translateX(-5%) rotate(-1deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0%);
 +
    -ms-transform: translateX(0%);
 +
    transform: translateX(0%);
 +
  }
 +
}
 +
 +
.wobble {
 +
  -webkit-animation-name: wobble;
 +
  animation-name: wobble;
 +
}
 +
 +
@-webkit-keyframes bounceIn {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(.3);
 +
    transform: scale(.3);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1.05);
 +
    transform: scale(1.05);
 +
  }
 +
 +
  70% {
 +
    -webkit-transform: scale(.9);
 +
    transform: scale(.9);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
}
 +
 +
@keyframes bounceIn {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(.3);
 +
    -ms-transform: scale(.3);
 +
    transform: scale(.3);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1.05);
 +
    -ms-transform: scale(1.05);
 +
    transform: scale(1.05);
 +
  }
 +
 +
  70% {
 +
    -webkit-transform: scale(.9);
 +
    -ms-transform: scale(.9);
 +
    transform: scale(.9);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
}
 +
 +
.bounceIn {
 +
  -webkit-animation-name: bounceIn;
 +
  animation-name: bounceIn;
 +
}
 +
 +
@-webkit-keyframes bounceInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(30px);
 +
    transform: translateY(30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateY(-10px);
 +
    transform: translateY(-10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
@keyframes bounceInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    -ms-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(30px);
 +
    -ms-transform: translateY(30px);
 +
    transform: translateY(30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateY(-10px);
 +
    -ms-transform: translateY(-10px);
 +
    transform: translateY(-10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
.bounceInDown {
 +
  -webkit-animation-name: bounceInDown;
 +
  animation-name: bounceInDown;
 +
}
 +
 +
@-webkit-keyframes bounceInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(30px);
 +
    transform: translateX(30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateX(-10px);
 +
    transform: translateX(-10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes bounceInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    -ms-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(30px);
 +
    -ms-transform: translateX(30px);
 +
    transform: translateX(30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateX(-10px);
 +
    -ms-transform: translateX(-10px);
 +
    transform: translateX(-10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.bounceInLeft {
 +
  -webkit-animation-name: bounceInLeft;
 +
  animation-name: bounceInLeft;
 +
}
 +
 +
@-webkit-keyframes bounceInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(-30px);
 +
    transform: translateX(-30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateX(10px);
 +
    transform: translateX(10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes bounceInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    -ms-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(-30px);
 +
    -ms-transform: translateX(-30px);
 +
    transform: translateX(-30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateX(10px);
 +
    -ms-transform: translateX(10px);
 +
    transform: translateX(10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.bounceInRight {
 +
  -webkit-animation-name: bounceInRight;
 +
  animation-name: bounceInRight;
 +
}
 +
 +
@-webkit-keyframes bounceInUp {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(-30px);
 +
    transform: translateY(-30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateY(10px);
 +
    transform: translateY(10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
@keyframes bounceInUp {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    -ms-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(-30px);
 +
    -ms-transform: translateY(-30px);
 +
    transform: translateY(-30px);
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateY(10px);
 +
    -ms-transform: translateY(10px);
 +
    transform: translateY(10px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
.bounceInUp {
 +
  -webkit-animation-name: bounceInUp;
 +
  animation-name: bounceInUp;
 +
}
 +
 +
@-webkit-keyframes bounceOut {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  25% {
 +
    -webkit-transform: scale(.95);
 +
    transform: scale(.95);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1.1);
 +
    transform: scale(1.1);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(.3);
 +
    transform: scale(.3);
 +
  }
 +
}
 +
 +
@keyframes bounceOut {
 +
  0% {
 +
    -webkit-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
 +
  25% {
 +
    -webkit-transform: scale(.95);
 +
    -ms-transform: scale(.95);
 +
    transform: scale(.95);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
    -webkit-transform: scale(1.1);
 +
    -ms-transform: scale(1.1);
 +
    transform: scale(1.1);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(.3);
 +
    -ms-transform: scale(.3);
 +
    transform: scale(.3);
 +
  }
 +
}
 +
 +
.bounceOut {
 +
  -webkit-animation-name: bounceOut;
 +
  animation-name: bounceOut;
 +
}
 +
 +
@-webkit-keyframes bounceOutDown {
 +
  0% {
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(-20px);
 +
    transform: translateY(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
}
 +
 +
@keyframes bounceOutDown {
 +
  0% {
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(-20px);
 +
    -ms-transform: translateY(-20px);
 +
    transform: translateY(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    -ms-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
}
 +
 +
.bounceOutDown {
 +
  -webkit-animation-name: bounceOutDown;
 +
  animation-name: bounceOutDown;
 +
}
 +
 +
@-webkit-keyframes bounceOutLeft {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(20px);
 +
    transform: translateX(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
}
 +
 +
@keyframes bounceOutLeft {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(20px);
 +
    -ms-transform: translateX(20px);
 +
    transform: translateX(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    -ms-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
}
 +
 +
.bounceOutLeft {
 +
  -webkit-animation-name: bounceOutLeft;
 +
  animation-name: bounceOutLeft;
 +
}
 +
 +
@-webkit-keyframes bounceOutRight {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(-20px);
 +
    transform: translateX(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
}
 +
 +
@keyframes bounceOutRight {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(-20px);
 +
    -ms-transform: translateX(-20px);
 +
    transform: translateX(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    -ms-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
}
 +
 +
.bounceOutRight {
 +
  -webkit-animation-name: bounceOutRight;
 +
  animation-name: bounceOutRight;
 +
}
 +
 +
@-webkit-keyframes bounceOutUp {
 +
  0% {
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(20px);
 +
    transform: translateY(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
}
 +
 +
@keyframes bounceOutUp {
 +
  0% {
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  20% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(20px);
 +
    -ms-transform: translateY(20px);
 +
    transform: translateY(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    -ms-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
}
 +
 +
.bounceOutUp {
 +
  -webkit-animation-name: bounceOutUp;
 +
  animation-name: bounceOutUp;
 +
}
 +
 +
@-webkit-keyframes fadeIn {
 +
  0% {
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes fadeIn {
 +
  0% {
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.fadeIn {
 +
  -webkit-animation-name: fadeIn;
 +
  animation-name: fadeIn;
 +
}
 +
 +
@-webkit-keyframes fadeInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-20px);
 +
    transform: translateY(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-20px);
 +
    -ms-transform: translateY(-20px);
 +
    transform: translateY(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
.fadeInDown {
 +
  -webkit-animation-name: fadeInDown;
 +
  animation-name: fadeInDown;
 +
}
 +
 +
@-webkit-keyframes fadeInDownBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInDownBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    -ms-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
.fadeInDownBig {
 +
  -webkit-animation-name: fadeInDownBig;
 +
  animation-name: fadeInDownBig;
 +
}
 +
 +
@-webkit-keyframes fadeInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-20px);
 +
    transform: translateX(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-20px);
 +
    -ms-transform: translateX(-20px);
 +
    transform: translateX(-20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.fadeInLeft {
 +
  -webkit-animation-name: fadeInLeft;
 +
  animation-name: fadeInLeft;
 +
}
 +
 +
@-webkit-keyframes fadeInLeftBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInLeftBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    -ms-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.fadeInLeftBig {
 +
  -webkit-animation-name: fadeInLeftBig;
 +
  animation-name: fadeInLeftBig;
 +
}
 +
 +
@-webkit-keyframes fadeInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(20px);
 +
    transform: translateX(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(20px);
 +
    -ms-transform: translateX(20px);
 +
    transform: translateX(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.fadeInRight {
 +
  -webkit-animation-name: fadeInRight;
 +
  animation-name: fadeInRight;
 +
}
 +
 +
@-webkit-keyframes fadeInRightBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInRightBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    -ms-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.fadeInRightBig {
 +
  -webkit-animation-name: fadeInRightBig;
 +
  animation-name: fadeInRightBig;
 +
}
 +
 +
@-webkit-keyframes fadeInUp {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(20px);
 +
    transform: translateY(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInUp {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(20px);
 +
    -ms-transform: translateY(20px);
 +
    transform: translateY(20px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
.fadeInUp {
 +
  -webkit-animation-name: fadeInUp;
 +
  animation-name: fadeInUp;
 +
}
 +
 +
@-webkit-keyframes fadeInUpBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
@keyframes fadeInUpBig {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    -ms-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
.fadeInUpBig {
 +
  -webkit-animation-name: fadeInUpBig;
 +
  animation-name: fadeInUpBig;
 +
}
 +
 +
@-webkit-keyframes fadeOut {
 +
  0% {
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes fadeOut {
 +
  0% {
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.fadeOut {
 +
  -webkit-animation-name: fadeOut;
 +
  animation-name: fadeOut;
 +
}
 +
 +
@-webkit-keyframes fadeOutDown {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(20px);
 +
    transform: translateY(20px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutDown {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(20px);
 +
    -ms-transform: translateY(20px);
 +
    transform: translateY(20px);
 +
  }
 +
}
 +
 +
.fadeOutDown {
 +
  -webkit-animation-name: fadeOutDown;
 +
  animation-name: fadeOutDown;
 +
}
 +
 +
@-webkit-keyframes fadeOutDownBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutDownBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(2000px);
 +
    -ms-transform: translateY(2000px);
 +
    transform: translateY(2000px);
 +
  }
 +
}
 +
 +
.fadeOutDownBig {
 +
  -webkit-animation-name: fadeOutDownBig;
 +
  animation-name: fadeOutDownBig;
 +
}
 +
 +
@-webkit-keyframes fadeOutLeft {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-20px);
 +
    transform: translateX(-20px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutLeft {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-20px);
 +
    -ms-transform: translateX(-20px);
 +
    transform: translateX(-20px);
 +
  }
 +
}
 +
 +
.fadeOutLeft {
 +
  -webkit-animation-name: fadeOutLeft;
 +
  animation-name: fadeOutLeft;
 +
}
 +
 +
@-webkit-keyframes fadeOutLeftBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutLeftBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    -ms-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
}
 +
 +
.fadeOutLeftBig {
 +
  -webkit-animation-name: fadeOutLeftBig;
 +
  animation-name: fadeOutLeftBig;
 +
}
 +
 +
@-webkit-keyframes fadeOutRight {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(20px);
 +
    transform: translateX(20px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutRight {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(20px);
 +
    -ms-transform: translateX(20px);
 +
    transform: translateX(20px);
 +
  }
 +
}
 +
 +
.fadeOutRight {
 +
  -webkit-animation-name: fadeOutRight;
 +
  animation-name: fadeOutRight;
 +
}
 +
 +
@-webkit-keyframes fadeOutRightBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutRightBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    -ms-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
}
 +
 +
.fadeOutRightBig {
 +
  -webkit-animation-name: fadeOutRightBig;
 +
  animation-name: fadeOutRightBig;
 +
}
 +
 +
@-webkit-keyframes fadeOutUp {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-20px);
 +
    transform: translateY(-20px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutUp {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-20px);
 +
    -ms-transform: translateY(-20px);
 +
    transform: translateY(-20px);
 +
  }
 +
}
 +
 +
.fadeOutUp {
 +
  -webkit-animation-name: fadeOutUp;
 +
  animation-name: fadeOutUp;
 +
}
 +
 +
@-webkit-keyframes fadeOutUpBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
}
 +
 +
@keyframes fadeOutUpBig {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    -ms-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
}
 +
 +
.fadeOutUpBig {
 +
  -webkit-animation-name: fadeOutUpBig;
 +
  animation-name: fadeOutUpBig;
 +
}
 +
 +
@-webkit-keyframes flip {
 +
  0% {
 +
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 +
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 +
    -webkit-animation-timing-function: ease-out;
 +
    animation-timing-function: ease-out;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 +
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 +
    -webkit-animation-timing-function: ease-out;
 +
    animation-timing-function: ease-out;
 +
  }
 +
 +
  50% {
 +
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 +
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 +
    -webkit-animation-timing-function: ease-in;
 +
    animation-timing-function: ease-in;
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 +
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 +
    -webkit-animation-timing-function: ease-in;
 +
    animation-timing-function: ease-in;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 +
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 +
    -webkit-animation-timing-function: ease-in;
 +
    animation-timing-function: ease-in;
 +
  }
 +
}
 +
 +
@keyframes flip {
 +
  0% {
 +
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 +
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 +
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
 +
    -webkit-animation-timing-function: ease-out;
 +
    animation-timing-function: ease-out;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 +
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 +
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
 +
    -webkit-animation-timing-function: ease-out;
 +
    animation-timing-function: ease-out;
 +
  }
 +
 +
  50% {
 +
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 +
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 +
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
 +
    -webkit-animation-timing-function: ease-in;
 +
    animation-timing-function: ease-in;
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 +
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 +
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
 +
    -webkit-animation-timing-function: ease-in;
 +
    animation-timing-function: ease-in;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 +
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 +
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
 +
    -webkit-animation-timing-function: ease-in;
 +
    animation-timing-function: ease-in;
 +
  }
 +
}
 +
 +
.animated.flip {
 +
  -webkit-backface-visibility: visible;
 +
  -ms-backface-visibility: visible;
 +
  backface-visibility: visible;
 +
  -webkit-animation-name: flip;
 +
  animation-name: flip;
 +
}
 +
 +
@-webkit-keyframes flipInX {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateX(90deg);
 +
    transform: perspective(400px) rotateX(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: perspective(400px) rotateX(-10deg);
 +
    transform: perspective(400px) rotateX(-10deg);
 +
  }
 +
 +
  70% {
 +
    -webkit-transform: perspective(400px) rotateX(10deg);
 +
    transform: perspective(400px) rotateX(10deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateX(0deg);
 +
    transform: perspective(400px) rotateX(0deg);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes flipInX {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateX(90deg);
 +
    -ms-transform: perspective(400px) rotateX(90deg);
 +
    transform: perspective(400px) rotateX(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: perspective(400px) rotateX(-10deg);
 +
    -ms-transform: perspective(400px) rotateX(-10deg);
 +
    transform: perspective(400px) rotateX(-10deg);
 +
  }
 +
 +
  70% {
 +
    -webkit-transform: perspective(400px) rotateX(10deg);
 +
    -ms-transform: perspective(400px) rotateX(10deg);
 +
    transform: perspective(400px) rotateX(10deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateX(0deg);
 +
    -ms-transform: perspective(400px) rotateX(0deg);
 +
    transform: perspective(400px) rotateX(0deg);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.flipInX {
 +
  -webkit-backface-visibility: visible !important;
 +
  -ms-backface-visibility: visible !important;
 +
  backface-visibility: visible !important;
 +
  -webkit-animation-name: flipInX;
 +
  animation-name: flipInX;
 +
}
 +
 +
@-webkit-keyframes flipInY {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateY(90deg);
 +
    transform: perspective(400px) rotateY(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: perspective(400px) rotateY(-10deg);
 +
    transform: perspective(400px) rotateY(-10deg);
 +
  }
 +
 +
  70% {
 +
    -webkit-transform: perspective(400px) rotateY(10deg);
 +
    transform: perspective(400px) rotateY(10deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateY(0deg);
 +
    transform: perspective(400px) rotateY(0deg);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes flipInY {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateY(90deg);
 +
    -ms-transform: perspective(400px) rotateY(90deg);
 +
    transform: perspective(400px) rotateY(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: perspective(400px) rotateY(-10deg);
 +
    -ms-transform: perspective(400px) rotateY(-10deg);
 +
    transform: perspective(400px) rotateY(-10deg);
 +
  }
 +
 +
  70% {
 +
    -webkit-transform: perspective(400px) rotateY(10deg);
 +
    -ms-transform: perspective(400px) rotateY(10deg);
 +
    transform: perspective(400px) rotateY(10deg);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateY(0deg);
 +
    -ms-transform: perspective(400px) rotateY(0deg);
 +
    transform: perspective(400px) rotateY(0deg);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.flipInY {
 +
  -webkit-backface-visibility: visible !important;
 +
  -ms-backface-visibility: visible !important;
 +
  backface-visibility: visible !important;
 +
  -webkit-animation-name: flipInY;
 +
  animation-name: flipInY;
 +
}
 +
 +
@-webkit-keyframes flipOutX {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateX(0deg);
 +
    transform: perspective(400px) rotateX(0deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateX(90deg);
 +
    transform: perspective(400px) rotateX(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes flipOutX {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateX(0deg);
 +
    -ms-transform: perspective(400px) rotateX(0deg);
 +
    transform: perspective(400px) rotateX(0deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateX(90deg);
 +
    -ms-transform: perspective(400px) rotateX(90deg);
 +
    transform: perspective(400px) rotateX(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.flipOutX {
 +
  -webkit-animation-name: flipOutX;
 +
  animation-name: flipOutX;
 +
  -webkit-backface-visibility: visible !important;
 +
  -ms-backface-visibility: visible !important;
 +
  backface-visibility: visible !important;
 +
}
 +
 +
@-webkit-keyframes flipOutY {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateY(0deg);
 +
    transform: perspective(400px) rotateY(0deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateY(90deg);
 +
    transform: perspective(400px) rotateY(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes flipOutY {
 +
  0% {
 +
    -webkit-transform: perspective(400px) rotateY(0deg);
 +
    -ms-transform: perspective(400px) rotateY(0deg);
 +
    transform: perspective(400px) rotateY(0deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: perspective(400px) rotateY(90deg);
 +
    -ms-transform: perspective(400px) rotateY(90deg);
 +
    transform: perspective(400px) rotateY(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.flipOutY {
 +
  -webkit-backface-visibility: visible !important;
 +
  -ms-backface-visibility: visible !important;
 +
  backface-visibility: visible !important;
 +
  -webkit-animation-name: flipOutY;
 +
  animation-name: flipOutY;
 +
}
 +
 +
@-webkit-keyframes lightSpeedIn {
 +
  0% {
 +
    -webkit-transform: translateX(100%) skewX(-30deg);
 +
    transform: translateX(100%) skewX(-30deg);
 +
    opacity: 0;
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: translateX(-20%) skewX(30deg);
 +
    transform: translateX(-20%) skewX(30deg);
 +
    opacity: 1;
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateX(0%) skewX(-15deg);
 +
    transform: translateX(0%) skewX(-15deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0%) skewX(0deg);
 +
    transform: translateX(0%) skewX(0deg);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes lightSpeedIn {
 +
  0% {
 +
    -webkit-transform: translateX(100%) skewX(-30deg);
 +
    -ms-transform: translateX(100%) skewX(-30deg);
 +
    transform: translateX(100%) skewX(-30deg);
 +
    opacity: 0;
 +
  }
 +
 +
  60% {
 +
    -webkit-transform: translateX(-20%) skewX(30deg);
 +
    -ms-transform: translateX(-20%) skewX(30deg);
 +
    transform: translateX(-20%) skewX(30deg);
 +
    opacity: 1;
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: translateX(0%) skewX(-15deg);
 +
    -ms-transform: translateX(0%) skewX(-15deg);
 +
    transform: translateX(0%) skewX(-15deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0%) skewX(0deg);
 +
    -ms-transform: translateX(0%) skewX(0deg);
 +
    transform: translateX(0%) skewX(0deg);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.lightSpeedIn {
 +
  -webkit-animation-name: lightSpeedIn;
 +
  animation-name: lightSpeedIn;
 +
  -webkit-animation-timing-function: ease-out;
 +
  animation-timing-function: ease-out;
 +
}
 +
 +
@-webkit-keyframes lightSpeedOut {
 +
  0% {
 +
    -webkit-transform: translateX(0%) skewX(0deg);
 +
    transform: translateX(0%) skewX(0deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(100%) skewX(-30deg);
 +
    transform: translateX(100%) skewX(-30deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes lightSpeedOut {
 +
  0% {
 +
    -webkit-transform: translateX(0%) skewX(0deg);
 +
    -ms-transform: translateX(0%) skewX(0deg);
 +
    transform: translateX(0%) skewX(0deg);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(100%) skewX(-30deg);
 +
    -ms-transform: translateX(100%) skewX(-30deg);
 +
    transform: translateX(100%) skewX(-30deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.lightSpeedOut {
 +
  -webkit-animation-name: lightSpeedOut;
 +
  animation-name: lightSpeedOut;
 +
  -webkit-animation-timing-function: ease-in;
 +
  animation-timing-function: ease-in;
 +
}
 +
 +
@-webkit-keyframes rotateIn {
 +
  0% {
 +
    -webkit-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(-200deg);
 +
    transform: rotate(-200deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes rotateIn {
 +
  0% {
 +
    -webkit-transform-origin: center center;
 +
    -ms-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(-200deg);
 +
    -ms-transform: rotate(-200deg);
 +
    transform: rotate(-200deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: center center;
 +
    -ms-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.rotateIn {
 +
  -webkit-animation-name: rotateIn;
 +
  animation-name: rotateIn;
 +
}
 +
 +
@-webkit-keyframes rotateInDownLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes rotateInDownLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.rotateInDownLeft {
 +
  -webkit-animation-name: rotateInDownLeft;
 +
  animation-name: rotateInDownLeft;
 +
}
 +
 +
@-webkit-keyframes rotateInDownRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes rotateInDownRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    -ms-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.rotateInDownRight {
 +
  -webkit-animation-name: rotateInDownRight;
 +
  animation-name: rotateInDownRight;
 +
}
 +
 +
@-webkit-keyframes rotateInUpLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes rotateInUpLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    -ms-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.rotateInUpLeft {
 +
  -webkit-animation-name: rotateInUpLeft;
 +
  animation-name: rotateInUpLeft;
 +
}
 +
 +
@-webkit-keyframes rotateInUpRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes rotateInUpRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.rotateInUpRight {
 +
  -webkit-animation-name: rotateInUpRight;
 +
  animation-name: rotateInUpRight;
 +
}
 +
 +
@-webkit-keyframes rotateOut {
 +
  0% {
 +
    -webkit-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(200deg);
 +
    transform: rotate(200deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes rotateOut {
 +
  0% {
 +
    -webkit-transform-origin: center center;
 +
    -ms-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: center center;
 +
    -ms-transform-origin: center center;
 +
    transform-origin: center center;
 +
    -webkit-transform: rotate(200deg);
 +
    -ms-transform: rotate(200deg);
 +
    transform: rotate(200deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.rotateOut {
 +
  -webkit-animation-name: rotateOut;
 +
  animation-name: rotateOut;
 +
}
 +
 +
@-webkit-keyframes rotateOutDownLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes rotateOutDownLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    -ms-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.rotateOutDownLeft {
 +
  -webkit-animation-name: rotateOutDownLeft;
 +
  animation-name: rotateOutDownLeft;
 +
}
 +
 +
@-webkit-keyframes rotateOutDownRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes rotateOutDownRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.rotateOutDownRight {
 +
  -webkit-animation-name: rotateOutDownRight;
 +
  animation-name: rotateOutDownRight;
 +
}
 +
 +
@-webkit-keyframes rotateOutUpLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes rotateOutUpLeft {
 +
  0% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: left bottom;
 +
    -ms-transform-origin: left bottom;
 +
    transform-origin: left bottom;
 +
    -webkit-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.rotateOutUpLeft {
 +
  -webkit-animation-name: rotateOutUpLeft;
 +
  animation-name: rotateOutUpLeft;
 +
}
 +
 +
@-webkit-keyframes rotateOutUpRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes rotateOutUpRight {
 +
  0% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform-origin: right bottom;
 +
    -ms-transform-origin: right bottom;
 +
    transform-origin: right bottom;
 +
    -webkit-transform: rotate(90deg);
 +
    -ms-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.rotateOutUpRight {
 +
  -webkit-animation-name: rotateOutUpRight;
 +
  animation-name: rotateOutUpRight;
 +
}
 +
 +
@-webkit-keyframes slideInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
@keyframes slideInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    -ms-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
}
 +
 +
.slideInDown {
 +
  -webkit-animation-name: slideInDown;
 +
  animation-name: slideInDown;
 +
}
 +
 +
@-webkit-keyframes slideInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes slideInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    -ms-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.slideInLeft {
 +
  -webkit-animation-name: slideInLeft;
 +
  animation-name: slideInLeft;
 +
}
 +
 +
@-webkit-keyframes slideInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
@keyframes slideInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    -ms-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 +
.slideInRight {
 +
  -webkit-animation-name: slideInRight;
 +
  animation-name: slideInRight;
 +
}
 +
 +
@-webkit-keyframes slideOutLeft {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
}
 +
 +
@keyframes slideOutLeft {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-2000px);
 +
    -ms-transform: translateX(-2000px);
 +
    transform: translateX(-2000px);
 +
  }
 +
}
 +
 +
.slideOutLeft {
 +
  -webkit-animation-name: slideOutLeft;
 +
  animation-name: slideOutLeft;
 +
}
 +
 +
@-webkit-keyframes slideOutRight {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
}
 +
 +
@keyframes slideOutRight {
 +
  0% {
 +
    -webkit-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(2000px);
 +
    -ms-transform: translateX(2000px);
 +
    transform: translateX(2000px);
 +
  }
 +
}
 +
 +
.slideOutRight {
 +
  -webkit-animation-name: slideOutRight;
 +
  animation-name: slideOutRight;
 +
}
 +
 +
@-webkit-keyframes slideOutUp {
 +
  0% {
 +
    -webkit-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
}
 +
 +
@keyframes slideOutUp {
 +
  0% {
 +
    -webkit-transform: translateY(0);
 +
    -ms-transform: translateY(0);
 +
    transform: translateY(0);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateY(-2000px);
 +
    -ms-transform: translateY(-2000px);
 +
    transform: translateY(-2000px);
 +
  }
 +
}
 +
 +
.slideOutUp {
 +
  -webkit-animation-name: slideOutUp;
 +
  animation-name: slideOutUp;
 +
}
 +
 +
@-webkit-keyframes hinge {
 +
  0% {
 +
    -webkit-transform: rotate(0);
 +
    transform: rotate(0);
 +
    -webkit-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  20%, 60% {
 +
    -webkit-transform: rotate(80deg);
 +
    transform: rotate(80deg);
 +
    -webkit-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: rotate(60deg);
 +
    transform: rotate(60deg);
 +
    -webkit-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: rotate(60deg) translateY(0);
 +
    transform: rotate(60deg) translateY(0);
 +
    opacity: 1;
 +
    -webkit-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(700px);
 +
    transform: translateY(700px);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes hinge {
 +
  0% {
 +
    -webkit-transform: rotate(0);
 +
    -ms-transform: rotate(0);
 +
    transform: rotate(0);
 +
    -webkit-transform-origin: top left;
 +
    -ms-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  20%, 60% {
 +
    -webkit-transform: rotate(80deg);
 +
    -ms-transform: rotate(80deg);
 +
    transform: rotate(80deg);
 +
    -webkit-transform-origin: top left;
 +
    -ms-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  40% {
 +
    -webkit-transform: rotate(60deg);
 +
    -ms-transform: rotate(60deg);
 +
    transform: rotate(60deg);
 +
    -webkit-transform-origin: top left;
 +
    -ms-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  80% {
 +
    -webkit-transform: rotate(60deg) translateY(0);
 +
    -ms-transform: rotate(60deg) translateY(0);
 +
    transform: rotate(60deg) translateY(0);
 +
    opacity: 1;
 +
    -webkit-transform-origin: top left;
 +
    -ms-transform-origin: top left;
 +
    transform-origin: top left;
 +
    -webkit-animation-timing-function: ease-in-out;
 +
    animation-timing-function: ease-in-out;
 +
  }
 +
 +
  100% {
 +
    -webkit-transform: translateY(700px);
 +
    -ms-transform: translateY(700px);
 +
    transform: translateY(700px);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
.hinge {
 +
  -webkit-animation-name: hinge;
 +
  animation-name: hinge;
 +
}
 +
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes rollIn {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-100%) rotate(-120deg);
 +
    transform: translateX(-100%) rotate(-120deg);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0px) rotate(0deg);
 +
    transform: translateX(0px) rotate(0deg);
 +
  }
 +
}
 +
 +
@keyframes rollIn {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-100%) rotate(-120deg);
 +
    -ms-transform: translateX(-100%) rotate(-120deg);
 +
    transform: translateX(-100%) rotate(-120deg);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0px) rotate(0deg);
 +
    -ms-transform: translateX(0px) rotate(0deg);
 +
    transform: translateX(0px) rotate(0deg);
 +
  }
 +
}
 +
 +
.rollIn {
 +
  -webkit-animation-name: rollIn;
 +
  animation-name: rollIn;
 +
}
 +
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes rollOut {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0px) rotate(0deg);
 +
    transform: translateX(0px) rotate(0deg);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(100%) rotate(120deg);
 +
    transform: translateX(100%) rotate(120deg);
 +
  }
 +
}
 +
 +
@keyframes rollOut {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0px) rotate(0deg);
 +
    -ms-transform: translateX(0px) rotate(0deg);
 +
    transform: translateX(0px) rotate(0deg);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(100%) rotate(120deg);
 +
    -ms-transform: translateX(100%) rotate(120deg);
 +
    transform: translateX(100%) rotate(120deg);
 +
  }
 +
}
 +
 +
.rollOut {
 +
  -webkit-animation-name: rollOut;
 +
  animation-name: rollOut;
 +
}
  
−
@charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:relative;float:left;height:100%;text-align:center;-webkit-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-moz-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-ms-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-o-transition-timing-function:cubic-bezier(0.645,.045,.355,1);transition-timing-function:cubic-bezier(0.645,.045,.355,1)}.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{-webkit-transition:opacity .5s linear;-moz-transition:opacity .5s linear;-ms-transition:opacity .5s linear;-o-transition:opacity .5s linear;transition:opacity .5s linear}.blueimp-gallery>.slides>.slide-loading{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}.blueimp-gallery>.slides>.slide-loading>.slide-content{opacity:0}.blueimp-gallery>.slides>.slide-error{background:url(../img/error.png) center no-repeat}.blueimp-gallery>.slides>.slide-error>.slide-content{display:none}.blueimp-gallery>.prev,.blueimp-gallery>.next{position:absolute;top:50%;left:15px;width:40px;height:40px;margin-top:-23px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-decoration:none;text-shadow:0 0 2px #000;text-align:center;background:#222;background:rgba(0,0,0,.5);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;cursor:pointer;display:none}.blueimp-gallery>.next{left:auto;right:15px}.blueimp-gallery>.close,.blueimp-gallery>.title{position:absolute;top:15px;left:15px;margin:0 40px 0 0;font-size:20px;line-height:30px;color:#fff;text-shadow:0 0 2px #000;opacity:.8;display:none}.blueimp-gallery>.close{padding:15px;right:15px;left:auto;margin:-15px;font-size:30px;text-decoration:none;cursor:pointer}.blueimp-gallery>.play-pause{position:absolute;right:15px;bottom:15px;width:15px;height:15px;background:url(../img/play-pause.png) 0 0 no-repeat;cursor:pointer;opacity:.5;display:none}.blueimp-gallery-playing>.play-pause{background-position:-15px 0}.blueimp-gallery>.prev:hover,.blueimp-gallery>.next:hover,.blueimp-gallery>.close:hover,.blueimp-gallery>.title:hover,.blueimp-gallery>.play-pause:hover{color:#fff;opacity:1}.blueimp-gallery-controls>.prev,.blueimp-gallery-controls>.next,.blueimp-gallery-controls>.close,.blueimp-gallery-controls>.title,.blueimp-gallery-controls>.play-pause{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.prev,.blueimp-gallery-left>.prev,.blueimp-gallery-single>.next,.blueimp-gallery-right>.next,.blueimp-gallery-single>.play-pause{display:none}.blueimp-gallery>.slides>.slide>.slide-content,.blueimp-gallery>.prev,.blueimp-gallery>.next,.blueimp-gallery>.close,.blueimp-gallery>.play-pause{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:last-child .blueimp-gallery>.slides>.slide-error{background-image:url(../img/error.svg)}body:last-child .blueimp-gallery>.play-pause{width:20px;height:20px;background-size:40px 20px;background-image:url(../img/play-pause.svg)}body:last-child .blueimp-gallery-playing>.play-pause{background-position:-20px 0}*+html .blueimp-gallery>.slides>.slide{min-height:300px}*+html .blueimp-gallery>.slides>.slide>.slide-content{position:relative}@charset "UTF-8";.blueimp-gallery>.indicator{position:absolute;top:auto;right:15px;bottom:15px;left:15px;margin:0 40px;padding:0;list-style:none;text-align:center;line-height:10px;display:none}.blueimp-gallery>.indicator>li{display:inline-block;width:9px;height:9px;margin:6px 3px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:1px solid transparent;background:#ccc;background:rgba(255,255,255,.25)center no-repeat;border-radius:5px;box-shadow:0 0 2px #000;opacity:.5;cursor:pointer}.blueimp-gallery>.indicator>li:hover,.blueimp-gallery>.indicator>.active{background-color:#fff;border-color:#fff;opacity:1}.blueimp-gallery-controls>.indicator{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.indicator{display:none}.blueimp-gallery>.indicator{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*+html .blueimp-gallery>.indicator>li{display:inline}@charset "UTF-8";.blueimp-gallery>.slides>.slide>.video-content>img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.video-content>video{position:absolute;top:0;left:0;width:100%;height:100%}.blueimp-gallery>.slides>.slide>.video-content>iframe{position:absolute;top:100%;left:0;width:100%;height:100%;border:none}.blueimp-gallery>.slides>.slide>.video-playing>iframe{top:0}.blueimp-gallery>.slides>.slide>.video-content>a{position:absolute;top:50%;right:0;left:0;margin:-64px auto 0;width:128px;height:128px;background:url(../img/video-play.png) center no-repeat;opacity:.8;cursor:pointer}.blueimp-gallery>.slides>.slide>.video-content>a:hover{opacity:1}.blueimp-gallery>.slides>.slide>.video-playing>a,.blueimp-gallery>.slides>.slide>.video-playing>img{display:none}.blueimp-gallery>.slides>.slide>.video-content>video{display:none}.blueimp-gallery>.slides>.slide>.video-playing>video{display:block}.blueimp-gallery>.slides>.slide>.video-loading>a{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}body:last-child .blueimp-gallery>.slides>.slide>.video-content:not(.video-loading)>a{background-image:url(../img/video-play.svg)}*+html .blueimp-gallery>.slides>.slide>.video-content{height:100%}*+html .blueimp-gallery>.slides>.slide>.video-content>a{left:50%;margin-left:-64px}
+
@charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:relative;float:left;height:100%;text-align:center;-webkit-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-moz-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-ms-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-o-transition-timing-function:cubic-bezier(0.645,.045,.355,1);transition-timing-function:cubic-bezier(0.645,.045,.355,1)}.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{-webkit-transition:opacity .5s linear;-moz-transition:opacity .5s linear;-ms-transition:opacity .5s linear;-o-transition:opacity .5s linear;transition:opacity .5s linear}.blueimp-gallery>.slides>.slide-loading{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}.blueimp-gallery>.slides>.slide-loading>.slide-content{opacity:0}.blueimp-gallery>.slides>.slide-error{background:url(../img/error.png) center no-repeat}.blueimp-gallery>.slides>.slide-error>.slide-content{display:none}.blueimp-gallery>.prev,.blueimp-gallery>.next{position:absolute;top:50%;left:15px;width:40px;height:40px;margin-top:-23px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-decoration:none;text-shadow:0 0 2px #000;text-align:center;background:#222;background:rgba(0,0,0,.5);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;cursor:pointer;display:none}.blueimp-gallery>.next{left:auto;right:15px}.blueimp-gallery>.close,.blueimp-gallery>.title{position:absolute;top:15px;left:15px;margin:0 40px 0 0;font-size:20px;line-height:30px;color:#980000;text-shadow:0 0 2px #000;opacity:.8;display:none}.blueimp-gallery>.close{padding:15px;right:15px;left:auto;margin:-15px;font-size:30px;text-decoration:none;cursor:pointer}.blueimp-gallery>.play-pause{position:absolute;right:15px;bottom:15px;width:15px;height:15px;background:url(../img/play-pause.png) 0 0 no-repeat;cursor:pointer;opacity:.5;display:none}.blueimp-gallery-playing>.play-pause{background-position:-15px 0}.blueimp-gallery>.prev:hover,.blueimp-gallery>.next:hover,.blueimp-gallery>.close:hover,.blueimp-gallery>.title:hover,.blueimp-gallery>.play-pause:hover{color:#fff;opacity:1}.blueimp-gallery-controls>.prev,.blueimp-gallery-controls>.next,.blueimp-gallery-controls>.close,.blueimp-gallery-controls>.title,.blueimp-gallery-controls>.play-pause{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.prev,.blueimp-gallery-left>.prev,.blueimp-gallery-single>.next,.blueimp-gallery-right>.next,.blueimp-gallery-single>.play-pause{display:none}.blueimp-gallery>.slides>.slide>.slide-content,.blueimp-gallery>.prev,.blueimp-gallery>.next,.blueimp-gallery>.close,.blueimp-gallery>.play-pause{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:last-child .blueimp-gallery>.slides>.slide-error{background-image:url(../img/error.svg)}body:last-child .blueimp-gallery>.play-pause{width:20px;height:20px;background-size:40px 20px;background-image:url(../img/play-pause.svg)}body:last-child .blueimp-gallery-playing>.play-pause{background-position:-20px 0}*+html .blueimp-gallery>.slides>.slide{min-height:300px}*+html .blueimp-gallery>.slides>.slide>.slide-content{position:relative}@charset "UTF-8";.blueimp-gallery>.indicator{position:absolute;top:auto;right:15px;bottom:15px;left:15px;margin:0 40px;padding:0;list-style:none;text-align:center;line-height:10px;display:none}.blueimp-gallery>.indicator>li{display:inline-block;width:9px;height:9px;margin:6px 3px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:1px solid transparent;background:#ccc;background:rgba(255,255,255,.25)center no-repeat;border-radius:5px;box-shadow:0 0 2px #000;opacity:.5;cursor:pointer}.blueimp-gallery>.indicator>li:hover,.blueimp-gallery>.indicator>.active{background-color:#fff;border-color:#fff;opacity:1}.blueimp-gallery-controls>.indicator{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.indicator{display:none}.blueimp-gallery>.indicator{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*+html .blueimp-gallery>.indicator>li{display:inline}@charset "UTF-8";.blueimp-gallery>.slides>.slide>.video-content>img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.video-content>video{position:absolute;top:0;left:0;width:100%;height:100%}.blueimp-gallery>.slides>.slide>.video-content>iframe{position:absolute;top:100%;left:0;width:100%;height:100%;border:none}.blueimp-gallery>.slides>.slide>.video-playing>iframe{top:0}.blueimp-gallery>.slides>.slide>.video-content>a{position:absolute;top:50%;right:0;left:0;margin:-64px auto 0;width:128px;height:128px;background:url(../img/video-play.png) center no-repeat;opacity:.8;cursor:pointer}.blueimp-gallery>.slides>.slide>.video-content>a:hover{opacity:1}.blueimp-gallery>.slides>.slide>.video-playing>a,.blueimp-gallery>.slides>.slide>.video-playing>img{display:none}.blueimp-gallery>.slides>.slide>.video-content>video{display:none}.blueimp-gallery>.slides>.slide>.video-playing>video{display:block}.blueimp-gallery>.slides>.slide>.video-loading>a{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}body:last-child .blueimp-gallery>.slides>.slide>.video-content:not(.video-loading)>a{background-image:url(../img/video-play.svg)}*+html .blueimp-gallery>.slides>.slide>.video-content{height:100%}*+html .blueimp-gallery>.slides>.slide>.video-content>a{left:50%;margin-left:-64px}
  
−
body { color:#333; font:300 15px/15px Roboto,Arial,Helvetica;background:url(https://static.igem.org/mediawiki/2015/3/36/Couverture_IONIS.jpg) right no-repeat fixed #fff; -webkit-font-smoothing:antialiased;}
+
body { color:#333; font:300 15px/15px Roboto,Arial,Helvetica;background:url("") right no-repeat fixed #ffff; -webkit-font-smoothing:antialiased;}
  
 
a{color:#00a9c6; text-decoration:none;}
 
a{color:#00a9c6; text-decoration:none;}
Line 36: Line 3,074:
 
.navbar-nav > li > a{font-size: 1em;line-height: 3.6em;}
 
.navbar-nav > li > a{font-size: 1em;line-height: 3.6em;}
 
.navbar-fixed-top{top: 5px;}
 
.navbar-fixed-top{top: 5px;}
−
.navbar-inverse{background: #111;}
+
.navbar-inverse{background: #003333;}
−
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus{background: none;color: #E89F10;}
+
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus{background: none;color: #990000;}
  
 
#head,.carousel{margin-top: 0;}
 
#head,.carousel{margin-top: 0;}
Line 45: Line 3,083:
 
/*about*/
 
/*about*/
 
.about.spacer{padding-left: 4em; padding-right: 4em;padding-bottom: 0;}
 
.about.spacer{padding-left: 4em; padding-right: 4em;padding-bottom: 0;}
−
.services ul li{width: 10em;height: 10em;border: 1px solid #ccc;padding: 0;border-radius: 50%;margin: 0 1.25em;line-height: 13.5em;color: #999;}
+
.services ul li{width: 10em;height: 10em;border: 1px solid #ccc;padding: 0;border-radius: 50%;margin: 0 1.25em;line-height: 13.5em;color: #000000; background:rgb(178,34,34,0.2-;}
 
.services ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
 
.services ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
−
.services ul li span i{font-size: 3em;}
+
.services ul li span i{font-size: 3em; margin-top:1em}
 
.services ul li span b{display: block;font-size: 1em;font-weight: 300;}
 
.services ul li span b{display: block;font-size: 1em;font-weight: 300;}
−
 
+
/*#7dbf94*/
  
 
/*testimonials*/
 
/*testimonials*/
Line 75: Line 3,113:
  
 
.highlight-info{ background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;}
 
.highlight-info{ background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;}
−
.highlight-info .overlay{background: rgba(232,159,16,0.7);}
+
.highlight-info .overlay{background: rgba(178,34,34,0.8);}
 
.highlight-info h4{color: #fff;margin:0.5em 0 0 0;}
 
.highlight-info h4{color: #fff;margin:0.5em 0 0 0;}
 
/*about us*/
 
/*about us*/
  
 +
/*Sponsors*/
  
  
 +
.sponsors{ background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;}
 +
.sponsors .overlay{background: rgba(102,205,170,0.4);}
 +
.sponsors h4{color: #fff;margin:0.5em 0 0 0;}
  
  
−
 
+
/*0,176,128*/
−
 
+
  
  
Line 96: Line 3,137:
 
.footer a{color: #aaa;margin: 0 1em; }
 
.footer a{color: #aaa;margin: 0 1em; }
  
−
.gototop{position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.5);padding: 10px;color: #fff;}
+
.gototop{z-index: 1000;position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.5);padding: 10px;color: #fff;}
 
.gototop i{line-height: 0.5em;}
 
.gototop i{line-height: 0.5em;}
  
Line 128: Line 3,169:
 
body{font:300 12px/12px Roboto,Arial,Helvetica;}
 
body{font:300 12px/12px Roboto,Arial,Helvetica;}
 
.navbar-nav > li > a {line-height: 1em;}
 
.navbar-nav > li > a {line-height: 1em;}
−
.navbar-brand{padding: 7px;}
+
.navbar-brand{padding: 5px;}
−
.navbar-brand img{height: 37px;}
+
.navbar-brand img{height: 20px;}
 
.navbar-toggle{margin-top: 12px;}
 
.navbar-toggle{margin-top: 12px;}
  
Line 136: Line 3,177:
 
h2.text-center{text-align: left;font-size: 1.7em;}
 
h2.text-center{text-align: left;font-size: 1.7em;}
 
h4 {font: 300 1.2em Roboto,Arial,Helvetica;}
 
h4 {font: 300 1.2em Roboto,Arial,Helvetica;}
−
#partners h2{padding: 0 1em;}  
+
#partners h2{padding: 0 0.5em;}  
 
#home {padding-top: 5em;}
 
#home {padding-top: 5em;}
  
Line 145: Line 3,186:
  
 
.about.spacer{padding-left: 2em;padding-right: 2em;}
 
.about.spacer{padding-left: 2em;padding-right: 2em;}
−
.spacer{padding:2em 0 0 0;}
+
.spacer{padding:0.5em 0 0 0;}
 
.services ul li{margin-bottom: 1em;}
 
.services ul li{margin-bottom: 1em;}
  
 
.highlight-info .overlay{padding-bottom: 2em;}
 
.highlight-info .overlay{padding-bottom: 2em;}
 +
.sponsors .overlay{padding-bottom: 2em;}
  
 
.grid.team div{margin: 0;padding: 0;}
 
.grid.team div{margin: 0;padding: 0;}
Line 154: Line 3,196:
 
.footer{margin-top: 2em;padding-bottom: 2em;}
 
.footer{margin-top: 2em;padding-bottom: 2em;}
 
}
 
}
 +
 +
 +
/*---------------------------------------------------- Parallax------------------------------------------------------*/
 +
.parallax {
 +
text-align:center;
 +
background-position:center center;
 +
background-repeat:no-repeat;
 +
background-size:cover;
 +
background-attachment:fixed !important;
 +
overflow:hidden;
 +
}
 +
.parallax-pattern-overlay {
 +
background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;
 +
background: rgba(200,200,200,0.4);
 +
background-repeat: repeat;
 +
 +
@-webkit-keyframes fadeInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translate3d(0, -100%, 0);
 +
            transform: translate3d(0, -100%, 0);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: none;
 +
            transform: none;
 +
  }
 +
}
 +
 +
@keyframes fadeInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translate3d(0, -100%, 0);
 +
            transform: translate3d(0, -100%, 0);
 +
  }
 +
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: none;
 +
            transform: none;
 +
  }
 +
}
 +
 +
.fadeInDown {
 +
  -webkit-animation-name: fadeInDown;
 +
          animation-name: fadeInDown;
 +
}
 +
 +
img#site-title {
 +
max-width: 120px;
 +
}
 +
 +
 +
@-webkit-keyframes zoomIn {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
            transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
@keyframes zoomIn {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
            transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
}
 +
 +
.zoomIn {
 +
  -webkit-animation-name: zoomIn;
 +
          animation-name: zoomIn;
 +
}
 +
 +
@-webkit-keyframes zoomInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
@keyframes zoomInDown {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
.zoomInDown {
 +
  -webkit-animation-name: zoomInDown;
 +
          animation-name: zoomInDown;
 +
}
 +
 +
@-webkit-keyframes zoomInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
@keyframes zoomInLeft {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
.zoomInLeft {
 +
  -webkit-animation-name: zoomInLeft;
 +
          animation-name: zoomInLeft;
 +
}
 +
 +
@-webkit-keyframes zoomInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
@keyframes zoomInRight {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
.zoomInRight {
 +
  -webkit-animation-name: zoomInRight;
 +
          animation-name: zoomInRight;
 +
}
 +
 +
@-webkit-keyframes zoomInUp {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
@keyframes zoomInUp {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 +
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 +
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 +
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 +
  }
 +
}
 +
 +
.zoomInUp {
 +
  -webkit-animation-name: zoomInUp;
 +
          animation-name: zoomInUp;
 +
}
 +
 +
@-webkit-keyframes zoomOut {
 +
  0% {
 +
    opacity: 1;
 +
  }
 +
 +
  50% {
 +
    opacity: 0;
 +
    -webkit-transform: scale3d(.3, .3, .3);
 +
            transform: scale3d(.3, .3, .3);
 +
  }
 +
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
 +
</style>
 +
 +
</html>

Revision as of 11:36, 4 August 2015