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

 
(256 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html>
+
<html>
−
<style type="text/css">
+
<style type="text/css">
−
  .grid {
+
−
position: relative;
+
−
margin: 0 auto;
+
−
list-style: none;
+
−
text-align: center;
+
−
}
+
  
−
/* Common style */
+
#proto a{
−
.grid figure {
+
text-decoration: none;
−
position: relative;
+
}
−
float: left;
+
−
overflow: hidden;
+
−
margin: 0; /*change here for spacing*/
+
−
width: 33.333333333%;
+
−
text-align: center;
+
−
cursor: pointer;
+
−
}
+
  
−
.grid figure img {
+
#proto a:link {
−
position: relative;
+
color: #66cdaa;
−
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,
+
#proto a:hover {
−
.grid figure figcaption::after {
+
color:#b22222;
−
pointer-events: none;
+
text-decoration: none;
−
}
+
}
  
−
.grid figure figcaption,
+
/* ------------------------GRID -------------------------------*/
−
.grid figure figcaption > a {
+
  .grid {
−
position: absolute;
+
position: relative;
−
top: 0;
+
margin: 0 auto;
−
left: 0;
+
list-style: none;
−
width: 100%;
+
text-align: center;
−
height: 100%;
+
}
−
}
+
  
−
/* Anchor will cover the whole item by default */
+
/* Common style */
−
/* For some effects it will show as a button */
+
.grid figure {
−
.grid figure figcaption > a {
+
position: relative;
−
z-index: 1000;
+
float: left;
−
text-indent: 200%;
+
overflow: hidden;
−
white-space: nowrap;
+
margin: 0.8em; /*change here for spacing*/
−
font-size: 0;
+
width: 30.8%;
−
opacity: 0;
+
text-align: center;
−
}
+
cursor: pointer;
 +
}
  
−
.grid figure h2 {
+
.grid figure img {
−
padding: 0
+
position: relative;
−
word-spacing: -0.15em;
+
display: block;
−
font-weight: 700;
+
max-width: 100%;
−
}
+
opacity: 1;
 +
}
  
