@charset "UTF-8";

 .animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.animated.hinge {
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
animation-duration: .75s;
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
} @keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation-name: pulse;
}
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
animation-name: rubberBand;
}
@keyframes shake {
from, to {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}
.shake {
animation-name: shake;
}
@keyframes headShake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}
.headShake {
animation-timing-function: ease-in-out;
animation-name: headShake;
}
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
to {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
transform-origin: top center;
animation-name: swing;
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.tada {
animation-name: tada;
} @keyframes wobble {
from {
transform: none;
}
15% {
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: none;
}
}
.wobble {
animation-name: wobble;
}
@keyframes jello {
from, 11.1%, to {
transform: none;
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
animation-name: jello;
transform-origin: center;
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
animation-name: bounceIn;
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
.bounceInDown {
animation-name: bounceInDown;
}
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
.bounceInLeft {
animation-name: bounceInLeft;
}
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
.bounceInRight {
animation-name: bounceInRight;
}
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
animation-name: bounceInUp;
}
@keyframes bounceOut {
20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
animation-name: bounceOut;
}
@keyframes bounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
animation-name: bounceOutDown;
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
animation-name: bounceOutLeft;
}
@keyframes bounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
animation-name: bounceOutRight;
}
@keyframes bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
animation-name: bounceOutUp;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDownBig {
animation-name: fadeInDownBig;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInLeftBig {
animation-name: fadeInLeftBig;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
from {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInRightBig {
animation-name: fadeInRightBig;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUpBig {
animation-name: fadeInUpBig;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
animation-name: fadeOutDown;
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
animation-name: fadeOutDownBig;
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
animation-name: fadeOutLeft;
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
animation-name: fadeOutLeftBig;
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
animation-name: fadeOutRight;
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
animation-name: fadeOutRightBig;
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
animation-name: fadeOutUp;
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
animation-name: fadeOutUpBig;
}
@keyframes flip {
from {
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) scale3d(.95, .95, .95);
animation-timing-function: ease-in;
}
to {
transform: perspective(400px);
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
}
@keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: flipInX;
}
@keyframes flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: flipInY;
}
@keyframes flipOutX {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@keyframes flipOutY {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: flipOutY;
}
@keyframes lightSpeedIn {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
animation-name: lightSpeedOut;
animation-timing-function: ease-in;
}
@keyframes rotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.rotateIn {
animation-name: rotateIn;
}
@keyframes rotateInDownLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
.rotateInDownLeft {
animation-name: rotateInDownLeft;
}
@keyframes rotateInDownRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
.rotateInDownRight {
animation-name: rotateInDownRight;
}
@keyframes rotateInUpLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
.rotateInUpLeft {
animation-name: rotateInUpLeft;
}
@keyframes rotateInUpRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
.rotateInUpRight {
animation-name: rotateInUpRight;
}
@keyframes rotateOut {
from {
transform-origin: center;
opacity: 1;
}
to {
transform-origin: center;
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
animation-name: rotateOut;
}
@keyframes rotateOutDownLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
animation-name: rotateOutDownLeft;
}
@keyframes rotateOutDownRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
animation-name: rotateOutDownRight;
}
@keyframes rotateOutUpLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
animation-name: rotateOutUpLeft;
}
@keyframes rotateOutUpRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
animation-name: rotateOutUpRight;
}
@keyframes hinge {
0% {
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40%, 80% {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
animation-name: hinge;
}
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.jackInTheBox {
animation-name: jackInTheBox;
} @keyframes rollIn {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
transform: none;
}
}
.rollIn {
animation-name: rollIn;
} @keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
animation-name: rollOut;
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomInDown {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInDown {
animation-name: zoomInDown;
}
@keyframes zoomInLeft {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInLeft {
animation-name: zoomInLeft;
}
@keyframes zoomInRight {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInRight {
animation-name: zoomInRight;
}
@keyframes zoomInUp {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInUp {
animation-name: zoomInUp;
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
animation-name: zoomOut;
}
@keyframes zoomOutDown {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutDown {
animation-name: zoomOutDown;
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(-2000px, 0, 0);
transform-origin: left center;
}
}
.zoomOutLeft {
animation-name: zoomOutLeft;
}
@keyframes zoomOutRight {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(2000px, 0, 0);
transform-origin: right center;
}
}
.zoomOutRight {
animation-name: zoomOutRight;
}
@keyframes zoomOutUp {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutUp {
animation-name: zoomOutUp;
}
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
animation-name: slideInDown;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
animation-name: slideInRight;
}
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
animation-name: slideInUp;
}
@keyframes slideOutDown {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
animation-name: slideOutDown;
}
@keyframes slideOutLeft {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
animation-name: slideOutLeft;
}
@keyframes slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
animation-name: slideOutRight;
}
@keyframes slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
animation-name: slideOutUp;
}.hero_audio_control span {
cursor: pointer;
display: block;
width: 20px;
font-size: 18px;
}
.hero_audio_control {
padding: 12px 10px;
position: absolute;
text-align: center;
width: auto;
z-index: 9999999;
}
.hero_audio_control img{
width: 20px;
}
.slider_hero_walkingbackground{
overflow: hidden;
}
.hero_gslider_control{margin-left: 10px;cursor: pointer;}
.hero_restart_button{
position: absolute;
bottom: 20px; z-index: 99999;
width: 100%;
height: 30px; padding: 5px;
text-align: center;
}
#hero_restart_button, #hero_pause_button, #hero_play_button{
width: 20px;
height: 20px;
color:#fff;
font-size:15px;
display: inline-block;
cursor: pointer;
}
.hero_bottom_save_button{
position: fixed;
bottom: 36px;
right: 9px;
} .qc-sliderX-bottomCon{position: absolute;bottom: 25px;text-align: center;z-index: 999;}
.qc-sliderX-direction{position: absolute;top: 45%;}
.qc-sliderX-prev{
float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrow.light.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 70px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;
}
.qc-sliderX-prev:hover{
background-position: 0px -35px;
color: rgba(221, 221, 221, 0);
}
.qc-sliderX-next{
float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrow.light.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 70px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;
}
.qc-sliderX-next:hover{
background-position: -35px -35px;
color: rgba(221, 221, 221, 0);
}
.slider-hero-prev{
float: left;
margin-left: 10px;
z-index: 11;
position: relative;
display: block;
font-size: 40px;
color: #fff;
line-height: 20px;
box-shadow: none !important;
cursor:pointer;
}
.slider-hero-next{
float: right;
margin-right: 10px;
z-index: 11;
position: relative;
display: block;
font-size: 40px;
color: #fff;
line-height: 20px;
box-shadow: none !important;
cursor:pointer;
} .arrow_style_1-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow1.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_1-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow1.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;} .arrow_style_2-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow2.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_2-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow2.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;} .arrow_style_3-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow3.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_3-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow3.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;} .arrow_style_4-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow4.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_4-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow4.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;} .arrow_style_5-prev{float: left;
float: left;
width: 28px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow5.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 54px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_5-next{float: right;
width: 28px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow5.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 60px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;} .arrow_style_6-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow6.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_6-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow6.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;} .arrow_style_7-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow7.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_7-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow7.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_8-prev{float: left;
width: 35px;
height: 35px;
margin-left: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow8.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.arrow_style_8-next{float: right;
width: 35px;
height: 35px;
margin-right: 10px;
background: url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/images/arrows/arrow8.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 70px 34px;
background-repeat: no-repeat;
background-position: -35px 0px;
cursor: pointer;
box-shadow: none !important;
z-index: 11111;
position: relative;
display: block;}
.qc-sliderX-bottom-slide{
cursor: pointer;
margin: 0px;
padding: 0px;
margin-left: 10px;
display: inline-block;
box-shadow: none !important;
font-size: 13px;
}
.qc-sliderX-bottom-slide:hover{
color:#3f4851;
}
.qc-sliderx-bottom-current{
color:#3f4851;
}  .hero_float{width: 100%;height: 100%;position: absolute;top: 0;}
.hero_float_left{width: 50%;height: 100%;margin: 0px;cursor:url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/css/arrow-left.png),pointer !important;z-index:1 !important;}
.hero_float_right{width: 50%;height: 100%;margin: 0px;cursor:url(//www.nal-medienet.dk/wp-content/plugins/slider-hero/css/arrow-right.png),pointer !important;z-index:1 !important;} @media only screen and (min-width: 768px) and (max-width: 991px){
.qcld_hero_content_area h2{font-size:40px !important;line-height:45px !important;}
.qcld_hero_content_area > .slider-x-item-title > p{font-size: 18px !important;line-height:normal;}	
} @media only screen and (min-width: 320px) and (max-width: 767px){
.slider_hero_btn_cls_one{padding: 2px;
min-width: 85px;
}
.hero_btn_cls_one2{padding: 2px;
min-width: 85px;
}
} .pentahedron {
position: absolute;
width: 100%;
height: 100%;
fill: #3E82F7;
}
.point {
fill: #8491A3;
}
.rhombus {
fill: #2DA94F;
stroke: #2DA94F;
}
.x {
fill: #FDBD00;
}
.circle {
fill: #ED412D;
} #threeD {
position: absolute;
z-index: 2;
} #slider_hero_mySVG{
position:absolute;
bottom: 0;
} .hero-random-shape:after {
font-family: FontAwesome;
content: "\f005";
}
@keyframes shape-1 {
0% {
transform: translate3d(0, 0, 0) rotate(301deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(661deg);
}
}
.hero-shape-container--1 {
animation: shape-1 44s linear infinite;
}
.hero-shape-container--1 .hero-random-shape:after {
margin: 7rem;
color: #DB7093;
font-size: 1.4rem;
content: "";
}
@keyframes shape-2 {
0% {
transform: translate3d(0, 0, 0) rotate(353deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(713deg);
}
}
.hero-shape-container--2 {
animation: shape-2 50s linear infinite;
}
.hero-shape-container--2 .hero-random-shape:after {
margin: 9rem;
color: #C2B7FE;
font-size: 1.8rem;
content: "";
}
@keyframes shape-3 {
0% {
transform: translate3d(0, 0, 0) rotate(6deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(366deg);
}
}
.hero-shape-container--3 {
animation: shape-3 50s linear infinite;
}
.hero-shape-container--3 .hero-random-shape:after {
margin: 3rem;
color: #DB7093;
font-size: 0.6rem;
content: "";
}
@keyframes shape-4 {
0% {
transform: translate3d(0, 0, 0) rotate(198deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(558deg);
}
}
.hero-shape-container--4 {
animation: shape-4 45s linear infinite;
}
.hero-shape-container--4 .hero-random-shape:after {
margin: 7rem;
color: #95A9FF;
font-size: 1.4rem;
content: "";
}
@keyframes shape-5 {
0% {
transform: translate3d(0, 0, 0) rotate(351deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(711deg);
}
}
.hero-shape-container--5 {
animation: shape-5 41s linear infinite;
}
.hero-shape-container--5 .hero-random-shape:after {
margin: 7rem;
color: #95A9FF;
font-size: 1.4rem;
content: "";
}
@keyframes shape-6 {
0% {
transform: translate3d(0, 0, 0) rotate(186deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(546deg);
}
}
.hero-shape-container--6 {
animation: shape-6 41s linear infinite;
}
.hero-shape-container--6 .hero-random-shape:after {
margin: 7rem;
color: #FFF8DC;
font-size: 1.4rem;
content: "";
}
@keyframes shape-7 {
0% {
transform: translate3d(0, 0, 0) rotate(27deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(387deg);
}
}
.hero-shape-container--7 {
animation: shape-7 41s linear infinite;
}
.hero-shape-container--7 .hero-random-shape:after {
margin: 2rem;
color: #FFD700;
font-size: 0.4rem;
content: "";
}
@keyframes shape-8 {
0% {
transform: translate3d(0, 0, 0) rotate(193deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(553deg);
}
}
.hero-shape-container--8 {
animation: shape-8 48s linear infinite;
}
.hero-shape-container--8 .hero-random-shape:after {
margin: 7rem;
color: #FFD700;
font-size: 1.4rem;
content: "";
}
@keyframes shape-9 {
0% {
transform: translate3d(0, 0, 0) rotate(273deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(633deg);
}
}
.hero-shape-container--9 {
animation: shape-9 50s linear infinite;
}
.hero-shape-container--9 .hero-random-shape:after {
margin: 1rem;
color: #DB7093;
font-size: 0.2rem;
content: "";
}
@keyframes shape-10 {
0% {
transform: translate3d(0, 0, 0) rotate(89deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(449deg);
}
}
.hero-shape-container--10 {
animation: shape-10 44s linear infinite;
}
.hero-shape-container--10 .hero-random-shape:after {
margin: 4rem;
color: #95A9FF;
font-size: 0.8rem;
content: "";
}
@keyframes shape-11 {
0% {
transform: translate3d(0, 0, 0) rotate(173deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(533deg);
}
}
.hero-shape-container--11 {
animation: shape-11 46s linear infinite;
}
.hero-shape-container--11 .hero-random-shape:after {
margin: 5rem;
color: #FFD700;
font-size: 1rem;
content: "";
}
@keyframes shape-12 {
0% {
transform: translate3d(0, 0, 0) rotate(184deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(544deg);
}
}
.hero-shape-container--12 {
animation: shape-12 47s linear infinite;
}
.hero-shape-container--12 .hero-random-shape:after {
margin: 4rem;
color: #C2B7FE;
font-size: 0.8rem;
content: "";
}
@keyframes shape-13 {
0% {
transform: translate3d(0, 0, 0) rotate(246deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(606deg);
}
}
.hero-shape-container--13 {
animation: shape-13 44s linear infinite;
}
.hero-shape-container--13 .hero-random-shape:after {
margin: 3rem;
color: #DB7093;
font-size: 0.6rem;
content: "";
}
@keyframes shape-14 {
0% {
transform: translate3d(0, 0, 0) rotate(20deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(380deg);
}
}
.hero-shape-container--14 {
animation: shape-14 48s linear infinite;
}
.hero-shape-container--14 .hero-random-shape:after {
margin: 3rem;
color: #FFD700;
font-size: 0.6rem;
content: "";
}
@keyframes shape-15 {
0% {
transform: translate3d(0, 0, 0) rotate(163deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(523deg);
}
}
.hero-shape-container--15 {
animation: shape-15 44s linear infinite;
}
.hero-shape-container--15 .hero-random-shape:after {
margin: 5rem;
color: #DB7093;
font-size: 1rem;
content: "";
}
@keyframes shape-16 {
0% {
transform: translate3d(0, 0, 0) rotate(166deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(526deg);
}
}
.hero-shape-container--16 {
animation: shape-16 50s linear infinite;
}
.hero-shape-container--16 .hero-random-shape:after {
margin: 3rem;
color: #95A9FF;
font-size: 0.6rem;
content: "";
}
@keyframes shape-17 {
0% {
transform: translate3d(0, 0, 0) rotate(43deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(403deg);
}
}
.hero-shape-container--17 {
animation: shape-17 43s linear infinite;
}
.hero-shape-container--17 .hero-random-shape:after {
margin: 1rem;
color: #DB7093;
font-size: 0.2rem;
content: "";
}
@keyframes shape-18 {
0% {
transform: translate3d(0, 0, 0) rotate(49deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(409deg);
}
}
.hero-shape-container--18 {
animation: shape-18 44s linear infinite;
}
.hero-shape-container--18 .hero-random-shape:after {
margin: 10rem;
color: #DB7093;
font-size: 2rem;
content: "";
}
@keyframes shape-19 {
0% {
transform: translate3d(0, 0, 0) rotate(281deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(641deg);
}
}
.hero-shape-container--19 {
animation: shape-19 41s linear infinite;
}
.hero-shape-container--19 .hero-random-shape:after {
margin: 8rem;
color: #95A9FF;
font-size: 1.6rem;
content: "";
}
@keyframes shape-20 {
0% {
transform: translate3d(0, 0, 0) rotate(147deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(507deg);
}
}
.hero-shape-container--20 {
animation: shape-20 41s linear infinite;
}
.hero-shape-container--20 .hero-random-shape:after {
margin: 6rem;
color: #C2B7FE;
font-size: 1.2rem;
content: "";
}
@keyframes shape-21 {
0% {
transform: translate3d(0, 0, 0) rotate(326deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(686deg);
}
}
.hero-shape-container--21 {
animation: shape-21 44s linear infinite;
}
.hero-shape-container--21 .hero-random-shape:after {
margin: 2rem;
color: #FFF8DC;
font-size: 0.4rem;
content: "";
}
@keyframes shape-22 {
0% {
transform: translate3d(0, 0, 0) rotate(85deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(445deg);
}
}
.hero-shape-container--22 {
animation: shape-22 47s linear infinite;
}
.hero-shape-container--22 .hero-random-shape:after {
margin: 10rem;
color: #C2B7FE;
font-size: 2rem;
content: "";
}
@keyframes shape-23 {
0% {
transform: translate3d(0, 0, 0) rotate(350deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(710deg);
}
}
.hero-shape-container--23 {
animation: shape-23 49s linear infinite;
}
.hero-shape-container--23 .hero-random-shape:after {
margin: 1rem;
color: #DB7093;
font-size: 0.2rem;
content: "";
}
@keyframes shape-24 {
0% {
transform: translate3d(0, 0, 0) rotate(338deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(698deg);
}
}
.hero-shape-container--24 {
animation: shape-24 49s linear infinite;
}
.hero-shape-container--24 .hero-random-shape:after {
margin: 6rem;
color: #FFD700;
font-size: 1.2rem;
content: "";
}
@keyframes shape-25 {
0% {
transform: translate3d(0, 0, 0) rotate(82deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(442deg);
}
}
.hero-shape-container--25 {
animation: shape-25 41s linear infinite;
}
.hero-shape-container--25 .hero-random-shape:after {
margin: 6rem;
color: #95A9FF;
font-size: 1.2rem;
content: "";
}
@keyframes shape-26 {
0% {
transform: translate3d(0, 0, 0) rotate(201deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(561deg);
}
}
.hero-shape-container--26 {
animation: shape-26 42s linear infinite;
}
.hero-shape-container--26 .hero-random-shape:after {
margin: 4rem;
color: #FFF8DC;
font-size: 0.8rem;
content: "";
}
@keyframes shape-27 {
0% {
transform: translate3d(0, 0, 0) rotate(239deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(599deg);
}
}
.hero-shape-container--27 {
animation: shape-27 50s linear infinite;
}
.hero-shape-container--27 .hero-random-shape:after {
margin: 9rem;
color: #95A9FF;
font-size: 1.8rem;
content: "";
}
@keyframes shape-28 {
0% {
transform: translate3d(0, 0, 0) rotate(313deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(673deg);
}
}
.hero-shape-container--28 {
animation: shape-28 42s linear infinite;
}
.hero-shape-container--28 .hero-random-shape:after {
margin: 7rem;
color: #FFF8DC;
font-size: 1.4rem;
content: "";
}
@keyframes shape-29 {
0% {
transform: translate3d(0, 0, 0) rotate(325deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(685deg);
}
}
.hero-shape-container--29 {
animation: shape-29 45s linear infinite;
}
.hero-shape-container--29 .hero-random-shape:after {
margin: 1rem;
color: #FFD700;
font-size: 0.2rem;
content: "";
}
@keyframes shape-30 {
0% {
transform: translate3d(0, 0, 0) rotate(153deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(513deg);
}
}
.hero-shape-container--30 {
animation: shape-30 44s linear infinite;
}
.hero-shape-container--30 .hero-random-shape:after {
margin: 1rem;
color: #FFD700;
font-size: 0.2rem;
content: "";
}
@keyframes shape-31 {
0% {
transform: translate3d(0, 0, 0) rotate(343deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(703deg);
}
}
.hero-shape-container--31 {
animation: shape-31 43s linear infinite;
}
.hero-shape-container--31 .hero-random-shape:after {
margin: 8rem;
color: #C2B7FE;
font-size: 1.6rem;
content: "";
}
@keyframes shape-32 {
0% {
transform: translate3d(0, 0, 0) rotate(283deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(643deg);
}
}
.hero-shape-container--32 {
animation: shape-32 47s linear infinite;
}
.hero-shape-container--32 .hero-random-shape:after {
margin: 3rem;
color: #DB7093;
font-size: 0.6rem;
content: "";
}
@keyframes shape-33 {
0% {
transform: translate3d(0, 0, 0) rotate(71deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(431deg);
}
}
.hero-shape-container--33 {
animation: shape-33 41s linear infinite;
}
.hero-shape-container--33 .hero-random-shape:after {
margin: 6rem;
color: #C2B7FE;
font-size: 1.2rem;
content: "";
}
@keyframes shape-34 {
0% {
transform: translate3d(0, 0, 0) rotate(331deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(691deg);
}
}
.hero-shape-container--34 {
animation: shape-34 50s linear infinite;
}
.hero-shape-container--34 .hero-random-shape:after {
margin: 10rem;
color: #95A9FF;
font-size: 2rem;
content: "";
}
@keyframes shape-35 {
0% {
transform: translate3d(0, 0, 0) rotate(309deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(669deg);
}
}
.hero-shape-container--35 {
animation: shape-35 47s linear infinite;
}
.hero-shape-container--35 .hero-random-shape:after {
margin: 9rem;
color: #FFF8DC;
font-size: 1.8rem;
content: "";
}
@keyframes shape-36 {
0% {
transform: translate3d(0, 0, 0) rotate(103deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(463deg);
}
}
.hero-shape-container--36 {
animation: shape-36 50s linear infinite;
}
.hero-shape-container--36 .hero-random-shape:after {
margin: 7rem;
color: #DB7093;
font-size: 1.4rem;
content: "";
}
@keyframes shape-37 {
0% {
transform: translate3d(0, 0, 0) rotate(186deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(546deg);
}
}
.hero-shape-container--37 {
animation: shape-37 45s linear infinite;
}
.hero-shape-container--37 .hero-random-shape:after {
margin: 7rem;
color: #C2B7FE;
font-size: 1.4rem;
content: "";
}
@keyframes shape-38 {
0% {
transform: translate3d(0, 0, 0) rotate(57deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(417deg);
}
}
.hero-shape-container--38 {
animation: shape-38 47s linear infinite;
}
.hero-shape-container--38 .hero-random-shape:after {
margin: 7rem;
color: #C2B7FE;
font-size: 1.4rem;
content: "";
}
@keyframes shape-39 {
0% {
transform: translate3d(0, 0, 0) rotate(274deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(634deg);
}
}
.hero-shape-container--39 {
animation: shape-39 49s linear infinite;
}
.hero-shape-container--39 .hero-random-shape:after {
margin: 4rem;
color: #DB7093;
font-size: 0.8rem;
content: "";
}
@keyframes shape-40 {
0% {
transform: translate3d(0, 0, 0) rotate(197deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(557deg);
}
}
.hero-shape-container--40 {
animation: shape-40 42s linear infinite;
}
.hero-shape-container--40 .hero-random-shape:after {
margin: 8rem;
color: #95A9FF;
font-size: 1.6rem;
content: "";
}
@keyframes shape-41 {
0% {
transform: translate3d(0, 0, 0) rotate(182deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(542deg);
}
}
.hero-shape-container--41 {
animation: shape-41 48s linear infinite;
}
.hero-shape-container--41 .hero-random-shape:after {
margin: 9rem;
color: #FFD700;
font-size: 1.8rem;
content: "";
}
@keyframes shape-42 {
0% {
transform: translate3d(0, 0, 0) rotate(248deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(608deg);
}
}
.hero-shape-container--42 {
animation: shape-42 42s linear infinite;
}
.hero-shape-container--42 .hero-random-shape:after {
margin: 3rem;
color: #FFD700;
font-size: 0.6rem;
content: "";
}
@keyframes shape-43 {
0% {
transform: translate3d(0, 0, 0) rotate(59deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(419deg);
}
}
.hero-shape-container--43 {
animation: shape-43 43s linear infinite;
}
.hero-shape-container--43 .hero-random-shape:after {
margin: 6rem;
color: #DB7093;
font-size: 1.2rem;
content: "";
}
@keyframes shape-44 {
0% {
transform: translate3d(0, 0, 0) rotate(56deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(416deg);
}
}
.hero-shape-container--44 {
animation: shape-44 44s linear infinite;
}
.hero-shape-container--44 .hero-random-shape:after {
margin: 5rem;
color: #FFF8DC;
font-size: 1rem;
content: "";
}
@keyframes shape-45 {
0% {
transform: translate3d(0, 0, 0) rotate(136deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(496deg);
}
}
.hero-shape-container--45 {
animation: shape-45 41s linear infinite;
}
.hero-shape-container--45 .hero-random-shape:after {
margin: 7rem;
color: #FFF8DC;
font-size: 1.4rem;
content: "";
}
@keyframes shape-46 {
0% {
transform: translate3d(0, 0, 0) rotate(212deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(572deg);
}
}
.hero-shape-container--46 {
animation: shape-46 49s linear infinite;
}
.hero-shape-container--46 .hero-random-shape:after {
margin: 1rem;
color: #FFF8DC;
font-size: 0.2rem;
content: "";
}
@keyframes shape-47 {
0% {
transform: translate3d(0, 0, 0) rotate(288deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(648deg);
}
}
.hero-shape-container--47 {
animation: shape-47 45s linear infinite;
}
.hero-shape-container--47 .hero-random-shape:after {
margin: 7rem;
color: #FFD700;
font-size: 1.4rem;
content: "";
}
@keyframes shape-48 {
0% {
transform: translate3d(0, 0, 0) rotate(52deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(412deg);
}
}
.hero-shape-container--48 {
animation: shape-48 48s linear infinite;
}
.hero-shape-container--48 .hero-random-shape:after {
margin: 4rem;
color: #FFF8DC;
font-size: 0.8rem;
content: "";
}
@keyframes shape-49 {
0% {
transform: translate3d(0, 0, 0) rotate(109deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(469deg);
}
}
.hero-shape-container--49 {
animation: shape-49 44s linear infinite;
}
.hero-shape-container--49 .hero-random-shape:after {
margin: 7rem;
color: #C2B7FE;
font-size: 1.4rem;
content: "";
}
@keyframes shape-50 {
0% {
transform: translate3d(0, 0, 0) rotate(242deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(602deg);
}
}
.hero-shape-container--50 {
animation: shape-50 48s linear infinite;
}
.hero-shape-container--50 .hero-random-shape:after {
margin: 3rem;
color: #DB7093;
font-size: 0.6rem;
content: "";
}
.stop-shape {
-webkit-animation-play-state: paused;
animation-play-state: paused;
} .hero_glitch_title { overflow: hidden;
color: transparent;
text-shadow: 0px 0px 3px #eee, 5px 5px 2px teal, -5px -2px 2px maroon;
font-weight: 400;
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
-moz-animation: shift 4s ease-in-out infinite alternate;
-webkit-animation: shift 4s ease-in-out infinite alternate;
animation: shift 4s ease-in-out infinite alternate;
}
@-moz-keyframes shift {
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
-moz-transform: skewX(0deg);
transform: skewX(0deg);
}
41% {
-moz-transform: skewX(10deg);
transform: skewX(10deg);
}
42% {
-moz-transform: skewX(-10deg);
transform: skewX(-10deg);
}
59% {
-moz-transform: skewX(40deg) skewY(10deg);
transform: skewX(40deg) skewY(10deg);
}
60% {
-moz-transform: skewX(-40deg) skewY(-10deg);
transform: skewX(-40deg) skewY(-10deg);
}
63% {
-moz-transform: skewX(10deg) skewY(-5deg);
transform: skewX(10deg) skewY(-5deg);
}
70% {
-moz-transform: skewX(-50deg) skewY(-20deg);
transform: skewX(-50deg) skewY(-20deg);
}
71% {
-moz-transform: skewX(10deg) skewY(-10deg);
transform: skewX(10deg) skewY(-10deg);
}
}
@-webkit-keyframes shift {
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
}
41% {
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
}
42% {
-webkit-transform: skewX(-10deg);
transform: skewX(-10deg);
}
59% {
-webkit-transform: skewX(40deg) skewY(10deg);
transform: skewX(40deg) skewY(10deg);
}
60% {
-webkit-transform: skewX(-40deg) skewY(-10deg);
transform: skewX(-40deg) skewY(-10deg);
}
63% {
-webkit-transform: skewX(10deg) skewY(-5deg);
transform: skewX(10deg) skewY(-5deg);
}
70% {
-webkit-transform: skewX(-50deg) skewY(-20deg);
transform: skewX(-50deg) skewY(-20deg);
}
71% {
-webkit-transform: skewX(10deg) skewY(-10deg);
transform: skewX(10deg) skewY(-10deg);
}
}
@keyframes shift {
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
}
41% {
-moz-transform: skewX(10deg);
-ms-transform: skewX(10deg);
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
}
42% {
-moz-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
-webkit-transform: skewX(-10deg);
transform: skewX(-10deg);
}
59% {
-moz-transform: skewX(40deg) skewY(10deg);
-ms-transform: skewX(40deg) skewY(10deg);
-webkit-transform: skewX(40deg) skewY(10deg);
transform: skewX(40deg) skewY(10deg);
}
60% {
-moz-transform: skewX(-40deg) skewY(-10deg);
-ms-transform: skewX(-40deg) skewY(-10deg);
-webkit-transform: skewX(-40deg) skewY(-10deg);
transform: skewX(-40deg) skewY(-10deg);
}
63% {
-moz-transform: skewX(10deg) skewY(-5deg);
-ms-transform: skewX(10deg) skewY(-5deg);
-webkit-transform: skewX(10deg) skewY(-5deg);
transform: skewX(10deg) skewY(-5deg);
}
70% {
-moz-transform: skewX(-50deg) skewY(-20deg);
-ms-transform: skewX(-50deg) skewY(-20deg);
-webkit-transform: skewX(-50deg) skewY(-20deg);
transform: skewX(-50deg) skewY(-20deg);
}
71% {
-moz-transform: skewX(10deg) skewY(-10deg);
-ms-transform: skewX(10deg) skewY(-10deg);
-webkit-transform: skewX(10deg) skewY(-10deg);
transform: skewX(10deg) skewY(-10deg);
}
} .hero_peeled_effect {
color: #fff;
font-family: Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif;
font-size: 30px;
font-weight: 700;
margin: 9px 0px;
}
.hero_peeled_effect span {
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500;
perspective: 500;
-webkit-font-smoothing: antialiased;
}
.hero_peeled_effect span::before,
.hero_peeled_effect span::after {
display: none;
position: absolute;
top: 0;
left: -1px;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transition: all ease-out 0.3s;
transition: all ease-out 0.3s;
content: attr(data-text);
}
.hero_peeled_effect span::before {
z-index: 1;
color: rgba(0,0,0,0.2);
-webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
transform: scale(1.1, 1) skew(0deg, 20deg);
}
.hero_peeled_effect span::after {
z-index: 2;
-webkit-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
.hero_peeled_effect span:hover::before {
-webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
transform: scale(1.1, 1) skew(0deg, 5deg);
}
.hero_peeled_effect span:hover::after {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
.hero_peeled_effect span + span {
margin-left: 0.3em;
}
.hero_peeled_effect {
font-size: 30px;
}
.hero_peeled_effect span::before,
.hero_peeled_effect span::after {
display: block;
} .hero_pretty_shadow {
width: 100%;
margin: 0px auto;
color: #2196f3;
font-size: 80px;
letter-spacing: 5px;
text-shadow: -1px -1px 0px #fff, 3px 3px 0px #fff, 6px 6px 0px #fff;
font-weight:bold;
} .anim-text-flow span,
.anim-text-flow-hover:hover span {
-webkit-animation-name: anim-text-flow-keys;
animation-name: anim-text-flow-keys;
-webkit-animation-duration: 50s;
animation-duration: 50s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes anim-text-flow-keys {
0% {
color: #d65cba;
}
5% {
color: #5cd6c6;
}
10% {
color: #afd65c;
}
15% {
color: #d6935c;
}
20% {
color: #d65cad;
}
25% {
color: #5cccd6;
}
30% {
color: #6c5cd6;
}
35% {
color: #d65cbe;
}
40% {
color: #ca5cd6;
}
45% {
color: #d65cd6;
}
50% {
color: #d65c68;
}
55% {
color: #5c9bd6;
}
60% {
color: #ccd65c;
}
65% {
color: #745cd6;
}
70% {
color: #5cd66a;
}
75% {
color: #d65c95;
}
80% {
color: #5cd66c;
}
85% {
color: #5c64d6;
}
90% {
color: #5ed65c;
}
95% {
color: #d6705c;
}
100% {
color: #5c5cd6;
}
}
@keyframes anim-text-flow-keys {
0% {
color: #d65cba;
}
5% {
color: #5cd6c6;
}
10% {
color: #afd65c;
}
15% {
color: #d6935c;
}
20% {
color: #d65cad;
}
25% {
color: #5cccd6;
}
30% {
color: #6c5cd6;
}
35% {
color: #d65cbe;
}
40% {
color: #ca5cd6;
}
45% {
color: #d65cd6;
}
50% {
color: #d65c68;
}
55% {
color: #5c9bd6;
}
60% {
color: #ccd65c;
}
65% {
color: #745cd6;
}
70% {
color: #5cd66a;
}
75% {
color: #d65c95;
}
80% {
color: #5cd66c;
}
85% {
color: #5c64d6;
}
90% {
color: #5ed65c;
}
95% {
color: #d6705c;
}
100% {
color: #5c5cd6;
}
}
.anim-text-flow span:nth-of-type(1),
.anim-text-flow-hover:hover span:nth-of-type(1) {
-webkit-animation-delay: -19.8s;
animation-delay: -19.8s;
}
.anim-text-flow span:nth-of-type(2),
.anim-text-flow-hover:hover span:nth-of-type(2) {
-webkit-animation-delay: -19.6s;
animation-delay: -19.6s;
}
.anim-text-flow span:nth-of-type(3),
.anim-text-flow-hover:hover span:nth-of-type(3) {
-webkit-animation-delay: -19.4s;
animation-delay: -19.4s;
}
.anim-text-flow span:nth-of-type(4),
.anim-text-flow-hover:hover span:nth-of-type(4) {
-webkit-animation-delay: -19.2s;
animation-delay: -19.2s;
}
.anim-text-flow span:nth-of-type(5),
.anim-text-flow-hover:hover span:nth-of-type(5) {
-webkit-animation-delay: -19s;
animation-delay: -19s;
}
.anim-text-flow span:nth-of-type(6),
.anim-text-flow-hover:hover span:nth-of-type(6) {
-webkit-animation-delay: -18.8s;
animation-delay: -18.8s;
}
.anim-text-flow span:nth-of-type(7),
.anim-text-flow-hover:hover span:nth-of-type(7) {
-webkit-animation-delay: -18.6s;
animation-delay: -18.6s;
}
.anim-text-flow span:nth-of-type(8),
.anim-text-flow-hover:hover span:nth-of-type(8) {
-webkit-animation-delay: -18.4s;
animation-delay: -18.4s;
}
.anim-text-flow span:nth-of-type(9),
.anim-text-flow-hover:hover span:nth-of-type(9) {
-webkit-animation-delay: -18.2s;
animation-delay: -18.2s;
}
.anim-text-flow span:nth-of-type(10),
.anim-text-flow-hover:hover span:nth-of-type(10) {
-webkit-animation-delay: -18s;
animation-delay: -18s;
}
.anim-text-flow span:nth-of-type(11),
.anim-text-flow-hover:hover span:nth-of-type(11) {
-webkit-animation-delay: -17.8s;
animation-delay: -17.8s;
}
.anim-text-flow span:nth-of-type(12),
.anim-text-flow-hover:hover span:nth-of-type(12) {
-webkit-animation-delay: -17.6s;
animation-delay: -17.6s;
}
.anim-text-flow span:nth-of-type(13),
.anim-text-flow-hover:hover span:nth-of-type(13) {
-webkit-animation-delay: -17.4s;
animation-delay: -17.4s;
}
.anim-text-flow span:nth-of-type(14),
.anim-text-flow-hover:hover span:nth-of-type(14) {
-webkit-animation-delay: -17.2s;
animation-delay: -17.2s;
}
.anim-text-flow span:nth-of-type(15),
.anim-text-flow-hover:hover span:nth-of-type(15) {
-webkit-animation-delay: -17s;
animation-delay: -17s;
}
.anim-text-flow span:nth-of-type(16),
.anim-text-flow-hover:hover span:nth-of-type(16) {
-webkit-animation-delay: -16.8s;
animation-delay: -16.8s;
}
.anim-text-flow span:nth-of-type(17),
.anim-text-flow-hover:hover span:nth-of-type(17) {
-webkit-animation-delay: -16.6s;
animation-delay: -16.6s;
}
.anim-text-flow span:nth-of-type(18),
.anim-text-flow-hover:hover span:nth-of-type(18) {
-webkit-animation-delay: -16.4s;
animation-delay: -16.4s;
}
.anim-text-flow span:nth-of-type(19),
.anim-text-flow-hover:hover span:nth-of-type(19) {
-webkit-animation-delay: -16.2s;
animation-delay: -16.2s;
}
.anim-text-flow span:nth-of-type(20),
.anim-text-flow-hover:hover span:nth-of-type(20) {
-webkit-animation-delay: -16s;
animation-delay: -16s;
}
.anim-text-flow span:nth-of-type(21),
.anim-text-flow-hover:hover span:nth-of-type(21) {
-webkit-animation-delay: -15.8s;
animation-delay: -15.8s;
}
.anim-text-flow span:nth-of-type(22),
.anim-text-flow-hover:hover span:nth-of-type(22) {
-webkit-animation-delay: -15.6s;
animation-delay: -15.6s;
}
.anim-text-flow span:nth-of-type(23),
.anim-text-flow-hover:hover span:nth-of-type(23) {
-webkit-animation-delay: -15.4s;
animation-delay: -15.4s;
}
.anim-text-flow span:nth-of-type(24),
.anim-text-flow-hover:hover span:nth-of-type(24) {
-webkit-animation-delay: -15.2s;
animation-delay: -15.2s;
}
.anim-text-flow span:nth-of-type(25),
.anim-text-flow-hover:hover span:nth-of-type(25) {
-webkit-animation-delay: -15s;
animation-delay: -15s;
}
.anim-text-flow span:nth-of-type(26),
.anim-text-flow-hover:hover span:nth-of-type(26) {
-webkit-animation-delay: -14.8s;
animation-delay: -14.8s;
}
.anim-text-flow span:nth-of-type(27),
.anim-text-flow-hover:hover span:nth-of-type(27) {
-webkit-animation-delay: -14.6s;
animation-delay: -14.6s;
}
.anim-text-flow span:nth-of-type(28),
.anim-text-flow-hover:hover span:nth-of-type(28) {
-webkit-animation-delay: -14.4s;
animation-delay: -14.4s;
}
.anim-text-flow span:nth-of-type(29),
.anim-text-flow-hover:hover span:nth-of-type(29) {
-webkit-animation-delay: -14.2s;
animation-delay: -14.2s;
}
.anim-text-flow span:nth-of-type(30),
.anim-text-flow-hover:hover span:nth-of-type(30) {
-webkit-animation-delay: -14s;
animation-delay: -14s;
}
.anim-text-flow span:nth-of-type(31),
.anim-text-flow-hover:hover span:nth-of-type(31) {
-webkit-animation-delay: -13.8s;
animation-delay: -13.8s;
}
.anim-text-flow span:nth-of-type(32),
.anim-text-flow-hover:hover span:nth-of-type(32) {
-webkit-animation-delay: -13.6s;
animation-delay: -13.6s;
}
.anim-text-flow span:nth-of-type(33),
.anim-text-flow-hover:hover span:nth-of-type(33) {
-webkit-animation-delay: -13.4s;
animation-delay: -13.4s;
}
.anim-text-flow span:nth-of-type(34),
.anim-text-flow-hover:hover span:nth-of-type(34) {
-webkit-animation-delay: -13.2s;
animation-delay: -13.2s;
}
.anim-text-flow span:nth-of-type(35),
.anim-text-flow-hover:hover span:nth-of-type(35) {
-webkit-animation-delay: -13s;
animation-delay: -13s;
}
.anim-text-flow span:nth-of-type(36),
.anim-text-flow-hover:hover span:nth-of-type(36) {
-webkit-animation-delay: -12.8s;
animation-delay: -12.8s;
}
.anim-text-flow span:nth-of-type(37),
.anim-text-flow-hover:hover span:nth-of-type(37) {
-webkit-animation-delay: -12.6s;
animation-delay: -12.6s;
}
.anim-text-flow span:nth-of-type(38),
.anim-text-flow-hover:hover span:nth-of-type(38) {
-webkit-animation-delay: -12.4s;
animation-delay: -12.4s;
}
.anim-text-flow span:nth-of-type(39),
.anim-text-flow-hover:hover span:nth-of-type(39) {
-webkit-animation-delay: -12.2s;
animation-delay: -12.2s;
}
.anim-text-flow span:nth-of-type(40),
.anim-text-flow-hover:hover span:nth-of-type(40) {
-webkit-animation-delay: -12s;
animation-delay: -12s;
}
.anim-text-flow span:nth-of-type(41),
.anim-text-flow-hover:hover span:nth-of-type(41) {
-webkit-animation-delay: -11.8s;
animation-delay: -11.8s;
}
.anim-text-flow span:nth-of-type(42),
.anim-text-flow-hover:hover span:nth-of-type(42) {
-webkit-animation-delay: -11.6s;
animation-delay: -11.6s;
}
.anim-text-flow span:nth-of-type(43),
.anim-text-flow-hover:hover span:nth-of-type(43) {
-webkit-animation-delay: -11.4s;
animation-delay: -11.4s;
}
.anim-text-flow span:nth-of-type(44),
.anim-text-flow-hover:hover span:nth-of-type(44) {
-webkit-animation-delay: -11.2s;
animation-delay: -11.2s;
}
.anim-text-flow span:nth-of-type(45),
.anim-text-flow-hover:hover span:nth-of-type(45) {
-webkit-animation-delay: -11s;
animation-delay: -11s;
}
.anim-text-flow span:nth-of-type(46),
.anim-text-flow-hover:hover span:nth-of-type(46) {
-webkit-animation-delay: -10.8s;
animation-delay: -10.8s;
}
.anim-text-flow span:nth-of-type(47),
.anim-text-flow-hover:hover span:nth-of-type(47) {
-webkit-animation-delay: -10.6s;
animation-delay: -10.6s;
}
.anim-text-flow span:nth-of-type(48),
.anim-text-flow-hover:hover span:nth-of-type(48) {
-webkit-animation-delay: -10.4s;
animation-delay: -10.4s;
}
.anim-text-flow span:nth-of-type(49),
.anim-text-flow-hover:hover span:nth-of-type(49) {
-webkit-animation-delay: -10.2s;
animation-delay: -10.2s;
}
.anim-text-flow span:nth-of-type(50),
.anim-text-flow-hover:hover span:nth-of-type(50) {
-webkit-animation-delay: -10s;
animation-delay: -10s;
}
.anim-text-flow span:nth-of-type(51),
.anim-text-flow-hover:hover span:nth-of-type(51) {
-webkit-animation-delay: -9.8s;
animation-delay: -9.8s;
}
.anim-text-flow span:nth-of-type(52),
.anim-text-flow-hover:hover span:nth-of-type(52) {
-webkit-animation-delay: -9.6s;
animation-delay: -9.6s;
}
.anim-text-flow span:nth-of-type(53),
.anim-text-flow-hover:hover span:nth-of-type(53) {
-webkit-animation-delay: -9.4s;
animation-delay: -9.4s;
}
.anim-text-flow span:nth-of-type(54),
.anim-text-flow-hover:hover span:nth-of-type(54) {
-webkit-animation-delay: -9.2s;
animation-delay: -9.2s;
}
.anim-text-flow span:nth-of-type(55),
.anim-text-flow-hover:hover span:nth-of-type(55) {
-webkit-animation-delay: -9s;
animation-delay: -9s;
}
.anim-text-flow span:nth-of-type(56),
.anim-text-flow-hover:hover span:nth-of-type(56) {
-webkit-animation-delay: -8.8s;
animation-delay: -8.8s;
}
.anim-text-flow span:nth-of-type(57),
.anim-text-flow-hover:hover span:nth-of-type(57) {
-webkit-animation-delay: -8.6s;
animation-delay: -8.6s;
}
.anim-text-flow span:nth-of-type(58),
.anim-text-flow-hover:hover span:nth-of-type(58) {
-webkit-animation-delay: -8.4s;
animation-delay: -8.4s;
}
.anim-text-flow span:nth-of-type(59),
.anim-text-flow-hover:hover span:nth-of-type(59) {
-webkit-animation-delay: -8.2s;
animation-delay: -8.2s;
}
.anim-text-flow span:nth-of-type(60),
.anim-text-flow-hover:hover span:nth-of-type(60) {
-webkit-animation-delay: -8s;
animation-delay: -8s;
}
.anim-text-flow span:nth-of-type(61),
.anim-text-flow-hover:hover span:nth-of-type(61) {
-webkit-animation-delay: -7.8s;
animation-delay: -7.8s;
}
.anim-text-flow span:nth-of-type(62),
.anim-text-flow-hover:hover span:nth-of-type(62) {
-webkit-animation-delay: -7.6s;
animation-delay: -7.6s;
}
.anim-text-flow span:nth-of-type(63),
.anim-text-flow-hover:hover span:nth-of-type(63) {
-webkit-animation-delay: -7.4s;
animation-delay: -7.4s;
}
.anim-text-flow span:nth-of-type(64),
.anim-text-flow-hover:hover span:nth-of-type(64) {
-webkit-animation-delay: -7.2s;
animation-delay: -7.2s;
}
.anim-text-flow span:nth-of-type(65),
.anim-text-flow-hover:hover span:nth-of-type(65) {
-webkit-animation-delay: -7s;
animation-delay: -7s;
}
.anim-text-flow span:nth-of-type(66),
.anim-text-flow-hover:hover span:nth-of-type(66) {
-webkit-animation-delay: -6.8s;
animation-delay: -6.8s;
}
.anim-text-flow span:nth-of-type(67),
.anim-text-flow-hover:hover span:nth-of-type(67) {
-webkit-animation-delay: -6.6s;
animation-delay: -6.6s;
}
.anim-text-flow span:nth-of-type(68),
.anim-text-flow-hover:hover span:nth-of-type(68) {
-webkit-animation-delay: -6.4s;
animation-delay: -6.4s;
}
.anim-text-flow span:nth-of-type(69),
.anim-text-flow-hover:hover span:nth-of-type(69) {
-webkit-animation-delay: -6.2s;
animation-delay: -6.2s;
}
.anim-text-flow span:nth-of-type(70),
.anim-text-flow-hover:hover span:nth-of-type(70) {
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
.anim-text-flow span:nth-of-type(71),
.anim-text-flow-hover:hover span:nth-of-type(71) {
-webkit-animation-delay: -5.8s;
animation-delay: -5.8s;
}
.anim-text-flow span:nth-of-type(72),
.anim-text-flow-hover:hover span:nth-of-type(72) {
-webkit-animation-delay: -5.6s;
animation-delay: -5.6s;
}
.anim-text-flow span:nth-of-type(73),
.anim-text-flow-hover:hover span:nth-of-type(73) {
-webkit-animation-delay: -5.4s;
animation-delay: -5.4s;
}
.anim-text-flow span:nth-of-type(74),
.anim-text-flow-hover:hover span:nth-of-type(74) {
-webkit-animation-delay: -5.2s;
animation-delay: -5.2s;
}
.anim-text-flow span:nth-of-type(75),
.anim-text-flow-hover:hover span:nth-of-type(75) {
-webkit-animation-delay: -5s;
animation-delay: -5s;
}
.anim-text-flow span:nth-of-type(76),
.anim-text-flow-hover:hover span:nth-of-type(76) {
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.anim-text-flow span:nth-of-type(77),
.anim-text-flow-hover:hover span:nth-of-type(77) {
-webkit-animation-delay: -4.6s;
animation-delay: -4.6s;
}
.anim-text-flow span:nth-of-type(78),
.anim-text-flow-hover:hover span:nth-of-type(78) {
-webkit-animation-delay: -4.4s;
animation-delay: -4.4s;
}
.anim-text-flow span:nth-of-type(79),
.anim-text-flow-hover:hover span:nth-of-type(79) {
-webkit-animation-delay: -4.2s;
animation-delay: -4.2s;
}
.anim-text-flow span:nth-of-type(80),
.anim-text-flow-hover:hover span:nth-of-type(80) {
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.anim-text-flow span:nth-of-type(81),
.anim-text-flow-hover:hover span:nth-of-type(81) {
-webkit-animation-delay: -3.8s;
animation-delay: -3.8s;
}
.anim-text-flow span:nth-of-type(82),
.anim-text-flow-hover:hover span:nth-of-type(82) {
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.anim-text-flow span:nth-of-type(83),
.anim-text-flow-hover:hover span:nth-of-type(83) {
-webkit-animation-delay: -3.4s;
animation-delay: -3.4s;
}
.anim-text-flow span:nth-of-type(84),
.anim-text-flow-hover:hover span:nth-of-type(84) {
-webkit-animation-delay: -3.2s;
animation-delay: -3.2s;
}
.anim-text-flow span:nth-of-type(85),
.anim-text-flow-hover:hover span:nth-of-type(85) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
.anim-text-flow span:nth-of-type(86),
.anim-text-flow-hover:hover span:nth-of-type(86) {
-webkit-animation-delay: -2.8s;
animation-delay: -2.8s;
}
.anim-text-flow span:nth-of-type(87),
.anim-text-flow-hover:hover span:nth-of-type(87) {
-webkit-animation-delay: -2.6s;
animation-delay: -2.6s;
}
.anim-text-flow span:nth-of-type(88),
.anim-text-flow-hover:hover span:nth-of-type(88) {
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.anim-text-flow span:nth-of-type(89),
.anim-text-flow-hover:hover span:nth-of-type(89) {
-webkit-animation-delay: -2.2s;
animation-delay: -2.2s;
}
.anim-text-flow span:nth-of-type(90),
.anim-text-flow-hover:hover span:nth-of-type(90) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.anim-text-flow span:nth-of-type(91),
.anim-text-flow-hover:hover span:nth-of-type(91) {
-webkit-animation-delay: -1.8s;
animation-delay: -1.8s;
}
.anim-text-flow span:nth-of-type(92),
.anim-text-flow-hover:hover span:nth-of-type(92) {
-webkit-animation-delay: -1.6s;
animation-delay: -1.6s;
}
.anim-text-flow span:nth-of-type(93),
.anim-text-flow-hover:hover span:nth-of-type(93) {
-webkit-animation-delay: -1.4s;
animation-delay: -1.4s;
}
.anim-text-flow span:nth-of-type(94),
.anim-text-flow-hover:hover span:nth-of-type(94) {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.anim-text-flow span:nth-of-type(95),
.anim-text-flow-hover:hover span:nth-of-type(95) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.anim-text-flow span:nth-of-type(96),
.anim-text-flow-hover:hover span:nth-of-type(96) {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.anim-text-flow span:nth-of-type(97),
.anim-text-flow-hover:hover span:nth-of-type(97) {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.anim-text-flow span:nth-of-type(98),
.anim-text-flow-hover:hover span:nth-of-type(98) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.anim-text-flow span:nth-of-type(99),
.anim-text-flow-hover:hover span:nth-of-type(99) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.anim-text-flow span:nth-of-type(100),
.anim-text-flow-hover:hover span:nth-of-type(100) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.anim-text-flow {
display: block;
} @-moz-keyframes heroglitchtext {
0% {
-moz-transform: skew(5deg);
transform: skew(5deg);
}
5% {
-moz-transform: skew(68deg);
transform: skew(68deg);
}
10% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
15% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
20% {
-moz-transform: skew(65deg);
transform: skew(65deg);
}
25% {
-moz-transform: skew(14deg);
transform: skew(14deg);
}
30% {
-moz-transform: skew(-6deg);
transform: skew(-6deg);
}
35% {
-moz-transform: skew(-14deg);
transform: skew(-14deg);
}
40% {
-moz-transform: skew(29deg);
transform: skew(29deg);
}
45% {
-moz-transform: skew(33deg);
transform: skew(33deg);
}
50% {
-moz-transform: skew(-71deg);
transform: skew(-71deg);
}
55% {
-moz-transform: skew(47deg);
transform: skew(47deg);
}
60% {
-moz-transform: skew(-2deg);
transform: skew(-2deg);
}
65% {
-moz-transform: skew(36deg);
transform: skew(36deg);
}
70% {
-moz-transform: skew(2deg);
transform: skew(2deg);
}
75% {
-moz-transform: skew(49deg);
transform: skew(49deg);
}
80% {
-moz-transform: skew(-31deg);
transform: skew(-31deg);
}
85% {
-moz-transform: skew(20deg);
transform: skew(20deg);
}
90% {
-moz-transform: skew(-69deg);
transform: skew(-69deg);
}
95% {
-moz-transform: skew(5deg);
transform: skew(5deg);
}
}
@-webkit-keyframes heroglitchtext {
0% {
-webkit-transform: skew(-36deg);
transform: skew(-36deg);
}
5% {
-webkit-transform: skew(-61deg);
transform: skew(-61deg);
}
10% {
-webkit-transform: skew(90deg);
transform: skew(90deg);
}
15% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
20% {
-webkit-transform: skew(47deg);
transform: skew(47deg);
}
25% {
-webkit-transform: skew(13deg);
transform: skew(13deg);
}
30% {
-webkit-transform: skew(-85deg);
transform: skew(-85deg);
}
35% {
-webkit-transform: skew(74deg);
transform: skew(74deg);
}
40% {
-webkit-transform: skew(2deg);
transform: skew(2deg);
}
45% {
-webkit-transform: skew(82deg);
transform: skew(82deg);
}
50% {
-webkit-transform: skew(-47deg);
transform: skew(-47deg);
}
55% {
-webkit-transform: skew(21deg);
transform: skew(21deg);
}
60% {
-webkit-transform: skew(0deg);
transform: skew(0deg);
}
65% {
-webkit-transform: skew(7deg);
transform: skew(7deg);
}
70% {
-webkit-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
80% {
-webkit-transform: skew(-33deg);
transform: skew(-33deg);
}
85% {
-webkit-transform: skew(-52deg);
transform: skew(-52deg);
}
90% {
-webkit-transform: skew(-22deg);
transform: skew(-22deg);
}
95% {
-webkit-transform: skew(-72deg);
transform: skew(-72deg);
}
}
@keyframes heroglitchtext {
0% {
-moz-transform: skew(-5deg);
-ms-transform: skew(-5deg);
-webkit-transform: skew(-5deg);
transform: skew(-5deg);
}
5% {
-moz-transform: skew(-65deg);
-ms-transform: skew(-65deg);
-webkit-transform: skew(-65deg);
transform: skew(-65deg);
}
10% {
-moz-transform: skew(80deg);
-ms-transform: skew(80deg);
-webkit-transform: skew(80deg);
transform: skew(80deg);
}
15% {
-moz-transform: skew(90deg);
-ms-transform: skew(90deg);
-webkit-transform: skew(90deg);
transform: skew(90deg);
}
20% {
-moz-transform: skew(79deg);
-ms-transform: skew(79deg);
-webkit-transform: skew(79deg);
transform: skew(79deg);
}
25% {
-moz-transform: skew(-26deg);
-ms-transform: skew(-26deg);
-webkit-transform: skew(-26deg);
transform: skew(-26deg);
}
30% {
-moz-transform: skew(5deg);
-ms-transform: skew(5deg);
-webkit-transform: skew(5deg);
transform: skew(5deg);
}
35% {
-moz-transform: skew(-35deg);
-ms-transform: skew(-35deg);
-webkit-transform: skew(-35deg);
transform: skew(-35deg);
}
40% {
-moz-transform: skew(13deg);
-ms-transform: skew(13deg);
-webkit-transform: skew(13deg);
transform: skew(13deg);
}
45% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
50% {
-moz-transform: skew(82deg);
-ms-transform: skew(82deg);
-webkit-transform: skew(82deg);
transform: skew(82deg);
}
55% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
60% {
-moz-transform: skew(68deg);
-ms-transform: skew(68deg);
-webkit-transform: skew(68deg);
transform: skew(68deg);
}
65% {
-moz-transform: skew(-44deg);
-ms-transform: skew(-44deg);
-webkit-transform: skew(-44deg);
transform: skew(-44deg);
}
70% {
-moz-transform: skew(-65deg);
-ms-transform: skew(-65deg);
-webkit-transform: skew(-65deg);
transform: skew(-65deg);
}
75% {
-moz-transform: skew(-65deg);
-ms-transform: skew(-65deg);
-webkit-transform: skew(-65deg);
transform: skew(-65deg);
}
80% {
-moz-transform: skew(-59deg);
-ms-transform: skew(-59deg);
-webkit-transform: skew(-59deg);
transform: skew(-59deg);
}
85% {
-moz-transform: skew(73deg);
-ms-transform: skew(73deg);
-webkit-transform: skew(73deg);
transform: skew(73deg);
}
90% {
-moz-transform: skew(38deg);
-ms-transform: skew(38deg);
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
95% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
}
.hero_glitch_text {
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
text-shadow: 2px 0 1px rgba(223, 150, 151, 0.96), -2px 0 1px #73cece;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
font-weight:bold;
}
.hero_glitch_text{
display: inline-block;
vertical-align: middle; z-index: 1;
-moz-animation: heroglitchtext 4s infinite alternate;
-webkit-animation: heroglitchtext 4s infinite alternate;
animation: heroglitchtext 4s infinite alternate;
} .hero_svg_style{
height: 50px;
width: auto;
}
.hero-text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 1px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.hero-text-copy:nth-child(1){
stroke: #4D163D;
animation-delay: -1;
}
.hero-text-copy:nth-child(2){
stroke: #840037;
animation-delay: -2s;
}
.hero-text-copy:nth-child(3){
stroke: #BD0034;
animation-delay: -3s;
}
.hero-text-copy:nth-child(4){
stroke: #BD0034;
animation-delay: -4s;
}
.hero-text-copy:nth-child(5){
stroke: #FDB731;
animation-delay: -5s;
}
@keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
} .hero_happy_text {
font-size: 50px;
font-weight: normal;
}
.hero_happy_text span { display:inline-block; animation:float .2s ease-in-out infinite; }
@keyframes float {
0%,100%{ transform:none; }
33%{ transform:translateY(-1px) rotate(-2deg); }
66%{ transform:translateY(1px) rotate(2deg); }
}
.hero_happy_text:hover span { animation:bounce .6s; }
@keyframes bounce {
0%,100%{ transform:translate(0); }
25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}
.hero_happy_text span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
.hero_happy_text span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
.hero_happy_text span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
.hero_happy_text span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }
.hero_happy_text span:nth-child(2){ animation-delay:.05s; }
.hero_happy_text span:nth-child(3){ animation-delay:.1s; }
.hero_happy_text span:nth-child(4){ animation-delay:.15s; }
.hero_happy_text span:nth-child(5){ animation-delay:.2s; }
.hero_happy_text span:nth-child(6){ animation-delay:.25s; }
.hero_happy_text span:nth-child(7){ animation-delay:.3s; }
.hero_happy_text span:nth-child(8){ animation-delay:.35s; }
.hero_happy_text span:nth-child(9){ animation-delay:.4s; }
.hero_happy_text span:nth-child(10){ animation-delay:.45s; }
.hero_happy_text span:nth-child(11){ animation-delay:.5s; }
.hero_happy_text span:nth-child(12){ animation-delay:.55s; }
.hero_happy_text span:nth-child(13){ animation-delay:.6s; }
.hero_happy_text span:nth-child(14){ animation-delay:.65s; }
.hero_happy_text span:nth-child(15){ animation-delay:.7s; }
.hero_happy_text span:nth-child(16){ animation-delay:.75s; }
.hero_happy_text span:nth-child(17){ animation-delay:.8s; }
.hero_happy_text span:nth-child(18){ animation-delay:.85s; }
.hero_happy_text span:nth-child(19){ animation-delay:.9s; }
.hero_happy_text span:nth-child(20){ animation-delay:.95s; }
.hero_happy_text span:nth-child(21){ animation-delay:1s; }
.hero_happy_text span:nth-child(22){ animation-delay:1.5s; }
.hero_happy_text span:nth-child(23){ animation-delay:1.6s; }
.hero_happy_text span:nth-child(24){ animation-delay:1.8s; } .hero_animated_fill{
font-size:50px;
letter-spacing: 0;
padding: .25em 0 .325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite; -webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
} @-webkit-keyframes aitf {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
} .slider_hero_walkingbackground:before {
position: absolute;
z-index: -10;
width: 140%;
height: 140%;
bottom: 0;
left: -20%;
right: 0;
content: '';
background-position: center center;
background-size: 50%;
-moz-transform: perspective(45em) rotateX(45deg);
-o-transform: perspective(45em) rotateX(45deg);
-webkit-transform: perspective(45em) rotateX(45deg);
-ms-transform: perspective(45em) rotateX(45deg);
transform: perspective(45em) rotateX(45deg);
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation-name: splash;
-moz-animation-name: splash;
-o-animation-name: splash;
-ms-animation-name: splash;
animation-name: splash;
-ms-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
-webkit-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
-moz-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
-o-transition: opacity 30s ease-in-out, transform 5s ease-in-out;
transition: opacity 30s ease-in-out, transform 5s ease-in-out;  
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
-ms-animation-duration: 60s;
-o-animation-duration: 60s;
animation-duration: 60s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 1;
}  @-webkit-keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -1920px 1152px;
}
}
@keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -1920px 1152px;
}
}
@keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -1152px;
}
}
@-moz-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -1152px;
}
}
@-webkit-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -1152px;
}
}
@-ms-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-o-keyframes splash {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
} .confetti {
-webkit-animation: move 6s linear infinite, color 1s linear infinite, opacity 6s linear infinite;
animation: move 6s linear infinite, color 1s linear infinite, opacity 6s linear infinite;
}
.confetti:nth-child(1) {
fill: #b83014;
-webkit-animation-delay: -3.72s;
animation-delay: -3.72s;
--dark: #5c180a;
--tilt: 0.35;
}
.confetti:nth-child(2) {
fill: #b84b14;
-webkit-animation-delay: -1.68s;
animation-delay: -1.68s;
--dark: #5c250a;
--tilt: 0.41;
}
.confetti:nth-child(3) {
fill: #b86614;
-webkit-animation-delay: -5.76s;
animation-delay: -5.76s;
--dark: #5c330a;
--tilt: 0.42;
}
.confetti:nth-child(4) {
fill: #b88114;
-webkit-animation-delay: -12.24s;
animation-delay: -12.24s;
--dark: #5c410a;
--tilt: 0.59;
}
.confetti:nth-child(5) {
fill: #b89c14;
-webkit-animation-delay: -24s;
animation-delay: -24s;
--dark: #5c4e0a;
--tilt: 0.81;
}
.confetti:nth-child(6) {
fill: #b8b814;
-webkit-animation-delay: -33.84s;
animation-delay: -33.84s;
--dark: #5c5c0a;
--tilt: 0.06;
}
.confetti:nth-child(7) {
fill: #9cb814;
-webkit-animation-delay: -15.54s;
animation-delay: -15.54s;
--dark: #4e5c0a;
--tilt: 0.93;
}
.confetti:nth-child(8) {
fill: #81b814;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
--dark: #415c0a;
--tilt: 0.12;
}
.confetti:nth-child(9) {
fill: #66b814;
-webkit-animation-delay: -9.72s;
animation-delay: -9.72s;
--dark: #335c0a;
--tilt: 0.84;
}
.confetti:nth-child(10) {
fill: #4bb814;
-webkit-animation-delay: -19.8s;
animation-delay: -19.8s;
--dark: #255c0a;
--tilt: 0.16;
}
@-webkit-keyframes move {
100% {
-webkit-transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
}
}
@keyframes move {
100% {
-webkit-transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
transform: translate(100px, 1000px) rotate3D(1, var(--tilt), 0.21, 2160deg);
}
}
@-webkit-keyframes color {
50% {
fill: var(--dark);
}
}
@keyframes color {
50% {
fill: var(--dark);
}
}
@-webkit-keyframes opacity {
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes opacity {
50% {
opacity: 1;
}
100% {
opacity: 0;
}
} @keyframes bp {
0% {
background-color: ivory;
background-position:  200px 0;
}
25% {
background-color: white;
background-position:  150px 50px;
}
50% {
background-color: ivory;
background-position:  100px 100px;
}
75% {
background-color: white;
background-position:  50px 150px;
}
100% {
background-color: ivory;
background-position:  0 200px;
}
}   @-webkit-keyframes hero_background_image_opacity {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 1 }
100% { opacity: 1 }
} @keyframes hero_background_image_opacity {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 1 }
100% { opacity: 1 }
} @-webkit-keyframes hero_background_image_opacity_out {
0% { opacity: 1;
animation-timing-function: ease-in; }
8% { opacity: 0.8;
animation-timing-function: ease-out; }
17% { opacity: 0.5 }
25% { opacity: 0.2 }
100% { opacity: 0 }
} @keyframes hero_background_image_opacity_out {
0% { opacity: 1;
animation-timing-function: ease-in; }
8% { opacity: 0.8;
animation-timing-function: ease-out; }
17% { opacity: 0.5 }
25% { opacity: 0.2 }
100% { opacity: 0 }
}  @-webkit-keyframes hero_background_image_zoom {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 0.5;
-webkit-transform: scale(1.01);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.04);
}
25% {
opacity: 1;
-webkit-transform: scale(1.05);
}
100% { opacity: 1 }
} @keyframes hero_background_image_zoom {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 0.5;
transform: scale(1.01);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.04);
}
25% {
opacity: 1;
transform: scale(1.05);
}
100% { opacity: 1 }
} @-webkit-keyframes hero_background_image_zoom_out {
0% {
opacity: 1;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(0.9);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 0.8;
-webkit-transform: scale(0.8);
}
25% {
opacity: 0.4;
-webkit-transform: scale(0.8);
}
100% { opacity: 0 }
} @keyframes hero_background_image_zoom_out {
0% {
opacity: 1;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(0.9);
animation-timing-function: ease-out;
}
17% {
opacity: 0.8;
transform: scale(0.8);
}
25% {
opacity: 0.4;
transform: scale(0.8);
}
100% { opacity: 0 }
} .hero_loader,
.hero_loader {
height: 50px;
width: 50px;
position: relative;
}
.hero_loader::after, .hero_loader::before,
.hero_loader::after,
.hero_loader::before {
content: "";
width: 50px;
height: 50px;
position: absolute;
border: solid 8px transparent;
border-radius: 50%;
-webkit-animation: wiggle 1.4s ease infinite;
animation: wiggle 1.4s ease infinite;
}
.hero_loader::before,
.hero_loader::before {
border-top-color: #4285f4;
border-bottom-color: #34a853;
}
.hero_loader::after,
.hero_loader::after {
border-left-color: #fbbc05;
border-right-color: #ea4335;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(0.5);
transform: rotate(180deg) scale(0.5);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes wiggle {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(0.5);
transform: rotate(180deg) scale(0.5);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@media only screen and (max-width: 767px) and (min-width: 320px){
.qcld_hero_content_area{
position: absolute;
top: 50%;
z-index: 9;
bottom:unset !important;
}
.hg_ctaStartGame{
margin-right:3px !important;
margin-bottom: 8px;
}
.button--moema{
display:block;
}
.button--nanuk span{padding:0px !important;}
.button--nanuk{
display:block;
}
.button--nina{
display:block;
}
.button--moema{display: block;}
.slider-x-lead-title{position:unset !important;left:unset !important;top:unset !important;margin-top: 5px;margin-bottom: 5px;}
.slider-x-item-title{position:unset !important;left:unset !important;top:unset !important;margin-top: 20px;
margin-bottom: 20px;}
.hero_slider_button{position:unset !important;left:unset !important;top:unset !important;margin-top: 5px;margin-bottom: 5px;}
}
.fluid-width-video-wrapper{
position:unset !important;
padding-top: unset !important;
}
@media only screen and (max-width: 1024px) and (min-width: 320px){
.sh_bg_video_fluid{
position:unset !important;
}
.fluid-width-video-wrapper{
position:unset !important;
}
}
.sh_bg_video iframe {
width: 100%;
height: 100%;
}
.sh_bg_video {
position: absolute;
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
z-index:-1;
}
.sh_video_overlay{
position: absolute;
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
z-index:0;
}
.hero_bg_image{
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
}
.hero_bg_image1{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
}
.hero_skip_button{text-align:center;position:absolute;width:100px;z-index:999999;font-size:20px;background:#000;opacity:0.4;color:#fff;padding:5px 0px;bottom:7px;right:7px;cursor:pointer;}
.hero_skip_button:hover{opacity:1}
.hero_play_video_button{
width: 60px;
height: 60px;
background-color: #fff;
padding: 15px;
box-sizing: border-box;
line-height: 32px;
font-size:18px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
z-index: 999999;
transform: translate(-50%, -50%);
border-radius: 100%;
cursor: pointer;
transition: 0.5s;
}
.hero_play_video_button:hover{
box-shadow:0 0 10px #646464;
background-color: red;
color:#fff;
}
.hero_play_video_button:after {
content: "";
position: absolute;
left: -15px;
right: -15px;
top: -15px;
bottom: -15px;
background-color: rgba(255,255,255,0.50);
z-index: -1;
border-radius: 100%;
animation: videoControler 2s infinite alternate;
}
@keyframes videoControler {
to {
background-color: rgba(255,255,255,0.40);
}
from {
background-color: rgba(255,255,255,0.10);
}
}
.hero_play_button:hover{opacity:1}
.sh_bg_video_fluid iframe{position: absolute;
left: 0;
top: 0;width: 100%;
height: 100%;}
.sh_vimeo_wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.sh_vimeo_wrapper iframe {
width: 100vw;
height: 56.25vw; min-height: 100vh;
min-width: 177.77vh; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero_mute_div{position:absolute;bottom:25px;right:50px;z-index: 999999;}
.hero_mute_div span{font-size:50px;color:#ddd;cursor:pointer;}
.hero_pro_feature_export:before {
background: red;
margin-bottom: 10px;
content: '';
position: absolute;
width: 98%;
height: 82%;
z-index: 9999;
opacity: 0.1;
left: 7px;
}
.hero_pro_feature-wrap:before {
background: red;
margin-bottom: 10px;
content: '';
position: absolute;
width: 101%;
height: 94%;
z-index: 9999;
opacity: 0.1;
left: -10px;
}
.hero_section_video{float: left;
margin-right: 32px;}
.hero_video_container{margin-top: 30px;}.shero_glitch_button:after, .shero_glitch_button:before {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}    
.shero_glitch_button {
background-size: 100%;
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
border-radius: 1.5em;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
letter-spacing: 0.05em;
outline: none;
overflow: hidden;
position: relative;
cursor: pointer;
z-index: 99;
display: inline-table;
}
.shero_glitch_button:after {
-moz-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
-webkit-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
background: #FAF15D;
content: "";
height: 2px;
opacity: 0;
}
.shero_glitch_button:before {
content: "";
opacity: 0;
}
.shero_glitch_button:hover {
-webkit-animation: glitch 750ms infinite;
}
.shero_glitch_button:hover:before {
opacity: 1;
}
.shero_glitch_button:hover:after {
-webkit-animation: scan 2s infinite;
opacity: 1;
}
@-webkit-keyframes glitch {
0% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
}
5% {
-moz-transform: skewX(2deg);
-ms-transform: skewX(2deg);
-webkit-transform: skewX(2deg);
transform: skewX(2deg);
opacity: 0.75;
}
10% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
opacity: 1;
}
15% {
-moz-transform: skewX(-5deg);
-ms-transform: skewX(-5deg);
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 0.75;
}
20% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
opacity: 1;
}
45% {
-moz-transform: skewX(3deg);
-ms-transform: skewX(3deg);
-webkit-transform: skewX(3deg);
transform: skewX(3deg);
opacity: 0.75;
}
50% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
opacity: 1;
}
55% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
opacity: 0.75;
}
60% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
opacity: 1;
}
75% {
-moz-transform: skewX(2deg);
-ms-transform: skewX(2deg);
-webkit-transform: skewX(2deg);
transform: skewX(2deg);
}
80% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
}
85% {
-moz-transform: skewX(-8deg);
-ms-transform: skewX(-8deg);
-webkit-transform: skewX(-8deg);
transform: skewX(-8deg);
opacity: 0.75;
}
90% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
opacity: 1;
}
100% {
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
}
}
@-webkit-keyframes scan {
0% {
top: 0%;
}
50% {
top: 97%;
}
100% {
top: 0%;
}
}
.shero_glitch_button > a:link, .shero_glitch_button > a:visited
{
text-decoration: none;
} .hero_btn {
position: relative;
letter-spacing: 1.2px;
padding: 12px 20px;
text-align: center;
overflow: hidden;
z-index: 1;
cursor: pointer;
display: -webkit-inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-webkit-box-pack: center;
-webkit-flex-pack: center;
-webkit-justify-content: center;
-webkit-flex-align: center;
-webkit-align-items: center;
vertical-align: middle;
}
.hero_btn:focus {
outline: none;
}
.hero_btn--animated {
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hero_btn--animated:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
z-index: -1;
}
.hero_btn--animated:hover:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
} .hero_spinner_tag {
position: relative;
text-align: center;
box-sizing: border-box;
text-decoration: none;
letter-spacing: 2px;
}
.hero_spinner_tag:before {
content: attr(data-content-default);
}
.hero_spinner_tag:hover {
-webkit-animation: spinner 750ms infinite linear;
animation: spinner 750ms infinite linear;
}
.hero_spinner_tag:hover:before {
content: attr(data-content-spinning);
}
@-webkit-keyframes spinner {
from {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-webkit-transform: rotateX(0) rotateY(-360deg);
transform: rotateX(0) rotateY(-360deg);
}
to {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-webkit-transform: rotateX(360deg) rotateY(-360deg);
transform: rotateX(360deg) rotateY(-360deg);
}
}
@keyframes spinner {
from {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-webkit-transform: rotateX(0) rotateY(-360deg);
transform: rotateX(0) rotateY(-360deg);
}
to {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-webkit-transform: rotateX(360deg) rotateY(-360deg);
transform: rotateX(360deg) rotateY(-360deg);
}
} @keyframes sheen {
0% {
transform: skewY(-45deg) translateX(0);
}
100% {
transform: skewY(-45deg) translateX(12.5em);
}
}
.hero_shiney_effect {
text-align: center;
text-decoration: none;
display: inline-grid;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.hero_shiney_effect:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 2em;
display: block;
position: absolute;
top: 0;
left: -3.5em;
transform: skewX(-45deg) translateX(0);
transition: none;
}
.hero_shiney_effect:hover:before {
transform: skewX(-45deg) translateX(50em);
transition: all 0.5s ease-in-out;
} .hero_3d_button {
position: relative;
font-weight: bold;
text-align: center;
z-index: 2;
-moz-transition: all 0.15s ease-out 0.15s;
-o-transition: all 0.15s ease-out 0.15s;
-webkit-transition: all 0.15s ease-out;
-webkit-transition-delay: 0.15s;
-webkit-transition: all 0.15s ease-out 0.15s;
transition: all 0.15s ease-out 0.15s;
}
.hero_3d_button:after, .hero_3d_button:before {
position: absolute;
width: 100%;
max-width: 100%;
top: 100%;
left: 0;
bottom: -10px;
content: '';
z-index: 1;
-moz-transition: all 0.15s ease-out 0.15s;
-o-transition: all 0.15s ease-out 0.15s;
-webkit-transition: all 0.15s ease-out;
-webkit-transition-delay: 0.15s;
-webkit-transition: all 0.15s ease-out 0.15s;
transition: all 0.15s ease-out 0.15s;
}
.hero_3d_button:before {
top: 10px;
left: -15px;
height: 100%;
width: 15px;
}
.hero_3d_button:after {
width: 100%;
right: 0px;
left: -15px;
height: 15px;
}
.hero_3d_button:hover {
color: #fff;
margin-left: -7.5px;
margin-bottom: -7.5px;
}
.hero_3d_button:hover:after, .hero_3d_button:hover:before {
top: 100%;
left: 0;
bottom: 0px;
}
.hero_3d_button:hover:before {
top: 0px;
left: 0px;
width: 0px;
}
.hero_3d_button:hover:after {
right: 0px;
left: 0px;
height: 0px;
} .hero_exborder {
border: none;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
}
.hero_exborder:before,
.hero_exborder:after {
border-color: transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
border-style: solid;
border-width: 0;
content: "";
height: 24px;
position: absolute;
width: 24px;
}
.hero_exborder:before {
border-right-width: 2px;
border-top-width: 2px;
right: -10px;
top: -10px;
}
.hero_exborder:after {
border-bottom-width: 2px;
border-left-width: 2px;
bottom: -10px;
left: -10px;
}
.hero_exborder:hover:before,
.hero_exborder.hover:before,
.hero_exborder:hover:after,
.hero_exborder.hover:after {
height: 100%;
width: 100%;
}
@media screen and (max-width: 392px) {
.slider_hero_btn_cls_one, .hero_btn1_exborder, .hero_btn1_fill,.hero_btn1_3d,.hero_btn1_exborder,.hero_btn_cls_one2,.hero_btn2_fill,.hero_btn2_3d,.hero_btn2_exborder{
letter-spacing: 0.5px !important;
font-size: 14px !important;
margin-top:8px;
margin-bottom:8px;
}
}
@media screen and (max-width: 660px) {
.slider_hero_btn_cls_one, .hero_btn1_exborder, .hero_btn1_fill,.hero_btn1_3d,.hero_btn1_exborder,.hero_btn_cls_one2,.hero_btn2_fill,.hero_btn2_3d,.hero_btn2_exborder{
letter-spacing: 0.5px !important;
font-size: 15px !important;
margin-top:8px;
margin-bottom:8px;
}
} .button--nanuk {
overflow: hidden;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.button--nanuk > span {
display: inline-block;
padding: 1em 0;
}
.button--nanuk:hover > span:nth-child(odd) {
-webkit-animation: anim-nanuk-1 0.5s forwards;
animation: anim-nanuk-1 0.5s forwards;
}
.button--nanuk:hover > span:nth-child(even) {
-webkit-animation: anim-nanuk-2 0.5s forwards;
animation: anim-nanuk-2 0.5s forwards;
}
.button--nanuk:hover > span:nth-child(odd),
.button--nanuk:hover > span:nth-child(even) {
-webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1);
}
@-webkit-keyframes anim-nanuk-1 {
0%,
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
49% {
opacity: 1;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: inherit;
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
}
}
@keyframes anim-nanuk-1 {
0%,
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
49% {
opacity: 1;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
color: inherit;
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
}
}
@-webkit-keyframes anim-nanuk-2 {
0%,
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
49% {
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: inherit;
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
}
}
@keyframes anim-nanuk-2 {
0%,
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
49% {
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
color: inherit;
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
}
}
.button--nanuk:hover > span:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.button--nanuk:hover > span:nth-child(2) {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
}
.button--nanuk:hover > span:nth-child(3) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.button--nanuk:hover > span:nth-child(4) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.button--nanuk:hover > span:nth-child(5) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.button--nanuk:hover > span:nth-child(6) {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
.button--nanuk:hover > span:nth-child(7) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.button--nanuk:hover > span:nth-child(8) {
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.button--nanuk:hover > span:nth-child(9) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.button--nanuk:hover > span:nth-child(10) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.button--nanuk:hover > span:nth-child(11) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
} .button--nina {
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.button--nina:hover > span {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.button--nina:hover > span:nth-child(1) {
-webkit-transition-delay: 0.045s;
transition-delay: 0.045s;
}
.button--nina:hover > span:nth-child(2) {
-webkit-transition-delay: 0.09s;
transition-delay: 0.09s;
}
.button--nina:hover > span:nth-child(3) {
-webkit-transition-delay: 0.135s;
transition-delay: 0.135s;
}
.button--nina:hover > span:nth-child(4) {
-webkit-transition-delay: 0.18s;
transition-delay: 0.18s;
}
.button--nina:hover > span:nth-child(5) {
-webkit-transition-delay: 0.225s;
transition-delay: 0.225s;
}
.button--nina:hover > span:nth-child(6) {
-webkit-transition-delay: 0.27s;
transition-delay: 0.27s;
}
.button--nina:hover > span:nth-child(7) {
-webkit-transition-delay: 0.315s;
transition-delay: 0.315s;
}
.button--nina:hover > span:nth-child(8) {
-webkit-transition-delay: 0.36s;
transition-delay: 0.36s;
}
.button--nina:hover > span:nth-child(9) {
-webkit-transition-delay: 0.405s;
transition-delay: 0.405s;
}
.button--nina:hover > span:nth-child(10) {
-webkit-transition-delay: 0.45s;
transition-delay: 0.45s;
} .button--moema {
position:relative;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.button--moema::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
bottom: -20px;
right: -20px;
background: inherit;
border-radius: 50px;
z-index: -1;
opacity: 0.4;
-webkit-transform: scale3d(0.8, 0.5, 1);
transform: scale3d(0.8, 0.5, 1);
}
.button--moema:hover {
-webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
-webkit-animation: anim-moema-1 0.3s forwards;
animation: anim-moema-1 0.3s forwards;
}
.button--moema:hover::before {
-webkit-animation: anim-moema-2 0.3s 0.3s forwards;
animation: anim-moema-2 0.3s 0.3s forwards;
}
@-webkit-keyframes anim-moema-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-moema-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes anim-moema-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-moema-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} .mast__text span {
-webkit-animation: letter-glow 0.7s 0s ease both;
animation: letter-glow 0.7s 0s ease both;
}
.mast__text span:nth-child(1) {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
}
.mast__text span:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.mast__text span:nth-child(3) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.mast__text span:nth-child(4) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.mast__text span:nth-child(5) {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
.mast__text span:nth-child(6) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.mast__text span:nth-child(7) {
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.mast__text span:nth-child(8) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.mast__text span:nth-child(9) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.mast__text span:nth-child(10) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.mast__text span:nth-child(11) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.mast__text span:nth-child(12) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.mast__text span:nth-child(13) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.mast__text span:nth-child(14) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.mast__text span:nth-child(15) {
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
}
.mast__text span:nth-child(16) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.mast__text span:nth-child(17) {
-webkit-animation-delay: 0.85s;
animation-delay: 0.85s;
}
.mast__text span:nth-child(18) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.mast__text span:nth-child(19) {
-webkit-animation-delay: 0.95s;
animation-delay: 0.95s;
}
.mast__text span:nth-child(20) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.mast__text span:nth-child(21) {
-webkit-animation-delay: 1.05s;
animation-delay: 1.05s;
}
.mast__text span:nth-child(22) {
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.mast__text span:nth-child(23) {
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
.mast__text span:nth-child(24) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.mast__text span:nth-child(25) {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
}
.mast__text span:nth-child(26) {
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.mast__text span:nth-child(27) {
-webkit-animation-delay: 1.35s;
animation-delay: 1.35s;
}
.mast__text span:nth-child(28) {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.mast__text span:nth-child(29) {
-webkit-animation-delay: 1.45s;
animation-delay: 1.45s;
}
.mast__text span:nth-child(30) {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.mast__text span:nth-child(31) {
-webkit-animation-delay: 1.55s;
animation-delay: 1.55s;
}
.mast__text span:nth-child(32) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.mast__text span:nth-child(33) {
-webkit-animation-delay: 1.65s;
animation-delay: 1.65s;
}
.mast__text span:nth-child(34) {
-webkit-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.mast__text span:nth-child(35) {
-webkit-animation-delay: 1.75s;
animation-delay: 1.75s;
}
.mast__text span:nth-child(36) {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.mast__text span:nth-child(37) {
-webkit-animation-delay: 1.85s;
animation-delay: 1.85s;
}
.mast__text span:nth-child(38) {
-webkit-animation-delay: 1.9s;
animation-delay: 1.9s;
}
.mast__text span:nth-child(39) {
-webkit-animation-delay: 1.95s;
animation-delay: 1.95s;
}
.mast__text span:nth-child(40) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.mast__text span:nth-child(41) {
-webkit-animation-delay: 2.05s;
animation-delay: 2.05s;
}
.mast__text span:nth-child(42) {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.mast__text span:nth-child(43) {
-webkit-animation-delay: 2.15s;
animation-delay: 2.15s;
}
.mast__text span:nth-child(44) {
-webkit-animation-delay: 2.2s;
animation-delay: 2.2s;
}
.mast__text span:nth-child(45) {
-webkit-animation-delay: 2.25s;
animation-delay: 2.25s;
}
.mast__text span:nth-child(46) {
-webkit-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.mast__text span:nth-child(47) {
-webkit-animation-delay: 2.35s;
animation-delay: 2.35s;
}
.mast__text span:nth-child(48) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.mast__text span:nth-child(49) {
-webkit-animation-delay: 2.45s;
animation-delay: 2.45s;
}
.mast__text span:nth-child(50) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.mast__text span:nth-child(51) {
-webkit-animation-delay: 2.55s;
animation-delay: 2.55s;
}
.mast__text span:nth-child(52) {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
}
.mast__text span:nth-child(53) {
-webkit-animation-delay: 2.65s;
animation-delay: 2.65s;
}
.mast__text span:nth-child(54) {
-webkit-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.mast__text span:nth-child(55) {
-webkit-animation-delay: 2.75s;
animation-delay: 2.75s;
}
.mast__text span:nth-child(56) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
.mast__text span:nth-child(57) {
-webkit-animation-delay: 2.85s;
animation-delay: 2.85s;
}
.mast__text span:nth-child(58) {
-webkit-animation-delay: 2.9s;
animation-delay: 2.9s;
}
.mast__text span:nth-child(59) {
-webkit-animation-delay: 2.95s;
animation-delay: 2.95s;
}
.mast__text span:nth-child(60) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.mast__text span:nth-child(61) {
-webkit-animation-delay: 3.05s;
animation-delay: 3.05s;
}
.mast__text span:nth-child(62) {
-webkit-animation-delay: 3.1s;
animation-delay: 3.1s;
}
.mast__text span:nth-child(63) {
-webkit-animation-delay: 3.15s;
animation-delay: 3.15s;
}
.mast__text span:nth-child(64) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
.mast__text span:nth-child(65) {
-webkit-animation-delay: 3.25s;
animation-delay: 3.25s;
}
.mast__text span:nth-child(66) {
-webkit-animation-delay: 3.3s;
animation-delay: 3.3s;
}
.mast__text span:nth-child(67) {
-webkit-animation-delay: 3.35s;
animation-delay: 3.35s;
}
.mast__text span:nth-child(68) {
-webkit-animation-delay: 3.4s;
animation-delay: 3.4s;
}
.mast__text span:nth-child(69) {
-webkit-animation-delay: 3.45s;
animation-delay: 3.45s;
}
.mast__text span:nth-child(70) {
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.mast__text span:nth-child(71) {
-webkit-animation-delay: 3.55s;
animation-delay: 3.55s;
}
.mast__text span:nth-child(72) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
.mast__text span:nth-child(73) {
-webkit-animation-delay: 3.65s;
animation-delay: 3.65s;
}
.mast__text span:nth-child(74) {
-webkit-animation-delay: 3.7s;
animation-delay: 3.7s;
}
.mast__text span:nth-child(75) {
-webkit-animation-delay: 3.75s;
animation-delay: 3.75s;
}
.mast__text span:nth-child(76) {
-webkit-animation-delay: 3.8s;
animation-delay: 3.8s;
}
.mast__text span:nth-child(77) {
-webkit-animation-delay: 3.85s;
animation-delay: 3.85s;
}
.mast__text span:nth-child(78) {
-webkit-animation-delay: 3.9s;
animation-delay: 3.9s;
}
.mast__text span:nth-child(79) {
-webkit-animation-delay: 3.95s;
animation-delay: 3.95s;
}
.mast__text span:nth-child(80) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.mast__text span:nth-child(81) {
-webkit-animation-delay: 4.05s;
animation-delay: 4.05s;
}
.mast__text span:nth-child(82) {
-webkit-animation-delay: 4.1s;
animation-delay: 4.1s;
}
.mast__text span:nth-child(83) {
-webkit-animation-delay: 4.15s;
animation-delay: 4.15s;
}
.mast__text span:nth-child(84) {
-webkit-animation-delay: 4.2s;
animation-delay: 4.2s;
}
.mast__text span:nth-child(85) {
-webkit-animation-delay: 4.25s;
animation-delay: 4.25s;
}
.mast__text span:nth-child(86) {
-webkit-animation-delay: 4.3s;
animation-delay: 4.3s;
}
.mast__text span:nth-child(87) {
-webkit-animation-delay: 4.35s;
animation-delay: 4.35s;
}
.mast__text span:nth-child(88) {
-webkit-animation-delay: 4.4s;
animation-delay: 4.4s;
}
.mast__text span:nth-child(89) {
-webkit-animation-delay: 4.45s;
animation-delay: 4.45s;
}
.mast__text span:nth-child(90) {
-webkit-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.mast__text span:nth-child(91) {
-webkit-animation-delay: 4.55s;
animation-delay: 4.55s;
}
.mast__text span:nth-child(92) {
-webkit-animation-delay: 4.6s;
animation-delay: 4.6s;
}
.mast__text span:nth-child(93) {
-webkit-animation-delay: 4.65s;
animation-delay: 4.65s;
}
.mast__text span:nth-child(94) {
-webkit-animation-delay: 4.7s;
animation-delay: 4.7s;
}
.mast__text span:nth-child(95) {
-webkit-animation-delay: 4.75s;
animation-delay: 4.75s;
}
.mast__text span:nth-child(96) {
-webkit-animation-delay: 4.8s;
animation-delay: 4.8s;
}
.mast__text span:nth-child(97) {
-webkit-animation-delay: 4.85s;
animation-delay: 4.85s;
}
.mast__text span:nth-child(98) {
-webkit-animation-delay: 4.9s;
animation-delay: 4.9s;
}
.mast__text span:nth-child(99) {
-webkit-animation-delay: 4.95s;
animation-delay: 4.95s;
}
.mast__text span:nth-child(100) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.mast__text span:nth-child(101) {
-webkit-animation-delay: 5.05s;
animation-delay: 5.05s;
}
.mast__text span:nth-child(102) {
-webkit-animation-delay: 5.1s;
animation-delay: 5.1s;
}
.mast__text span:nth-child(103) {
-webkit-animation-delay: 5.15s;
animation-delay: 5.15s;
}
.mast__text span:nth-child(104) {
-webkit-animation-delay: 5.2s;
animation-delay: 5.2s;
}
.mast__text span:nth-child(105) {
-webkit-animation-delay: 5.25s;
animation-delay: 5.25s;
}
.mast__text span:nth-child(106) {
-webkit-animation-delay: 5.3s;
animation-delay: 5.3s;
}
.mast__text span:nth-child(107) {
-webkit-animation-delay: 5.35s;
animation-delay: 5.35s;
}
.mast__text span:nth-child(108) {
-webkit-animation-delay: 5.4s;
animation-delay: 5.4s;
}
.mast__text span:nth-child(109) {
-webkit-animation-delay: 5.45s;
animation-delay: 5.45s;
}
.mast__text span:nth-child(110) {
-webkit-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.mast__text span:nth-child(111) {
-webkit-animation-delay: 5.55s;
animation-delay: 5.55s;
}
.mast__text span:nth-child(112) {
-webkit-animation-delay: 5.6s;
animation-delay: 5.6s;
}
.mast__text span:nth-child(113) {
-webkit-animation-delay: 5.65s;
animation-delay: 5.65s;
}
.mast__text span:nth-child(114) {
-webkit-animation-delay: 5.7s;
animation-delay: 5.7s;
}
.mast__text span:nth-child(115) {
-webkit-animation-delay: 5.75s;
animation-delay: 5.75s;
}
.mast__text span:nth-child(116) {
-webkit-animation-delay: 5.8s;
animation-delay: 5.8s;
}
.mast__text span:nth-child(117) {
-webkit-animation-delay: 5.85s;
animation-delay: 5.85s;
}
.mast__text span:nth-child(118) {
-webkit-animation-delay: 5.9s;
animation-delay: 5.9s;
}
.mast__text span:nth-child(119) {
-webkit-animation-delay: 5.95s;
animation-delay: 5.95s;
}
.mast__text span:nth-child(120) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.mast__text span:nth-child(121) {
-webkit-animation-delay: 6.05s;
animation-delay: 6.05s;
}
.mast__text span:nth-child(122) {
-webkit-animation-delay: 6.1s;
animation-delay: 6.1s;
}
.mast__text span:nth-child(123) {
-webkit-animation-delay: 6.15s;
animation-delay: 6.15s;
}
.mast__text span:nth-child(124) {
-webkit-animation-delay: 6.2s;
animation-delay: 6.2s;
}
.mast__text span:nth-child(125) {
-webkit-animation-delay: 6.25s;
animation-delay: 6.25s;
}
.mast__text span:nth-child(126) {
-webkit-animation-delay: 6.3s;
animation-delay: 6.3s;
}
.mast__text span:nth-child(127) {
-webkit-animation-delay: 6.35s;
animation-delay: 6.35s;
}
.mast__text span:nth-child(128) {
-webkit-animation-delay: 6.4s;
animation-delay: 6.4s;
}
.mast__text span:nth-child(129) {
-webkit-animation-delay: 6.45s;
animation-delay: 6.45s;
}
.mast__text span:nth-child(130) {
-webkit-animation-delay: 6.5s;
animation-delay: 6.5s;
}
.mast__text span:nth-child(131) {
-webkit-animation-delay: 6.55s;
animation-delay: 6.55s;
}
.mast__text span:nth-child(132) {
-webkit-animation-delay: 6.6s;
animation-delay: 6.6s;
}
.mast__text span:nth-child(133) {
-webkit-animation-delay: 6.65s;
animation-delay: 6.65s;
}
.mast__text span:nth-child(134) {
-webkit-animation-delay: 6.7s;
animation-delay: 6.7s;
}
.mast__text span:nth-child(135) {
-webkit-animation-delay: 6.75s;
animation-delay: 6.75s;
}
.mast__text span:nth-child(136) {
-webkit-animation-delay: 6.8s;
animation-delay: 6.8s;
}
.mast__text span:nth-child(137) {
-webkit-animation-delay: 6.85s;
animation-delay: 6.85s;
}
.mast__text span:nth-child(138) {
-webkit-animation-delay: 6.9s;
animation-delay: 6.9s;
}
.mast__text span:nth-child(139) {
-webkit-animation-delay: 6.95s;
animation-delay: 6.95s;
}
.mast__text span:nth-child(140) {
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.mast__text span:nth-child(141) {
-webkit-animation-delay: 7.05s;
animation-delay: 7.05s;
}
.mast__text span:nth-child(142) {
-webkit-animation-delay: 7.1s;
animation-delay: 7.1s;
}
.mast__text span:nth-child(143) {
-webkit-animation-delay: 7.15s;
animation-delay: 7.15s;
}
.mast__text span:nth-child(144) {
-webkit-animation-delay: 7.2s;
animation-delay: 7.2s;
}
.mast__text span:nth-child(145) {
-webkit-animation-delay: 7.25s;
animation-delay: 7.25s;
}
.mast__text span:nth-child(146) {
-webkit-animation-delay: 7.3s;
animation-delay: 7.3s;
}
.mast__text span:nth-child(147) {
-webkit-animation-delay: 7.35s;
animation-delay: 7.35s;
}
.mast__text span:nth-child(148) {
-webkit-animation-delay: 7.4s;
animation-delay: 7.4s;
}
.mast__text span:nth-child(149) {
-webkit-animation-delay: 7.45s;
animation-delay: 7.45s;
}
.mast__text span:nth-child(150) {
-webkit-animation-delay: 7.5s;
animation-delay: 7.5s;
}
.mast__text span:nth-child(151) {
-webkit-animation-delay: 7.55s;
animation-delay: 7.55s;
}
.mast__text span:nth-child(152) {
-webkit-animation-delay: 7.6s;
animation-delay: 7.6s;
}
.mast__text span:nth-child(153) {
-webkit-animation-delay: 7.65s;
animation-delay: 7.65s;
}
.mast__text span:nth-child(154) {
-webkit-animation-delay: 7.7s;
animation-delay: 7.7s;
}
.mast__text span:nth-child(155) {
-webkit-animation-delay: 7.75s;
animation-delay: 7.75s;
}
.mast__text span:nth-child(156) {
-webkit-animation-delay: 7.8s;
animation-delay: 7.8s;
}
.mast__text span:nth-child(157) {
-webkit-animation-delay: 7.85s;
animation-delay: 7.85s;
}
.mast__text span:nth-child(158) {
-webkit-animation-delay: 7.9s;
animation-delay: 7.9s;
}
.mast__text span:nth-child(159) {
-webkit-animation-delay: 7.95s;
animation-delay: 7.95s;
}
.mast__text span:nth-child(160) {
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
.mast__text span:nth-child(161) {
-webkit-animation-delay: 8.05s;
animation-delay: 8.05s;
}
.mast__text span:nth-child(162) {
-webkit-animation-delay: 8.1s;
animation-delay: 8.1s;
}
.mast__text span:nth-child(163) {
-webkit-animation-delay: 8.15s;
animation-delay: 8.15s;
}
.mast__text span:nth-child(164) {
-webkit-animation-delay: 8.2s;
animation-delay: 8.2s;
}
.mast__text span:nth-child(165) {
-webkit-animation-delay: 8.25s;
animation-delay: 8.25s;
}
.mast__text span:nth-child(166) {
-webkit-animation-delay: 8.3s;
animation-delay: 8.3s;
}
.mast__text span:nth-child(167) {
-webkit-animation-delay: 8.35s;
animation-delay: 8.35s;
}
.mast__text span:nth-child(168) {
-webkit-animation-delay: 8.4s;
animation-delay: 8.4s;
}
.mast__text span:nth-child(169) {
-webkit-animation-delay: 8.45s;
animation-delay: 8.45s;
}
.mast__text span:nth-child(170) {
-webkit-animation-delay: 8.5s;
animation-delay: 8.5s;
}
.mast__text span:nth-child(171) {
-webkit-animation-delay: 8.55s;
animation-delay: 8.55s;
}
.mast__text span:nth-child(172) {
-webkit-animation-delay: 8.6s;
animation-delay: 8.6s;
}
.mast__text span:nth-child(173) {
-webkit-animation-delay: 8.65s;
animation-delay: 8.65s;
}
.mast__text span:nth-child(174) {
-webkit-animation-delay: 8.7s;
animation-delay: 8.7s;
}
.mast__text span:nth-child(175) {
-webkit-animation-delay: 8.75s;
animation-delay: 8.75s;
}
.mast__text span:nth-child(176) {
-webkit-animation-delay: 8.8s;
animation-delay: 8.8s;
}
.mast__text span:nth-child(177) {
-webkit-animation-delay: 8.85s;
animation-delay: 8.85s;
}
.mast__text span:nth-child(178) {
-webkit-animation-delay: 8.9s;
animation-delay: 8.9s;
}
.mast__text span:nth-child(179) {
-webkit-animation-delay: 8.95s;
animation-delay: 8.95s;
}
.mast__text span:nth-child(180) {
-webkit-animation-delay: 9s;
animation-delay: 9s;
}
@-webkit-keyframes letter-glow {
0% {
opacity: 0;
text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
}
66% {
opacity: 1;
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
}
77% {
opacity: 1;
}
100% {
opacity: 0.7;
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
}
}
@keyframes letter-glow {
0% {
opacity: 0;
text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1);
}
66% {
opacity: 1;
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
}
77% {
opacity: 1;
}
100% {
opacity: 0.7;
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
}
}  .clip-text {
font-weight: bold;
line-height: 1; display: inline-block; color: #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
} #hero_multicolor span {
display: inline-block;
font-size: 50px;
line-height: 100px;
font-family: "Oswald", sans-serif;
position: relative;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: slide 10s linear infinite;
background-position: left 0px;
background-image: linear-gradient(to bottom, #662345 0px, #662345 50px, black 50px, #661510 50px, #661510 50px, black 50px, #276e97 50px, #276e97 50px, black 50px, #af852d 50px, #af852d 50px, black 50px, #662345 50px, #662345 50px, black 50px, #661510 50px, #661510 50px, black 50px, #276e97 50px, #276e97 50px, black 50px, #af852d 50px, #af852d 50px, black 50px, black 50px);
}
#hero_multicolor span:nth-child(odd) {
background-image: linear-gradient(to bottom, #662345 0px, #662345 50px, black 50px, #661510 50px, #661510 50px, black 50px, #276e97 50px, #276e97 50px, black 50px, #af852d 50px, #af852d 50px, black 50px, #662345 50px, #662345 50px, black 50px, #661510 50px, #661510 50px, black 50px, #276e97 50px, #276e97 50px, black 50px, #af852d 50px, #af852d 50px);
}
@keyframes slide {
100% {
background-position: left -200px;
}
} .spintext ul {
margin: 0;
list-style: none;
font-size: 50px;
transform-style: preserve-3d;
animation: three-dimensions-circle 30s linear infinite;
position:relative;
}
.spintext ul li {
position: absolute;
top: 50%;
left: 50%;
}
.spintext ul li:nth-child(1) {
transform: translate(-50%, -50%) rotate(0deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(2) {
transform: translate(-50%, -50%) rotate(30deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(3) {
transform: translate(-50%, -50%) rotate(60deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(4) {
transform: translate(-50%, -50%) rotate(90deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(5) {
transform: translate(-50%, -50%) rotate(120deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(6) {
transform: translate(-50%, -50%) rotate(150deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(7) {
transform: translate(-50%, -50%) rotate(180deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(8) {
transform: translate(-50%, -50%) rotate(210deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(9) {
transform: translate(-50%, -50%) rotate(240deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(10) {
transform: translate(-50%, -50%) rotate(270deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(11) {
transform: translate(-50%, -50%) rotate(300deg) translateY(-260px) rotateX(90deg);
}
.spintext ul li:nth-child(12) {
transform: translate(-50%, -50%) rotate(330deg) translateY(-260px) rotateX(90deg);
}
@keyframes three-dimensions-circle {
0% {
transform: rotateX(-100deg) rotate(0);
}
100% {
transform: rotateX(-100deg) rotate(-360deg);
}
} h1.flag {
white-space: nowrap;
font-size: 2vw; cursor: default;
}
h1.flag::before {
content: '';
position: absolute;
bottom: 0;
width: 89%;
left: 4%;
height: 40%;
-webkit-filter: blur(2vw);
filter: blur(2vw);
-webkit-transition: all 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
transition: all 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
h1.flag span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
width: 80px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
position: relative;
z-index: 1;
-webkit-transition: all 1s cubic-bezier(0.0, 0.0, 0.2, 1);
transition: all 1s cubic-bezier(0.0, 0.0, 0.2, 1);    }
h1.flag span::before {
content: '';
background-color: #F9F8EF;
-webkit-transition: all 1s cubic-bezier(0.0, 0.0, 0.2, 1);
transition: all 1s cubic-bezier(0.0, 0.0, 0.2, 1);
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
h1.flag span:nth-child(odd) {
-webkit-transform: skewY(-8deg);
transform: skewY(-8deg);
color: rgb(217, 213, 200);
background: -webkit-linear-gradient(120deg, rgb(255, 255, 255), rgb(237, 236, 227));
background: linear-gradient(-30deg, rgb(255, 255, 255), rgb(237, 236, 227));
box-shadow: inset -1px 0 0px rgba(255, 255, 255, .3);
prospective: 1000px;
}
h1.flag span:nth-child(even) {
-webkit-transform: skewY(8deg);
transform: skewY(8deg);
color: #C5BEAA;
background: -webkit-linear-gradient(3deg, rgb(199, 198, 191), rgb(237, 236, 227));
background: linear-gradient(87deg, rgb(199, 198, 191), rgb(237, 236, 227));
box-shadow: inset -1px 0 0px rgba(0, 0, 0, .05);
prospective: 1000px;
}
h1.flag span:first-of-type,
h1.flag span:first-of-type:before {
border-radius: 4px 0 0 4px;
}
h1.flag span:last-of-type,
h1.flag span:last-of-type:before {
border-radius: 0 4px 4px 0;
}
h1.flag:hover {}
h1.flag:hover:before {
opacity: 0.5;
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
-webkit-filter: blur(2px);
filter: blur(2px);
left: 1%;
width: 98%;
}
h1.flag:hover span {
-webkit-transform: none;
transform: none;
color: #C5BEAA;
box-shadow: none;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
width: 100px;
}
h1.flag:hover span::before {
opacity: 1;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
} .slidingtext {
color: #fff;
font-size: 50px;
letter-spacing: 2px;
font-weight: normal;
position: relative;
display: inline-block;
}
.slidingtext span {
opacity: 0;
}
.slidingtext.active span {
animation: opacity 1s linear forwards;
}
@keyframes opacity { 51%,100%{
opacity: 1;
}
}
.slidingtext:before {
content: "";
height: 100%;
width: 100%;
background: #fff;
position: absolute;
top: 0;left: 0;
transform: scaleX(0);
transform-origin: left;
}
.slidingtext.active:before {
animation: animTitle 1s cubic-bezier(1.000, 0.610, 0.165, 1.000) forwards;
}
@keyframes animTitle {
0% {
transform: scaleX(0);
transform-origin: left;
}
50% {
transform-origin: left;
transform: scaleX(1);
}
51%, 100% {
transform-origin: right;
}
100% {
transform: scaleX(0);
}
} .hero_title_list {
display: block; 
top: 50%;
left: 15%;
right: 15%;
transform: translateY(-50%);
line-height: 60px;
}
.hero_title_list span { 
margin: 10px;
opacity: 0;
filter: blur(20px); 
text-transform: uppercase;
font-weight: 900;
}
.hero_title_list.active span {
opacity: 1;
filter: blur(0px);
transition: 1s; 
}
.active { 
z-index: 10;
} .hero_output {
display:none;
}
.hero_active:after {
content: '_';
} .hero_glitch_header h1 {
font-size: 50px;
color: #222222;
margin-top: 0;
text-transform: uppercase;
font-weight: 900;
}
.hero-glitch-window {
position: absolute;
top: 0;
left: -2px;
width: 100%;
color: #222222;
text-shadow: 2px 0 #F9F8F8, -1px 0 yellow, -2px 0 green;
overflow: hidden;
-webkit-animation: crt-me 4500ms infinite linear alternate-reverse;
animation: crt-me 4500ms infinite linear alternate-reverse;
}
@-webkit-keyframes crt-me {
0% {
clip: rect(31px, 9999px, 94px, 0);
}
10% {
clip: rect(112px, 9999px, 76px, 0);
}
20% {
clip: rect(85px, 9999px, 77px, 0);
}
30% {
clip: rect(27px, 9999px, 97px, 0);
}
40% {
clip: rect(64px, 9999px, 98px, 0);
}
50% {
clip: rect(61px, 9999px, 85px, 0);
}
60% {
clip: rect(99px, 9999px, 114px, 0);
}
70% {
clip: rect(34px, 9999px, 115px, 0);
}
80% {
clip: rect(98px, 9999px, 129px, 0);
}
90% {
clip: rect(43px, 9999px, 96px, 0);
}
100% {
clip: rect(82px, 9999px, 64px, 0);
}
}
@keyframes crt-me {
0% {
clip: rect(31px, 9999px, 94px, 0);
}
10% {
clip: rect(112px, 9999px, 76px, 0);
}
20% {
clip: rect(85px, 9999px, 77px, 0);
}
30% {
clip: rect(27px, 9999px, 97px, 0);
}
40% {
clip: rect(64px, 9999px, 98px, 0);
}
50% {
clip: rect(61px, 9999px, 85px, 0);
}
60% {
clip: rect(99px, 9999px, 114px, 0);
}
70% {
clip: rect(34px, 9999px, 115px, 0);
}
80% {
clip: rect(98px, 9999px, 129px, 0);
}
90% {
clip: rect(43px, 9999px, 96px, 0);
}
100% {
clip: rect(82px, 9999px, 64px, 0);
}
}.letterfx-container{}
.letterfx{
display:inline-block;
margin:0;
padding:0;
transition: all 1s; -ms-transition: all 1s; -webkit-transition: all 1s;
} .letterfx-spin-before{
transform:rotate(3600deg); -ms-transform:rotate(3600deg); -webkit-transform:rotate(3600deg);
}
.letterfx-spin-after{
transform:none;
} .letterfx-fade-before{
opacity: 0;
} .letterfx-grow-before{
transform:scale(0,0); -ms-transform:scale(0,0); -webkit-transform:scale(0,0);
}
.letterfx-grow-after{
transform:none;
} .letterfx-smear-before{
color: transparent;
text-shadow:-1px -1px 25px transparent;
}
.letterfx-smear-after{
color:inherit;
text-shadow:0 0 #333;
} .letterfx-fall-before
{
visibility: hidden;
transform:scale(3,3); -ms-transform:scale(3,3); -webkit-transform:scale(3,3);
}
.letterfx-fall-after{
transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1);
text-shadow:0;
} .letterfx-swirl-before
{
visibility: hidden;
transform:scale(3,3) rotate(3600deg); -ms-transform:scale(3,3) rotate(3600deg); -webkit-transform:scale(3,3) rotate(3600deg);
}
.letterfx-swirl-after{
transform:none;
text-shadow:0;
} .letterfx-wave-container .letterfx
{
position:relative;
}
.letterfx-wave-before
{
bottom:0;
}
.letterfx-wave-after{
bottom:15px;
} .letterfx-fly-left-container .letterfx,
.letterfx-fly-right-container .letterfx,
.letterfx-fly-top-container .letterfx,
.letterfx-fly-bottom-container .letterfx
{
position:relative;
}
.letterfx-fly-left-before{ left:-50em; }
.letterfx-fly-left-after{ left:0; }
.letterfx-fly-right-before{ right:-50em; }
.letterfx-fly-right-after{ right:0; }
.letterfx-fly-top-before{ top:-20em; }
.letterfx-fly-top-after{ top:0; }
.letterfx-fly-bottom-before{ bottom:-20em; }
.letterfx-fly-bottom-after{ bottom:0; }