8789 lines
205 KiB
CSS
Vendored
8789 lines
205 KiB
CSS
Vendored
/* Template Name: Docuto - Documentation HTML Template
|
|
Author: Acavo
|
|
Version: 1.0.0
|
|
Created: Oct 2020
|
|
File Description: Plugins Css file of the template
|
|
*/
|
|
|
|
/*==============================================
|
|
//
|
|
// 01 -- Animate.css
|
|
// 02 -- Prism JS
|
|
// 03 -- Custom Srollbar
|
|
//
|
|
/*============================================*/
|
|
|
|
/*============================================
|
|
|
|
01 -- Animate.css
|
|
|
|
==============================================*/
|
|
|
|
.animated {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.animated.infinite {
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.animated.hinge {
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
|
|
0%,
|
|
100%,
|
|
20%,
|
|
50%,
|
|
80% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateY(-15px);
|
|
transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
100%,
|
|
20%,
|
|
50%,
|
|
80% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateY(-15px);
|
|
transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
.bounce {
|
|
-webkit-animation-name: bounce;
|
|
animation-name: bounce;
|
|
}
|
|
|
|
@-webkit-keyframes flash {
|
|
|
|
0%,
|
|
100%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flash {
|
|
|
|
0%,
|
|
100%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flash {
|
|
-webkit-animation-name: flash;
|
|
animation-name: flash;
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
-webkit-animation-name: pulse;
|
|
animation-name: pulse;
|
|
}
|
|
|
|
@-webkit-keyframes rubberBand {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scaleX(1.25) scaleY(0.75);
|
|
transform: scaleX(1.25) scaleY(0.75);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scaleX(0.75) scaleY(1.25);
|
|
transform: scaleX(0.75) scaleY(1.25);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: scaleX(1.15) scaleY(0.85);
|
|
transform: scaleX(1.15) scaleY(0.85);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rubberBand {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scaleX(1.25) scaleY(0.75);
|
|
transform: scaleX(1.25) scaleY(0.75);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scaleX(0.75) scaleY(1.25);
|
|
transform: scaleX(0.75) scaleY(1.25);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: scaleX(1.15) scaleY(0.85);
|
|
transform: scaleX(1.15) scaleY(0.85);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.rubberBand {
|
|
-webkit-animation-name: rubberBand;
|
|
animation-name: rubberBand;
|
|
}
|
|
|
|
@-webkit-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
.shake {
|
|
-webkit-animation-name: shake;
|
|
animation-name: shake;
|
|
}
|
|
|
|
@-webkit-keyframes swing {
|
|
20% {
|
|
-webkit-transform: rotate(15deg);
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate(-10deg);
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate(-5deg);
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes swing {
|
|
20% {
|
|
-webkit-transform: rotate(15deg);
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate(-10deg);
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate(-5deg);
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.swing {
|
|
-webkit-transform-origin: top center;
|
|
transform-origin: top center;
|
|
-webkit-animation-name: swing;
|
|
animation-name: swing;
|
|
}
|
|
|
|
@-webkit-keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
-webkit-transform: scale(0.9) rotate(-3deg);
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: scale(1.1) rotate(3deg);
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: scale(1.1) rotate(-3deg);
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1) rotate(0);
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
-webkit-transform: scale(0.9) rotate(-3deg);
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: scale(1.1) rotate(3deg);
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: scale(1.1) rotate(-3deg);
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1) rotate(0);
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
.tada {
|
|
-webkit-animation-name: tada;
|
|
animation-name: tada;
|
|
}
|
|
|
|
@-webkit-keyframes wobble {
|
|
0% {
|
|
-webkit-transform: translateX(0%);
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: translateX(-25%) rotate(-5deg);
|
|
transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: translateX(20%) rotate(3deg);
|
|
transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: translateX(-15%) rotate(-3deg);
|
|
transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateX(10%) rotate(2deg);
|
|
transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translateX(-5%) rotate(-1deg);
|
|
transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0%);
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes wobble {
|
|
0% {
|
|
-webkit-transform: translateX(0%);
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: translateX(-25%) rotate(-5deg);
|
|
transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: translateX(20%) rotate(3deg);
|
|
transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: translateX(-15%) rotate(-3deg);
|
|
transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateX(10%) rotate(2deg);
|
|
transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translateX(-5%) rotate(-1deg);
|
|
transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0%);
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
.wobble {
|
|
-webkit-animation-name: wobble;
|
|
animation-name: wobble;
|
|
}
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1.05);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1.05);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.bounceIn {
|
|
-webkit-animation-name: bounceIn;
|
|
animation-name: bounceIn;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(30px);
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(30px);
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.bounceInDown {
|
|
-webkit-animation-name: bounceInDown;
|
|
animation-name: bounceInDown;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(30px);
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(30px);
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.bounceInLeft {
|
|
-webkit-animation-name: bounceInLeft;
|
|
animation-name: bounceInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(-30px);
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(-30px);
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.bounceInRight {
|
|
-webkit-animation-name: bounceInRight;
|
|
animation-name: bounceInRight;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(10px);
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(10px);
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.bounceInUp {
|
|
-webkit-animation-name: bounceInUp;
|
|
animation-name: bounceInUp;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOut {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOut {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
.bounceOut {
|
|
-webkit-animation-name: bounceOut;
|
|
animation-name: bounceOut;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutDown {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutDown {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutDown {
|
|
-webkit-animation-name: bounceOutDown;
|
|
animation-name: bounceOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutLeft {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutLeft {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutLeft {
|
|
-webkit-animation-name: bounceOutLeft;
|
|
animation-name: bounceOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutRight {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutRight {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutRight {
|
|
-webkit-animation-name: bounceOutRight;
|
|
animation-name: bounceOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutUp {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutUp {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutUp {
|
|
-webkit-animation-name: bounceOutUp;
|
|
animation-name: bounceOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fadeIn {
|
|
-webkit-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInDown {
|
|
-webkit-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInDownBig {
|
|
-webkit-animation-name: fadeInDownBig;
|
|
animation-name: fadeInDownBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInLeft {
|
|
-webkit-animation-name: fadeInLeft;
|
|
animation-name: fadeInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInLeftBig {
|
|
-webkit-animation-name: fadeInLeftBig;
|
|
animation-name: fadeInLeftBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInRight {
|
|
-webkit-animation-name: fadeInRight;
|
|
animation-name: fadeInRight;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInRightBig {
|
|
-webkit-animation-name: fadeInRightBig;
|
|
animation-name: fadeInRightBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInUp {
|
|
-webkit-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInUpBig {
|
|
-webkit-animation-name: fadeInUpBig;
|
|
animation-name: fadeInUpBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fadeOut {
|
|
-webkit-animation-name: fadeOut;
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutDown {
|
|
-webkit-animation-name: fadeOutDown;
|
|
animation-name: fadeOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutDownBig {
|
|
-webkit-animation-name: fadeOutDownBig;
|
|
animation-name: fadeOutDownBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutLeft {
|
|
-webkit-animation-name: fadeOutLeft;
|
|
animation-name: fadeOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutLeftBig {
|
|
-webkit-animation-name: fadeOutLeftBig;
|
|
animation-name: fadeOutLeftBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutRight {
|
|
-webkit-animation-name: fadeOutRight;
|
|
animation-name: fadeOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutRightBig {
|
|
-webkit-animation-name: fadeOutRightBig;
|
|
animation-name: fadeOutRightBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutUp {
|
|
-webkit-animation-name: fadeOutUp;
|
|
animation-name: fadeOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutUpBig {
|
|
-webkit-animation-name: fadeOutUpBig;
|
|
animation-name: fadeOutUpBig;
|
|
}
|
|
|
|
@-webkit-keyframes flip {
|
|
0% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
|
|
transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
|
|
transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
|
|
transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95);
|
|
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
|
|
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@keyframes flip {
|
|
0% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
|
|
transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
|
|
transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
|
|
transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95);
|
|
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(0.95);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
|
|
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
.animated.flip {
|
|
-webkit-backface-visibility: visible;
|
|
backface-visibility: visible;
|
|
-webkit-animation-name: flip;
|
|
animation-name: flip;
|
|
}
|
|
|
|
@-webkit-keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateX(-10deg);
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: perspective(400px) rotateX(10deg);
|
|
transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateX(0deg);
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateX(-10deg);
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: perspective(400px) rotateX(10deg);
|
|
transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateX(0deg);
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.flipInX {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInX;
|
|
animation-name: flipInX;
|
|
}
|
|
|
|
@-webkit-keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateY(-10deg);
|
|
transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateY(0deg);
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateY(-10deg);
|
|
transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateY(0deg);
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.flipInY {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInY;
|
|
animation-name: flipInY;
|
|
}
|
|
|
|
@-webkit-keyframes flipOutX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateX(0deg);
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipOutX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateX(0deg);
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flipOutX {
|
|
-webkit-animation-name: flipOutX;
|
|
animation-name: flipOutX;
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
}
|
|
|
|
@-webkit-keyframes flipOutY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(0deg);
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipOutY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(0deg);
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flipOutY {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipOutY;
|
|
animation-name: flipOutY;
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedIn {
|
|
0% {
|
|
-webkit-transform: translateX(100%) skewX(-30deg);
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateX(-20%) skewX(30deg);
|
|
transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(0%) skewX(-15deg);
|
|
transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0%) skewX(0deg);
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes lightSpeedIn {
|
|
0% {
|
|
-webkit-transform: translateX(100%) skewX(-30deg);
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateX(-20%) skewX(30deg);
|
|
transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(0%) skewX(-15deg);
|
|
transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0%) skewX(0deg);
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.lightSpeedIn {
|
|
-webkit-animation-name: lightSpeedIn;
|
|
animation-name: lightSpeedIn;
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedOut {
|
|
0% {
|
|
-webkit-transform: translateX(0%) skewX(0deg);
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(100%) skewX(-30deg);
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes lightSpeedOut {
|
|
0% {
|
|
-webkit-transform: translateX(0%) skewX(0deg);
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(100%) skewX(-30deg);
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.lightSpeedOut {
|
|
-webkit-animation-name: lightSpeedOut;
|
|
animation-name: lightSpeedOut;
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
@-webkit-keyframes rotateIn {
|
|
0% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(-200deg);
|
|
transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateIn {
|
|
0% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(-200deg);
|
|
transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateIn {
|
|
-webkit-animation-name: rotateIn;
|
|
animation-name: rotateIn;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInDownLeft {
|
|
-webkit-animation-name: rotateInDownLeft;
|
|
animation-name: rotateInDownLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInDownRight {
|
|
-webkit-animation-name: rotateInDownRight;
|
|
animation-name: rotateInDownRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInUpLeft {
|
|
-webkit-animation-name: rotateInUpLeft;
|
|
animation-name: rotateInUpLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInUpRight {
|
|
-webkit-animation-name: rotateInUpRight;
|
|
animation-name: rotateInUpRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOut {
|
|
0% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(200deg);
|
|
transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOut {
|
|
0% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-transform: rotate(200deg);
|
|
transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOut {
|
|
-webkit-animation-name: rotateOut;
|
|
animation-name: rotateOut;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutDownLeft {
|
|
-webkit-animation-name: rotateOutDownLeft;
|
|
animation-name: rotateOutDownLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutDownRight {
|
|
-webkit-animation-name: rotateOutDownRight;
|
|
animation-name: rotateOutDownRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutUpLeft {
|
|
-webkit-animation-name: rotateOutUpLeft;
|
|
animation-name: rotateOutUpLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutUpRight {
|
|
-webkit-animation-name: rotateOutUpRight;
|
|
animation-name: rotateOutUpRight;
|
|
}
|
|
|
|
@-webkit-keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.slideInDown {
|
|
-webkit-animation-name: slideInDown;
|
|
animation-name: slideInDown;
|
|
}
|
|
|
|
@-webkit-keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.slideInLeft {
|
|
-webkit-animation-name: slideInLeft;
|
|
animation-name: slideInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.slideInRight {
|
|
-webkit-animation-name: slideInRight;
|
|
animation-name: slideInRight;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutLeft {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
.slideOutLeft {
|
|
-webkit-animation-name: slideOutLeft;
|
|
animation-name: slideOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutRight {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutRight {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
.slideOutRight {
|
|
-webkit-animation-name: slideOutRight;
|
|
animation-name: slideOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutUp {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutUp {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
.slideOutUp {
|
|
-webkit-animation-name: slideOutUp;
|
|
animation-name: slideOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes slideInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.slideInUp {
|
|
-webkit-animation-name: slideInUp;
|
|
animation-name: slideInUp;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutDown {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutDown {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
.slideOutDown {
|
|
-webkit-animation-name: slideOutDown;
|
|
animation-name: slideOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes hinge {
|
|
0% {
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
-webkit-transform: rotate(80deg);
|
|
transform: rotate(80deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate(60deg);
|
|
transform: rotate(60deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate(60deg) translateY(0);
|
|
transform: rotate(60deg) translateY(0);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(700px);
|
|
transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes hinge {
|
|
0% {
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
-webkit-transform: rotate(80deg);
|
|
transform: rotate(80deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate(60deg);
|
|
transform: rotate(60deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate(60deg) translateY(0);
|
|
transform: rotate(60deg) translateY(0);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(700px);
|
|
transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.hinge {
|
|
-webkit-animation-name: hinge;
|
|
animation-name: hinge;
|
|
}
|
|
|
|
@-webkit-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-100%) rotate(-120deg);
|
|
transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px) rotate(0deg);
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-100%) rotate(-120deg);
|
|
transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px) rotate(0deg);
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.rollIn {
|
|
-webkit-animation-name: rollIn;
|
|
animation-name: rollIn;
|
|
}
|
|
|
|
@-webkit-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px) rotate(0deg);
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(100%) rotate(120deg);
|
|
transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px) rotate(0deg);
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(100%) rotate(120deg);
|
|
transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
.rollOut {
|
|
-webkit-animation-name: rollOut;
|
|
animation-name: rollOut;
|
|
}
|
|
|
|
@-webkit-keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.zoomIn {
|
|
-webkit-animation-name: zoomIn;
|
|
animation-name: zoomIn;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(-2000px);
|
|
transform: scale(0.1) translateY(-2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(60px);
|
|
transform: scale(0.475) translateY(60px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(-2000px);
|
|
transform: scale(0.1) translateY(-2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(60px);
|
|
transform: scale(0.475) translateY(60px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
.zoomInDown {
|
|
-webkit-animation-name: zoomInDown;
|
|
animation-name: zoomInDown;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(-2000px);
|
|
transform: scale(0.1) translateX(-2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(48px);
|
|
transform: scale(0.475) translateX(48px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(-2000px);
|
|
transform: scale(0.1) translateX(-2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(48px);
|
|
transform: scale(0.475) translateX(48px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
.zoomInLeft {
|
|
-webkit-animation-name: zoomInLeft;
|
|
animation-name: zoomInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(2000px);
|
|
transform: scale(0.1) translateX(2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(-48px);
|
|
transform: scale(0.475) translateX(-48px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(2000px);
|
|
transform: scale(0.1) translateX(2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(-48px);
|
|
transform: scale(0.475) translateX(-48px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
.zoomInRight {
|
|
-webkit-animation-name: zoomInRight;
|
|
animation-name: zoomInRight;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(2000px);
|
|
transform: scale(0.1) translateY(2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(-60px);
|
|
transform: scale(0.475) translateY(-60px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(2000px);
|
|
transform: scale(0.1) translateY(2000px);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(-60px);
|
|
transform: scale(0.475) translateY(-60px);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
.zoomInUp {
|
|
-webkit-animation-name: zoomInUp;
|
|
animation-name: zoomInUp;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.zoomOut {
|
|
-webkit-animation-name: zoomOut;
|
|
animation-name: zoomOut;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutDown {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(-60px);
|
|
transform: scale(0.475) translateY(-60px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(2000px);
|
|
transform: scale(0.1) translateY(2000px);
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutDown {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(-60px);
|
|
transform: scale(0.475) translateY(-60px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(2000px);
|
|
transform: scale(0.1) translateY(2000px);
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
}
|
|
}
|
|
|
|
.zoomOutDown {
|
|
-webkit-animation-name: zoomOutDown;
|
|
animation-name: zoomOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutLeft {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(42px);
|
|
transform: scale(0.475) translateX(42px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(-2000px);
|
|
transform: scale(0.1) translateX(-2000px);
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutLeft {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(42px);
|
|
transform: scale(0.475) translateX(42px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(-2000px);
|
|
transform: scale(0.1) translateX(-2000px);
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
}
|
|
}
|
|
|
|
.zoomOutLeft {
|
|
-webkit-animation-name: zoomOutLeft;
|
|
animation-name: zoomOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutRight {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(-42px);
|
|
transform: scale(0.475) translateX(-42px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(2000px);
|
|
transform: scale(0.1) translateX(2000px);
|
|
-webkit-transform-origin: right center;
|
|
transform-origin: right center;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutRight {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateX(-42px);
|
|
transform: scale(0.475) translateX(-42px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateX(2000px);
|
|
transform: scale(0.1) translateX(2000px);
|
|
-webkit-transform-origin: right center;
|
|
transform-origin: right center;
|
|
}
|
|
}
|
|
|
|
.zoomOutRight {
|
|
-webkit-animation-name: zoomOutRight;
|
|
animation-name: zoomOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutUp {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(60px);
|
|
transform: scale(0.475) translateY(60px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(-2000px);
|
|
transform: scale(0.1) translateY(-2000px);
|
|
-webkit-transform-origin: center top;
|
|
transform-origin: center top;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutUp {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(0.475) translateY(60px);
|
|
transform: scale(0.475) translateY(60px);
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translateY(-2000px);
|
|
transform: scale(0.1) translateY(-2000px);
|
|
-webkit-transform-origin: center top;
|
|
transform-origin: center top;
|
|
}
|
|
}
|
|
|
|
.zoomOutUp {
|
|
-webkit-animation-name: zoomOutUp;
|
|
animation-name: zoomOutUp;
|
|
}
|
|
|
|
@charset "UTF-8";
|
|
/*!
|
|
Animate.css - http://daneden.me/animate
|
|
Licensed under the MIT license - http://opensource.org/licenses/MIT
|
|
|
|
Copyright (c) 2015 Daniel Eden
|
|
*/
|
|
|
|
.animated {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.animated.infinite {
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.animated.hinge {
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.animated.bounceIn,
|
|
.animated.bounceOut {
|
|
-webkit-animation-duration: 0.75s;
|
|
animation-duration: 0.75s;
|
|
}
|
|
|
|
.animated.flipOutX,
|
|
.animated.flipOutY {
|
|
-webkit-animation-duration: 0.75s;
|
|
animation-duration: 0.75s;
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
53%,
|
|
80%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
40%,
|
|
43% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
|
|
70% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0, -4px, 0);
|
|
transform: translate3d(0, -4px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
53%,
|
|
80%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
40%,
|
|
43% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
|
|
70% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0, -4px, 0);
|
|
transform: translate3d(0, -4px, 0);
|
|
}
|
|
}
|
|
|
|
.bounce {
|
|
-webkit-animation-name: bounce;
|
|
animation-name: bounce;
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
@-webkit-keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flash {
|
|
-webkit-animation-name: flash;
|
|
animation-name: flash;
|
|
}
|
|
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
-webkit-animation-name: pulse;
|
|
animation-name: pulse;
|
|
}
|
|
|
|
@-webkit-keyframes rubberBand {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale3d(1.25, 0.75, 1);
|
|
transform: scale3d(1.25, 0.75, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale3d(0.75, 1.25, 1);
|
|
transform: scale3d(0.75, 1.25, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.15, 0.85, 1);
|
|
transform: scale3d(1.15, 0.85, 1);
|
|
}
|
|
|
|
65% {
|
|
-webkit-transform: scale3d(0.95, 1.05, 1);
|
|
transform: scale3d(0.95, 1.05, 1);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: scale3d(1.05, 0.95, 1);
|
|
transform: scale3d(1.05, 0.95, 1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes rubberBand {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale3d(1.25, 0.75, 1);
|
|
transform: scale3d(1.25, 0.75, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale3d(0.75, 1.25, 1);
|
|
transform: scale3d(0.75, 1.25, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.15, 0.85, 1);
|
|
transform: scale3d(1.15, 0.85, 1);
|
|
}
|
|
|
|
65% {
|
|
-webkit-transform: scale3d(0.95, 1.05, 1);
|
|
transform: scale3d(0.95, 1.05, 1);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: scale3d(1.05, 0.95, 1);
|
|
transform: scale3d(1.05, 0.95, 1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.rubberBand {
|
|
-webkit-animation-name: rubberBand;
|
|
animation-name: rubberBand;
|
|
}
|
|
|
|
@-webkit-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
}
|
|
|
|
.shake {
|
|
-webkit-animation-name: shake;
|
|
animation-name: shake;
|
|
}
|
|
|
|
@-webkit-keyframes swing {
|
|
20% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -10deg);
|
|
transform: rotate3d(0, 0, 1, -10deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 5deg);
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -5deg);
|
|
transform: rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes swing {
|
|
20% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -10deg);
|
|
transform: rotate3d(0, 0, 1, -10deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 5deg);
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate3d(0, 0, 1, -5deg);
|
|
transform: rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
}
|
|
|
|
.swing {
|
|
-webkit-transform-origin: top center;
|
|
transform-origin: top center;
|
|
-webkit-animation-name: swing;
|
|
animation-name: swing;
|
|
}
|
|
|
|
@-webkit-keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.tada {
|
|
-webkit-animation-name: tada;
|
|
animation-name: tada;
|
|
}
|
|
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
|
|
@-webkit-keyframes wobble {
|
|
0% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes wobble {
|
|
0% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.wobble {
|
|
-webkit-animation-name: wobble;
|
|
animation-name: wobble;
|
|
}
|
|
|
|
@-webkit-keyframes jello {
|
|
11.1% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
22.2% {
|
|
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
}
|
|
|
|
33.3% {
|
|
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
|
transform: skewX(6.25deg) skewY(6.25deg);
|
|
}
|
|
|
|
44.4% {
|
|
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
}
|
|
|
|
55.5% {
|
|
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
}
|
|
|
|
66.6% {
|
|
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
}
|
|
|
|
77.7% {
|
|
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
}
|
|
|
|
88.8% {
|
|
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes jello {
|
|
11.1% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
22.2% {
|
|
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
}
|
|
|
|
33.3% {
|
|
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
|
transform: skewX(6.25deg) skewY(6.25deg);
|
|
}
|
|
|
|
44.4% {
|
|
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
}
|
|
|
|
55.5% {
|
|
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
}
|
|
|
|
66.6% {
|
|
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
}
|
|
|
|
77.7% {
|
|
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
}
|
|
|
|
88.8% {
|
|
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.jello {
|
|
-webkit-animation-name: jello;
|
|
animation-name: jello;
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
}
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
|
|
0%,
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
|
transform: scale3d(0.9, 0.9, 0.9);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: scale3d(0.97, 0.97, 0.97);
|
|
transform: scale3d(0.97, 0.97, 0.97);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
|
|
0%,
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
|
transform: scale3d(0.9, 0.9, 0.9);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: scale3d(0.97, 0.97, 0.97);
|
|
transform: scale3d(0.97, 0.97, 0.97);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.bounceIn {
|
|
-webkit-animation-name: bounceIn;
|
|
animation-name: bounceIn;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInDown {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -3000px, 0);
|
|
transform: translate3d(0, -3000px, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 25px, 0);
|
|
transform: translate3d(0, 25px, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
|
transform: translate3d(0, -10px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0, 5px, 0);
|
|
transform: translate3d(0, 5px, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInDown {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -3000px, 0);
|
|
transform: translate3d(0, -3000px, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 25px, 0);
|
|
transform: translate3d(0, 25px, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
|
transform: translate3d(0, -10px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0, 5px, 0);
|
|
transform: translate3d(0, 5px, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.bounceInDown {
|
|
-webkit-animation-name: bounceInDown;
|
|
animation-name: bounceInDown;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInLeft {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-3000px, 0, 0);
|
|
transform: translate3d(-3000px, 0, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(25px, 0, 0);
|
|
transform: translate3d(25px, 0, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(5px, 0, 0);
|
|
transform: translate3d(5px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInLeft {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-3000px, 0, 0);
|
|
transform: translate3d(-3000px, 0, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(25px, 0, 0);
|
|
transform: translate3d(25px, 0, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(5px, 0, 0);
|
|
transform: translate3d(5px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.bounceInLeft {
|
|
-webkit-animation-name: bounceInLeft;
|
|
animation-name: bounceInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInRight {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(3000px, 0, 0);
|
|
transform: translate3d(3000px, 0, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(-25px, 0, 0);
|
|
transform: translate3d(-25px, 0, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(-5px, 0, 0);
|
|
transform: translate3d(-5px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInRight {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(3000px, 0, 0);
|
|
transform: translate3d(3000px, 0, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(-25px, 0, 0);
|
|
transform: translate3d(-25px, 0, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(-5px, 0, 0);
|
|
transform: translate3d(-5px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.bounceInRight {
|
|
-webkit-animation-name: bounceInRight;
|
|
animation-name: bounceInRight;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInUp {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 3000px, 0);
|
|
transform: translate3d(0, 3000px, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
|
transform: translate3d(0, -20px, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
|
transform: translate3d(0, 10px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0, -5px, 0);
|
|
transform: translate3d(0, -5px, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInUp {
|
|
|
|
0%,
|
|
60%,
|
|
75%,
|
|
90%,
|
|
100% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 3000px, 0);
|
|
transform: translate3d(0, 3000px, 0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
|
transform: translate3d(0, -20px, 0);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
|
transform: translate3d(0, 10px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0, -5px, 0);
|
|
transform: translate3d(0, -5px, 0);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.bounceInUp {
|
|
-webkit-animation-name: bounceInUp;
|
|
animation-name: bounceInUp;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOut {
|
|
20% {
|
|
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
|
transform: scale3d(0.9, 0.9, 0.9);
|
|
}
|
|
|
|
50%,
|
|
55% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOut {
|
|
20% {
|
|
-webkit-transform: scale3d(0.9, 0.9, 0.9);
|
|
transform: scale3d(0.9, 0.9, 0.9);
|
|
}
|
|
|
|
50%,
|
|
55% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
}
|
|
|
|
.bounceOut {
|
|
-webkit-animation-name: bounceOut;
|
|
animation-name: bounceOut;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutDown {
|
|
20% {
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
|
transform: translate3d(0, 10px, 0);
|
|
}
|
|
|
|
40%,
|
|
45% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
|
transform: translate3d(0, -20px, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
|
transform: translate3d(0, 2000px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutDown {
|
|
20% {
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
|
transform: translate3d(0, 10px, 0);
|
|
}
|
|
|
|
40%,
|
|
45% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
|
transform: translate3d(0, -20px, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
|
transform: translate3d(0, 2000px, 0);
|
|
}
|
|
}
|
|
|
|
.bounceOutDown {
|
|
-webkit-animation-name: bounceOutDown;
|
|
animation-name: bounceOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutLeft {
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(20px, 0, 0);
|
|
transform: translate3d(20px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
|
transform: translate3d(-2000px, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutLeft {
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(20px, 0, 0);
|
|
transform: translate3d(20px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
|
transform: translate3d(-2000px, 0, 0);
|
|
}
|
|
}
|
|
|
|
.bounceOutLeft {
|
|
-webkit-animation-name: bounceOutLeft;
|
|
animation-name: bounceOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutRight {
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(-20px, 0, 0);
|
|
transform: translate3d(-20px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
|
transform: translate3d(2000px, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutRight {
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(-20px, 0, 0);
|
|
transform: translate3d(-20px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
|
transform: translate3d(2000px, 0, 0);
|
|
}
|
|
}
|
|
|
|
.bounceOutRight {
|
|
-webkit-animation-name: bounceOutRight;
|
|
animation-name: bounceOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutUp {
|
|
20% {
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
|
transform: translate3d(0, -10px, 0);
|
|
}
|
|
|
|
40%,
|
|
45% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 20px, 0);
|
|
transform: translate3d(0, 20px, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
|
transform: translate3d(0, -2000px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutUp {
|
|
20% {
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
|
transform: translate3d(0, -10px, 0);
|
|
}
|
|
|
|
40%,
|
|
45% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 20px, 0);
|
|
transform: translate3d(0, 20px, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
|
transform: translate3d(0, -2000px, 0);
|
|
}
|
|
}
|
|
|
|
.bounceOutUp {
|
|
-webkit-animation-name: bounceOutUp;
|
|
animation-name: bounceOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fadeIn {
|
|
-webkit-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
-ms-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInDown {
|
|
-webkit-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
-ms-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInDownBig {
|
|
-webkit-animation-name: fadeInDownBig;
|
|
animation-name: fadeInDownBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
-ms-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInLeft {
|
|
-webkit-animation-name: fadeInLeft;
|
|
animation-name: fadeInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
-ms-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInLeftBig {
|
|
-webkit-animation-name: fadeInLeftBig;
|
|
animation-name: fadeInLeftBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
-ms-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInRight {
|
|
-webkit-animation-name: fadeInRight;
|
|
animation-name: fadeInRight;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
-ms-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInRightBig {
|
|
-webkit-animation-name: fadeInRightBig;
|
|
animation-name: fadeInRightBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
-ms-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInUp {
|
|
-webkit-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
-ms-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInUpBig {
|
|
-webkit-animation-name: fadeInUpBig;
|
|
animation-name: fadeInUpBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fadeOut {
|
|
-webkit-animation-name: fadeOut;
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
-ms-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutDown {
|
|
-webkit-animation-name: fadeOutDown;
|
|
animation-name: fadeOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
-ms-transform: translateY(2000px);
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutDownBig {
|
|
-webkit-animation-name: fadeOutDownBig;
|
|
animation-name: fadeOutDownBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
-ms-transform: translateX(-20px);
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutLeft {
|
|
-webkit-animation-name: fadeOutLeft;
|
|
animation-name: fadeOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
-ms-transform: translateX(-2000px);
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutLeftBig {
|
|
-webkit-animation-name: fadeOutLeftBig;
|
|
animation-name: fadeOutLeftBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
-ms-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutRight {
|
|
-webkit-animation-name: fadeOutRight;
|
|
animation-name: fadeOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
-ms-transform: translateX(2000px);
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutRightBig {
|
|
-webkit-animation-name: fadeOutRightBig;
|
|
animation-name: fadeOutRightBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
-ms-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutUp {
|
|
-webkit-animation-name: fadeOutUp;
|
|
animation-name: fadeOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
-ms-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutUpBig {
|
|
-webkit-animation-name: fadeOutUpBig;
|
|
animation-name: fadeOutUpBig;
|
|
}
|
|
|
|
@-webkit-keyframes flip {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
|
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@keyframes flip {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
|
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
.animated.flip {
|
|
-webkit-backface-visibility: visible;
|
|
backface-visibility: visible;
|
|
-webkit-animation-name: flip;
|
|
animation-name: flip;
|
|
}
|
|
|
|
@-webkit-keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
|
|
@keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
|
|
.flipInX {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInX;
|
|
animation-name: flipInX;
|
|
}
|
|
|
|
@-webkit-keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
|
|
@keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
|
|
.flipInY {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInY;
|
|
animation-name: flipInY;
|
|
}
|
|
|
|
@-webkit-keyframes flipOutX {
|
|
0% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipOutX {
|
|
0% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flipOutX {
|
|
-webkit-animation-name: flipOutX;
|
|
animation-name: flipOutX;
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
}
|
|
|
|
@-webkit-keyframes flipOutY {
|
|
0% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipOutY {
|
|
0% {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flipOutY {
|
|
-webkit-backface-visibility: visible !important;
|
|
backface-visibility: visible !important;
|
|
-webkit-animation-name: flipOutY;
|
|
animation-name: flipOutY;
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedIn {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: skewX(20deg);
|
|
transform: skewX(20deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: skewX(-5deg);
|
|
transform: skewX(-5deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes lightSpeedIn {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: skewX(20deg);
|
|
transform: skewX(20deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: skewX(-5deg);
|
|
transform: skewX(-5deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.lightSpeedIn {
|
|
-webkit-animation-name: lightSpeedIn;
|
|
animation-name: lightSpeedIn;
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
|
|
transform: translate3d(100%, 0, 0) skewX(30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes lightSpeedOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
|
|
transform: translate3d(100%, 0, 0) skewX(30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.lightSpeedOut {
|
|
-webkit-animation-name: lightSpeedOut;
|
|
animation-name: lightSpeedOut;
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
@-webkit-keyframes rotateIn {
|
|
0% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transform: rotate3d(0, 0, 1, -200deg);
|
|
transform: rotate3d(0, 0, 1, -200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateIn {
|
|
0% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transform: rotate3d(0, 0, 1, -200deg);
|
|
transform: rotate3d(0, 0, 1, -200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateIn {
|
|
-webkit-animation-name: rotateIn;
|
|
animation-name: rotateIn;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInDownLeft {
|
|
-webkit-animation-name: rotateInDownLeft;
|
|
animation-name: rotateInDownLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInDownRight {
|
|
-webkit-animation-name: rotateInDownRight;
|
|
animation-name: rotateInDownRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInUpLeft {
|
|
-webkit-animation-name: rotateInUpLeft;
|
|
animation-name: rotateInUpLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -90deg);
|
|
transform: rotate3d(0, 0, 1, -90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -90deg);
|
|
transform: rotate3d(0, 0, 1, -90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInUpRight {
|
|
-webkit-animation-name: rotateInUpRight;
|
|
animation-name: rotateInUpRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOut {
|
|
0% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transform: rotate3d(0, 0, 1, 200deg);
|
|
transform: rotate3d(0, 0, 1, 200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOut {
|
|
0% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transform: rotate3d(0, 0, 1, 200deg);
|
|
transform: rotate3d(0, 0, 1, 200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOut {
|
|
-webkit-animation-name: rotateOut;
|
|
animation-name: rotateOut;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutDownLeft {
|
|
-webkit-animation-name: rotateOutDownLeft;
|
|
animation-name: rotateOutDownLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutDownRight {
|
|
-webkit-animation-name: rotateOutDownRight;
|
|
animation-name: rotateOutDownRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
transform-origin: left bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutUpLeft {
|
|
-webkit-animation-name: rotateOutUpLeft;
|
|
animation-name: rotateOutUpLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 90deg);
|
|
transform: rotate3d(0, 0, 1, 90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
transform-origin: right bottom;
|
|
-webkit-transform: rotate3d(0, 0, 1, 90deg);
|
|
transform: rotate3d(0, 0, 1, 90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutUpRight {
|
|
-webkit-animation-name: rotateOutUpRight;
|
|
animation-name: rotateOutUpRight;
|
|
}
|
|
|
|
@-webkit-keyframes hinge {
|
|
0% {
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 80deg);
|
|
transform: rotate3d(0, 0, 1, 80deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40%,
|
|
80% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 60deg);
|
|
transform: rotate3d(0, 0, 1, 60deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 700px, 0);
|
|
transform: translate3d(0, 700px, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes hinge {
|
|
0% {
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 80deg);
|
|
transform: rotate3d(0, 0, 1, 80deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40%,
|
|
80% {
|
|
-webkit-transform: rotate3d(0, 0, 1, 60deg);
|
|
transform: rotate3d(0, 0, 1, 60deg);
|
|
-webkit-transform-origin: top left;
|
|
transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 700px, 0);
|
|
transform: translate3d(0, 700px, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.hinge {
|
|
-webkit-animation-name: hinge;
|
|
animation-name: hinge;
|
|
}
|
|
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
|
|
@-webkit-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
|
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
|
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.rollIn {
|
|
-webkit-animation-name: rollIn;
|
|
animation-name: rollIn;
|
|
}
|
|
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
|
|
@-webkit-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
|
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
|
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
|
}
|
|
}
|
|
|
|
.rollOut {
|
|
-webkit-animation-name: rollOut;
|
|
animation-name: rollOut;
|
|
}
|
|
|
|
@-webkit-keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.zoomIn {
|
|
-webkit-animation-name: zoomIn;
|
|
animation-name: zoomIn;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInStable {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
33.333% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
|
|
66.666666% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInStable {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
33.333% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
|
|
66.666666% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.zoomInStable {
|
|
-webkit-animation-name: zoomInStable;
|
|
animation-name: zoomInStable;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
.zoomInDown {
|
|
-webkit-animation-name: zoomInDown;
|
|
animation-name: zoomInDown;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
.zoomInLeft {
|
|
-webkit-animation-name: zoomInLeft;
|
|
animation-name: zoomInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
.zoomInRight {
|
|
-webkit-animation-name: zoomInRight;
|
|
animation-name: zoomInRight;
|
|
}
|
|
|
|
@-webkit-keyframes zoomInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
.zoomInUp {
|
|
-webkit-animation-name: zoomInUp;
|
|
animation-name: zoomInUp;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.zoomOut {
|
|
-webkit-animation-name: zoomOut;
|
|
animation-name: zoomOut;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutDown {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutDown {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
.zoomOutDown {
|
|
-webkit-animation-name: zoomOutDown;
|
|
animation-name: zoomOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutLeft {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
|
|
transform: scale(0.1) translate3d(-2000px, 0, 0);
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutLeft {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
|
|
transform: scale(0.1) translate3d(-2000px, 0, 0);
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
}
|
|
}
|
|
|
|
.zoomOutLeft {
|
|
-webkit-animation-name: zoomOutLeft;
|
|
animation-name: zoomOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutRight {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
|
|
transform: scale(0.1) translate3d(2000px, 0, 0);
|
|
-webkit-transform-origin: right center;
|
|
transform-origin: right center;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutRight {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
|
|
transform: scale(0.1) translate3d(2000px, 0, 0);
|
|
-webkit-transform-origin: right center;
|
|
transform-origin: right center;
|
|
}
|
|
}
|
|
|
|
.zoomOutRight {
|
|
-webkit-animation-name: zoomOutRight;
|
|
animation-name: zoomOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes zoomOutUp {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOutUp {
|
|
40% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
|
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
|
|
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
}
|
|
}
|
|
|
|
.zoomOutUp {
|
|
-webkit-animation-name: zoomOutUp;
|
|
animation-name: zoomOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes slideInDown {
|
|
0% {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
0% {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInDown {
|
|
-webkit-animation-name: slideInDown;
|
|
animation-name: slideInDown;
|
|
}
|
|
|
|
@-webkit-keyframes slideInLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInLeft {
|
|
-webkit-animation-name: slideInLeft;
|
|
animation-name: slideInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInRight {
|
|
-webkit-animation-name: slideInRight;
|
|
animation-name: slideInRight;
|
|
}
|
|
|
|
@-webkit-keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInUp {
|
|
-webkit-animation-name: slideInUp;
|
|
animation-name: slideInUp;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutDown {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutDown {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
|
|
.slideOutDown {
|
|
-webkit-animation-name: slideOutDown;
|
|
animation-name: slideOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideOutLeft {
|
|
-webkit-animation-name: slideOutLeft;
|
|
animation-name: slideOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutRight {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutRight {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideOutRight {
|
|
-webkit-animation-name: slideOutRight;
|
|
animation-name: slideOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
100% {
|
|
visibility: hidden;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
|
|
.slideOutUp {
|
|
-webkit-animation-name: slideOutUp;
|
|
animation-name: slideOutUp;
|
|
}
|
|
|
|
@keyframes anime {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
-webkit-transform: scaleY(0);
|
|
-moz-transform: scaleY(0);
|
|
-ms-transform: scaleY(0);
|
|
-o-transform: scaleY(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-moz-transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes anime {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
-webkit-transform: scaleY(0);
|
|
-moz-transform: scaleY(0);
|
|
-ms-transform: scaleY(0);
|
|
-o-transform: scaleY(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-moz-transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes anime {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
-webkit-transform: scaleY(0);
|
|
-moz-transform: scaleY(0);
|
|
-ms-transform: scaleY(0);
|
|
-o-transform: scaleY(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-moz-transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes anime {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
-webkit-transform: scaleY(0);
|
|
-moz-transform: scaleY(0);
|
|
-ms-transform: scaleY(0);
|
|
-o-transform: scaleY(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-moz-transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes anime {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
-webkit-transform: scaleY(0);
|
|
-moz-transform: scaleY(0);
|
|
-ms-transform: scaleY(0);
|
|
-o-transform: scaleY(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
-ms-transform: scaleY(1);
|
|
-o-transform: scaleY(1);
|
|
-moz-transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes float-bob-y {
|
|
0% {
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes float-bob-x {
|
|
0% {
|
|
-webkit-transform: translateX(-100px);
|
|
transform: translateX(-100px);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-100px);
|
|
transform: translateX(-100px);
|
|
}
|
|
}
|
|
|
|
@keyframes float-bob {
|
|
0% {
|
|
-webkit-transform: translateX(-430px);
|
|
transform: translateX(-430px);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-430px);
|
|
transform: translateX(-430px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes zoom-fade {
|
|
0% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes zoom-fade {
|
|
0% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes zoom-fade-two {
|
|
0% {
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
@keyframes zoom-fade-two {
|
|
0% {
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
.banner .parallax-container div img,
|
|
.fullwidth-video-section .play-link .icon-box {
|
|
animation-name: zoom-fade;
|
|
animation-duration: 5s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
-webkit-animation-name: zoom-fade;
|
|
-webkit-animation-duration: 5s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
-moz-animation-name: zoom-fade;
|
|
-moz-animation-duration: 5s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-animation-timing-function: linear;
|
|
-ms-animation-name: zoom-fade;
|
|
-ms-animation-duration: 5s;
|
|
-ms-animation-iteration-count: infinite;
|
|
-ms-animation-timing-function: linear;
|
|
-o-animation-name: zoom-fade;
|
|
-o-animation-duration: 5s;
|
|
-o-animation-iteration-count: infinite;
|
|
-o-animation-timing-function: linear;
|
|
}
|
|
|
|
@keyframes rotateme {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateme {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateme {
|
|
from {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
-moz-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateme {
|
|
from {
|
|
-o-transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
-o-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.page-banner .icon-one,
|
|
.main-banner .icon-one {
|
|
animation-name: rotateme;
|
|
animation-duration: 7s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
-webkit-animation-name: rotateme;
|
|
-webkit-animation-duration: 7s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
-moz-animation-name: rotateme;
|
|
-moz-animation-duration: 7s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-animation-timing-function: linear;
|
|
-ms-animation-name: rotateme;
|
|
-ms-animation-duration: 7s;
|
|
-ms-animation-iteration-count: infinite;
|
|
-ms-animation-timing-function: linear;
|
|
-o-animation-name: rotateme;
|
|
-o-animation-duration: 7s;
|
|
-o-animation-iteration-count: infinite;
|
|
-o-animation-timing-function: linear;
|
|
}
|
|
|
|
.how-it-works:before,
|
|
.main-banner .icon-six,
|
|
.main-banner .icon-two,
|
|
.page-banner .icon-six,
|
|
.page-banner .icon-two,
|
|
.rotate-me {
|
|
animation-name: rotateme;
|
|
animation-duration: 24s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
-webkit-animation-name: rotateme;
|
|
-webkit-animation-duration: 24s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
-moz-animation-name: rotateme;
|
|
-moz-animation-duration: 24s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-animation-timing-function: linear;
|
|
-ms-animation-name: rotateme;
|
|
-ms-animation-duration: 24s;
|
|
-ms-animation-iteration-count: infinite;
|
|
-ms-animation-timing-function: linear;
|
|
-o-animation-name: rotateme;
|
|
-o-animation-duration: 24s;
|
|
-o-animation-iteration-count: infinite;
|
|
-o-animation-timing-function: linear;
|
|
}
|
|
|
|
@-webkit-keyframes footer-animate {
|
|
0% {
|
|
-webkit-transform: translateX(-1000px);
|
|
transform: translateX(-1000px);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-1000px);
|
|
transform: translateX(-1000px);
|
|
}
|
|
}
|
|
|
|
@keyframes footer-animate {
|
|
0% {
|
|
-webkit-transform: translateX(-1000px);
|
|
transform: translateX(-1000px);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-1000px);
|
|
transform: translateX(-1000px);
|
|
}
|
|
}
|
|
|
|
|
|
/*============================================
|
|
|
|
02 -- Prism JS
|
|
|
|
==============================================*/
|
|
|
|
/* PrismJS 1.15.0
|
|
https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript&plugins=line-numbers */
|
|
/**
|
|
* prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
|
|
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
|
|
* @author Tim Shedor
|
|
*/
|
|
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
color: black;
|
|
background: none;
|
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
line-height: 1.5;
|
|
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
|
|
-webkit-hyphens: none;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre[class*="language-"] {
|
|
position: relative;
|
|
margin: .5em 0;
|
|
overflow: visible;
|
|
padding: 0;
|
|
}
|
|
|
|
pre[class*="language-"]>code {
|
|
position: relative;
|
|
border-left: 10px solid #358ccb;
|
|
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
|
|
background-color: #fdfdfd;
|
|
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
|
background-size: 3em 3em;
|
|
background-origin: content-box;
|
|
background-attachment: local;
|
|
}
|
|
|
|
code[class*="language"] {
|
|
max-height: inherit;
|
|
height: inherit;
|
|
padding: 0 1em;
|
|
display: block;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Margin bottom to accommodate shadow */
|
|
:not(pre)>code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
background-color: #fdfdfd;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Inline code */
|
|
:not(pre)>code[class*="language-"] {
|
|
position: relative;
|
|
padding: .2em;
|
|
border-radius: 0.3em;
|
|
color: #c92c2c;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
display: inline;
|
|
white-space: normal;
|
|
}
|
|
|
|
pre[class*="language-"]:before,
|
|
pre[class*="language-"]:after {
|
|
content: '';
|
|
z-index: -2;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0.75em;
|
|
left: 0.18em;
|
|
width: 40%;
|
|
height: 20%;
|
|
max-height: 13em;
|
|
box-shadow: 0px 13px 8px #979797;
|
|
-webkit-transform: rotate(-2deg);
|
|
-moz-transform: rotate(-2deg);
|
|
-ms-transform: rotate(-2deg);
|
|
-o-transform: rotate(-2deg);
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
:not(pre)>code[class*="language-"]:after,
|
|
pre[class*="language-"]:after {
|
|
right: 0.75em;
|
|
left: auto;
|
|
-webkit-transform: rotate(2deg);
|
|
-moz-transform: rotate(2deg);
|
|
-ms-transform: rotate(2deg);
|
|
-o-transform: rotate(2deg);
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
.token.comment,
|
|
.token.block-comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: #7D8B99;
|
|
}
|
|
|
|
.token.punctuation {
|
|
color: #5F6364;
|
|
}
|
|
|
|
.token.property,
|
|
.token.tag,
|
|
.token.boolean,
|
|
.token.number,
|
|
.token.function-name,
|
|
.token.constant,
|
|
.token.symbol,
|
|
.token.deleted {
|
|
color: #c92c2c;
|
|
}
|
|
|
|
.token.selector,
|
|
.token.attr-name,
|
|
.token.string,
|
|
.token.char,
|
|
.token.function,
|
|
.token.builtin,
|
|
.token.inserted {
|
|
color: #2f9c0a;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.token.url,
|
|
.token.variable {
|
|
color: #a67f59;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.keyword,
|
|
.token.class-name {
|
|
color: #1990b8;
|
|
}
|
|
|
|
.token.regex,
|
|
.token.important {
|
|
color: #e90;
|
|
}
|
|
|
|
.language-css .token.string,
|
|
.style .token.string {
|
|
color: #a67f59;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.token.important {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.token.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
|
|
.namespace {
|
|
opacity: .7;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
|
pre[class*="language-"]:before,
|
|
pre[class*="language-"]:after {
|
|
bottom: 14px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
}
|
|
|
|
/* Plugin styles */
|
|
.token.tab:not(:empty):before,
|
|
.token.cr:before,
|
|
.token.lf:before {
|
|
color: #e0d7d1;
|
|
}
|
|
|
|
/* Plugin styles: Line Numbers */
|
|
pre[class*="language-"].line-numbers.line-numbers {
|
|
padding-left: 0;
|
|
}
|
|
|
|
pre[class*="language-"].line-numbers.line-numbers code {
|
|
padding-left: 3.8em;
|
|
}
|
|
|
|
pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
|
|
left: 0;
|
|
}
|
|
|
|
/* Plugin styles: Line Highlight */
|
|
pre[class*="language-"][data-line] {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
pre[data-line] code {
|
|
position: relative;
|
|
padding-left: 4em;
|
|
}
|
|
|
|
pre .line-highlight {
|
|
margin-top: 0;
|
|
}
|
|
|
|
pre[class*="language-"].line-numbers {
|
|
position: relative;
|
|
padding-left: 3.8em;
|
|
counter-reset: linenumber;
|
|
}
|
|
|
|
pre[class*="language-"].line-numbers>code {
|
|
position: relative;
|
|
white-space: inherit;
|
|
}
|
|
|
|
.line-numbers .line-numbers-rows {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 0;
|
|
font-size: 100%;
|
|
left: -3.8em;
|
|
width: 3em;
|
|
/* works for line-numbers below 1000 lines */
|
|
letter-spacing: -1px;
|
|
border-right: 1px solid #999;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
.line-numbers-rows>span {
|
|
pointer-events: none;
|
|
display: block;
|
|
counter-increment: linenumber;
|
|
}
|
|
|
|
.line-numbers-rows>span:before {
|
|
content: counter(linenumber);
|
|
color: #999;
|
|
display: block;
|
|
padding-right: 0.8em;
|
|
text-align: right;
|
|
}
|
|
|
|
/*============================================
|
|
|
|
03 -- Custom Scrollbar
|
|
|
|
==============================================*/
|
|
|
|
.mCustomScrollbar {
|
|
-ms-touch-action: pinch-zoom;
|
|
touch-action: pinch-zoom
|
|
}
|
|
|
|
.mCustomScrollbar.mCS_no_scrollbar,
|
|
.mCustomScrollbar.mCS_touch_action {
|
|
-ms-touch-action: auto;
|
|
touch-action: auto
|
|
}
|
|
|
|
.mCustomScrollBox {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
outline: 0;
|
|
direction: ltr
|
|
}
|
|
|
|
.mCSB_container {
|
|
overflow: hidden;
|
|
width: auto;
|
|
height: auto
|
|
}
|
|
|
|
.mCSB_inside>.mCSB_container {
|
|
margin-right: 30px
|
|
}
|
|
|
|
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
|
|
margin-right: 0
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCSB_inside>.mCSB_container {
|
|
margin-right: 0;
|
|
margin-left: 30px
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
|
|
margin-left: 0
|
|
}
|
|
|
|
.mCSB_scrollTools {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: auto;
|
|
left: auto;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: .75;
|
|
filter: "alpha(opacity=75)";
|
|
-ms-filter: "alpha(opacity=75)"
|
|
}
|
|
|
|
.mCSB_outside+.mCSB_scrollTools {
|
|
right: -26px
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,
|
|
.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
|
|
right: auto;
|
|
left: 0
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
|
|
left: -26px
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_draggerContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: auto
|
|
}
|
|
|
|
.mCSB_scrollTools a+.mCSB_draggerContainer {
|
|
margin: 20px 0
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_draggerRail {
|
|
width: 2px;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
-webkit-border-radius: 16px;
|
|
-moz-border-radius: 16px;
|
|
border-radius: 16px
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_dragger {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 30px;
|
|
z-index: 1
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
position: relative;
|
|
width: 4px;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
-webkit-border-radius: 16px;
|
|
-moz-border-radius: 16px;
|
|
border-radius: 16px;
|
|
text-align: center
|
|
}
|
|
|
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
|
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 12px
|
|
}
|
|
|
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
|
|
width: 8px
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonDown,
|
|
.mCSB_scrollTools .mCSB_buttonUp {
|
|
display: block;
|
|
position: absolute;
|
|
height: 20px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
cursor: pointer
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonDown {
|
|
bottom: 0
|
|
}
|
|
|
|
.mCSB_horizontal.mCSB_inside>.mCSB_container {
|
|
margin-right: 0;
|
|
margin-bottom: 30px
|
|
}
|
|
|
|
.mCSB_horizontal.mCSB_outside>.mCSB_container {
|
|
min-height: 100%
|
|
}
|
|
|
|
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
|
|
width: auto;
|
|
height: 16px;
|
|
top: auto;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0
|
|
}
|
|
|
|
.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,
|
|
.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal {
|
|
bottom: -26px
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer {
|
|
margin: 0 20px
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
width: 100%;
|
|
height: 2px;
|
|
margin: 7px 0
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
|
|
width: 30px;
|
|
height: 100%;
|
|
left: 0
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 100%;
|
|
height: 4px;
|
|
margin: 6px auto
|
|
}
|
|
|
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
|
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
|
|
height: 12px;
|
|
margin: 2px auto
|
|
}
|
|
|
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
|
|
height: 8px;
|
|
margin: 4px 0
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
|
|
display: block;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
cursor: pointer
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
|
|
left: 0
|
|
}
|
|
|
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
|
|
right: 0
|
|
}
|
|
|
|
.mCSB_container_wrapper {
|
|
position: absolute;
|
|
height: auto;
|
|
width: auto;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin-right: 30px;
|
|
margin-bottom: 30px
|
|
}
|
|
|
|
.mCSB_container_wrapper>.mCSB_container {
|
|
padding-right: 30px;
|
|
padding-bottom: 30px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical {
|
|
bottom: 20px
|
|
}
|
|
|
|
.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal {
|
|
right: 20px
|
|
}
|
|
|
|
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical {
|
|
bottom: 0
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,
|
|
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal {
|
|
right: 0
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal {
|
|
left: 20px
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal {
|
|
left: 0
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper {
|
|
margin-right: 0;
|
|
margin-left: 30px
|
|
}
|
|
|
|
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container {
|
|
padding-right: 0
|
|
}
|
|
|
|
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container {
|
|
padding-bottom: 0
|
|
}
|
|
|
|
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
|
|
margin-right: 0;
|
|
margin-left: 0
|
|
}
|
|
|
|
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.mCSB_scrollTools,
|
|
.mCSB_scrollTools .mCSB_buttonDown,
|
|
.mCSB_scrollTools .mCSB_buttonLeft,
|
|
.mCSB_scrollTools .mCSB_buttonRight,
|
|
.mCSB_scrollTools .mCSB_buttonUp,
|
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
|
|
-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
|
|
-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
|
|
transition: opacity .2s ease-in-out, background-color .2s ease-in-out
|
|
}
|
|
|
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
|
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
|
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
|
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
|
|
-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
|
|
-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
|
|
-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
|
|
transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out
|
|
}
|
|
|
|
.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,
|
|
.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools {
|
|
opacity: 0;
|
|
filter: "alpha(opacity=0)";
|
|
-ms-filter: "alpha(opacity=0)"
|
|
}
|
|
|
|
.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,
|
|
.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,
|
|
.mCustomScrollBox:hover>.mCSB_scrollTools,
|
|
.mCustomScrollBox:hover~.mCSB_scrollTools,
|
|
.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,
|
|
.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag {
|
|
opacity: 1;
|
|
filter: "alpha(opacity=100)";
|
|
-ms-filter: "alpha(opacity=100)"
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
filter: "alpha(opacity=40)";
|
|
-ms-filter: "alpha(opacity=40)"
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .75);
|
|
filter: "alpha(opacity=75)";
|
|
-ms-filter: "alpha(opacity=75)"
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .85);
|
|
filter: "alpha(opacity=85)";
|
|
-ms-filter: "alpha(opacity=85)"
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .9);
|
|
filter: "alpha(opacity=90)";
|
|
-ms-filter: "alpha(opacity=90)"
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonDown,
|
|
.mCSB_scrollTools .mCSB_buttonLeft,
|
|
.mCSB_scrollTools .mCSB_buttonRight,
|
|
.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-image: url(mCSB_buttons.png);
|
|
background-repeat: no-repeat;
|
|
opacity: .4;
|
|
filter: "alpha(opacity=40)";
|
|
-ms-filter: "alpha(opacity=40)"
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: 0 0
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: 0 -20px
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: 0 -40px
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: 0 -56px
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonDown:hover,
|
|
.mCSB_scrollTools .mCSB_buttonLeft:hover,
|
|
.mCSB_scrollTools .mCSB_buttonRight:hover,
|
|
.mCSB_scrollTools .mCSB_buttonUp:hover {
|
|
opacity: .75;
|
|
filter: "alpha(opacity=75)";
|
|
-ms-filter: "alpha(opacity=75)"
|
|
}
|
|
|
|
.mCSB_scrollTools .mCSB_buttonDown:active,
|
|
.mCSB_scrollTools .mCSB_buttonLeft:active,
|
|
.mCSB_scrollTools .mCSB_buttonRight:active,
|
|
.mCSB_scrollTools .mCSB_buttonUp:active {
|
|
opacity: .9;
|
|
filter: "alpha(opacity=90)";
|
|
-ms-filter: "alpha(opacity=90)"
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .15)
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75)
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -80px 0
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -80px -20px
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -80px -40px
|
|
}
|
|
|
|
.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -80px -56px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail {
|
|
width: 4px;
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .1);
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 4px;
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .75);
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
width: 100%;
|
|
height: 4px;
|
|
margin: 6px auto
|
|
}
|
|
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .85)
|
|
}
|
|
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .9)
|
|
}
|
|
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -32px 0
|
|
}
|
|
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -32px -20px
|
|
}
|
|
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -40px -40px
|
|
}
|
|
|
|
.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -40px -56px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75);
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -112px 0
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -112px -20px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -120px -40px
|
|
}
|
|
|
|
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -120px -56px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
|
|
width: 4px;
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .1);
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 6px;
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .75);
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
width: 100%;
|
|
height: 4px;
|
|
margin: 6px 0
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 100%;
|
|
height: 6px;
|
|
margin: 5px auto
|
|
}
|
|
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .85)
|
|
}
|
|
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .9)
|
|
}
|
|
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -16px 0
|
|
}
|
|
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -16px -20px
|
|
}
|
|
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -20px -40px
|
|
}
|
|
|
|
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -20px -56px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75);
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -96px 0
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -96px -20px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -100px -40px
|
|
}
|
|
|
|
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -100px -56px
|
|
}
|
|
|
|
.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .1)
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 2px
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
width: 100%
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 100%;
|
|
height: 2px;
|
|
margin: 7px auto
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .15)
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75)
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -80px 0
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -80px -20px
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -80px -40px
|
|
}
|
|
|
|
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -80px -56px
|
|
}
|
|
|
|
.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .15)
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
|
|
.mCS-rounded.mCSB_scrollTools .mCSB_dragger {
|
|
height: 14px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 14px;
|
|
margin: 0 1px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
|
|
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,
|
|
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger {
|
|
width: 14px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
height: 14px;
|
|
margin: 1px 0
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
|
|
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
|
|
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: -1px 0
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
|
|
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
|
|
width: 4px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
|
|
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
|
|
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
|
|
height: 16px;
|
|
width: 16px;
|
|
margin: 0 -1px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
|
|
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
|
|
height: 4px;
|
|
margin: 6px 0
|
|
}
|
|
|
|
.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: 0 -72px
|
|
}
|
|
|
|
.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: 0 -92px
|
|
}
|
|
|
|
.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: 0 -112px
|
|
}
|
|
|
|
.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: 0 -128px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75)
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .15)
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -80px -72px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -80px -92px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -80px -112px
|
|
}
|
|
|
|
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -80px -128px
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,
|
|
.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail {
|
|
width: 4px
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
background-color: transparent;
|
|
background-position: center
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
|
|
background-repeat: repeat-y;
|
|
opacity: .3;
|
|
filter: "alpha(opacity=30)";
|
|
-ms-filter: "alpha(opacity=30)"
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
height: 4px;
|
|
margin: 6px 0;
|
|
background-repeat: repeat-x
|
|
}
|
|
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -16px -72px
|
|
}
|
|
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -16px -92px
|
|
}
|
|
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -20px -112px
|
|
}
|
|
|
|
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -20px -128px
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -96px -72px
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -96px -92px
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -100px -112px
|
|
}
|
|
|
|
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -100px -128px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-repeat: repeat-y;
|
|
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, .5)), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: -o-linear-gradient(left, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: linear-gradient(to right, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%)
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
background-repeat: repeat-x;
|
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, .5)), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
|
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%)
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,
|
|
.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger {
|
|
height: 70px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
|
|
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger {
|
|
width: 70px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools,
|
|
.mCS-3d.mCSB_scrollTools {
|
|
opacity: 1;
|
|
filter: "alpha(opacity=30)";
|
|
-ms-filter: "alpha(opacity=30)"
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
|
|
-webkit-border-radius: 16px;
|
|
-moz-border-radius: 16px;
|
|
border-radius: 16px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
|
|
width: 8px;
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .2);
|
|
box-shadow: inset 1px 0 1px rgba(0, 0, 0, .5), inset -1px 0 1px rgba(255, 255, 255, .2)
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #555
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 8px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
width: 100%;
|
|
height: 8px;
|
|
margin: 4px 0;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), inset 0 -1px 1px rgba(255, 255, 255, .2)
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
margin: 4px auto
|
|
}
|
|
|
|
.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -32px -72px
|
|
}
|
|
|
|
.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -32px -92px
|
|
}
|
|
|
|
.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -40px -112px
|
|
}
|
|
|
|
.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -40px -128px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -112px -72px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -112px -92px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -120px -112px
|
|
}
|
|
|
|
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -120px -128px
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools,
|
|
.mCS-3d-thick.mCSB_scrollTools {
|
|
opacity: 1;
|
|
filter: "alpha(opacity=30)";
|
|
-ms-filter: "alpha(opacity=30)"
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools,
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,
|
|
.mCS-3d-thick.mCSB_scrollTools,
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
|
|
-webkit-border-radius: 7px;
|
|
-moz-border-radius: 7px;
|
|
border-radius: 7px
|
|
}
|
|
|
|
.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,
|
|
.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical {
|
|
right: 1px
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools_vertical,
|
|
.mCS-3d-thick.mCSB_scrollTools_vertical {
|
|
box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5)
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,
|
|
.mCS-3d-thick.mCSB_scrollTools_horizontal {
|
|
bottom: 1px;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5)
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .4);
|
|
width: 12px;
|
|
margin: 2px;
|
|
position: absolute;
|
|
height: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
|
|
height: 12px;
|
|
width: auto
|
|
}
|
|
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #555
|
|
}
|
|
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .05);
|
|
box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: transparent
|
|
}
|
|
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -32px -72px
|
|
}
|
|
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -32px -92px
|
|
}
|
|
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -40px -112px
|
|
}
|
|
|
|
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -40px -128px
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools {
|
|
box-shadow: inset 0 0 14px rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .4), inset -1px 0 0 rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #777
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
|
|
background-color: #fff;
|
|
background-color: rgba(0, 0, 0, .05);
|
|
box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: transparent
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -112px -72px
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -112px -92px
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -120px -112px
|
|
}
|
|
|
|
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -120px -128px
|
|
}
|
|
|
|
.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,
|
|
.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical {
|
|
right: 0;
|
|
margin: 12px 0
|
|
}
|
|
|
|
.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,
|
|
.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,
|
|
.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,
|
|
.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal {
|
|
bottom: 0;
|
|
margin: 0 12px
|
|
}
|
|
|
|
.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,
|
|
.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical {
|
|
left: 0;
|
|
right: auto
|
|
}
|
|
|
|
.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,
|
|
.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {
|
|
height: 50px
|
|
}
|
|
|
|
.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
|
|
.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {
|
|
width: 50px
|
|
}
|
|
|
|
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .2);
|
|
filter: "alpha(opacity=20)";
|
|
-ms-filter: "alpha(opacity=20)"
|
|
}
|
|
|
|
.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .5);
|
|
filter: "alpha(opacity=50)";
|
|
-ms-filter: "alpha(opacity=50)"
|
|
}
|
|
|
|
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .2);
|
|
filter: "alpha(opacity=20)";
|
|
-ms-filter: "alpha(opacity=20)"
|
|
}
|
|
|
|
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
filter: "alpha(opacity=50)";
|
|
-ms-filter: "alpha(opacity=50)"
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
|
|
width: 6px;
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 6px
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
width: 100%;
|
|
height: 6px;
|
|
margin: 5px 0
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
|
|
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
|
|
width: 12px
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
|
|
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,
|
|
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
|
|
height: 12px;
|
|
margin: 2px 0
|
|
}
|
|
|
|
.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -32px -72px
|
|
}
|
|
|
|
.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -32px -92px
|
|
}
|
|
|
|
.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -40px -112px
|
|
}
|
|
|
|
.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -40px -128px
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75)
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -112px -72px
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -112px -92px
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -120px -112px
|
|
}
|
|
|
|
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -120px -128px
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
|
|
width: 12px;
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
width: 6px;
|
|
margin: 3px 5px;
|
|
position: absolute;
|
|
height: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
|
|
height: 6px;
|
|
margin: 5px 3px;
|
|
position: absolute;
|
|
width: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
|
|
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail {
|
|
width: 100%;
|
|
height: 12px;
|
|
margin: 2px 0
|
|
}
|
|
|
|
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,
|
|
.mCS-inset.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -32px -72px
|
|
}
|
|
|
|
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,
|
|
.mCS-inset.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -32px -92px
|
|
}
|
|
|
|
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,
|
|
.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -40px -112px
|
|
}
|
|
|
|
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,
|
|
.mCS-inset.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -40px -128px
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75)
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp {
|
|
background-position: -112px -72px
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown {
|
|
background-position: -112px -92px
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft {
|
|
background-position: -120px -112px
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,
|
|
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight {
|
|
background-position: -120px -128px
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
|
|
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: transparent;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #fff;
|
|
border-color: rgba(255, 255, 255, .2);
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
|
|
border-color: #000;
|
|
border-color: rgba(0, 0, 0, .2)
|
|
}
|
|
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .6)
|
|
}
|
|
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .6)
|
|
}
|
|
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .75)
|
|
}
|
|
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .85)
|
|
}
|
|
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, .9)
|
|
}
|
|
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .75)
|
|
}
|
|
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .85)
|
|
}
|
|
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
|
|
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
|
|
background-color: #fff;
|
|
background-color: rgba(255, 255, 255, .9)
|
|
} |