−
.grid figure h2,
+
.grid figure figcaption {
−
.grid figure p {
+
padding: 2em;
−
margin: 0;
+
color: #fff;
−
}
+
text-transform: uppercase;
 +
font-size: 1.25em;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
  
−
.grid figure p {
+
.grid figure figcaption::before,
−
letter-spacing: 1px;
+
.grid figure figcaption::after {
−
font-size: 68.5%;
+
pointer-events: none;
−
}
+
}
  
−
/* Individual effects */
+
.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 */
 +
 +
.grid2 {
 +
position: relative;
 +
margin: 0 auto;
 +
list-style: none;
 +
text-align: center;
 +
}
 +
 +
/* Common style */
 +
.grid2 figure {
 +
position: relative;
 +
float: center;
 +
overflow: hidden;
 +
/*change here for spacing*/
 +
cursor: pointer;
 +
}
 +
 +
.grid2 figure img {
 +
position: relative;
 +
display: block;
 +
max-width: 100%;
 +
opacity: 1;
 +
}
 +
 +
.grid2 figure figcaption {
 +
color: #fff;
 +
text-transform: uppercase;
 +
font-size: 1.25em;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
 +
.grid2 figure figcaption::before,
 +
.grid2 figure figcaption::after {
 +
pointer-events: none;
 +
}
 +
 +
.grid2 figure figcaption,
 +
.grid2 figure figcaption > a {
 +
position: absolute;
 +
top: 0px;
 +
left: 0;
 +
right:0;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 +
 +
/*---------------*/
 +
/***** Oscar *****/
 +
/*---------------*/
 +
 +
figure.effect-oscar2 {
 +
/* 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-oscar2 figcaption {
 +
 +
/* background-color: rgba(58,52,42,0.7);
 +
-webkit-transition: background-color 0.35s;
 +
transition: background-color 0.35s;*/
 +
}
 +
 +
figure.effect-oscar2 figcaption::before {
 +
position: absolute;
 +
content: '';
 +
}
 +
 +
figure.effect-oscar2 figcaption img {
 +
font-size: 25px;
 +
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-oscar2 figcaption::before {
 +
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-oscar2:hover figcaption img {
 +
opacity:1;
 +
-webkit-transform: translateX(0);
 +
-moz-transform: translateX(0);
 +
-o-transform: translateX();
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);
 +
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
 +
filter: alpha(opacity=100);
 +
opacity: 1;
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
 +
}
 +
 +
figure.effect-oscar2:hover figcaption::before,
 +
figure.effect-oscar2:hover p {
 +
opacity: 1;
 +
-webkit-transform: scale(1);
 +
transform: scale(1);
 +
}
 +
 +
figure.effect-oscar2:hover figcaption {
 +
background-color: rgba(0,0,0,0.2);
 +
}
 +
 +
figure.effect-oscar2:hover img {
 +
opacity: 0.4;
 +
}
 +
 +
 +
.social a:link{
 +
color:#66cdaa
 +
}
 +
.social a:hover{
 +
color:#333
 +
}
 +
 +
 
/*---------------*/
 
/*---------------*/
−
/***** Oscar *****/
+
/***** Milo *****/
 
/*---------------*/
 
/*---------------*/
  
−
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 {
+
figure.effect-milo figcaption::before {
−
opacity: 0.9;
+
opacity: 0;
−
-webkit-transition: opacity 0.35s;
+
-webkit-transform: scale(0);
−
transition: opacity 0.35s;
+
transform: scale(0);
−
}
+
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
−
*/
+
transition: opacity 0.35s, transform 0.35s;
−
figure.effect-oscar figcaption {
+
}
−
padding: 15%;
+
−
/* background-color: rgba(58,52,42,0.7);
+
figure.effect-milo figcaption::before {
−
-webkit-transition: background-color 0.35s;
+
position: absolute;
−
transition: background-color 0.35s;*/
+
content: '';
−
}
+
}
  
−
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;
+
figure.effect-milo:hover img {
−
line-height: 1em;
+
opacity: 0.4;
−
-webkit-transition: -webkit-transform 0.35s;
+
-webkit-transform: translate3d(0,0,0) scale(1);
−
transition: transform 0.35s;
+
transform: translate3d(0,0,0) scale(1);
−
-webkit-transform: translate3d(0,100%,0);
+
−
transform: translate3d(0,100%,0);
+
 
}
 
}
  
−
figure.effect-oscar figcaption::before,
+
 
−
figure.effect-oscar p {
+
figure.effect-milo figcaption img {
 
opacity: 0;
 
opacity: 0;
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
-webkit-transition: -webkit-transform 0.50s;
−
transition: opacity 0.35s, transform 0.35s;
+
transition: transform 0.40s;
−
-webkit-transform: scale(0);
+
-webkit-transform: translate3d(0,0,0) scale(1);
−
transform: scale(0);
+
transform: translate3d(0,0,0) scale(1);
 +
 
 
}
 
}
  
−
figure.effect-oscar:hover h2 {
+
figure.effect-milo:hover figcaption img {
 +
opacity: 1;
 
-webkit-transform: translate3d(0,0,0);
 
-webkit-transform: translate3d(0,0,0);
 
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 {
+
/* EFFECT OSCAR !!! */
−
opacity: 0.4;
+
−
}
+
  
 +
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(0,0,0,0.3)
 +
/* 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 {
−
/***** Chico *****/
+
margin: 0;
−
/*---------------*/
+
font-size:35px;
 +
padding-bottom:15px;
 +
padding-left: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-chico img {
+
figure.effect-oscar figcaption::before,
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
figure.effect-oscar p {
−
transition: opacity 0.35s, transform 0.35s;
+
opacity: 0;
−
-webkit-transform: scale(1.12);
+
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
−
transform: scale(1.12);
+
transition: opacity 0.35s, transform 0.35s;
−
}
+
-webkit-transform: scale(0);
 +
transform: scale(0);
 +
}
  
−
figure.effect-chico:hover img {
+
figure.effect-oscar:hover h2 {
−
opacity: 0.5;
+
-webkit-transform: translate3d(0,0,0);
−
-webkit-transform: scale(1);
+
transform: translate3d(0,0,0);
−
transform: scale(1);
+
}
−
}
+
  
−
figure.effect-chico figcaption {
+
figure.effect-oscar:hover figcaption::before,
−
padding: 2em;
+
figure.effect-oscar:hover p {
−
}
+
opacity: 1;
 +
-webkit-transform: scale(1);
 +
transform: scale(1);
 +
}
  
−
figure.effect-chico figcaption::before {
+
figure.effect-oscar:hover figcaption {
−
position: absolute;
+
background-color: rgba(0,0,0,0.8);
−
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-oscar:hover img {
−
figure.effect-chico p {
+
opacity: 0.4;
−
opacity: 0;
+
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
}
−
transition: opacity 0.35s, transform 0.35s;
+
/*---------------*/
−
}
+
/***** Chico *****/
 +
/*---------------*/
  
−
figure.effect-chico h2 {
+
figure.effect-chico img {
−
padding: 20% 0 20px 0;
+
-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 p {
+
figure.effect-chico:hover img {
−
margin: 0 auto;
+
opacity: 0.5;
−
max-width: 200px;
+
-webkit-transform: scale(1);
−
-webkit-transform: scale(1.5);
+
transform: scale(1);
−
transform: scale(1.5);
+
}
−
}
+
  
−
figure.effect-chico:hover figcaption::before,
+
figure.effect-chico figcaption {
−
figure.effect-chico:hover p {
+
padding: 2em;
−
opacity: 1;
+
}
−
-webkit-transform: scale(1);
+
−
transform: scale(1);
+
−
}
+
  
−
@media screen and (max-width: 50em) {
+
figure.effect-chico figcaption::before {
−
.content {
+
position: absolute;
−
padding: 0 10px;
+
top: 30px;
−
text-align: center;
+
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);
 
}
 
}
−
.grid figure {
+
 
−
width: 50%;
+
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;
 +
}
  
−
@media (max-width: 639px) {
+
figure.effect-chico p {
−
.grid figure {width: 100%;}
+
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);
 +
}
  
−
@charset "UTF-8";
+
@media screen and (max-width: 50em) {
 +
.content {
 +
padding: 0 10px;
 +
text-align: center;
 +
}
 +
.grid figure {
 +
width: 50%;
 +
}
 +
}
  
−
/*!
 
−
Animate.css - http://daneden.me/animate
 
−
Licensed under the MIT license
 
  
−
Copyright (c) 2013 Daniel Eden
+
@media (max-width: 639px) {
 +
.grid figure {width: 100%;}
 +
}
  
−
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.
+
@charset "UTF-8";
  
−
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.
+
/*!
−
*/
+
Animate.css - http://daneden.me/animate
 +
Licensed under the MIT license
  
−
.animated {
+
Copyright (c) 2013 Daniel Eden
−
  -webkit-animation-duration: 1s;
+
−
  animation-duration: 1s;
+
−
  -webkit-animation-fill-mode: both;
+
−
  animation-fill-mode: both;
+
−
}
+
  
−
.animated.hinge {
+
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:
−
  -webkit-animation-duration: 2s;
+
−
  animation-duration: 2s;
+
−
}
+
  
−
@-webkit-keyframes bounce {
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
−
  0%, 20%, 50%, 80%, 100% {
+
−
    -webkit-transform: translateY(0);
+
−
    transform: translateY(0);
+
−
  }
+
  
−
  40% {
+
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.
−
    -webkit-transform: translateY(-30px);
+
*/
−
    transform: translateY(-30px);
+
−
  }
+
  
−
  60% {
+
.animated {
−
    -webkit-transform: translateY(-15px);
+
  -webkit-animation-duration: 1s;
−
    transform: translateY(-15px);
+
  animation-duration: 1s;
−
  }
+
  -webkit-animation-fill-mode: both;
−
}
+
  animation-fill-mode: both;
 +
}
  
−
@keyframes bounce {
+
.animated.hinge {
−
  0%, 20%, 50%, 80%, 100% {
+
  -webkit-animation-duration: 2s;
−
    -webkit-transform: translateY(0);
+
  animation-duration: 2s;
−
    -ms-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
  
−
  40% {
+
@-webkit-keyframes bounce {
−
    -webkit-transform: translateY(-30px);
+
  0%, 20%, 50%, 80%, 100% {
−
    -ms-transform: translateY(-30px);
+
-webkit-transform: translateY(0);
−
    transform: translateY(-30px);
+
transform: translateY(0);
−
  }
+
  }
  
−
  60% {
+
  40% {
−
    -webkit-transform: translateY(-15px);
+
-webkit-transform: translateY(-30px);
−
    -ms-transform: translateY(-15px);
+
transform: translateY(-30px);
−
    transform: translateY(-15px);
+
  }
−
  }
+
−
}
+
  
−
.bounce {
+
  60% {
−
  -webkit-animation-name: bounce;
+
-webkit-transform: translateY(-15px);
−
  animation-name: bounce;
+
transform: translateY(-15px);
−
}
+
  }
 +
}
  
−
@-webkit-keyframes flash {
+
@keyframes bounce {
−
  0%, 50%, 100% {
+
  0%, 20%, 50%, 80%, 100% {
−
    opacity: 1;
+
-webkit-transform: translateY(0);
−
  }
+
-ms-transform: translateY(0);
 +
transform: translateY(0);
 +
  }
  
−
  25%, 75% {
+
  40% {
−
    opacity: 0;
+
-webkit-transform: translateY(-30px);
−
  }
+
-ms-transform: translateY(-30px);
−
}
+
transform: translateY(-30px);
 +
  }
  
−
@keyframes flash {
+
  60% {
−
  0%, 50%, 100% {
+
-webkit-transform: translateY(-15px);
−
    opacity: 1;
+
-ms-transform: translateY(-15px);
−
  }
+
transform: translateY(-15px);
 +
  }
 +
}
  
−
  25%, 75% {
+
.bounce {
−
    opacity: 0;
+
  -webkit-animation-name: bounce;
−
  }
+
  animation-name: bounce;
−
}
+
}
  
−
.flash {
+
@-webkit-keyframes flash {
−
  -webkit-animation-name: flash;
+
  0%, 50%, 100% {
−
  animation-name: flash;
+
opacity: 1;
−
}
+
  }
  
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
  25%, 75% {
 +
opacity: 0;
 +
  }
 +
}
  
−
@-webkit-keyframes pulse {
+
@keyframes flash {
−
  0% {
+
  0%, 50%, 100% {
−
    -webkit-transform: scale(1);
+
opacity: 1;
−
    transform: scale(1);
+
  }
−
  }
+
  
−
  50% {
+
  25%, 75% {
−
    -webkit-transform: scale(1.1);
+
opacity: 0;
−
    transform: scale(1.1);
+
  }
−
  }
+
}
  
−
  100% {
+
.flash {
−
    -webkit-transform: scale(1);
+
  -webkit-animation-name: flash;
−
    transform: scale(1);
+
  animation-name: flash;
−
  }
+
}
−
}
+
  
−
@keyframes pulse {
+
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
−
  0% {
+
−
    -webkit-transform: scale(1);
+
−
    -ms-transform: scale(1);
+
−
    transform: scale(1);
+
−
  }
+
  
−
  50% {
+
@-webkit-keyframes pulse {
−
    -webkit-transform: scale(1.1);
+
  0% {
−
    -ms-transform: scale(1.1);
+
-webkit-transform: scale(1);
−
    transform: scale(1.1);
+
transform: scale(1);
−
  }
+
  }
  
−
  100% {
+
  50% {
−
    -webkit-transform: scale(1);
+
-webkit-transform: scale(1.1);
−
    -ms-transform: scale(1);
+
transform: scale(1.1);
−
    transform: scale(1);
+
  }
−
  }
+
−
}
+
  
−
.pulse {
+
  100% {
−
  -webkit-animation-name: pulse;
+
-webkit-transform: scale(1);
−
  animation-name: pulse;
+
transform: scale(1);
−
}
+
  }
 +
}
  
−
@-webkit-keyframes rubberBand {
+
@keyframes pulse {
−
  0% {
+
  0% {
−
    -webkit-transform: scale(1);
+
-webkit-transform: scale(1);
−
    transform: scale(1);
+
-ms-transform: scale(1);
−
  }
+
transform: scale(1);
 +
  }
  
−
  30% {
+
  50% {
−
    -webkit-transform: scaleX(1.25) scaleY(0.75);
+
-webkit-transform: scale(1.1);
−
    transform: scaleX(1.25) scaleY(0.75);
+
-ms-transform: scale(1.1);
−
  }
+
transform: scale(1.1);
 +
  }
  
−
  40% {
+
  100% {
−
    -webkit-transform: scaleX(0.75) scaleY(1.25);
+
-webkit-transform: scale(1);
−
    transform: scaleX(0.75) scaleY(1.25);
+
-ms-transform: scale(1);
−
  }
+
transform: scale(1);
 +
  }
 +
}
  
−
  60% {
+
.pulse {
−
    -webkit-transform: scaleX(1.15) scaleY(0.85);
+
  -webkit-animation-name: pulse;
−
    transform: scaleX(1.15) scaleY(0.85);
+
  animation-name: pulse;
−
  }
+
}
  
−
  100% {
+
@-webkit-keyframes rubberBand {
−
    -webkit-transform: scale(1);
+
  0% {
−
    transform: scale(1);
+
-webkit-transform: scale(1);
−
  }
+
transform: scale(1);
−
}
+
  }
  
−
@keyframes rubberBand {
+
  30% {
−
  0% {
+
-webkit-transform: scaleX(1.25) scaleY(0.75);
−
    -webkit-transform: scale(1);
+
transform: scaleX(1.25) scaleY(0.75);
−
    -ms-transform: scale(1);
+
  }
−
    transform: scale(1);
+
−
  }
+
  
−
  30% {
+
  40% {
−
    -webkit-transform: scaleX(1.25) scaleY(0.75);
+
-webkit-transform: scaleX(0.75) scaleY(1.25);
−
    -ms-transform: scaleX(1.25) scaleY(0.75);
+
transform: scaleX(0.75) scaleY(1.25);
−
    transform: scaleX(1.25) scaleY(0.75);
+
  }
−
  }
+
  
−
  40% {
+
  60% {
−
    -webkit-transform: scaleX(0.75) scaleY(1.25);
+
-webkit-transform: scaleX(1.15) scaleY(0.85);
−
    -ms-transform: scaleX(0.75) scaleY(1.25);
+
transform: scaleX(1.15) scaleY(0.85);
−
    transform: scaleX(0.75) scaleY(1.25);
+
  }
−
  }
+
  
−
  60% {
+
  100% {
−
    -webkit-transform: scaleX(1.15) scaleY(0.85);
+
-webkit-transform: scale(1);
−
    -ms-transform: scaleX(1.15) scaleY(0.85);
+
transform: scale(1);
−
    transform: scaleX(1.15) scaleY(0.85);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rubberBand {
−
    -webkit-transform: scale(1);
+
  0% {
−
    -ms-transform: scale(1);
+
-webkit-transform: scale(1);
−
    transform: scale(1);
+
-ms-transform: scale(1);
−
  }
+
transform: scale(1);
−
}
+
  }
  
−
.rubberBand {
+
  30% {
−
  -webkit-animation-name: rubberBand;
+
-webkit-transform: scaleX(1.25) scaleY(0.75);
−
  animation-name: rubberBand;
+
-ms-transform: scaleX(1.25) scaleY(0.75);
−
}
+
transform: scaleX(1.25) scaleY(0.75);
 +
  }
  
−
@-webkit-keyframes shake {
+
  40% {
−
  0%, 100% {
+
-webkit-transform: scaleX(0.75) scaleY(1.25);
−
    -webkit-transform: translateX(0);
+
-ms-transform: scaleX(0.75) scaleY(1.25);
−
    transform: translateX(0);
+
transform: scaleX(0.75) scaleY(1.25);
−
  }
+
  }
  
−
  10%, 30%, 50%, 70%, 90% {
+
  60% {
−
    -webkit-transform: translateX(-10px);
+
-webkit-transform: scaleX(1.15) scaleY(0.85);
−
    transform: translateX(-10px);
+
-ms-transform: scaleX(1.15) scaleY(0.85);
−
  }
+
transform: scaleX(1.15) scaleY(0.85);
 +
  }
  
−
  20%, 40%, 60%, 80% {
+
  100% {
−
    -webkit-transform: translateX(10px);
+
-webkit-transform: scale(1);
−
    transform: translateX(10px);
+
-ms-transform: scale(1);
−
  }
+
transform: scale(1);
−
}
+
  }
 +
}
  
−
@keyframes shake {
+
.rubberBand {
−
  0%, 100% {
+
  -webkit-animation-name: rubberBand;
−
    -webkit-transform: translateX(0);
+
  animation-name: rubberBand;
−
    -ms-transform: translateX(0);
+
}
−
    transform: translateX(0);
+
−
  }
+
  
−
  10%, 30%, 50%, 70%, 90% {
+
@-webkit-keyframes shake {
−
    -webkit-transform: translateX(-10px);
+
  0%, 100% {
−
    -ms-transform: translateX(-10px);
+
-webkit-transform: translateX(0);
−
    transform: translateX(-10px);
+
transform: translateX(0);
−
  }
+
  }
  
−
  20%, 40%, 60%, 80% {
+
  10%, 30%, 50%, 70%, 90% {
−
    -webkit-transform: translateX(10px);
+
-webkit-transform: translateX(-10px);
−
    -ms-transform: translateX(10px);
+
transform: translateX(-10px);
−
    transform: translateX(10px);
+
  }
−
  }
+
−
}
+
  
−
.shake {
+
  20%, 40%, 60%, 80% {
−
  -webkit-animation-name: shake;
+
-webkit-transform: translateX(10px);
−
  animation-name: shake;
+
transform: translateX(10px);
−
}
+
  }
 +
}
  
−
@-webkit-keyframes swing {
+
@keyframes shake {
−
  20% {
+
  0%, 100% {
−
    -webkit-transform: rotate(15deg);
+
-webkit-transform: translateX(0);
−
    transform: rotate(15deg);
+
-ms-transform: translateX(0);
−
  }
+
transform: translateX(0);
 +
  }
  
−
  40% {
+
  10%, 30%, 50%, 70%, 90% {
−
    -webkit-transform: rotate(-10deg);
+
-webkit-transform: translateX(-10px);
−
    transform: rotate(-10deg);
+
-ms-transform: translateX(-10px);
−
  }
+
transform: translateX(-10px);
 +
  }
  
−
  60% {
+
  20%, 40%, 60%, 80% {
−
    -webkit-transform: rotate(5deg);
+
-webkit-transform: translateX(10px);
−
    transform: rotate(5deg);
+
-ms-transform: translateX(10px);
−
  }
+
transform: translateX(10px);
 +
  }
 +
}
  
−
  80% {
+
.shake {
−
    -webkit-transform: rotate(-5deg);
+
  -webkit-animation-name: shake;
−
    transform: rotate(-5deg);
+
  animation-name: shake;
−
  }
+
}
  
−
  100% {
+
@-webkit-keyframes swing {
−
    -webkit-transform: rotate(0deg);
+
  20% {
−
    transform: rotate(0deg);
+
-webkit-transform: rotate(15deg);
−
  }
+
transform: rotate(15deg);
−
}
+
  }
  
−
@keyframes swing {
+
  40% {
−
  20% {
+
-webkit-transform: rotate(-10deg);
−
    -webkit-transform: rotate(15deg);
+
transform: rotate(-10deg);
−
    -ms-transform: rotate(15deg);
+
  }
−
    transform: rotate(15deg);
+
−
  }
+
  
−
  40% {
+
  60% {
−
    -webkit-transform: rotate(-10deg);
+
-webkit-transform: rotate(5deg);
−
    -ms-transform: rotate(-10deg);
+
transform: rotate(5deg);
−
    transform: rotate(-10deg);
+
  }
−
  }
+
  
−
  60% {
+
  80% {
−
    -webkit-transform: rotate(5deg);
+
-webkit-transform: rotate(-5deg);
−
    -ms-transform: rotate(5deg);
+
transform: rotate(-5deg);
−
    transform: rotate(5deg);
+
  }
−
  }
+
  
−
  80% {
+
  100% {
−
    -webkit-transform: rotate(-5deg);
+
-webkit-transform: rotate(0deg);
−
    -ms-transform: rotate(-5deg);
+
transform: rotate(0deg);
−
    transform: rotate(-5deg);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes swing {
−
    -webkit-transform: rotate(0deg);
+
  20% {
−
    -ms-transform: rotate(0deg);
+
-webkit-transform: rotate(15deg);
−
    transform: rotate(0deg);
+
-ms-transform: rotate(15deg);
−
  }
+
transform: rotate(15deg);
−
}
+
  }
  
−
.swing {
+
  40% {
−
  -webkit-transform-origin: top center;
+
-webkit-transform: rotate(-10deg);
−
  -ms-transform-origin: top center;
+
-ms-transform: rotate(-10deg);
−
  transform-origin: top center;
+
transform: rotate(-10deg);
−
  -webkit-animation-name: swing;
+
  }
−
  animation-name: swing;
+
−
}
+
  
−
@-webkit-keyframes tada {
+
  60% {
−
  0% {
+
-webkit-transform: rotate(5deg);
−
    -webkit-transform: scale(1);
+
-ms-transform: rotate(5deg);
−
    transform: scale(1);
+
transform: rotate(5deg);
−
  }
+
  }
  
−
  10%, 20% {
+
  80% {
−
    -webkit-transform: scale(0.9) rotate(-3deg);
+
-webkit-transform: rotate(-5deg);
−
    transform: scale(0.9) rotate(-3deg);
+
-ms-transform: rotate(-5deg);
−
  }
+
transform: rotate(-5deg);
 +
  }
  
−
  30%, 50%, 70%, 90% {
+
  100% {
−
    -webkit-transform: scale(1.1) rotate(3deg);
+
-webkit-transform: rotate(0deg);
−
    transform: scale(1.1) rotate(3deg);
+
-ms-transform: rotate(0deg);
−
  }
+
transform: rotate(0deg);
 +
  }
 +
}
  
−
  40%, 60%, 80% {
+
.swing {
−
    -webkit-transform: scale(1.1) rotate(-3deg);
+
  -webkit-transform-origin: top center;
−
    transform: scale(1.1) rotate(-3deg);
+
  -ms-transform-origin: top center;
−
  }
+
  transform-origin: top center;
 +
  -webkit-animation-name: swing;
 +
  animation-name: swing;
 +
}
  
−
  100% {
+
@-webkit-keyframes tada {
−
    -webkit-transform: scale(1) rotate(0);
+
  0% {
−
    transform: scale(1) rotate(0);
+
-webkit-transform: scale(1);
−
  }
+
transform: scale(1);
−
}
+
  }
  
−
@keyframes tada {
+
  10%, 20% {
−
  0% {
+
-webkit-transform: scale(0.9) rotate(-3deg);
−
    -webkit-transform: scale(1);
+
transform: scale(0.9) rotate(-3deg);
−
    -ms-transform: scale(1);
+
  }
−
    transform: scale(1);
+
−
  }
+
  
−
  10%, 20% {
+
  30%, 50%, 70%, 90% {
−
    -webkit-transform: scale(0.9) rotate(-3deg);
+
-webkit-transform: scale(1.1) rotate(3deg);
−
    -ms-transform: scale(0.9) rotate(-3deg);
+
transform: scale(1.1) rotate(3deg);
−
    transform: scale(0.9) rotate(-3deg);
+
  }
−
  }
+
  
−
  30%, 50%, 70%, 90% {
+
  40%, 60%, 80% {
−
    -webkit-transform: scale(1.1) rotate(3deg);
+
-webkit-transform: scale(1.1) rotate(-3deg);
−
    -ms-transform: scale(1.1) rotate(3deg);
+
transform: scale(1.1) rotate(-3deg);
−
    transform: scale(1.1) rotate(3deg);
+
  }
−
  }
+
  
−
  40%, 60%, 80% {
+
  100% {
−
    -webkit-transform: scale(1.1) rotate(-3deg);
+
-webkit-transform: scale(1) rotate(0);
−
    -ms-transform: scale(1.1) rotate(-3deg);
+
transform: scale(1) rotate(0);
−
    transform: scale(1.1) rotate(-3deg);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes tada {
−
    -webkit-transform: scale(1) rotate(0);
+
  0% {
−
    -ms-transform: scale(1) rotate(0);
+
-webkit-transform: scale(1);
−
    transform: scale(1) rotate(0);
+
-ms-transform: scale(1);
−
  }
+
transform: scale(1);
−
}
+
  }
  
−
.tada {
+
  10%, 20% {
−
  -webkit-animation-name: tada;
+
-webkit-transform: scale(0.9) rotate(-3deg);
−
  animation-name: tada;
+
-ms-transform: scale(0.9) rotate(-3deg);
−
}
+
transform: scale(0.9) rotate(-3deg);
 +
  }
  
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
  30%, 50%, 70%, 90% {
 +
-webkit-transform: scale(1.1) rotate(3deg);
 +
-ms-transform: scale(1.1) rotate(3deg);
 +
transform: scale(1.1) rotate(3deg);
 +
  }
  
−
@-webkit-keyframes wobble {
+
  40%, 60%, 80% {
−
  0% {
+
-webkit-transform: scale(1.1) rotate(-3deg);
−
    -webkit-transform: translateX(0%);
+
-ms-transform: scale(1.1) rotate(-3deg);
−
    transform: translateX(0%);
+
transform: scale(1.1) rotate(-3deg);
−
  }
+
  }
  
−
  15% {
+
  100% {
−
    -webkit-transform: translateX(-25%) rotate(-5deg);
+
-webkit-transform: scale(1) rotate(0);
−
    transform: translateX(-25%) rotate(-5deg);
+
-ms-transform: scale(1) rotate(0);
−
  }
+
transform: scale(1) rotate(0);
 +
  }
 +
}
  
−
  30% {
+
.tada {
−
    -webkit-transform: translateX(20%) rotate(3deg);
+
  -webkit-animation-name: tada;
−
    transform: translateX(20%) rotate(3deg);
+
  animation-name: tada;
−
  }
+
}
  
−
  45% {
+
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
−
    -webkit-transform: translateX(-15%) rotate(-3deg);
+
−
    transform: translateX(-15%) rotate(-3deg);
+
−
  }
+
  
−
  60% {
+
@-webkit-keyframes wobble {
−
    -webkit-transform: translateX(10%) rotate(2deg);
+
  0% {
−
    transform: translateX(10%) rotate(2deg);
+
-webkit-transform: translateX(0%);
−
  }
+
transform: translateX(0%);
 +
  }
  
−
  75% {
+
  15% {
−
    -webkit-transform: translateX(-5%) rotate(-1deg);
+
-webkit-transform: translateX(-25%) rotate(-5deg);
−
    transform: translateX(-5%) rotate(-1deg);
+
transform: translateX(-25%) rotate(-5deg);
−
  }
+
  }
  
−
  100% {
+
  30% {
−
    -webkit-transform: translateX(0%);
+
-webkit-transform: translateX(20%) rotate(3deg);
−
    transform: translateX(0%);
+
transform: translateX(20%) rotate(3deg);
−
  }
+
  }
−
}
+
  
−
@keyframes wobble {
+
  45% {
−
  0% {
+
-webkit-transform: translateX(-15%) rotate(-3deg);
−
    -webkit-transform: translateX(0%);
+
transform: translateX(-15%) rotate(-3deg);
−
    -ms-transform: translateX(0%);
+
  }
−
    transform: translateX(0%);
+
−
  }
+
  
−
  15% {
+
  60% {
−
    -webkit-transform: translateX(-25%) rotate(-5deg);
+
-webkit-transform: translateX(10%) rotate(2deg);
−
    -ms-transform: translateX(-25%) rotate(-5deg);
+
transform: translateX(10%) rotate(2deg);
−
    transform: translateX(-25%) rotate(-5deg);
+
  }
−
  }
+
  
−
  30% {
+
  75% {
−
    -webkit-transform: translateX(20%) rotate(3deg);
+
-webkit-transform: translateX(-5%) rotate(-1deg);
−
    -ms-transform: translateX(20%) rotate(3deg);
+
transform: translateX(-5%) rotate(-1deg);
−
    transform: translateX(20%) rotate(3deg);
+
  }
−
  }
+
  
−
  45% {
+
  100% {
−
    -webkit-transform: translateX(-15%) rotate(-3deg);
+
-webkit-transform: translateX(0%);
−
    -ms-transform: translateX(-15%) rotate(-3deg);
+
transform: translateX(0%);
−
    transform: translateX(-15%) rotate(-3deg);
+
  }
−
  }
+
}
  
−
  60% {
+
@keyframes wobble {
−
    -webkit-transform: translateX(10%) rotate(2deg);
+
  0% {
−
    -ms-transform: translateX(10%) rotate(2deg);
+
-webkit-transform: translateX(0%);
−
    transform: translateX(10%) rotate(2deg);
+
-ms-transform: translateX(0%);
−
  }
+
transform: translateX(0%);
 +
  }
  
−
  75% {
+
  15% {
−
    -webkit-transform: translateX(-5%) rotate(-1deg);
+
-webkit-transform: translateX(-25%) rotate(-5deg);
−
    -ms-transform: translateX(-5%) rotate(-1deg);
+
-ms-transform: translateX(-25%) rotate(-5deg);
−
    transform: translateX(-5%) rotate(-1deg);
+
transform: translateX(-25%) rotate(-5deg);
−
  }
+
  }
  
−
  100% {
+
  30% {
−
    -webkit-transform: translateX(0%);
+
-webkit-transform: translateX(20%) rotate(3deg);
−
    -ms-transform: translateX(0%);
+
-ms-transform: translateX(20%) rotate(3deg);
−
    transform: translateX(0%);
+
transform: translateX(20%) rotate(3deg);
−
  }
+
  }
−
}
+
  
−
.wobble {
+
  45% {
−
  -webkit-animation-name: wobble;
+
-webkit-transform: translateX(-15%) rotate(-3deg);
−
  animation-name: wobble;
+
-ms-transform: translateX(-15%) rotate(-3deg);
−
}
+
transform: translateX(-15%) rotate(-3deg);
 +
  }
  
−
@-webkit-keyframes bounceIn {
+
  60% {
−
  0% {
+
-webkit-transform: translateX(10%) rotate(2deg);
−
    opacity: 0;
+
-ms-transform: translateX(10%) rotate(2deg);
−
    -webkit-transform: scale(.3);
+
transform: translateX(10%) rotate(2deg);
−
    transform: scale(.3);
+
  }
−
  }
+
  
−
  50% {
+
  75% {
−
    opacity: 1;
+
-webkit-transform: translateX(-5%) rotate(-1deg);
−
    -webkit-transform: scale(1.05);
+
-ms-transform: translateX(-5%) rotate(-1deg);
−
    transform: scale(1.05);
+
transform: translateX(-5%) rotate(-1deg);
−
  }
+
  }
  
−
  70% {
+
  100% {
−
    -webkit-transform: scale(.9);
+
-webkit-transform: translateX(0%);
−
    transform: scale(.9);
+
-ms-transform: translateX(0%);
−
  }
+
transform: translateX(0%);
 +
  }
 +
}
  
−
  100% {
+
.wobble {
−
    opacity: 1;
+
  -webkit-animation-name: wobble;
−
    -webkit-transform: scale(1);
+
  animation-name: wobble;
−
    transform: scale(1);
+
}
−
  }
+
−
}
+
  
−
@keyframes bounceIn {
+
@-webkit-keyframes bounceIn {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale(.3);
+
-webkit-transform: scale(.3);
−
    -ms-transform: scale(.3);
+
transform: scale(.3);
−
    transform: scale(.3);
+
  }
−
  }
+
  
−
  50% {
+
  50% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale(1.05);
+
-webkit-transform: scale(1.05);
−
    -ms-transform: scale(1.05);
+
transform: scale(1.05);
−
    transform: scale(1.05);
+
  }
−
  }
+
  
−
  70% {
+
  70% {
−
    -webkit-transform: scale(.9);
+
-webkit-transform: scale(.9);
−
    -ms-transform: scale(.9);
+
transform: scale(.9);
−
    transform: scale(.9);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale(1);
+
-webkit-transform: scale(1);
−
    -ms-transform: scale(1);
+
transform: scale(1);
−
    transform: scale(1);
+
  }
−
  }
+
}
−
}
+
  
−
.bounceIn {
+
@keyframes bounceIn {
−
  -webkit-animation-name: bounceIn;
+
  0% {
−
  animation-name: bounceIn;
+
opacity: 0;
−
}
+
-webkit-transform: scale(.3);
 +
-ms-transform: scale(.3);
 +
transform: scale(.3);
 +
  }
  
−
@-webkit-keyframes bounceInDown {
+
  50% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: scale(1.05);
−
    -webkit-transform: translateY(-2000px);
+
-ms-transform: scale(1.05);
−
    transform: translateY(-2000px);
+
transform: scale(1.05);
−
  }
+
  }
  
−
  60% {
+
  70% {
−
    opacity: 1;
+
-webkit-transform: scale(.9);
−
    -webkit-transform: translateY(30px);
+
-ms-transform: scale(.9);
−
    transform: translateY(30px);
+
transform: scale(.9);
−
  }
+
  }
  
−
  80% {
+
  100% {
−
    -webkit-transform: translateY(-10px);
+
opacity: 1;
−
    transform: translateY(-10px);
+
-webkit-transform: scale(1);
−
  }
+
-ms-transform: scale(1);
 +
transform: scale(1);
 +
  }
 +
}
  
−
  100% {
+
.bounceIn {
−
    -webkit-transform: translateY(0);
+
  -webkit-animation-name: bounceIn;
−
    transform: translateY(0);
+
  animation-name: bounceIn;
−
  }
+
}
−
}
+
  
−
@keyframes bounceInDown {
+
@-webkit-keyframes bounceInDown {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateY(-2000px);
+
-webkit-transform: translateY(-2000px);
−
    -ms-transform: translateY(-2000px);
+
transform: translateY(-2000px);
−
    transform: translateY(-2000px);
+
  }
−
  }
+
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateY(30px);
+
-webkit-transform: translateY(30px);
−
    -ms-transform: translateY(30px);
+
transform: translateY(30px);
−
    transform: translateY(30px);
+
  }
−
  }
+
  
−
  80% {
+
  80% {
−
    -webkit-transform: translateY(-10px);
+
-webkit-transform: translateY(-10px);
−
    -ms-transform: translateY(-10px);
+
transform: translateY(-10px);
−
    transform: translateY(-10px);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    -webkit-transform: translateY(0);
+
-webkit-transform: translateY(0);
−
    -ms-transform: translateY(0);
+
transform: translateY(0);
−
    transform: translateY(0);
+
  }
−
  }
+
}
−
}
+
  
−
.bounceInDown {
+
@keyframes bounceInDown {
−
  -webkit-animation-name: bounceInDown;
+
  0% {
−
  animation-name: bounceInDown;
+
opacity: 0;
−
}
+
-webkit-transform: translateY(-2000px);
 +
-ms-transform: translateY(-2000px);
 +
transform: translateY(-2000px);
 +
  }
  
−
@-webkit-keyframes bounceInLeft {
+
  60% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateY(30px);
−
    -webkit-transform: translateX(-2000px);
+
-ms-transform: translateY(30px);
−
    transform: translateX(-2000px);
+
transform: translateY(30px);
−
  }
+
  }
  
−
  60% {
+
  80% {
−
    opacity: 1;
+
-webkit-transform: translateY(-10px);
−
    -webkit-transform: translateX(30px);
+
-ms-transform: translateY(-10px);
−
    transform: translateX(30px);
+
transform: translateY(-10px);
−
  }
+
  }
  
−
  80% {
+
  100% {
−
    -webkit-transform: translateX(-10px);
+
-webkit-transform: translateY(0);
−
    transform: translateX(-10px);
+
-ms-transform: translateY(0);
−
  }
+
transform: translateY(0);
 +
  }
 +
}
  
−
  100% {
+
.bounceInDown {
−
    -webkit-transform: translateX(0);
+
  -webkit-animation-name: bounceInDown;
−
    transform: translateX(0);
+
  animation-name: bounceInDown;
−
  }
+
}
−
}
+
  
−
@keyframes bounceInLeft {
+
@-webkit-keyframes bounceInLeft {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateX(-2000px);
+
-webkit-transform: translateX(-2000px);
−
    -ms-transform: translateX(-2000px);
+
transform: translateX(-2000px);
−
    transform: translateX(-2000px);
+
  }
−
  }
+
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateX(30px);
+
-webkit-transform: translateX(30px);
−
    -ms-transform: translateX(30px);
+
transform: translateX(30px);
−
    transform: translateX(30px);
+
  }
−
  }
+
  
−
  80% {
+
  80% {
−
    -webkit-transform: translateX(-10px);
+
-webkit-transform: translateX(-10px);
−
    -ms-transform: translateX(-10px);
+
transform: translateX(-10px);
−
    transform: translateX(-10px);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    -webkit-transform: translateX(0);
+
-webkit-transform: translateX(0);
−
    -ms-transform: translateX(0);
+
transform: translateX(0);
−
    transform: translateX(0);
+
  }
−
  }
+
}
−
}
+
  
−
.bounceInLeft {
+
@keyframes bounceInLeft {
−
  -webkit-animation-name: bounceInLeft;
+
  0% {
−
  animation-name: bounceInLeft;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(-2000px);
 +
-ms-transform: translateX(-2000px);
 +
transform: translateX(-2000px);
 +
  }
  
−
@-webkit-keyframes bounceInRight {
+
  60% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(30px);
−
    -webkit-transform: translateX(2000px);
+
-ms-transform: translateX(30px);
−
    transform: translateX(2000px);
+
transform: translateX(30px);
−
  }
+
  }
  
−
  60% {
+
  80% {
−
    opacity: 1;
+
-webkit-transform: translateX(-10px);
−
    -webkit-transform: translateX(-30px);
+
-ms-transform: translateX(-10px);
−
    transform: translateX(-30px);
+
transform: translateX(-10px);
−
  }
+
  }
  
−
  80% {
+
  100% {
−
    -webkit-transform: translateX(10px);
+
-webkit-transform: translateX(0);
−
    transform: translateX(10px);
+
-ms-transform: translateX(0);
−
  }
+
transform: translateX(0);
 +
  }
 +
}
  
−
  100% {
+
.bounceInLeft {
−
    -webkit-transform: translateX(0);
+
  -webkit-animation-name: bounceInLeft;
−
    transform: translateX(0);
+
  animation-name: bounceInLeft;
−
  }
+
}
−
}
+
  
−
@keyframes bounceInRight {
+
@-webkit-keyframes bounceInRight {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateX(2000px);
+
-webkit-transform: translateX(2000px);
−
    -ms-transform: translateX(2000px);
+
transform: translateX(2000px);
−
    transform: translateX(2000px);
+
  }
−
  }
+
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateX(-30px);
+
-webkit-transform: translateX(-30px);
−
    -ms-transform: translateX(-30px);
+
transform: translateX(-30px);
−
    transform: translateX(-30px);
+
  }
−
  }
+
  
−
  80% {
+
  80% {
−
    -webkit-transform: translateX(10px);
+
-webkit-transform: translateX(10px);
−
    -ms-transform: translateX(10px);
+
transform: translateX(10px);
−
    transform: translateX(10px);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    -webkit-transform: translateX(0);
+
-webkit-transform: translateX(0);
−
    -ms-transform: translateX(0);
+
transform: translateX(0);
−
    transform: translateX(0);
+
  }
−
  }
+
}
−
}
+
  
−
.bounceInRight {
+
@keyframes bounceInRight {
−
  -webkit-animation-name: bounceInRight;
+
  0% {
−
  animation-name: bounceInRight;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(2000px);
 +
-ms-transform: translateX(2000px);
 +
transform: translateX(2000px);
 +
  }
  
−
@-webkit-keyframes bounceInUp {
+
  60% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(-30px);
−
    -webkit-transform: translateY(2000px);
+
-ms-transform: translateX(-30px);
−
    transform: translateY(2000px);
+
transform: translateX(-30px);
−
  }
+
  }
  
−
  60% {
+
  80% {
−
    opacity: 1;
+
-webkit-transform: translateX(10px);
−
    -webkit-transform: translateY(-30px);
+
-ms-transform: translateX(10px);
−
    transform: translateY(-30px);
+
transform: translateX(10px);
−
  }
+
  }
  
−
  80% {
+
  100% {
−
    -webkit-transform: translateY(10px);
+
-webkit-transform: translateX(0);
−
    transform: translateY(10px);
+
-ms-transform: translateX(0);
−
  }
+
transform: translateX(0);
 +
  }
 +
}
  
−
  100% {
+
.bounceInRight {
−
    -webkit-transform: translateY(0);
+
  -webkit-animation-name: bounceInRight;
−
    transform: translateY(0);
+
  animation-name: bounceInRight;
−
  }
+
}
−
}
+
  
−
@keyframes bounceInUp {
+
@-webkit-keyframes bounceInUp {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateY(2000px);
+
-webkit-transform: translateY(2000px);
−
    -ms-transform: translateY(2000px);
+
transform: translateY(2000px);
−
    transform: translateY(2000px);
+
  }
−
  }
+
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateY(-30px);
+
-webkit-transform: translateY(-30px);
−
    -ms-transform: translateY(-30px);
+
transform: translateY(-30px);
−
    transform: translateY(-30px);
+
  }
−
  }
+
  
−
  80% {
+
  80% {
−
    -webkit-transform: translateY(10px);
+
-webkit-transform: translateY(10px);
−
    -ms-transform: translateY(10px);
+
transform: translateY(10px);
−
    transform: translateY(10px);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    -webkit-transform: translateY(0);
+
-webkit-transform: translateY(0);
−
    -ms-transform: translateY(0);
+
transform: translateY(0);
−
    transform: translateY(0);
+
  }
−
  }
+
}
−
}
+
  
−
.bounceInUp {
+
@keyframes bounceInUp {
−
  -webkit-animation-name: bounceInUp;
+
  0% {
−
  animation-name: bounceInUp;
+
opacity: 0;
−
}
+
-webkit-transform: translateY(2000px);
 +
-ms-transform: translateY(2000px);
 +
transform: translateY(2000px);
 +
  }
  
−
@-webkit-keyframes bounceOut {
+
  60% {
−
  0% {
+
opacity: 1;
−
    -webkit-transform: scale(1);
+
-webkit-transform: translateY(-30px);
−
    transform: scale(1);
+
-ms-transform: translateY(-30px);
−
  }
+
transform: translateY(-30px);
 +
  }
  
−
  25% {
+
  80% {
−
    -webkit-transform: scale(.95);
+
-webkit-transform: translateY(10px);
−
    transform: scale(.95);
+
-ms-transform: translateY(10px);
−
  }
+
transform: translateY(10px);
 +
  }
  
−
  50% {
+
  100% {
−
    opacity: 1;
+
-webkit-transform: translateY(0);
−
    -webkit-transform: scale(1.1);
+
-ms-transform: translateY(0);
−
    transform: scale(1.1);
+
transform: translateY(0);
−
  }
+
  }
 +
}
  
−
  100% {
+
.bounceInUp {
−
    opacity: 0;
+
  -webkit-animation-name: bounceInUp;
−
    -webkit-transform: scale(.3);
+
  animation-name: bounceInUp;
−
    transform: scale(.3);
+
}
−
  }
+
−
}
+
  
−
@keyframes bounceOut {
+
@-webkit-keyframes bounceOut {
−
  0% {
+
  0% {
−
    -webkit-transform: scale(1);
+
-webkit-transform: scale(1);
−
    -ms-transform: scale(1);
+
transform: scale(1);
−
    transform: scale(1);
+
  }
−
  }
+
  
−
  25% {
+
  25% {
−
    -webkit-transform: scale(.95);
+
-webkit-transform: scale(.95);
−
    -ms-transform: scale(.95);
+
transform: scale(.95);
−
    transform: scale(.95);
+
  }
−
  }
+
  
−
  50% {
+
  50% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale(1.1);
+
-webkit-transform: scale(1.1);
−
    -ms-transform: scale(1.1);
+
transform: scale(1.1);
−
    transform: scale(1.1);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale(.3);
+
-webkit-transform: scale(.3);
−
    -ms-transform: scale(.3);
+
transform: scale(.3);
−
    transform: scale(.3);
+
  }
−
  }
+
}
−
}
+
  
−
.bounceOut {
+
@keyframes bounceOut {
−
  -webkit-animation-name: bounceOut;
+
  0% {
−
  animation-name: bounceOut;
+
-webkit-transform: scale(1);
−
}
+
-ms-transform: scale(1);
 +
transform: scale(1);
 +
  }
  
−
@-webkit-keyframes bounceOutDown {
+
  25% {
−
  0% {
+
-webkit-transform: scale(.95);
−
    -webkit-transform: translateY(0);
+
-ms-transform: scale(.95);
−
    transform: translateY(0);
+
transform: scale(.95);
−
  }
+
  }
  
−
  20% {
+
  50% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateY(-20px);
+
-webkit-transform: scale(1.1);
−
    transform: translateY(-20px);
+
-ms-transform: scale(1.1);
−
  }
+
transform: scale(1.1);
 +
  }
  
−
  100% {
+
  100% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateY(2000px);
+
-webkit-transform: scale(.3);
−
    transform: translateY(2000px);
+
-ms-transform: scale(.3);
−
  }
+
transform: scale(.3);
−
}
+
  }
 +
}
  
−
@keyframes bounceOutDown {
+
.bounceOut {
−
  0% {
+
  -webkit-animation-name: bounceOut;
−
    -webkit-transform: translateY(0);
+
  animation-name: bounceOut;
−
    -ms-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
  
−
  20% {
+
@-webkit-keyframes bounceOutDown {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateY(-20px);
+
-webkit-transform: translateY(0);
−
    -ms-transform: translateY(-20px);
+
transform: translateY(0);
−
    transform: translateY(-20px);
+
  }
−
  }
+
  
−
  100% {
+
  20% {
−
    opacity: 0;
+
opacity: 1;
−
    -webkit-transform: translateY(2000px);
+
-webkit-transform: translateY(-20px);
−
    -ms-transform: translateY(2000px);
+
transform: translateY(-20px);
−
    transform: translateY(2000px);
+
  }
−
  }
+
−
}
+
  
−
.bounceOutDown {
+
  100% {
−
  -webkit-animation-name: bounceOutDown;
+
opacity: 0;
−
  animation-name: bounceOutDown;
+
-webkit-transform: translateY(2000px);
−
}
+
transform: translateY(2000px);
 +
  }
 +
}
  
−
@-webkit-keyframes bounceOutLeft {
+
@keyframes bounceOutDown {
−
  0% {
+
  0% {
−
    -webkit-transform: translateX(0);
+
-webkit-transform: translateY(0);
−
    transform: translateX(0);
+
-ms-transform: translateY(0);
−
  }
+
transform: translateY(0);
 +
  }
  
−
  20% {
+
  20% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateX(20px);
+
-webkit-transform: translateY(-20px);
−
    transform: translateX(20px);
+
-ms-transform: translateY(-20px);
−
  }
+
transform: translateY(-20px);
 +
  }
  
−
  100% {
+
  100% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateX(-2000px);
+
-webkit-transform: translateY(2000px);
−
    transform: translateX(-2000px);
+
-ms-transform: translateY(2000px);
−
  }
+
transform: translateY(2000px);
−
}
+
  }
 +
}
  
−
@keyframes bounceOutLeft {
+
.bounceOutDown {
−
  0% {
+
  -webkit-animation-name: bounceOutDown;
−
    -webkit-transform: translateX(0);
+
  animation-name: bounceOutDown;
−
    -ms-transform: translateX(0);
+
}
−
    transform: translateX(0);
+
−
  }
+
  
−
  20% {
+
@-webkit-keyframes bounceOutLeft {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateX(20px);
+
-webkit-transform: translateX(0);
−
    -ms-transform: translateX(20px);
+
transform: translateX(0);
−
    transform: translateX(20px);
+
  }
−
  }
+
  
−
  100% {
+
  20% {
−
    opacity: 0;
+
opacity: 1;
−
    -webkit-transform: translateX(-2000px);
+
-webkit-transform: translateX(20px);
−
    -ms-transform: translateX(-2000px);
+
transform: translateX(20px);
−
    transform: translateX(-2000px);
+
  }
−
  }
+
−
}
+
  
−
.bounceOutLeft {
+
  100% {
−
  -webkit-animation-name: bounceOutLeft;
+
opacity: 0;
−
  animation-name: bounceOutLeft;
+
-webkit-transform: translateX(-2000px);
−
}
+
transform: translateX(-2000px);
 +
  }
 +
}
  
−
@-webkit-keyframes bounceOutRight {
+
@keyframes bounceOutLeft {
−
  0% {
+
  0% {
−
    -webkit-transform: translateX(0);
+
-webkit-transform: translateX(0);
−
    transform: translateX(0);
+
-ms-transform: translateX(0);
−
  }
+
transform: translateX(0);
 +
  }
  
−
  20% {
+
  20% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateX(-20px);
+
-webkit-transform: translateX(20px);
−
    transform: translateX(-20px);
+
-ms-transform: translateX(20px);
−
  }
+
transform: translateX(20px);
 +
  }
  
−
  100% {
+
  100% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateX(2000px);
+
-webkit-transform: translateX(-2000px);
−
    transform: translateX(2000px);
+
-ms-transform: translateX(-2000px);
−
  }
+
transform: translateX(-2000px);
−
}
+
  }
 +
}
  
−
@keyframes bounceOutRight {
+
.bounceOutLeft {
−
  0% {
+
  -webkit-animation-name: bounceOutLeft;
−
    -webkit-transform: translateX(0);
+
  animation-name: bounceOutLeft;
−
    -ms-transform: translateX(0);
+
}
−
    transform: translateX(0);
+
−
  }
+
  
−
  20% {
+
@-webkit-keyframes bounceOutRight {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateX(-20px);
+
-webkit-transform: translateX(0);
−
    -ms-transform: translateX(-20px);
+
transform: translateX(0);
−
    transform: translateX(-20px);
+
  }
−
  }
+
  
−
  100% {
+
  20% {
−
    opacity: 0;
+
opacity: 1;
−
    -webkit-transform: translateX(2000px);
+
-webkit-transform: translateX(-20px);
−
    -ms-transform: translateX(2000px);
+
transform: translateX(-20px);
−
    transform: translateX(2000px);
+
  }
−
  }
+
−
}
+
  
−
.bounceOutRight {
+
  100% {
−
  -webkit-animation-name: bounceOutRight;
+
opacity: 0;
−
  animation-name: bounceOutRight;
+
-webkit-transform: translateX(2000px);
−
}
+
transform: translateX(2000px);
 +
  }
 +
}
  
−
@-webkit-keyframes bounceOutUp {
+
@keyframes bounceOutRight {
−
  0% {
+
  0% {
−
    -webkit-transform: translateY(0);
+
-webkit-transform: translateX(0);
−
    transform: translateY(0);
+
-ms-transform: translateX(0);
−
  }
+
transform: translateX(0);
 +
  }
  
−
  20% {
+
  20% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: translateY(20px);
+
-webkit-transform: translateX(-20px);
−
    transform: translateY(20px);
+
-ms-transform: translateX(-20px);
−
  }
+
transform: translateX(-20px);
 +
  }
  
−
  100% {
+
  100% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translateY(-2000px);
+
-webkit-transform: translateX(2000px);
−
    transform: translateY(-2000px);
+
-ms-transform: translateX(2000px);
−
  }
+
transform: translateX(2000px);
−
}
+
  }
 +
}
  
−
@keyframes bounceOutUp {
+
.bounceOutRight {
−
  0% {
+
  -webkit-animation-name: bounceOutRight;
−
    -webkit-transform: translateY(0);
+
  animation-name: bounceOutRight;
−
    -ms-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
  
−
  20% {
+
@-webkit-keyframes bounceOutUp {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateY(20px);
+
-webkit-transform: translateY(0);
−
    -ms-transform: translateY(20px);
+
transform: translateY(0);
−
    transform: translateY(20px);
+
  }
−
  }
+
  
−
  100% {
+
  20% {
−
    opacity: 0;
+
opacity: 1;
−
    -webkit-transform: translateY(-2000px);
+
-webkit-transform: translateY(20px);
−
    -ms-transform: translateY(-2000px);
+
transform: translateY(20px);
−
    transform: translateY(-2000px);
+
  }
−
  }
+
−
}
+
  
−
.bounceOutUp {
+
  100% {
−
  -webkit-animation-name: bounceOutUp;
+
opacity: 0;
−
  animation-name: bounceOutUp;
+
-webkit-transform: translateY(-2000px);
−
}
+
transform: translateY(-2000px);
 +
  }
 +
}
  
−
@-webkit-keyframes fadeIn {
+
@keyframes bounceOutUp {
−
  0% {
+
  0% {
−
    opacity: 0;
+
-webkit-transform: translateY(0);
−
  }
+
-ms-transform: translateY(0);
 +
transform: translateY(0);
 +
  }
  
−
  100% {
+
  20% {
−
    opacity: 1;
+
opacity: 1;
−
  }
+
-webkit-transform: translateY(20px);
−
}
+
-ms-transform: translateY(20px);
 +
transform: translateY(20px);
 +
  }
  
−
@keyframes fadeIn {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 0;
+
-webkit-transform: translateY(-2000px);
−
  }
+
-ms-transform: translateY(-2000px);
 +
transform: translateY(-2000px);
 +
  }
 +
}
  
−
  100% {
+
.bounceOutUp {
−
    opacity: 1;
+
  -webkit-animation-name: bounceOutUp;
−
  }
+
  animation-name: bounceOutUp;
−
}
+
}
  
−
.fadeIn {
+
@-webkit-keyframes fadeIn {
−
  -webkit-animation-name: fadeIn;
+
  0% {
−
  animation-name: fadeIn;
+
opacity: 0;
−
}
+
  }
  
−
@-webkit-keyframes fadeInDown {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
  }
−
    -webkit-transform: translateY(-20px);
+
}
−
    transform: translateY(-20px);
+
−
  }
+
  
−
  100% {
+
@keyframes fadeIn {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateY(0);
+
opacity: 0;
−
    transform: translateY(0);
+
  }
−
  }
+
−
}
+
  
−
@keyframes fadeInDown {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
  }
−
    -webkit-transform: translateY(-20px);
+
}
−
    -ms-transform: translateY(-20px);
+
−
    transform: translateY(-20px);
+
−
  }
+
  
−
  100% {
+
.fadeIn {
−
    opacity: 1;
+
  -webkit-animation-name: fadeIn;
−
    -webkit-transform: translateY(0);
+
  animation-name: fadeIn;
−
    -ms-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
−
}
+
  
−
.fadeInDown {
+
@-webkit-keyframes fadeInDown {
−
  -webkit-animation-name: fadeInDown;
+
  0% {
−
  animation-name: fadeInDown;
+
opacity: 0;
−
}
+
-webkit-transform: translateY(-20px);
 +
transform: translateY(-20px);
 +
  }
  
−
@-webkit-keyframes fadeInDownBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateY(0);
−
    -webkit-transform: translateY(-2000px);
+
transform: translateY(0);
−
    transform: translateY(-2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeInDown {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateY(0);
+
opacity: 0;
−
    transform: translateY(0);
+
-webkit-transform: translateY(-20px);
−
  }
+
-ms-transform: translateY(-20px);
−
}
+
transform: translateY(-20px);
 +
  }
  
−
@keyframes fadeInDownBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateY(0);
−
    -webkit-transform: translateY(-2000px);
+
-ms-transform: translateY(0);
−
    -ms-transform: translateY(-2000px);
+
transform: translateY(0);
−
    transform: translateY(-2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeInDown {
−
    opacity: 1;
+
  -webkit-animation-name: fadeInDown;
−
    -webkit-transform: translateY(0);
+
  animation-name: fadeInDown;
−
    -ms-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
−
}
+
  
−
.fadeInDownBig {
+
@-webkit-keyframes fadeInDownBig {
−
  -webkit-animation-name: fadeInDownBig;
+
  0% {
−
  animation-name: fadeInDownBig;
+
opacity: 0;
−
}
+
-webkit-transform: translateY(-2000px);
 +
transform: translateY(-2000px);
 +
  }
  
−
@-webkit-keyframes fadeInLeft {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateY(0);
−
    -webkit-transform: translateX(-20px);
+
transform: translateY(0);
−
    transform: translateX(-20px);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeInDownBig {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateX(0);
+
opacity: 0;
−
    transform: translateX(0);
+
-webkit-transform: translateY(-2000px);
−
  }
+
-ms-transform: translateY(-2000px);
−
}
+
transform: translateY(-2000px);
 +
  }
  
−
@keyframes fadeInLeft {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateY(0);
−
    -webkit-transform: translateX(-20px);
+
-ms-transform: translateY(0);
−
    -ms-transform: translateX(-20px);
+
transform: translateY(0);
−
    transform: translateX(-20px);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeInDownBig {
−
    opacity: 1;
+
  -webkit-animation-name: fadeInDownBig;
−
    -webkit-transform: translateX(0);
+
  animation-name: fadeInDownBig;
−
    -ms-transform: translateX(0);
+
}
−
    transform: translateX(0);
+
−
  }
+
−
}
+
  
−
.fadeInLeft {
+
@-webkit-keyframes fadeInLeft {
−
  -webkit-animation-name: fadeInLeft;
+
  0% {
−
  animation-name: fadeInLeft;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(-20px);
 +
transform: translateX(-20px);
 +
  }
  
−
@-webkit-keyframes fadeInLeftBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(-2000px);
+
transform: translateX(0);
−
    transform: translateX(-2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeInLeft {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateX(0);
+
opacity: 0;
−
    transform: translateX(0);
+
-webkit-transform: translateX(-20px);
−
  }
+
-ms-transform: translateX(-20px);
−
}
+
transform: translateX(-20px);
 +
  }
  
−
@keyframes fadeInLeftBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(-2000px);
+
-ms-transform: translateX(0);
−
    -ms-transform: translateX(-2000px);
+
transform: translateX(0);
−
    transform: translateX(-2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeInLeft {
−
    opacity: 1;
+
  -webkit-animation-name: fadeInLeft;
−
    -webkit-transform: translateX(0);
+
  animation-name: fadeInLeft;
−
    -ms-transform: translateX(0);
+
}
−
    transform: translateX(0);
+
−
  }
+
−
}
+
  
−
.fadeInLeftBig {
+
@-webkit-keyframes fadeInLeftBig {
−
  -webkit-animation-name: fadeInLeftBig;
+
  0% {
−
  animation-name: fadeInLeftBig;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(-2000px);
 +
transform: translateX(-2000px);
 +
  }
  
−
@-webkit-keyframes fadeInRight {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(20px);
+
transform: translateX(0);
−
    transform: translateX(20px);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeInLeftBig {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateX(0);
+
opacity: 0;
−
    transform: translateX(0);
+
-webkit-transform: translateX(-2000px);
−
  }
+
-ms-transform: translateX(-2000px);
−
}
+
transform: translateX(-2000px);
 +
  }
  
−
@keyframes fadeInRight {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(20px);
+
-ms-transform: translateX(0);
−
    -ms-transform: translateX(20px);
+
transform: translateX(0);
−
    transform: translateX(20px);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeInLeftBig {
−
    opacity: 1;
+
  -webkit-animation-name: fadeInLeftBig;
−
    -webkit-transform: translateX(0);
+
  animation-name: fadeInLeftBig;
−
    -ms-transform: translateX(0);
+
}
−
    transform: translateX(0);
+
−
  }
+
−
}
+
  
−
.fadeInRight {
+
@-webkit-keyframes fadeInRight {
−
  -webkit-animation-name: fadeInRight;
+
  0% {
−
  animation-name: fadeInRight;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(20px);
 +
transform: translateX(20px);
 +
  }
  
−
@-webkit-keyframes fadeInRightBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(2000px);
+
transform: translateX(0);
−
    transform: translateX(2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeInRight {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateX(0);
+
opacity: 0;
−
    transform: translateX(0);
+
-webkit-transform: translateX(20px);
−
  }
+
-ms-transform: translateX(20px);
−
}
+
transform: translateX(20px);
 +
  }
  
−
@keyframes fadeInRightBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(2000px);
+
-ms-transform: translateX(0);
−
    -ms-transform: translateX(2000px);
+
transform: translateX(0);
−
    transform: translateX(2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeInRight {
−
    opacity: 1;
+
  -webkit-animation-name: fadeInRight;
−
    -webkit-transform: translateX(0);
+
  animation-name: fadeInRight;
−
    -ms-transform: translateX(0);
+
}
−
    transform: translateX(0);
+
−
  }
+
−
}
+
  
−
.fadeInRightBig {
+
@-webkit-keyframes fadeInRightBig {
−
  -webkit-animation-name: fadeInRightBig;
+
  0% {
−
  animation-name: fadeInRightBig;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(2000px);
 +
transform: translateX(2000px);
 +
  }
  
−
@-webkit-keyframes fadeInUp {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateY(20px);
+
transform: translateX(0);
−
    transform: translateY(20px);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeInRightBig {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateY(0);
+
opacity: 0;
−
    transform: translateY(0);
+
-webkit-transform: translateX(2000px);
−
  }
+
-ms-transform: translateX(2000px);
−
}
+
transform: translateX(2000px);
 +
  }
  
−
@keyframes fadeInUp {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateY(20px);
+
-ms-transform: translateX(0);
−
    -ms-transform: translateY(20px);
+
transform: translateX(0);
−
    transform: translateY(20px);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeInRightBig {
−
    opacity: 1;
+
  -webkit-animation-name: fadeInRightBig;
−
    -webkit-transform: translateY(0);
+
  animation-name: fadeInRightBig;
−
    -ms-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
−
}
+
  
−
.fadeInUp {
+
@-webkit-keyframes fadeInUp {
−
  -webkit-animation-name: fadeInUp;
+
  0% {
−
  animation-name: fadeInUp;
+
opacity: 0;
−
}
+
-webkit-transform: translateY(20px);
 +
transform: translateY(20px);
 +
  }
  
−
@-webkit-keyframes fadeInUpBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateY(0);
−
    -webkit-transform: translateY(2000px);
+
transform: translateY(0);
−
    transform: translateY(2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeInUp {
−
    opacity: 1;
+
  0% {
−
    -webkit-transform: translateY(0);
+
opacity: 0;
−
    transform: translateY(0);
+
-webkit-transform: translateY(20px);
−
  }
+
-ms-transform: translateY(20px);
−
}
+
transform: translateY(20px);
 +
  }
  
−
@keyframes fadeInUpBig {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 0;
+
-webkit-transform: translateY(0);
−
    -webkit-transform: translateY(2000px);
+
-ms-transform: translateY(0);
−
    -ms-transform: translateY(2000px);
+
transform: translateY(0);
−
    transform: translateY(2000px);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeInUp {
−
    opacity: 1;
+
  -webkit-animation-name: fadeInUp;
−
    -webkit-transform: translateY(0);
+
  animation-name: fadeInUp;
−
    -ms-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
−
}
+
  
−
.fadeInUpBig {
+
@-webkit-keyframes fadeInUpBig {
−
  -webkit-animation-name: fadeInUpBig;
+
  0% {
−
  animation-name: fadeInUpBig;
+
opacity: 0;
−
}
+
-webkit-transform: translateY(2000px);
 +
transform: translateY(2000px);
 +
  }
  
−
@-webkit-keyframes fadeOut {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 1;
+
-webkit-transform: translateY(0);
−
  }
+
transform: translateY(0);
 +
  }
 +
}
  
−
  100% {
+
@keyframes fadeInUpBig {
−
    opacity: 0;
+
  0% {
−
  }
+
opacity: 0;
−
}
+
-webkit-transform: translateY(2000px);
 +
-ms-transform: translateY(2000px);
 +
transform: translateY(2000px);
 +
  }
  
−
@keyframes fadeOut {
+
  100% {
−
  0% {
+
opacity: 1;
−
    opacity: 1;
+
-webkit-transform: translateY(0);
−
  }
+
-ms-transform: translateY(0);
 +
transform: translateY(0);
 +
  }
 +
}
  
−
  100% {
+
.fadeInUpBig {
−
    opacity: 0;
+
  -webkit-animation-name: fadeInUpBig;
−
  }
+
  animation-name: fadeInUpBig;
−
}
+
}
  
−
.fadeOut {
+
@-webkit-keyframes fadeOut {
−
  -webkit-animation-name: fadeOut;
+
  0% {
−
  animation-name: fadeOut;
+
opacity: 1;
−
}
+
  }
  
−
@-webkit-keyframes fadeOutDown {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
  }
−
    -webkit-transform: translateY(0);
+
}
−
    transform: translateY(0);
+
−
  }
+
  
−
  100% {
+
@keyframes fadeOut {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateY(20px);
+
opacity: 1;
−
    transform: translateY(20px);
+
  }
−
  }
+
−
}
+
  
−
@keyframes fadeOutDown {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
  }
−
    -webkit-transform: translateY(0);
+
}
−
    -ms-transform: translateY(0);
+
−
    transform: translateY(0);
+
−
  }
+
  
−
  100% {
+
.fadeOut {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOut;
−
    -webkit-transform: translateY(20px);
+
  animation-name: fadeOut;
−
    -ms-transform: translateY(20px);
+
}
−
    transform: translateY(20px);
+
−
  }
+
−
}
+
  
−
.fadeOutDown {
+
@-webkit-keyframes fadeOutDown {
−
  -webkit-animation-name: fadeOutDown;
+
  0% {
−
  animation-name: fadeOutDown;
+
opacity: 1;
−
}
+
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
  }
  
−
@-webkit-keyframes fadeOutDownBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateY(20px);
−
    -webkit-transform: translateY(0);
+
transform: translateY(20px);
−
    transform: translateY(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeOutDown {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateY(2000px);
+
opacity: 1;
−
    transform: translateY(2000px);
+
-webkit-transform: translateY(0);
−
  }
+
-ms-transform: translateY(0);
−
}
+
transform: translateY(0);
 +
  }
  
−
@keyframes fadeOutDownBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateY(20px);
−
    -webkit-transform: translateY(0);
+
-ms-transform: translateY(20px);
−
    -ms-transform: translateY(0);
+
transform: translateY(20px);
−
    transform: translateY(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeOutDown {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOutDown;
−
    -webkit-transform: translateY(2000px);
+
  animation-name: fadeOutDown;
−
    -ms-transform: translateY(2000px);
+
}
−
    transform: translateY(2000px);
+
−
  }
+
−
}
+
  
−
.fadeOutDownBig {
+
@-webkit-keyframes fadeOutDownBig {
−
  -webkit-animation-name: fadeOutDownBig;
+
  0% {
−
  animation-name: fadeOutDownBig;
+
opacity: 1;
−
}
+
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
  }
  
−
@-webkit-keyframes fadeOutLeft {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateY(2000px);
−
    -webkit-transform: translateX(0);
+
transform: translateY(2000px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeOutDownBig {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateX(-20px);
+
opacity: 1;
−
    transform: translateX(-20px);
+
-webkit-transform: translateY(0);
−
  }
+
-ms-transform: translateY(0);
−
}
+
transform: translateY(0);
 +
  }
  
−
@keyframes fadeOutLeft {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateY(2000px);
−
    -webkit-transform: translateX(0);
+
-ms-transform: translateY(2000px);
−
    -ms-transform: translateX(0);
+
transform: translateY(2000px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeOutDownBig {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOutDownBig;
−
    -webkit-transform: translateX(-20px);
+
  animation-name: fadeOutDownBig;
−
    -ms-transform: translateX(-20px);
+
}
−
    transform: translateX(-20px);
+
−
  }
+
−
}
+
  
−
.fadeOutLeft {
+
@-webkit-keyframes fadeOutLeft {
−
  -webkit-animation-name: fadeOutLeft;
+
  0% {
−
  animation-name: fadeOutLeft;
+
opacity: 1;
−
}
+
-webkit-transform: translateX(0);
 +
transform: translateX(0);
 +
  }
  
−
@-webkit-keyframes fadeOutLeftBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(-20px);
−
    -webkit-transform: translateX(0);
+
transform: translateX(-20px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeOutLeft {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateX(-2000px);
+
opacity: 1;
−
    transform: translateX(-2000px);
+
-webkit-transform: translateX(0);
−
  }
+
-ms-transform: translateX(0);
−
}
+
transform: translateX(0);
 +
  }
  
−
@keyframes fadeOutLeftBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(-20px);
−
    -webkit-transform: translateX(0);
+
-ms-transform: translateX(-20px);
−
    -ms-transform: translateX(0);
+
transform: translateX(-20px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeOutLeft {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOutLeft;
−
    -webkit-transform: translateX(-2000px);
+
  animation-name: fadeOutLeft;
−
    -ms-transform: translateX(-2000px);
+
}
−
    transform: translateX(-2000px);
+
−
  }
+
−
}
+
  
−
.fadeOutLeftBig {
+
@-webkit-keyframes fadeOutLeftBig {
−
  -webkit-animation-name: fadeOutLeftBig;
+
  0% {
−
  animation-name: fadeOutLeftBig;
+
opacity: 1;
−
}
+
-webkit-transform: translateX(0);
 +
transform: translateX(0);
 +
  }
  
−
@-webkit-keyframes fadeOutRight {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(-2000px);
−
    -webkit-transform: translateX(0);
+
transform: translateX(-2000px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeOutLeftBig {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateX(20px);
+
opacity: 1;
−
    transform: translateX(20px);
+
-webkit-transform: translateX(0);
−
  }
+
-ms-transform: translateX(0);
−
}
+
transform: translateX(0);
 +
  }
  
−
@keyframes fadeOutRight {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(-2000px);
−
    -webkit-transform: translateX(0);
+
-ms-transform: translateX(-2000px);
−
    -ms-transform: translateX(0);
+
transform: translateX(-2000px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeOutLeftBig {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOutLeftBig;
−
    -webkit-transform: translateX(20px);
+
  animation-name: fadeOutLeftBig;
−
    -ms-transform: translateX(20px);
+
}
−
    transform: translateX(20px);
+
−
  }
+
−
}
+
  
−
.fadeOutRight {
+
@-webkit-keyframes fadeOutRight {
−
  -webkit-animation-name: fadeOutRight;
+
  0% {
−
  animation-name: fadeOutRight;
+
opacity: 1;
−
}
+
-webkit-transform: translateX(0);
 +
transform: translateX(0);
 +
  }
  
−
@-webkit-keyframes fadeOutRightBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(20px);
−
    -webkit-transform: translateX(0);
+
transform: translateX(20px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeOutRight {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateX(2000px);
+
opacity: 1;
−
    transform: translateX(2000px);
+
-webkit-transform: translateX(0);
−
  }
+
-ms-transform: translateX(0);
−
}
+
transform: translateX(0);
 +
  }
  
−
@keyframes fadeOutRightBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(20px);
−
    -webkit-transform: translateX(0);
+
-ms-transform: translateX(20px);
−
    -ms-transform: translateX(0);
+
transform: translateX(20px);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeOutRight {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOutRight;
−
    -webkit-transform: translateX(2000px);
+
  animation-name: fadeOutRight;
−
    -ms-transform: translateX(2000px);
+
}
−
    transform: translateX(2000px);
+
−
  }
+
−
}
+
  
−
.fadeOutRightBig {
+
@-webkit-keyframes fadeOutRightBig {
−
  -webkit-animation-name: fadeOutRightBig;
+
  0% {
−
  animation-name: fadeOutRightBig;
+
opacity: 1;
−
}
+
-webkit-transform: translateX(0);
 +
transform: translateX(0);
 +
  }
  
−
@-webkit-keyframes fadeOutUp {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(2000px);
−
    -webkit-transform: translateY(0);
+
transform: translateX(2000px);
−
    transform: translateY(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeOutRightBig {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateY(-20px);
+
opacity: 1;
−
    transform: translateY(-20px);
+
-webkit-transform: translateX(0);
−
  }
+
-ms-transform: translateX(0);
−
}
+
transform: translateX(0);
 +
  }
  
−
@keyframes fadeOutUp {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateX(2000px);
−
    -webkit-transform: translateY(0);
+
-ms-transform: translateX(2000px);
−
    -ms-transform: translateY(0);
+
transform: translateX(2000px);
−
    transform: translateY(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeOutRightBig {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOutRightBig;
−
    -webkit-transform: translateY(-20px);
+
  animation-name: fadeOutRightBig;
−
    -ms-transform: translateY(-20px);
+
}
−
    transform: translateY(-20px);
+
−
  }
+
−
}
+
  
−
.fadeOutUp {
+
@-webkit-keyframes fadeOutUp {
−
  -webkit-animation-name: fadeOutUp;
+
  0% {
−
  animation-name: fadeOutUp;
+
opacity: 1;
−
}
+
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
  }
  
−
@-webkit-keyframes fadeOutUpBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateY(-20px);
−
    -webkit-transform: translateY(0);
+
transform: translateY(-20px);
−
    transform: translateY(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes fadeOutUp {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateY(-2000px);
+
opacity: 1;
−
    transform: translateY(-2000px);
+
-webkit-transform: translateY(0);
−
  }
+
-ms-transform: translateY(0);
−
}
+
transform: translateY(0);
 +
  }
  
−
@keyframes fadeOutUpBig {
+
  100% {
−
  0% {
+
opacity: 0;
−
    opacity: 1;
+
-webkit-transform: translateY(-20px);
−
    -webkit-transform: translateY(0);
+
-ms-transform: translateY(-20px);
−
    -ms-transform: translateY(0);
+
transform: translateY(-20px);
−
    transform: translateY(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.fadeOutUp {
−
    opacity: 0;
+
  -webkit-animation-name: fadeOutUp;
−
    -webkit-transform: translateY(-2000px);
+
  animation-name: fadeOutUp;
−
    -ms-transform: translateY(-2000px);
+
}
−
    transform: translateY(-2000px);
+
−
  }
+
−
}
+
  
−
.fadeOutUpBig {
+
@-webkit-keyframes fadeOutUpBig {
−
  -webkit-animation-name: fadeOutUpBig;
+
  0% {
−
  animation-name: fadeOutUpBig;
+
opacity: 1;
−
}
+
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
  }
  
−
@-webkit-keyframes flip {
+
  100% {
−
  0% {
+
opacity: 0;
−
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+
-webkit-transform: translateY(-2000px);
−
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+
transform: translateY(-2000px);
−
    -webkit-animation-timing-function: ease-out;
+
  }
−
    animation-timing-function: ease-out;
+
}
−
  }
+
  
−
  40% {
+
@keyframes fadeOutUpBig {
−
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+
  0% {
−
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+
opacity: 1;
−
    -webkit-animation-timing-function: ease-out;
+
-webkit-transform: translateY(0);
−
    animation-timing-function: ease-out;
+
-ms-transform: translateY(0);
−
  }
+
transform: translateY(0);
 +
  }
  
−
  50% {
+
  100% {
−
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+
opacity: 0;
−
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+
-webkit-transform: translateY(-2000px);
−
    -webkit-animation-timing-function: ease-in;
+
-ms-transform: translateY(-2000px);
−
    animation-timing-function: ease-in;
+
transform: translateY(-2000px);
−
  }
+
  }
 +
}
  
−
  80% {
+
.fadeOutUpBig {
−
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+
  -webkit-animation-name: fadeOutUpBig;
−
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+
  animation-name: fadeOutUpBig;
−
    -webkit-animation-timing-function: ease-in;
+
}
−
    animation-timing-function: ease-in;
+
−
  }
+
  
−
  100% {
+
@-webkit-keyframes flip {
−
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+
  0% {
−
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
−
    -webkit-animation-timing-function: ease-in;
+
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
−
    animation-timing-function: ease-in;
+
-webkit-animation-timing-function: ease-out;
−
  }
+
animation-timing-function: ease-out;
−
}
+
  }
  
−
@keyframes flip {
+
  40% {
−
  0% {
+
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
−
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
−
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+
-webkit-animation-timing-function: ease-out;
−
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+
animation-timing-function: ease-out;
−
    -webkit-animation-timing-function: ease-out;
+
  }
−
    animation-timing-function: ease-out;
+
−
  }
+
  
−
  40% {
+
  50% {
−
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
−
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
−
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+
-webkit-animation-timing-function: ease-in;
−
    -webkit-animation-timing-function: ease-out;
+
animation-timing-function: ease-in;
−
    animation-timing-function: ease-out;
+
  }
−
  }
+
  
−
  50% {
+
  80% {
−
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
−
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
−
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+
-webkit-animation-timing-function: ease-in;
−
    -webkit-animation-timing-function: ease-in;
+
animation-timing-function: ease-in;
−
    animation-timing-function: ease-in;
+
  }
−
  }
+
  
−
  80% {
+
  100% {
−
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
−
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
−
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+
-webkit-animation-timing-function: ease-in;
−
    -webkit-animation-timing-function: ease-in;
+
animation-timing-function: ease-in;
−
    animation-timing-function: ease-in;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes flip {
−
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+
  0% {
−
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
−
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
−
    -webkit-animation-timing-function: ease-in;
+
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
−
    animation-timing-function: ease-in;
+
-webkit-animation-timing-function: ease-out;
−
  }
+
animation-timing-function: ease-out;
−
}
+
  }
  
−
.animated.flip {
+
  40% {
−
  -webkit-backface-visibility: visible;
+
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
−
  -ms-backface-visibility: visible;
+
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
−
  backface-visibility: visible;
+
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
−
  -webkit-animation-name: flip;
+
-webkit-animation-timing-function: ease-out;
−
  animation-name: flip;
+
animation-timing-function: ease-out;
−
}
+
  }
  
−
@-webkit-keyframes flipInX {
+
  50% {
−
  0% {
+
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
−
    -webkit-transform: perspective(400px) rotateX(90deg);
+
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
−
    transform: perspective(400px) rotateX(90deg);
+
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
−
    opacity: 0;
+
-webkit-animation-timing-function: ease-in;
−
  }
+
animation-timing-function: ease-in;
 +
  }
  
−
  40% {
+
  80% {
−
    -webkit-transform: perspective(400px) rotateX(-10deg);
+
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
−
    transform: perspective(400px) rotateX(-10deg);
+
-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;
 +
  }
  
−
  70% {
+
  100% {
−
    -webkit-transform: perspective(400px) rotateX(10deg);
+
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
−
    transform: perspective(400px) rotateX(10deg);
+
-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;
 +
  }
 +
}
  
−
  100% {
+
.animated.flip {
−
    -webkit-transform: perspective(400px) rotateX(0deg);
+
  -webkit-backface-visibility: visible;
−
    transform: perspective(400px) rotateX(0deg);
+
  -ms-backface-visibility: visible;
−
    opacity: 1;
+
  backface-visibility: visible;
−
  }
+
  -webkit-animation-name: flip;
−
}
+
  animation-name: flip;
 +
}
  
−
@keyframes flipInX {
+
@-webkit-keyframes flipInX {
−
  0% {
+
  0% {
−
    -webkit-transform: perspective(400px) rotateX(90deg);
+
-webkit-transform: perspective(400px) rotateX(90deg);
−
    -ms-transform: perspective(400px) rotateX(90deg);
+
transform: perspective(400px) rotateX(90deg);
−
    transform: perspective(400px) rotateX(90deg);
+
opacity: 0;
−
    opacity: 0;
+
  }
−
  }
+
  
−
  40% {
+
  40% {
−
    -webkit-transform: perspective(400px) rotateX(-10deg);
+
-webkit-transform: perspective(400px) rotateX(-10deg);
−
    -ms-transform: perspective(400px) rotateX(-10deg);
+
transform: perspective(400px) rotateX(-10deg);
−
    transform: perspective(400px) rotateX(-10deg);
+
  }
−
  }
+
  
−
  70% {
+
  70% {
−
    -webkit-transform: perspective(400px) rotateX(10deg);
+
-webkit-transform: perspective(400px) rotateX(10deg);
−
    -ms-transform: perspective(400px) rotateX(10deg);
+
transform: perspective(400px) rotateX(10deg);
−
    transform: perspective(400px) rotateX(10deg);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    -webkit-transform: perspective(400px) rotateX(0deg);
+
-webkit-transform: perspective(400px) rotateX(0deg);
−
    -ms-transform: perspective(400px) rotateX(0deg);
+
transform: perspective(400px) rotateX(0deg);
−
    transform: perspective(400px) rotateX(0deg);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
}
−
}
+
  
−
.flipInX {
+
@keyframes flipInX {
−
  -webkit-backface-visibility: visible !important;
+
  0% {
−
  -ms-backface-visibility: visible !important;
+
-webkit-transform: perspective(400px) rotateX(90deg);
−
  backface-visibility: visible !important;
+
-ms-transform: perspective(400px) rotateX(90deg);
−
  -webkit-animation-name: flipInX;
+
transform: perspective(400px) rotateX(90deg);
−
  animation-name: flipInX;
+
opacity: 0;
−
}
+
  }
  
−
@-webkit-keyframes flipInY {
+
  40% {
−
  0% {
+
-webkit-transform: perspective(400px) rotateX(-10deg);
−
    -webkit-transform: perspective(400px) rotateY(90deg);
+
-ms-transform: perspective(400px) rotateX(-10deg);
−
    transform: perspective(400px) rotateY(90deg);
+
transform: perspective(400px) rotateX(-10deg);
−
    opacity: 0;
+
  }
−
  }
+
  
−
  40% {
+
  70% {
−
    -webkit-transform: perspective(400px) rotateY(-10deg);
+
-webkit-transform: perspective(400px) rotateX(10deg);
−
    transform: perspective(400px) rotateY(-10deg);
+
-ms-transform: perspective(400px) rotateX(10deg);
−
  }
+
transform: perspective(400px) rotateX(10deg);
 +
  }
  
−
  70% {
+
  100% {
−
    -webkit-transform: perspective(400px) rotateY(10deg);
+
-webkit-transform: perspective(400px) rotateX(0deg);
−
    transform: perspective(400px) rotateY(10deg);
+
-ms-transform: perspective(400px) rotateX(0deg);
−
  }
+
transform: perspective(400px) rotateX(0deg);
 +
opacity: 1;
 +
  }
 +
}
  
−
  100% {
+
.flipInX {
−
    -webkit-transform: perspective(400px) rotateY(0deg);
+
  -webkit-backface-visibility: visible !important;
−
    transform: perspective(400px) rotateY(0deg);
+
  -ms-backface-visibility: visible !important;
−
    opacity: 1;
+
  backface-visibility: visible !important;
−
  }
+
  -webkit-animation-name: flipInX;
−
}
+
  animation-name: flipInX;
 +
}
  
−
@keyframes flipInY {
+
@-webkit-keyframes flipInY {
−
  0% {
+
  0% {
−
    -webkit-transform: perspective(400px) rotateY(90deg);
+
-webkit-transform: perspective(400px) rotateY(90deg);
−
    -ms-transform: perspective(400px) rotateY(90deg);
+
transform: perspective(400px) rotateY(90deg);
−
    transform: perspective(400px) rotateY(90deg);
+
opacity: 0;
−
    opacity: 0;
+
  }
−
  }
+
  
−
  40% {
+
  40% {
−
    -webkit-transform: perspective(400px) rotateY(-10deg);
+
-webkit-transform: perspective(400px) rotateY(-10deg);
−
    -ms-transform: perspective(400px) rotateY(-10deg);
+
transform: perspective(400px) rotateY(-10deg);
−
    transform: perspective(400px) rotateY(-10deg);
+
  }
−
  }
+
  
−
  70% {
+
  70% {
−
    -webkit-transform: perspective(400px) rotateY(10deg);
+
-webkit-transform: perspective(400px) rotateY(10deg);
−
    -ms-transform: perspective(400px) rotateY(10deg);
+
transform: perspective(400px) rotateY(10deg);
−
    transform: perspective(400px) rotateY(10deg);
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    -webkit-transform: perspective(400px) rotateY(0deg);
+
-webkit-transform: perspective(400px) rotateY(0deg);
−
    -ms-transform: perspective(400px) rotateY(0deg);
+
transform: perspective(400px) rotateY(0deg);
−
    transform: perspective(400px) rotateY(0deg);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
}
−
}
+
  
−
.flipInY {
+
@keyframes flipInY {
−
  -webkit-backface-visibility: visible !important;
+
  0% {
−
  -ms-backface-visibility: visible !important;
+
-webkit-transform: perspective(400px) rotateY(90deg);
−
  backface-visibility: visible !important;
+
-ms-transform: perspective(400px) rotateY(90deg);
−
  -webkit-animation-name: flipInY;
+
transform: perspective(400px) rotateY(90deg);
−
  animation-name: flipInY;
+
opacity: 0;
−
}
+
  }
  
−
@-webkit-keyframes flipOutX {
+
  40% {
−
  0% {
+
-webkit-transform: perspective(400px) rotateY(-10deg);
−
    -webkit-transform: perspective(400px) rotateX(0deg);
+
-ms-transform: perspective(400px) rotateY(-10deg);
−
    transform: perspective(400px) rotateX(0deg);
+
transform: perspective(400px) rotateY(-10deg);
−
    opacity: 1;
+
  }
−
  }
+
  
−
  100% {
+
  70% {
−
    -webkit-transform: perspective(400px) rotateX(90deg);
+
-webkit-transform: perspective(400px) rotateY(10deg);
−
    transform: perspective(400px) rotateX(90deg);
+
-ms-transform: perspective(400px) rotateY(10deg);
−
    opacity: 0;
+
transform: perspective(400px) rotateY(10deg);
−
  }
+
  }
−
}
+
  
−
@keyframes flipOutX {
+
  100% {
−
  0% {
+
-webkit-transform: perspective(400px) rotateY(0deg);
−
    -webkit-transform: perspective(400px) rotateX(0deg);
+
-ms-transform: perspective(400px) rotateY(0deg);
−
    -ms-transform: perspective(400px) rotateX(0deg);
+
transform: perspective(400px) rotateY(0deg);
−
    transform: perspective(400px) rotateX(0deg);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.flipInY {
−
    -webkit-transform: perspective(400px) rotateX(90deg);
+
  -webkit-backface-visibility: visible !important;
−
    -ms-transform: perspective(400px) rotateX(90deg);
+
  -ms-backface-visibility: visible !important;
−
    transform: perspective(400px) rotateX(90deg);
+
  backface-visibility: visible !important;
−
    opacity: 0;
+
  -webkit-animation-name: flipInY;
−
  }
+
  animation-name: flipInY;
−
}
+
}
  
−
.flipOutX {
+
@-webkit-keyframes flipOutX {
−
  -webkit-animation-name: flipOutX;
+
  0% {
−
  animation-name: flipOutX;
+
-webkit-transform: perspective(400px) rotateX(0deg);
−
  -webkit-backface-visibility: visible !important;
+
transform: perspective(400px) rotateX(0deg);
−
  -ms-backface-visibility: visible !important;
+
opacity: 1;
−
  backface-visibility: visible !important;
+
  }
−
}
+
  
−
@-webkit-keyframes flipOutY {
+
  100% {
−
  0% {
+
-webkit-transform: perspective(400px) rotateX(90deg);
−
    -webkit-transform: perspective(400px) rotateY(0deg);
+
transform: perspective(400px) rotateX(90deg);
−
    transform: perspective(400px) rotateY(0deg);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes flipOutX {
−
    -webkit-transform: perspective(400px) rotateY(90deg);
+
  0% {
−
    transform: perspective(400px) rotateY(90deg);
+
-webkit-transform: perspective(400px) rotateX(0deg);
−
    opacity: 0;
+
-ms-transform: perspective(400px) rotateX(0deg);
−
  }
+
transform: perspective(400px) rotateX(0deg);
−
}
+
opacity: 1;
 +
  }
  
−
@keyframes flipOutY {
+
  100% {
−
  0% {
+
-webkit-transform: perspective(400px) rotateX(90deg);
−
    -webkit-transform: perspective(400px) rotateY(0deg);
+
-ms-transform: perspective(400px) rotateX(90deg);
−
    -ms-transform: perspective(400px) rotateY(0deg);
+
transform: perspective(400px) rotateX(90deg);
−
    transform: perspective(400px) rotateY(0deg);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.flipOutX {
−
    -webkit-transform: perspective(400px) rotateY(90deg);
+
  -webkit-animation-name: flipOutX;
−
    -ms-transform: perspective(400px) rotateY(90deg);
+
  animation-name: flipOutX;
−
    transform: perspective(400px) rotateY(90deg);
+
  -webkit-backface-visibility: visible !important;
−
    opacity: 0;
+
  -ms-backface-visibility: visible !important;
−
  }
+
  backface-visibility: visible !important;
−
}
+
}
  
−
.flipOutY {
+
@-webkit-keyframes flipOutY {
−
  -webkit-backface-visibility: visible !important;
+
  0% {
−
  -ms-backface-visibility: visible !important;
+
-webkit-transform: perspective(400px) rotateY(0deg);
−
  backface-visibility: visible !important;
+
transform: perspective(400px) rotateY(0deg);
−
  -webkit-animation-name: flipOutY;
+
opacity: 1;
−
  animation-name: flipOutY;
+
  }
−
}
+
  
−
@-webkit-keyframes lightSpeedIn {
+
  100% {
−
  0% {
+
-webkit-transform: perspective(400px) rotateY(90deg);
−
    -webkit-transform: translateX(100%) skewX(-30deg);
+
transform: perspective(400px) rotateY(90deg);
−
    transform: translateX(100%) skewX(-30deg);
+
opacity: 0;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  60% {
+
@keyframes flipOutY {
−
    -webkit-transform: translateX(-20%) skewX(30deg);
+
  0% {
−
    transform: translateX(-20%) skewX(30deg);
+
-webkit-transform: perspective(400px) rotateY(0deg);
−
    opacity: 1;
+
-ms-transform: perspective(400px) rotateY(0deg);
−
  }
+
transform: perspective(400px) rotateY(0deg);
 +
opacity: 1;
 +
  }
  
−
  80% {
+
  100% {
−
    -webkit-transform: translateX(0%) skewX(-15deg);
+
-webkit-transform: perspective(400px) rotateY(90deg);
−
    transform: translateX(0%) skewX(-15deg);
+
-ms-transform: perspective(400px) rotateY(90deg);
−
    opacity: 1;
+
transform: perspective(400px) rotateY(90deg);
−
  }
+
opacity: 0;
 +
  }
 +
}
  
−
  100% {
+
.flipOutY {
−
    -webkit-transform: translateX(0%) skewX(0deg);
+
  -webkit-backface-visibility: visible !important;
−
    transform: translateX(0%) skewX(0deg);
+
  -ms-backface-visibility: visible !important;
−
    opacity: 1;
+
  backface-visibility: visible !important;
−
  }
+
  -webkit-animation-name: flipOutY;
−
}
+
  animation-name: flipOutY;
 +
}
  
−
@keyframes lightSpeedIn {
+
@-webkit-keyframes lightSpeedIn {
−
  0% {
+
  0% {
−
    -webkit-transform: translateX(100%) skewX(-30deg);
+
-webkit-transform: translateX(100%) skewX(-30deg);
−
    -ms-transform: translateX(100%) skewX(-30deg);
+
transform: translateX(100%) skewX(-30deg);
−
    transform: translateX(100%) skewX(-30deg);
+
opacity: 0;
−
    opacity: 0;
+
  }
−
  }
+
  
−
  60% {
+
  60% {
−
    -webkit-transform: translateX(-20%) skewX(30deg);
+
-webkit-transform: translateX(-20%) skewX(30deg);
−
    -ms-transform: translateX(-20%) skewX(30deg);
+
transform: translateX(-20%) skewX(30deg);
−
    transform: translateX(-20%) skewX(30deg);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
  
−
  80% {
+
  80% {
−
    -webkit-transform: translateX(0%) skewX(-15deg);
+
-webkit-transform: translateX(0%) skewX(-15deg);
−
    -ms-transform: translateX(0%) skewX(-15deg);
+
transform: translateX(0%) skewX(-15deg);
−
    transform: translateX(0%) skewX(-15deg);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
  
−
  100% {
+
  100% {
−
    -webkit-transform: translateX(0%) skewX(0deg);
+
-webkit-transform: translateX(0%) skewX(0deg);
−
    -ms-transform: translateX(0%) skewX(0deg);
+
transform: translateX(0%) skewX(0deg);
−
    transform: translateX(0%) skewX(0deg);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
}
−
}
+
  
−
.lightSpeedIn {
+
@keyframes lightSpeedIn {
−
  -webkit-animation-name: lightSpeedIn;
+
  0% {
−
  animation-name: lightSpeedIn;
+
-webkit-transform: translateX(100%) skewX(-30deg);
−
  -webkit-animation-timing-function: ease-out;
+
-ms-transform: translateX(100%) skewX(-30deg);
−
  animation-timing-function: ease-out;
+
transform: translateX(100%) skewX(-30deg);
−
}
+
opacity: 0;
 +
  }
  
−
@-webkit-keyframes lightSpeedOut {
+
  60% {
−
  0% {
+
-webkit-transform: translateX(-20%) skewX(30deg);
−
    -webkit-transform: translateX(0%) skewX(0deg);
+
-ms-transform: translateX(-20%) skewX(30deg);
−
    transform: translateX(0%) skewX(0deg);
+
transform: translateX(-20%) skewX(30deg);
−
    opacity: 1;
+
opacity: 1;
−
  }
+
  }
  
−
  100% {
+
  80% {
−
    -webkit-transform: translateX(100%) skewX(-30deg);
+
-webkit-transform: translateX(0%) skewX(-15deg);
−
    transform: translateX(100%) skewX(-30deg);
+
-ms-transform: translateX(0%) skewX(-15deg);
−
    opacity: 0;
+
transform: translateX(0%) skewX(-15deg);
−
  }
+
opacity: 1;
−
}
+
  }
  
−
@keyframes lightSpeedOut {
+
  100% {
−
  0% {
+
-webkit-transform: translateX(0%) skewX(0deg);
−
    -webkit-transform: translateX(0%) skewX(0deg);
+
-ms-transform: translateX(0%) skewX(0deg);
−
    -ms-transform: translateX(0%) skewX(0deg);
+
transform: translateX(0%) skewX(0deg);
−
    transform: translateX(0%) skewX(0deg);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.lightSpeedIn {
−
    -webkit-transform: translateX(100%) skewX(-30deg);
+
  -webkit-animation-name: lightSpeedIn;
−
    -ms-transform: translateX(100%) skewX(-30deg);
+
  animation-name: lightSpeedIn;
−
    transform: translateX(100%) skewX(-30deg);
+
  -webkit-animation-timing-function: ease-out;
−
    opacity: 0;
+
  animation-timing-function: ease-out;
−
  }
+
}
−
}
+
  
−
.lightSpeedOut {
+
@-webkit-keyframes lightSpeedOut {
−
  -webkit-animation-name: lightSpeedOut;
+
  0% {
−
  animation-name: lightSpeedOut;
+
-webkit-transform: translateX(0%) skewX(0deg);
−
  -webkit-animation-timing-function: ease-in;
+
transform: translateX(0%) skewX(0deg);
−
  animation-timing-function: ease-in;
+
opacity: 1;
−
}
+
  }
  
−
@-webkit-keyframes rotateIn {
+
  100% {
−
  0% {
+
-webkit-transform: translateX(100%) skewX(-30deg);
−
    -webkit-transform-origin: center center;
+
transform: translateX(100%) skewX(-30deg);
−
    transform-origin: center center;
+
opacity: 0;
−
    -webkit-transform: rotate(-200deg);
+
  }
−
    transform: rotate(-200deg);
+
}
−
    opacity: 0;
+
−
  }
+
  
−
  100% {
+
@keyframes lightSpeedOut {
−
    -webkit-transform-origin: center center;
+
  0% {
−
    transform-origin: center center;
+
-webkit-transform: translateX(0%) skewX(0deg);
−
    -webkit-transform: rotate(0);
+
-ms-transform: translateX(0%) skewX(0deg);
−
    transform: rotate(0);
+
transform: translateX(0%) skewX(0deg);
−
    opacity: 1;
+
opacity: 1;
−
  }
+
  }
−
}
+
  
−
@keyframes rotateIn {
+
  100% {
−
  0% {
+
-webkit-transform: translateX(100%) skewX(-30deg);
−
    -webkit-transform-origin: center center;
+
-ms-transform: translateX(100%) skewX(-30deg);
−
    -ms-transform-origin: center center;
+
transform: translateX(100%) skewX(-30deg);
−
    transform-origin: center center;
+
opacity: 0;
−
    -webkit-transform: rotate(-200deg);
+
  }
−
    -ms-transform: rotate(-200deg);
+
}
−
    transform: rotate(-200deg);
+
−
    opacity: 0;
+
−
  }
+
  
−
  100% {
+
.lightSpeedOut {
−
    -webkit-transform-origin: center center;
+
  -webkit-animation-name: lightSpeedOut;
−
    -ms-transform-origin: center center;
+
  animation-name: lightSpeedOut;
−
    transform-origin: center center;
+
  -webkit-animation-timing-function: ease-in;
−
    -webkit-transform: rotate(0);
+
  animation-timing-function: ease-in;
−
    -ms-transform: rotate(0);
+
}
−
    transform: rotate(0);
+
−
    opacity: 1;
+
−
  }
+
−
}
+
  
−
.rotateIn {
+
@-webkit-keyframes rotateIn {
−
  -webkit-animation-name: rotateIn;
+
  0% {
−
  animation-name: rotateIn;
+
-webkit-transform-origin: center center;
−
}
+
transform-origin: center center;
 +
-webkit-transform: rotate(-200deg);
 +
transform: rotate(-200deg);
 +
opacity: 0;
 +
  }
  
−
@-webkit-keyframes rotateInDownLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: center center;
−
    -webkit-transform-origin: left bottom;
+
transform-origin: center center;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(-90deg);
+
transform: rotate(0);
−
    transform: rotate(-90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateIn {
−
    -webkit-transform-origin: left bottom;
+
  0% {
−
    transform-origin: left bottom;
+
-webkit-transform-origin: center center;
−
    -webkit-transform: rotate(0);
+
-ms-transform-origin: center center;
−
    transform: rotate(0);
+
transform-origin: center center;
−
    opacity: 1;
+
-webkit-transform: rotate(-200deg);
−
  }
+
-ms-transform: rotate(-200deg);
−
}
+
transform: rotate(-200deg);
 +
opacity: 0;
 +
  }
  
−
@keyframes rotateInDownLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: center center;
−
    -webkit-transform-origin: left bottom;
+
-ms-transform-origin: center center;
−
    -ms-transform-origin: left bottom;
+
transform-origin: center center;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(-90deg);
+
-ms-transform: rotate(0);
−
    -ms-transform: rotate(-90deg);
+
transform: rotate(0);
−
    transform: rotate(-90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateIn {
−
    -webkit-transform-origin: left bottom;
+
  -webkit-animation-name: rotateIn;
−
    -ms-transform-origin: left bottom;
+
  animation-name: rotateIn;
−
    transform-origin: left bottom;
+
}
−
    -webkit-transform: rotate(0);
+
−
    -ms-transform: rotate(0);
+
−
    transform: rotate(0);
+
−
    opacity: 1;
+
−
  }
+
−
}
+
  
−
.rotateInDownLeft {
+
@-webkit-keyframes rotateInDownLeft {
−
  -webkit-animation-name: rotateInDownLeft;
+
  0% {
−
  animation-name: rotateInDownLeft;
+
-webkit-transform-origin: left bottom;
−
}
+
transform-origin: left bottom;
 +
-webkit-transform: rotate(-90deg);
 +
transform: rotate(-90deg);
 +
opacity: 0;
 +
  }
  
−
@-webkit-keyframes rotateInDownRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(90deg);
+
transform: rotate(0);
−
    transform: rotate(90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateInDownLeft {
−
    -webkit-transform-origin: right bottom;
+
  0% {
−
    transform-origin: right bottom;
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform: rotate(0);
+
-ms-transform-origin: left bottom;
−
    transform: rotate(0);
+
transform-origin: left bottom;
−
    opacity: 1;
+
-webkit-transform: rotate(-90deg);
−
  }
+
-ms-transform: rotate(-90deg);
−
}
+
transform: rotate(-90deg);
 +
opacity: 0;
 +
  }
  
−
@keyframes rotateInDownRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
-ms-transform-origin: left bottom;
−
    -ms-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(90deg);
+
-ms-transform: rotate(0);
−
    -ms-transform: rotate(90deg);
+
transform: rotate(0);
−
    transform: rotate(90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateInDownLeft {
−
    -webkit-transform-origin: right bottom;
+
  -webkit-animation-name: rotateInDownLeft;
−
    -ms-transform-origin: right bottom;
+
  animation-name: rotateInDownLeft;
−
    transform-origin: right bottom;
+
}
−
    -webkit-transform: rotate(0);
+
−
    -ms-transform: rotate(0);
+
−
    transform: rotate(0);
+
−
    opacity: 1;
+
−
  }
+
−
}
+
  
−
.rotateInDownRight {
+
@-webkit-keyframes rotateInDownRight {
−
  -webkit-animation-name: rotateInDownRight;
+
  0% {
−
  animation-name: rotateInDownRight;
+
-webkit-transform-origin: right bottom;
−
}
+
transform-origin: right bottom;
 +
-webkit-transform: rotate(90deg);
 +
transform: rotate(90deg);
 +
opacity: 0;
 +
  }
  
−
@-webkit-keyframes rotateInUpLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform-origin: left bottom;
+
transform-origin: right bottom;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(90deg);
+
transform: rotate(0);
−
    transform: rotate(90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateInDownRight {
−
    -webkit-transform-origin: left bottom;
+
  0% {
−
    transform-origin: left bottom;
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform: rotate(0);
+
-ms-transform-origin: right bottom;
−
    transform: rotate(0);
+
transform-origin: right bottom;
−
    opacity: 1;
+
-webkit-transform: rotate(90deg);
−
  }
+
-ms-transform: rotate(90deg);
−
}
+
transform: rotate(90deg);
 +
opacity: 0;
 +
  }
  
−
@keyframes rotateInUpLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform-origin: left bottom;
+
-ms-transform-origin: right bottom;
−
    -ms-transform-origin: left bottom;
+
transform-origin: right bottom;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(90deg);
+
-ms-transform: rotate(0);
−
    -ms-transform: rotate(90deg);
+
transform: rotate(0);
−
    transform: rotate(90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateInDownRight {
−
    -webkit-transform-origin: left bottom;
+
  -webkit-animation-name: rotateInDownRight;
−
    -ms-transform-origin: left bottom;
+
  animation-name: rotateInDownRight;
−
    transform-origin: left bottom;
+
}
−
    -webkit-transform: rotate(0);
+
−
    -ms-transform: rotate(0);
+
−
    transform: rotate(0);
+
−
    opacity: 1;
+
−
  }
+
−
}
+
  
−
.rotateInUpLeft {
+
@-webkit-keyframes rotateInUpLeft {
−
  -webkit-animation-name: rotateInUpLeft;
+
  0% {
−
  animation-name: rotateInUpLeft;
+
-webkit-transform-origin: left bottom;
−
}
+
transform-origin: left bottom;
 +
-webkit-transform: rotate(90deg);
 +
transform: rotate(90deg);
 +
opacity: 0;
 +
  }
  
−
@-webkit-keyframes rotateInUpRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(-90deg);
+
transform: rotate(0);
−
    transform: rotate(-90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateInUpLeft {
−
    -webkit-transform-origin: right bottom;
+
  0% {
−
    transform-origin: right bottom;
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform: rotate(0);
+
-ms-transform-origin: left bottom;
−
    transform: rotate(0);
+
transform-origin: left bottom;
−
    opacity: 1;
+
-webkit-transform: rotate(90deg);
−
  }
+
-ms-transform: rotate(90deg);
−
}
+
transform: rotate(90deg);
 +
opacity: 0;
 +
  }
  
−
@keyframes rotateInUpRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
-ms-transform-origin: left bottom;
−
    -ms-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(-90deg);
+
-ms-transform: rotate(0);
−
    -ms-transform: rotate(-90deg);
+
transform: rotate(0);
−
    transform: rotate(-90deg);
+
opacity: 1;
−
    opacity: 0;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateInUpLeft {
−
    -webkit-transform-origin: right bottom;
+
  -webkit-animation-name: rotateInUpLeft;
−
    -ms-transform-origin: right bottom;
+
  animation-name: rotateInUpLeft;
−
    transform-origin: right bottom;
+
}
−
    -webkit-transform: rotate(0);
+
−
    -ms-transform: rotate(0);
+
−
    transform: rotate(0);
+
−
    opacity: 1;
+
−
  }
+
−
}
+
  
−
.rotateInUpRight {
+
@-webkit-keyframes rotateInUpRight {
−
  -webkit-animation-name: rotateInUpRight;
+
  0% {
−
  animation-name: rotateInUpRight;
+
-webkit-transform-origin: right bottom;
−
}
+
transform-origin: right bottom;
 +
-webkit-transform: rotate(-90deg);
 +
transform: rotate(-90deg);
 +
opacity: 0;
 +
  }
  
−
@-webkit-keyframes rotateOut {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform-origin: center center;
+
transform-origin: right bottom;
−
    transform-origin: center center;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(0);
+
transform: rotate(0);
−
    transform: rotate(0);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateInUpRight {
−
    -webkit-transform-origin: center center;
+
  0% {
−
    transform-origin: center center;
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform: rotate(200deg);
+
-ms-transform-origin: right bottom;
−
    transform: rotate(200deg);
+
transform-origin: right bottom;
−
    opacity: 0;
+
-webkit-transform: rotate(-90deg);
−
  }
+
-ms-transform: rotate(-90deg);
−
}
+
transform: rotate(-90deg);
 +
opacity: 0;
 +
  }
  
−
@keyframes rotateOut {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform-origin: center center;
+
-ms-transform-origin: right bottom;
−
    -ms-transform-origin: center center;
+
transform-origin: right bottom;
−
    transform-origin: center center;
+
-webkit-transform: rotate(0);
−
    -webkit-transform: rotate(0);
+
-ms-transform: rotate(0);
−
    -ms-transform: rotate(0);
+
transform: rotate(0);
−
    transform: rotate(0);
+
opacity: 1;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateInUpRight {
−
    -webkit-transform-origin: center center;
+
  -webkit-animation-name: rotateInUpRight;
−
    -ms-transform-origin: center center;
+
  animation-name: rotateInUpRight;
−
    transform-origin: center center;
+
}
−
    -webkit-transform: rotate(200deg);
+
−
    -ms-transform: rotate(200deg);
+
−
    transform: rotate(200deg);
+
−
    opacity: 0;
+
−
  }
+
−
}
+
  
−
.rotateOut {
+
@-webkit-keyframes rotateOut {
−
  -webkit-animation-name: rotateOut;
+
  0% {
−
  animation-name: rotateOut;
+
-webkit-transform-origin: center center;
−
}
+
transform-origin: center center;
 +
-webkit-transform: rotate(0);
 +
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@-webkit-keyframes rotateOutDownLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: center center;
−
    -webkit-transform-origin: left bottom;
+
transform-origin: center center;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(200deg);
−
    -webkit-transform: rotate(0);
+
transform: rotate(200deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateOut {
−
    -webkit-transform-origin: left bottom;
+
  0% {
−
    transform-origin: left bottom;
+
-webkit-transform-origin: center center;
−
    -webkit-transform: rotate(90deg);
+
-ms-transform-origin: center center;
−
    transform: rotate(90deg);
+
transform-origin: center center;
−
    opacity: 0;
+
-webkit-transform: rotate(0);
−
  }
+
-ms-transform: rotate(0);
−
}
+
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@keyframes rotateOutDownLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: center center;
−
    -webkit-transform-origin: left bottom;
+
-ms-transform-origin: center center;
−
    -ms-transform-origin: left bottom;
+
transform-origin: center center;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(200deg);
−
    -webkit-transform: rotate(0);
+
-ms-transform: rotate(200deg);
−
    -ms-transform: rotate(0);
+
transform: rotate(200deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateOut {
−
    -webkit-transform-origin: left bottom;
+
  -webkit-animation-name: rotateOut;
−
    -ms-transform-origin: left bottom;
+
  animation-name: rotateOut;
−
    transform-origin: left bottom;
+
}
−
    -webkit-transform: rotate(90deg);
+
−
    -ms-transform: rotate(90deg);
+
−
    transform: rotate(90deg);
+
−
    opacity: 0;
+
−
  }
+
−
}
+
  
−
.rotateOutDownLeft {
+
@-webkit-keyframes rotateOutDownLeft {
−
  -webkit-animation-name: rotateOutDownLeft;
+
  0% {
−
  animation-name: rotateOutDownLeft;
+
-webkit-transform-origin: left bottom;
−
}
+
transform-origin: left bottom;
 +
-webkit-transform: rotate(0);
 +
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@-webkit-keyframes rotateOutDownRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(90deg);
−
    -webkit-transform: rotate(0);
+
transform: rotate(90deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateOutDownLeft {
−
    -webkit-transform-origin: right bottom;
+
  0% {
−
    transform-origin: right bottom;
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform: rotate(-90deg);
+
-ms-transform-origin: left bottom;
−
    transform: rotate(-90deg);
+
transform-origin: left bottom;
−
    opacity: 0;
+
-webkit-transform: rotate(0);
−
  }
+
-ms-transform: rotate(0);
−
}
+
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@keyframes rotateOutDownRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
-ms-transform-origin: left bottom;
−
    -ms-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(90deg);
−
    -webkit-transform: rotate(0);
+
-ms-transform: rotate(90deg);
−
    -ms-transform: rotate(0);
+
transform: rotate(90deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateOutDownLeft {
−
    -webkit-transform-origin: right bottom;
+
  -webkit-animation-name: rotateOutDownLeft;
−
    -ms-transform-origin: right bottom;
+
  animation-name: rotateOutDownLeft;
−
    transform-origin: right bottom;
+
}
−
    -webkit-transform: rotate(-90deg);
+
−
    -ms-transform: rotate(-90deg);
+
−
    transform: rotate(-90deg);
+
−
    opacity: 0;
+
−
  }
+
−
}
+
  
−
.rotateOutDownRight {
+
@-webkit-keyframes rotateOutDownRight {
−
  -webkit-animation-name: rotateOutDownRight;
+
  0% {
−
  animation-name: rotateOutDownRight;
+
-webkit-transform-origin: right bottom;
−
}
+
transform-origin: right bottom;
 +
-webkit-transform: rotate(0);
 +
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@-webkit-keyframes rotateOutUpLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform-origin: left bottom;
+
transform-origin: right bottom;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(-90deg);
−
    -webkit-transform: rotate(0);
+
transform: rotate(-90deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateOutDownRight {
−
    -webkit-transform-origin: left bottom;
+
  0% {
−
    transform-origin: left bottom;
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform: rotate(-90deg);
+
-ms-transform-origin: right bottom;
−
    transform: rotate(-90deg);
+
transform-origin: right bottom;
−
    opacity: 0;
+
-webkit-transform: rotate(0);
−
  }
+
-ms-transform: rotate(0);
−
}
+
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@keyframes rotateOutUpLeft {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    -webkit-transform-origin: left bottom;
+
-ms-transform-origin: right bottom;
−
    -ms-transform-origin: left bottom;
+
transform-origin: right bottom;
−
    transform-origin: left bottom;
+
-webkit-transform: rotate(-90deg);
−
    -webkit-transform: rotate(0);
+
-ms-transform: rotate(-90deg);
−
    -ms-transform: rotate(0);
+
transform: rotate(-90deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateOutDownRight {
−
    -webkit-transform-origin: left bottom;
+
  -webkit-animation-name: rotateOutDownRight;
−
    -ms-transform-origin: left bottom;
+
  animation-name: rotateOutDownRight;
−
    transform-origin: left bottom;
+
}
−
    -webkit-transform: rotate(-90deg);
+
−
    -ms-transform: rotate(-90deg);
+
−
    transform: rotate(-90deg);
+
−
    opacity: 0;
+
−
  }
+
−
}
+
  
−
.rotateOutUpLeft {
+
@-webkit-keyframes rotateOutUpLeft {
−
  -webkit-animation-name: rotateOutUpLeft;
+
  0% {
−
  animation-name: rotateOutUpLeft;
+
-webkit-transform-origin: left bottom;
−
}
+
transform-origin: left bottom;
 +
-webkit-transform: rotate(0);
 +
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@-webkit-keyframes rotateOutUpRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(-90deg);
−
    -webkit-transform: rotate(0);
+
transform: rotate(-90deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes rotateOutUpLeft {
−
    -webkit-transform-origin: right bottom;
+
  0% {
−
    transform-origin: right bottom;
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform: rotate(90deg);
+
-ms-transform-origin: left bottom;
−
    transform: rotate(90deg);
+
transform-origin: left bottom;
−
    opacity: 0;
+
-webkit-transform: rotate(0);
−
  }
+
-ms-transform: rotate(0);
−
}
+
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@keyframes rotateOutUpRight {
+
  100% {
−
  0% {
+
-webkit-transform-origin: left bottom;
−
    -webkit-transform-origin: right bottom;
+
-ms-transform-origin: left bottom;
−
    -ms-transform-origin: right bottom;
+
transform-origin: left bottom;
−
    transform-origin: right bottom;
+
-webkit-transform: rotate(-90deg);
−
    -webkit-transform: rotate(0);
+
-ms-transform: rotate(-90deg);
−
    -ms-transform: rotate(0);
+
transform: rotate(-90deg);
−
    transform: rotate(0);
+
opacity: 0;
−
    opacity: 1;
+
  }
−
  }
+
}
  
−
  100% {
+
.rotateOutUpLeft {
−
    -webkit-transform-origin: right bottom;
+
  -webkit-animation-name: rotateOutUpLeft;
−
    -ms-transform-origin: right bottom;
+
  animation-name: rotateOutUpLeft;
−
    transform-origin: right bottom;
+
}
−
    -webkit-transform: rotate(90deg);
+
−
    -ms-transform: rotate(90deg);
+
−
    transform: rotate(90deg);
+
−
    opacity: 0;
+
−
  }
+
−
}
+
  
−
.rotateOutUpRight {
+
@-webkit-keyframes rotateOutUpRight {
−
  -webkit-animation-name: rotateOutUpRight;
+
  0% {
−
  animation-name: rotateOutUpRight;
+
-webkit-transform-origin: right bottom;
−
}
+
transform-origin: right bottom;
 +
-webkit-transform: rotate(0);
 +
transform: rotate(0);
 +
opacity: 1;
 +
  }
  
−
@-webkit-keyframes slideInDown {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    opacity: 0;
+
transform-origin: right bottom;
−
    -webkit-transform: translateY(-2000px);
+
-webkit-transform: rotate(90deg);
−
    transform: translateY(-2000px);
+
transform: rotate(90deg);
−
  }
+
opacity: 0;
 +
  }
 +
}
  
−
  100% {
+
@keyframes rotateOutUpRight {
−
    -webkit-transform: translateY(0);
+
  0% {
−
    transform: translateY(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;
 +
  }
  
−
@keyframes slideInDown {
+
  100% {
−
  0% {
+
-webkit-transform-origin: right bottom;
−
    opacity: 0;
+
-ms-transform-origin: right bottom;
−
    -webkit-transform: translateY(-2000px);
+
transform-origin: right bottom;
−
    -ms-transform: translateY(-2000px);
+
-webkit-transform: rotate(90deg);
−
    transform: translateY(-2000px);
+
-ms-transform: rotate(90deg);
−
  }
+
transform: rotate(90deg);
 +
opacity: 0;
 +
  }
 +
}
  
−
  100% {
+
.rotateOutUpRight {
−
    -webkit-transform: translateY(0);
+
  -webkit-animation-name: rotateOutUpRight;
−
    -ms-transform: translateY(0);
+
  animation-name: rotateOutUpRight;
−
    transform: translateY(0);
+
}
−
  }
+
−
}
+
  
−
.slideInDown {
+
@-webkit-keyframes slideInDown {
−
  -webkit-animation-name: slideInDown;
+
  0% {
−
  animation-name: slideInDown;
+
opacity: 0;
−
}
+
-webkit-transform: translateY(-2000px);
 +
transform: translateY(-2000px);
 +
  }
  
−
@-webkit-keyframes slideInLeft {
+
  100% {
−
  0% {
+
-webkit-transform: translateY(0);
−
    opacity: 0;
+
transform: translateY(0);
−
    -webkit-transform: translateX(-2000px);
+
  }
−
    transform: translateX(-2000px);
+
}
−
  }
+
  
−
  100% {
+
@keyframes slideInDown {
−
    -webkit-transform: translateX(0);
+
  0% {
−
    transform: translateX(0);
+
opacity: 0;
−
  }
+
-webkit-transform: translateY(-2000px);
−
}
+
-ms-transform: translateY(-2000px);
 +
transform: translateY(-2000px);
 +
  }
  
−
@keyframes slideInLeft {
+
  100% {
−
  0% {
+
-webkit-transform: translateY(0);
−
    opacity: 0;
+
-ms-transform: translateY(0);
−
    -webkit-transform: translateX(-2000px);
+
transform: translateY(0);
−
    -ms-transform: translateX(-2000px);
+
  }
−
    transform: translateX(-2000px);
+
}
−
  }
+
  
−
  100% {
+
.slideInDown {
−
    -webkit-transform: translateX(0);
+
  -webkit-animation-name: slideInDown;
−
    -ms-transform: translateX(0);
+
  animation-name: slideInDown;
−
    transform: translateX(0);
+
}
−
  }
+
−
}
+
  
−
.slideInLeft {
+
@-webkit-keyframes slideInLeft {
−
  -webkit-animation-name: slideInLeft;
+
  0% {
−
  animation-name: slideInLeft;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(-2000px);
 +
transform: translateX(-2000px);
 +
  }
  
−
@-webkit-keyframes slideInRight {
+
  100% {
−
  0% {
+
-webkit-transform: translateX(0);
−
    opacity: 0;
+
transform: translateX(0);
−
    -webkit-transform: translateX(2000px);
+
  }
−
    transform: translateX(2000px);
+
}
−
  }
+
  
−
  100% {
+
@keyframes slideInLeft {
−
    -webkit-transform: translateX(0);
+
  0% {
−
    transform: translateX(0);
+
opacity: 0;
−
  }
+
-webkit-transform: translateX(-2000px);
−
}
+
-ms-transform: translateX(-2000px);
 +
transform: translateX(-2000px);
 +
  }
  
−
@keyframes slideInRight {
+
  100% {
−
  0% {
+
-webkit-transform: translateX(0);
−
    opacity: 0;
+
-ms-transform: translateX(0);
−
    -webkit-transform: translateX(2000px);
+
transform: translateX(0);
−
    -ms-transform: translateX(2000px);
+
  }
−
    transform: translateX(2000px);
+
}
−
  }
+
  
−
  100% {
+
.slideInLeft {
−
    -webkit-transform: translateX(0);
+
  -webkit-animation-name: slideInLeft;
−
    -ms-transform: translateX(0);
+
  animation-name: slideInLeft;
−
    transform: translateX(0);
+
}
−
  }
+
−
}
+
  
−
.slideInRight {
+
@-webkit-keyframes slideInRight {
−
  -webkit-animation-name: slideInRight;
+
  0% {
−
  animation-name: slideInRight;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(2000px);
 +
transform: translateX(2000px);
 +
  }
  
−
@-webkit-keyframes slideOutLeft {
+
  100% {
−
  0% {
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(0);
+
transform: translateX(0);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
@keyframes slideInRight {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateX(-2000px);
+
opacity: 0;
−
    transform: translateX(-2000px);
+
-webkit-transform: translateX(2000px);
−
  }
+
-ms-transform: translateX(2000px);
−
}
+
transform: translateX(2000px);
 +
  }
  
−
@keyframes slideOutLeft {
+
  100% {
−
  0% {
+
-webkit-transform: translateX(0);
−
    -webkit-transform: translateX(0);
+
-ms-transform: translateX(0);
−
    -ms-transform: translateX(0);
+
transform: translateX(0);
−
    transform: translateX(0);
+
  }
−
  }
+
}
  
−
  100% {
+
.slideInRight {
−
    opacity: 0;
+
  -webkit-animation-name: slideInRight;
−
    -webkit-transform: translateX(-2000px);
+
  animation-name: slideInRight;
−
    -ms-transform: translateX(-2000px);
+
}
−
    transform: translateX(-2000px);
+
−
  }
+
−
}
+
  
−
.slideOutLeft {
+
@-webkit-keyframes slideOutLeft {
−
  -webkit-animation-name: slideOutLeft;
+
  0% {
−
  animation-name: slideOutLeft;
+
-webkit-transform: translateX(0);
−
}
+
transform: translateX(0);
 +
  }
  
−
@-webkit-keyframes slideOutRight {
+
  100% {
−
  0% {
+
opacity: 0;
−
    -webkit-transform: translateX(0);
+
-webkit-transform: translateX(-2000px);
−
    transform: translateX(0);
+
transform: translateX(-2000px);
−
  }
+
  }
 +
}
  
−
  100% {
+
@keyframes slideOutLeft {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateX(2000px);
+
-webkit-transform: translateX(0);
−
    transform: translateX(2000px);
+
-ms-transform: translateX(0);
−
  }
+
transform: translateX(0);
−
}
+
  }
  
−
@keyframes slideOutRight {
+
  100% {
−
  0% {
+
opacity: 0;
−
    -webkit-transform: translateX(0);
+
-webkit-transform: translateX(-2000px);
−
    -ms-transform: translateX(0);
+
-ms-transform: translateX(-2000px);
−
    transform: translateX(0);
+
transform: translateX(-2000px);
−
  }
+
  }
 +
}
  
−
  100% {
+
.slideOutLeft {
−
    opacity: 0;
+
  -webkit-animation-name: slideOutLeft;
−
    -webkit-transform: translateX(2000px);
+
  animation-name: slideOutLeft;
−
    -ms-transform: translateX(2000px);
+
}
−
    transform: translateX(2000px);
+
−
  }
+
−
}
+
  
−
.slideOutRight {
+
@-webkit-keyframes slideOutRight {
−
  -webkit-animation-name: slideOutRight;
+
  0% {
−
  animation-name: slideOutRight;
+
-webkit-transform: translateX(0);
−
}
+
transform: translateX(0);
 +
  }
  
−
@-webkit-keyframes slideOutUp {
+
  100% {
−
  0% {
+
opacity: 0;
−
    -webkit-transform: translateY(0);
+
-webkit-transform: translateX(2000px);
−
    transform: translateY(0);
+
transform: translateX(2000px);
−
  }
+
  }
 +
}
  
−
  100% {
+
@keyframes slideOutRight {
−
    opacity: 0;
+
  0% {
−
    -webkit-transform: translateY(-2000px);
+
-webkit-transform: translateX(0);
−
    transform: translateY(-2000px);
+
-ms-transform: translateX(0);
−
  }
+
transform: translateX(0);
−
}
+
  }
  
−
@keyframes slideOutUp {
+
  100% {
−
  0% {
+
opacity: 0;
−
    -webkit-transform: translateY(0);
+
-webkit-transform: translateX(2000px);
−
    -ms-transform: translateY(0);
+
-ms-transform: translateX(2000px);
−
    transform: translateY(0);
+
transform: translateX(2000px);
−
  }
+
  }
 +
}
  
−
  100% {
+
.slideOutRight {
−
    opacity: 0;
+
  -webkit-animation-name: slideOutRight;
−
    -webkit-transform: translateY(-2000px);
+
  animation-name: slideOutRight;
−
    -ms-transform: translateY(-2000px);
+
}
−
    transform: translateY(-2000px);
+
−
  }
+
−
}
+
  
−
.slideOutUp {
+
@-webkit-keyframes slideOutUp {
−
  -webkit-animation-name: slideOutUp;
+
  0% {
−
  animation-name: slideOutUp;
+
-webkit-transform: translateY(0);
−
}
+
transform: translateY(0);
 +
  }
  
−
@-webkit-keyframes hinge {
+
  100% {
−
  0% {
+
opacity: 0;
−
    -webkit-transform: rotate(0);
+
-webkit-transform: translateY(-2000px);
−
    transform: rotate(0);
+
transform: translateY(-2000px);
−
    -webkit-transform-origin: top left;
+
  }
−
    transform-origin: top left;
+
}
−
    -webkit-animation-timing-function: ease-in-out;
+
−
    animation-timing-function: ease-in-out;
+
−
  }
+
  
−
  20%, 60% {
+
@keyframes slideOutUp {
−
    -webkit-transform: rotate(80deg);
+
  0% {
−
    transform: rotate(80deg);
+
-webkit-transform: translateY(0);
−
    -webkit-transform-origin: top left;
+
-ms-transform: translateY(0);
−
    transform-origin: top left;
+
transform: translateY(0);
−
    -webkit-animation-timing-function: ease-in-out;
+
  }
−
    animation-timing-function: ease-in-out;
+
−
  }
+
  
−
  40% {
+
  100% {
−
    -webkit-transform: rotate(60deg);
+
opacity: 0;
−
    transform: rotate(60deg);
+
-webkit-transform: translateY(-2000px);
−
    -webkit-transform-origin: top left;
+
-ms-transform: translateY(-2000px);
−
    transform-origin: top left;
+
transform: translateY(-2000px);
−
    -webkit-animation-timing-function: ease-in-out;
+
  }
−
    animation-timing-function: ease-in-out;
+
}
−
  }
+
  
−
  80% {
+
.slideOutUp {
−
    -webkit-transform: rotate(60deg) translateY(0);
+
  -webkit-animation-name: slideOutUp;
−
    transform: rotate(60deg) translateY(0);
+
  animation-name: slideOutUp;
−
    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-keyframes hinge {
−
    -webkit-transform: translateY(700px);
+
  0% {
−
    transform: translateY(700px);
+
-webkit-transform: rotate(0);
−
    opacity: 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;
 +
  }
  
−
@keyframes hinge {
+
  20%, 60% {
−
  0% {
+
-webkit-transform: rotate(80deg);
−
    -webkit-transform: rotate(0);
+
transform: rotate(80deg);
−
    -ms-transform: rotate(0);
+
-webkit-transform-origin: top left;
−
    transform: rotate(0);
+
transform-origin: top left;
−
    -webkit-transform-origin: top left;
+
-webkit-animation-timing-function: ease-in-out;
−
    -ms-transform-origin: top left;
+
animation-timing-function: ease-in-out;
−
    transform-origin: top left;
+
  }
−
    -webkit-animation-timing-function: ease-in-out;
+
−
    animation-timing-function: ease-in-out;
+
−
  }
+
  
−
  20%, 60% {
+
  40% {
−
    -webkit-transform: rotate(80deg);
+
-webkit-transform: rotate(60deg);
−
    -ms-transform: rotate(80deg);
+
transform: rotate(60deg);
−
    transform: rotate(80deg);
+
-webkit-transform-origin: top left;
−
    -webkit-transform-origin: top left;
+
transform-origin: top left;
−
    -ms-transform-origin: top left;
+
-webkit-animation-timing-function: ease-in-out;
−
    transform-origin: top left;
+
animation-timing-function: ease-in-out;
−
    -webkit-animation-timing-function: ease-in-out;
+
  }
−
    animation-timing-function: ease-in-out;
+
−
  }
+
  
−
  40% {
+
  80% {
−
    -webkit-transform: rotate(60deg);
+
-webkit-transform: rotate(60deg) translateY(0);
−
    -ms-transform: rotate(60deg);
+
transform: rotate(60deg) translateY(0);
−
    transform: rotate(60deg);
+
opacity: 1;
−
    -webkit-transform-origin: top left;
+
-webkit-transform-origin: top left;
−
    -ms-transform-origin: top left;
+
transform-origin: top left;
−
    transform-origin: top left;
+
-webkit-animation-timing-function: ease-in-out;
−
    -webkit-animation-timing-function: ease-in-out;
+
animation-timing-function: ease-in-out;
−
    animation-timing-function: ease-in-out;
+
  }
−
  }
+
  
−
  80% {
+
  100% {
−
    -webkit-transform: rotate(60deg) translateY(0);
+
-webkit-transform: translateY(700px);
−
    -ms-transform: rotate(60deg) translateY(0);
+
transform: translateY(700px);
−
    transform: rotate(60deg) translateY(0);
+
opacity: 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% {
+
@keyframes hinge {
−
    -webkit-transform: translateY(700px);
+
  0% {
−
    -ms-transform: translateY(700px);
+
-webkit-transform: rotate(0);
−
    transform: translateY(700px);
+
-ms-transform: rotate(0);
−
    opacity: 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;
 +
  }
  
−
.hinge {
+
  20%, 60% {
−
  -webkit-animation-name: hinge;
+
-webkit-transform: rotate(80deg);
−
  animation-name: hinge;
+
-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;
 +
  }
  
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
  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;
 +
  }
  
−
@-webkit-keyframes rollIn {
+
  80% {
−
  0% {
+
-webkit-transform: rotate(60deg) translateY(0);
−
    opacity: 0;
+
-ms-transform: rotate(60deg) translateY(0);
−
    -webkit-transform: translateX(-100%) rotate(-120deg);
+
transform: rotate(60deg) translateY(0);
−
    transform: translateX(-100%) rotate(-120deg);
+
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% {
+
  100% {
−
    opacity: 1;
+
-webkit-transform: translateY(700px);
−
    -webkit-transform: translateX(0px) rotate(0deg);
+
-ms-transform: translateY(700px);
−
    transform: translateX(0px) rotate(0deg);
+
transform: translateY(700px);
−
  }
+
opacity: 0;
−
}
+
  }
 +
}
  
−
@keyframes rollIn {
+
.hinge {
−
  0% {
+
  -webkit-animation-name: hinge;
−
    opacity: 0;
+
  animation-name: hinge;
−
    -webkit-transform: translateX(-100%) rotate(-120deg);
+
}
−
    -ms-transform: translateX(-100%) rotate(-120deg);
+
−
    transform: translateX(-100%) rotate(-120deg);
+
−
  }
+
  
−
  100% {
+
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
−
    opacity: 1;
+
−
    -webkit-transform: translateX(0px) rotate(0deg);
+
−
    -ms-transform: translateX(0px) rotate(0deg);
+
−
    transform: translateX(0px) rotate(0deg);
+
−
  }
+
−
}
+
  
−
.rollIn {
+
@-webkit-keyframes rollIn {
−
  -webkit-animation-name: rollIn;
+
  0% {
−
  animation-name: rollIn;
+
opacity: 0;
−
}
+
-webkit-transform: translateX(-100%) rotate(-120deg);
 +
transform: translateX(-100%) rotate(-120deg);
 +
  }
  
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
  100% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0px) rotate(0deg);
 +
transform: translateX(0px) rotate(0deg);
 +
  }
 +
}
  
−
@-webkit-keyframes rollOut {
+
@keyframes rollIn {
−
  0% {
+
  0% {
−
    opacity: 1;
+
opacity: 0;
−
    -webkit-transform: translateX(0px) rotate(0deg);
+
-webkit-transform: translateX(-100%) rotate(-120deg);
−
    transform: translateX(0px) rotate(0deg);
+
-ms-transform: translateX(-100%) rotate(-120deg);
−
  }
+
transform: translateX(-100%) rotate(-120deg);
 +
  }
  
−
  100% {
+
  100% {
−
    opacity: 0;
+
opacity: 1;
−
    -webkit-transform: translateX(100%) rotate(120deg);
+
-webkit-transform: translateX(0px) rotate(0deg);
−
    transform: translateX(100%) rotate(120deg);
+
-ms-transform: translateX(0px) rotate(0deg);
−
  }
+
transform: translateX(0px) rotate(0deg);
−
}
+
  }
 +
}
  
−
@keyframes rollOut {
+
.rollIn {
−
  0% {
+
  -webkit-animation-name: rollIn;
−
    opacity: 1;
+
  animation-name: rollIn;
−
    -webkit-transform: translateX(0px) rotate(0deg);
+
}
−
    -ms-transform: translateX(0px) rotate(0deg);
+
−
    transform: translateX(0px) rotate(0deg);
+
−
  }
+
  
−
  100% {
+
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
−
    opacity: 0;
+
−
    -webkit-transform: translateX(100%) rotate(120deg);
+
−
    -ms-transform: translateX(100%) rotate(120deg);
+
−
    transform: translateX(100%) rotate(120deg);
+
−
  }
+
−
}
+
  
−
.rollOut {
+
@-webkit-keyframes rollOut {
−
  -webkit-animation-name: rollOut;
+
  0% {
−
  animation-name: rollOut;
+
opacity: 1;
−
}
+
-webkit-transform: translateX(0px) rotate(0deg);
 +
transform: translateX(0px) rotate(0deg);
 +
  }
  
−
@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}
+
  100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(100%) rotate(120deg);
 +
transform: translateX(100%) rotate(120deg);
 +
  }
 +
}
  
−
body { color:#333; font:300 15px/15px Roboto,Arial,Helvetica;background:url("") right no-repeat fixed #ffff; -webkit-font-smoothing:antialiased;}
+
@keyframes rollOut {
 +
  0% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0px) rotate(0deg);
 +
-ms-transform: translateX(0px) rotate(0deg);
 +
transform: translateX(0px) rotate(0deg);
 +
  }
  
−
a{color:#00a9c6; text-decoration:none;}
+
  100% {
−
a:hover{color:#666;}
+
opacity: 0;
−
.btn,a,.btn:hover,a:hover {
+
-webkit-transform: translateX(100%) rotate(120deg);
−
-webkit-transition: all 0.3s ease-in-out;
+
-ms-transform: translateX(100%) rotate(120deg);
−
-moz-transition: all 0.3s ease-in-out;
+
transform: translateX(100%) rotate(120deg);
−
-ms-transition: all 0.3s ease-in-out;
+
  }
−
-o-transition: all 0.3s ease-in-out;
+
}
−
transition: all 0.3s ease-in-out;
+
−
outline: none !important;
+
−
}
+
  
−
h1,h2,h3,h4{margin: 0;line-height: 1em;}
+
.rollOut {
−
h1{font:700 5em Roboto,Arial,Helvetica;margin:0.25em 0;text-transform: uppercase;}
+
  -webkit-animation-name: rollOut;
−
h2{font:300 2.5em Roboto,Arial,Helvetica;margin-bottom: 1.5em;}
+
  animation-name: rollOut;
−
h3{font:300 2em Roboto,Arial,Helvetica;margin:2em 0 1em 0;}
+
}
−
h4{font:300 1.5em Roboto,Arial,Helvetica;margin-bottom: 1em;}
+
−
h4 i{margin-right: 0.5em;}
+
  
−
p{font-size:1em;line-height: 1.7em; margin-bottom: 1.7em;}
+
@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}
  
−
.spacer{padding: 6em 0;}
+
body { color:#333; font:300 15px/15px Roboto,Arial,Helvetica;background:url(https://static.igem.org/mediawiki/2015/4/4d/Fond_wiki_2.jpg) center no-repeat fixed #FFFFFF; background-size:100vw 100vh;height: 100vh;-webkit-font-smoothing:antialiased;}
 +
/*https://static.igem.org/mediawiki/2015/a/ae/BACTMAN.png*/
 +
/* https://static.igem.org/mediawiki/2015/2/29/Fond_wiki.jpg*/
 +
/* https://static.igem.org/mediawiki/2015/8/8b/FOND-BLANC.jpg*/
 +
a{color:#00a9c6; text-decoration:none;}
 +
a:hover{color:#666;}
 +
.btn,a,.btn:hover,a:hover {
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
outline: none !important;
 +
}
  
−
.btn{border:none;border-radius: 0;padding: 1em 4em;background: rgba(0,0,0,0.5);text-transform: uppercase;}
+
h1,h2,h3,h4{margin: 0;line-height: 1em;}
−
.btn:hover,.btn:active{color: #fff;}
+
h1{font:700 5em Roboto,Arial,Helvetica;margin:0.25em 0;text-transform: uppercase;}
−
.btn-default{color: #ccc;border: 1px solid #aaa;}
+
h2{font:300 2.5em Roboto,Arial,Helvetica;margin-bottom: 1.5em;}
−
.btn-default:hover,.btn-default:active{background: rgba(0,0,0,0.8);}
+
h3{font:300 2em Roboto,Arial,Helvetica;margin:2em 0 1em 0;}
−
.btn-primary{color: #fff;background:#e89f10;width: 100%;outline: none;}
+
h4{font:300 1.5em Roboto,Arial,Helvetica;margin-bottom: 1em;}
−
.btn-primary:hover,.btn-primary:active,.btn-primary:focus{background:#f3c024;box-shadow: none;}
+
h4 i{margin-right: 0.5em;}
  
−
.topbar {background:url(https://static.igem.org/mediawiki/2015/0/05/Lines.png); height:5px;position: fixed;top: 0;width: 100%;z-index: 1000;}
+
p{font-size:1em;line-height: 1.7em; margin-bottom: 1.7em;}
−
.navbar-nav > li > a{font-size: 1em;line-height: 3.6em;}
+
−
.navbar-fixed-top{top: 5px;}
+
−
.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: #990000;}
+
  
−
#head,.carousel{margin-top: 0;}
+
.spacer{padding: 6em 0;}
  
−
#home{padding-top: 6em;}
 
  
−
/*about*/
+
.btn-default{color: #ccc;border: 1px solid #aaa;}
−
.about.spacer{padding-left: 4em; padding-right: 4em;padding-bottom: 0;}
+
.btn-default:hover,.btn-default:active{background: rgba(0,0,0,0.8);}
−
.services ul li{width: 10em;height: 10em;border: 0px solid #ccc;padding: 0;border-radius: 50%;margin: 0 1.25em;line-height: 13.5em;color: #000000; background:rgba(125,191,148,0.2);}
+
.btn-primary{color: #fff;background:#e89f10;width: 100%;outline: none;}
−
.services ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
+
.btn-primary:hover,.btn-primary:active,.btn-primary:focus{background:#f3c024;box-shadow: none;}
−
.services ul li span i{font-size: 3em; margin-top:1em}
+
−
.services ul li span b{display: block;font-size: 1em;font-weight: 300;}
+
−
/*#7dbf94*/
+
  
−
/*testimonials*/
+
.topbar {height:5px;position: fixed;top: 0;width: 98%;z-index: 1000;}
−
.partners img{float: left;margin:0 75px 30px 0;}
+
.navbar-nav > li > a{font-size: 1em;line-height: 3.6em;}
−
.testimonails{min-height: 195px;}
+
.navbar-fixed-top{top: 5px;}
−
.testimonails img{margin-top: 5px;}
+
.navbar-inverse{background: #fff;
−
.testimonails span{color: #888;}
+
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
−
.testimonails span b{font-weight: 400;}
+
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
−
.carousel-indicators li{border: 1px solid #f3c024;}
+
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);}
−
.carousel-indicators{bottom: 0;}
+
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus{background: none;color: #E89F10;}
  
−
/*works*/
+
#head,.carousel{margin-top: 0;}
−
#works{padding-top:6em;}
+
−
#works figcaption a{border:1px solid #fff;margin-top: 1em;display: inline-block;color: #fff;padding: 0 2em;}
+
−
#works figcaption a:hover{text-decoration: none;padding: 0 3em;}
+
−
/*works*/
+
  
−
/*team*/
+
#home{padding-top: 0;}
−
.team figure{width: 100%;}
+
−
.team img{width: 100%;}
+
−
.team b{font-size: 1.2em;display: block;}
+
−
.team a i.fa{color: #fff; font-size: 2em;}
+
−
.team a i.fa:hover{color: #E89F10;}
+
  
 +
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
 +
background-color: #fff;
 +
color:#777;
 +
  }
 +
  .dropdown-menu li>a:hover{color:#fff; background: rgba(102,205,170,0.8)}
 +
/*View more*/
  
−
.highlight-info{ background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;}
 
−
.highlight-info .overlay{background: rgba(178,34,34,0.8);}
 
−
.highlight-info h4{color: #fff;margin:0.5em 0 0 0;}
 
−
/*about us*/
 
  
−
/*Sponsors*/
 
  
 +
.btn {
 +
  -webkit-border-radius: 12;
 +
  -moz-border-radius: 12;
 +
  border-radius: 12px;
 +
  text-shadow: 0px 1px 3px #cc666e;
 +
  font-family: Arial;
 +
  color: #b0000f;
 +
  font-size: 19px;
 +
  background: #ffffff;
 +
  padding: 10px 15px 10px 15px;
 +
  border: solid #d18080 1px;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
}
  
−
.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;}
 
  
 +
.btn:hover ,.btn:active{
 +
  background: #e87f8d;
 +
  text-decoration: none;
 +
  color: #fff;
 +
}
  
−
/*0,176,128*/
+
.myButton {
 +
-moz-box-shadow:inset 0px 1px 0px 0px #cc666e;
 +
-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
 +
box-shadow:inset 0px 1px 0px 0px #f5978e;
 +
background-color:#f58f89;
 +
-moz-border-radius:10px;
 +
-webkit-border-radius:10px;
 +
border-radius:10px;
 +
border:1px solid #b0000f;
 +
display:inline-block;
 +
cursor:pointer;
 +
background-color: #FFFFFF;
 +
color:#b0000f;
 +
font-family:Arial;
 +
font-size:18px;
 +
padding:10px 15px;
 +
text-decoration:none;
 +
text-shadow: 0px 1px 3px #cc666e;
 +
}
 +
.myButton:hover {
 +
background-color: #e87f8d;
 +
text-decoration:none;
 +
}
 +
.myButton:active {
 +
position:relative;
 +
top:1px;
 +
color: #FFFFFF;
 +
}
 +
 
 +
 
 +
 
 +
/*about*/
 +
.about.spacer{padding-left: 4em; padding-right: 4em;padding-bottom: 0;}
 +
.services ul li{width: 10em;height: 10em;border: 0px solid #ccc;padding: 0;border-radius: 50%;margin: 0 1.25em;line-height: 13.5em;color: #000000; background:#fff;}
 +
.services ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
 +
.services ul li span i{font-size: 3em; margin-top:1em}
 +
.services ul li span b{display: block;font-size: 1em;font-weight: 300;}
 +
/*#7dbf94*/
  
 +
/*testimonials*/
 +
.partners img{float: left;margin:0 75px 30px 0;}
  
 +
.testimonails{min-height: 195px;}
 +
.testimonails img{margin-top: 5px;}
 +
.testimonails span{color: #888;}
 +
.testimonails span b{font-weight: 400;}
 +
.carousel-indicators li{border: 1px solid #B00000;}
 +
.carousel-indicators{bottom: 0;}
  
−
/*contact*/
+
/*works*/
−
.contactform textarea,.contactform input{width: 100%;padding:1em;border:1px solid #ccc;margin-bottom: 1em;border-radius: 0;outline: none;}
+
#works{padding-top:6em; padding-left:4em; padding-right:4em;}
−
/*contact*/
+
#works figcaption a{border:1px solid #fff;margin-top: 1em;display: inline-block;color: #fff;padding: 0 2em;}
 +
#works figcaption a:hover{text-decoration: none;padding: 0 3em;}
 +
/*works*/
  
 +
/*team*/
 +
.team figure{width: 100%;}
 +
.team img{width: 100%;}
 +
.team b{font-size: 1.2em;display: block;}
 +
.team a i.fa{color: #fff; font-size: 2em;}
 +
.team a i.fa:hover{color: #E89F10;}
  
−
.footer{background-color: #111; color: #fff; font-size: 1em;color: #aaa;}
 
−
.footer a{color: #aaa;margin: 0 1em; }
 
  
−
.gototop{z-index: 1000;position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.5);padding: 10px;color: #fff;}
+
.highlight-info{ background:url(https://static.igem.org/mediawiki/2015/d/d6/Manette-fond.jpg) center fixed; background-size: cover; color:#fff;}
−
.gototop i{line-height: 0.5em;}
+
.highlight-info .overlay{background: rgba(178,34,34,0.8);}
 +
.highlight-info h4{color: #fff;margin:0.5em 0 0 0;}
 +
/*about us*/
  
 +
/*Sponsors*/
  
−
@media (max-width: 1200px) {
+
 
−
body{font:300 13px/13px Roboto,Arial,Helvetica;}
+
.sponsors{ background:url() center fixed; background-size: cover; color:#fff;}
−
.navbar-brand{padding-top: 11px;}
+
−
.services ul li{margin:0 0.5em; }
+
.sponsors h4{color: #fff;margin:0.5em 0 0 0;}
 +
.sponsors a {display: block;overflow: hidden;}
 
 
−
.grid figure h2{font: 700 1.5em Roboto,Arial,Helvetica;}
 
−
figure.effect-oscar figcaption{padding: 12%;}
 
−
figure.effect-oscar figcaption::before,figure.effect-chico figcaption::before{top: 20px;right: 20px;bottom: 20px;left: 20px;}
 
  
−
.partners img{margin: 0 25px 25px 0;}
 
−
}
 
  
−
@media (max-width: 900px) {
 
−
h1{font: 700 3.5em Roboto,Arial,Helvetica;}
 
−
h4 {font: 300 1.3em Roboto,Arial,Helvetica;}
 
−
.btn{padding: 1em 2em;}
 
−
.partners img{margin: 0 15px 25px 0;width: 157px;}
 
−
.services ul li{width: 9em;height: 9em;}
 
−
figure.effect-chico figcaption {padding: 2em;}
 
−
figure.effect-oscar figcaption {padding: 20%;}
 
−
figure.effect-chico figcaption::before{top: 10px;right: 10px;bottom: 10px;left: 10px;}
 
−
.grid figure.effect-chico p{font-size: 0.6em;line-height: 1.5em;}
 
−
}
 
  
  
−
@media (max-width: 767px) {
+
/*0,176,128*/
−
body{font:300 12px/12px Roboto,Arial,Helvetica;}
+
−
.navbar-nav > li > a {line-height: 1em;}
+
−
.navbar-brand{padding: 5px;}
+
−
.navbar-brand img{height: 20px;}
+
−
.navbar-toggle{margin-top: 12px;}
+
  
−
.carousel-caption,.carousel-control,.carousel-indicators{display: none;}
 
  
−
h2.text-center{text-align: left;font-size: 1.7em;}
 
−
h4 {font: 300 1.2em Roboto,Arial,Helvetica;}
 
−
#partners h2{padding: 0 0.5em;}
 
−
#home {padding-top: 5em;}
 
  
−
.partners{display: block;float: left;}
+
/*contact*#003333/
−
.partners img{width: 120px;}
+
.contactform textarea,.contactform input{width: 100%;padding:1em;border:1px solid #ccc;margin-bottom: 1em;border-radius: 0;outline: none;}
 +
/*contact*/
  
  
 +
.footer{background-color:#2F4F4F ; color: #fff; font-size: 1em;color: #aaa;}
 +
.footer a{color: #aaa;margin: 0 1em; }
  
−
.about.spacer{padding-left: 2em;padding-right: 2em;}
+
.gototop{z-index: 1000;position: fixed;bottom: 20px; right: 20px;background: rgba(0,0,0,0.0);padding:10px;color: #66cdaa;}
−
.spacer{padding:0.5em 0 0 0;}
+
.gototop i{line-height: 0.5em;}
−
.services ul li{margin-bottom: 1em;}
+
  
−
.highlight-info .overlay{padding-bottom: 2em;}
 
−
.sponsors .overlay{padding-bottom: 2em;}
 
  
−
.grid.team div{margin: 0;padding: 0;}
+
 
−
figure.effect-chico figcaption {padding: 1.5em;}
+
 
−
.footer{margin-top: 2em;padding-bottom: 2em;}
+
@media (max-width: 1200px) {
−
}
+
body{font:300 13px/13px Roboto,Arial,Helvetica;}
−
+
.navbar-brand{padding-top: 11px;}
−
+
.services ul li{margin:0 0.5em; }
−
/*---------------------------------------------------- Parallax------------------------------------------------------*/
+
−
.parallax {
+
.grid figure h2{font: 700 1.5em Roboto,Arial,Helvetica;}
−
text-align:center;
+
figure.effect-oscar figcaption{padding: 12%;}
−
background-position:center center;
+
figure.effect-oscar figcaption::before,figure.effect-chico figcaption::before{top: 20px;right: 20px;bottom: 20px;left: 20px;}
−
background-repeat:no-repeat;
+
 
−
background-size:cover;
+
.partners img{margin: 0 25px 25px 0;}
−
background-attachment:fixed !important;
+
}
−
overflow:hidden;
+
 
−
}
+
@media (max-width: 900px) {
−
.parallax-pattern-overlay {
+
h1{font: 700 3.5em Roboto,Arial,Helvetica;}
−
background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;
+
h4 {font: 300 1.3em Roboto,Arial,Helvetica;}
−
background: rgba(200,200,200,0.4);
+
.btn{padding: 1em 2em;}
−
background-repeat: repeat;
+
.partners img{margin: 0 15px 25px 0;width: 157px;}
 +
.services ul li{width: 9em;height: 9em;}
 +
figure.effect-chico figcaption {padding: 2em;}
 +
figure.effect-oscar figcaption {padding: 20%;}
 +
figure.effect-chico figcaption::before{top: 10px;right: 10px;bottom: 10px;left: 10px;}
 +
.grid figure.effect-chico p{font-size: 0.6em;line-height: 1.5em;}
 +
}
 +
 
 +
 
 +
@media (max-width: 767px) {
 +
body{font:300 12px/12px Roboto,Arial,Helvetica;}
 +
.navbar-nav > li > a {line-height: 1em;}
 +
.navbar-brand{padding: 5px;}
 +
.navbar-brand img{height: 20px;}
 +
.navbar-toggle{margin-top: 12px;}
 +
 
 +
.carousel-caption,.carousel-control,.carousel-indicators{display: none;}
 +
 
 +
h2.text-center{text-align: left;font-size: 1.7em;}
 +
h4 {font: 300 1.2em Roboto,Arial,Helvetica;}
 +
#partners h2{padding: 0 0.5em;}
 +
#home {padding-top: 0em;}
 +
#partner {padding-top: 0em;}
 +
#spacer {padding-top: 0em;}
 +
 
 +
.partners{display: block;float: left;}
 +
.partners img{width: 120px;}
 +
 
 +
 
 +
 
 +
.about.spacer{padding-left: 2em;padding-right: 2em;}
 +
.spacer{padding:0.5em 0 0 0;}
 +
.services ul li{margin-bottom: 1em;}
 +
 
 +
.highlight-info .overlay{padding-bottom: 2em;}
 +
.sponsors .overlay{padding-bottom: 2em;}
 +
 
 +
.grid.team div{margin: 0;padding: 0;}
 +
figure.effect-chico figcaption {padding: 1.5em;}
 +
.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;
 +
}
 
 
−
@-webkit-keyframes fadeInDown {
+
.Fullscreen
−
   0% {
+
   {
−
     opacity: 0;
+
     position:absolute;
−
     -webkit-transform: translate3d(0, -100%, 0);
+
    left: 0;
−
            transform: translate3d(0, -100%, 0);
+
     top: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
overflow:hidden;
 
   }
 
   }
 +
 +
 +
.parallax-pattern-overlay {
 +
background:url(../images/lab.jpg) center fixed; background-size: cover; color:#fff;
 +
background: rgba(200,200,200,0.5);
 +
background-repeat: repeat;
 +
 +
@-webkit-keyframes fadeInDown {
 +
  0% {
 +
opacity: 0;
 +
-webkit-transform: translate3d(0, -100%, 0);
 +
transform: translate3d(0, -100%, 0);
 +
  }
  
−
  100% {
+
  100% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: none;
+
-webkit-transform: none;
−
            transform: none;
+
transform: none;
−
  }
+
  }
−
}
+
}
  
−
@keyframes fadeInDown {
+
@keyframes fadeInDown {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: translate3d(0, -100%, 0);
+
-webkit-transform: translate3d(0, -100%, 0);
−
            transform: translate3d(0, -100%, 0);
+
transform: translate3d(0, -100%, 0);
−
  }
+
  }
  
−
  100% {
+
  100% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: none;
+
-webkit-transform: none;
−
            transform: none;
+
transform: none;
−
  }
+
  }
−
}
+
}
  
−
.fadeInDown {
+
.fadeInDown {
−
  -webkit-animation-name: fadeInDown;
+
  -webkit-animation-name: fadeInDown;
−
          animation-name: fadeInDown;
+
  animation-name: fadeInDown;
−
}
+
}
  
−
img#site-title {
+
img#site-title {
−
max-width: 120px;
+
max-width: 120px;
−
}
+
}
  
  
−
@-webkit-keyframes zoomIn {
+
@-webkit-keyframes zoomIn {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.3, .3, .3);
+
-webkit-transform: scale3d(.3, .3, .3);
−
            transform: scale3d(.3, .3, .3);
+
transform: scale3d(.3, .3, .3);
−
  }
+
  }
  
−
  50% {
+
  50% {
−
    opacity: 1;
+
opacity: 1;
−
  }
+
  }
−
}
+
}
  
−
@keyframes zoomIn {
+
@keyframes zoomIn {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.3, .3, .3);
+
-webkit-transform: scale3d(.3, .3, .3);
−
            transform: scale3d(.3, .3, .3);
+
transform: scale3d(.3, .3, .3);
−
  }
+
  }
  
−
  50% {
+
  50% {
−
    opacity: 1;
+
opacity: 1;
−
  }
+
  }
−
}
+
}
  
−
.zoomIn {
+
.zoomIn {
−
  -webkit-animation-name: zoomIn;
+
  -webkit-animation-name: zoomIn;
−
          animation-name: zoomIn;
+
  animation-name: zoomIn;
−
}
+
}
  
−
@-webkit-keyframes zoomInDown {
+
@-webkit-keyframes zoomInDown {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
@keyframes zoomInDown {
+
@keyframes zoomInDown {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
.zoomInDown {
+
.zoomInDown {
−
  -webkit-animation-name: zoomInDown;
+
  -webkit-animation-name: zoomInDown;
−
          animation-name: zoomInDown;
+
  animation-name: zoomInDown;
−
}
+
}
  
−
@-webkit-keyframes zoomInLeft {
+
@-webkit-keyframes zoomInLeft {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
@keyframes zoomInLeft {
+
@keyframes zoomInLeft {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
.zoomInLeft {
+
.zoomInLeft {
−
  -webkit-animation-name: zoomInLeft;
+
  -webkit-animation-name: zoomInLeft;
−
          animation-name: zoomInLeft;
+
  animation-name: zoomInLeft;
−
}
+
}
  
−
@-webkit-keyframes zoomInRight {
+
@-webkit-keyframes zoomInRight {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
@keyframes zoomInRight {
+
@keyframes zoomInRight {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
.zoomInRight {
+
.zoomInRight {
−
  -webkit-animation-name: zoomInRight;
+
  -webkit-animation-name: zoomInRight;
−
          animation-name: zoomInRight;
+
  animation-name: zoomInRight;
−
}
+
}
  
−
@-webkit-keyframes zoomInUp {
+
@-webkit-keyframes zoomInUp {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
@keyframes zoomInUp {
+
@keyframes zoomInUp {
−
  0% {
+
  0% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
−
  }
+
  }
  
−
  60% {
+
  60% {
−
    opacity: 1;
+
opacity: 1;
−
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
−
            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);
+
-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);
+
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
−
  }
+
  }
−
}
+
}
  
−
.zoomInUp {
+
.zoomInUp {
−
  -webkit-animation-name: zoomInUp;
+
  -webkit-animation-name: zoomInUp;
−
          animation-name: zoomInUp;
+
  animation-name: zoomInUp;
−
}
+
}
  
−
@-webkit-keyframes zoomOut {
+
@-webkit-keyframes zoomOut {
−
  0% {
+
  0% {
−
    opacity: 1;
+
opacity: 1;
−
  }
+
  }
  
−
  50% {
+
  50% {
−
    opacity: 0;
+
opacity: 0;
−
    -webkit-transform: scale3d(.3, .3, .3);
+
-webkit-transform: scale3d(.3, .3, .3);
−
            transform: scale3d(.3, .3, .3);
+
transform: scale3d(.3, .3, .3);
−
  }
+
  }
  
−
  100% {
+
  100% {
−
    opacity: 0;
+
opacity: 0;
−
  }
+
  }
−
}
+
}
  
−
+
−
</style>
+
</style>
−
+
−
</html>
+
</html>

Latest revision as of 15:02, 16 September 2015