body{margin:0; padding:0;background: #f7f7f7;
}
.container{height: 100%; width: 100%;background-size: 100%; background-position: center;}
.main_div{width: 100%;margin: auto;padding-top: 2%;}
/***********************************/
.loader-37 {border: 2px dotted black;border-radius: 100%;-webkit-animation: loader-37 800ms linear infinite;animation: loader-37 6s linear infinite;display: inline-block;width: 50px;height: 50px;color: inherit;vertical-align: middle;background-image: linear-gradient(to right top, #009688, #2aa5ec, #19b7c5, #00bf72, #09f9ee);}
.loader-37:before, .loader-37:after {content: ''; width: .8em;height: .8em;display: block;position: absolute;top: calc(50% - .4em);left: calc(50% - .4em);border-left: 0.08em solid #fcfffb;border-radius: 100%;animation: loader-37 0.5s linear infinite reverse;}
@-webkit-keyframes loader-37
{
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
}
@keyframes loader-37
{
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
}
/*********************************/
.loader-25 {border: 0.1em #158df7 solid;position: relative; -webkit-animation: loader-25-1 5s linear infinite;animation: loader-25-1 5s linear infinite;display: inline-block; width: 50px;height: 50px;color: inherit;vertical-align: middle;}
.loader-25:after {
width: .3em;
height: .3em;
position: absolute;
content: "";
background-color: #158df7;
bottom: calc(100% + .2em);
left: -.4em;
-webkit-animation: loader-25-2 1s ease-in-out infinite;
animation: loader-25-2 2s ease-in-out infinite;
}
@-webkit-keyframes loader-25-1 {
0% {
-webkit-box-shadow: inset 0 0 0 0 #158df7;
box-shadow: inset 0 0 0 0 #158df7; }
100% {
-webkit-box-shadow: inset 0 -1em 0 0 #158df7;
box-shadow: inset 0 -1em 0 0 #158df7; } }
@keyframes loader-25-1 {
0% {
-webkit-box-shadow: inset 0 0 0 0 #158df7;
box-shadow: inset 0 0 0 0 #158df7; }
100% {
-webkit-box-shadow: inset 0 -3em 0 0 #158df7;
box-shadow: inset 0 -3em 0 0 #158df7; } }
@-webkit-keyframes loader-25-2 {
25% {
left: calc(100% + .2em);
bottom: calc(100% + .2em); }
50% {
left: calc(100% + .2em);
bottom: -.4em; }
75% {
left: -.4em;
bottom: -.4em; }
100% {
left: -.4em;
bottom: calc(100% + .2em); } }
@keyframes loader-25-2 {
25% {
left: calc(100% + .2em);
bottom: calc(100% + .2em); }
50% {
left: calc(100% + .2em);
bottom: -.4em; }
75% {
left: -.4em;
bottom: -.4em; }
100% {
left: -.4em;
bottom: calc(100% + .2em); } }
/*********************************/
.loader-22 {
border: 0.1em #544fff solid;
border-radius: 100%;
position: relative;
overflow: hidden;
z-index: 1;
display: inline-block;
width: 50px;
height: 50px;
color: inherit;
vertical-align: middle;
}
.loader-22:before {
width: 100%;
height: 40%;
left: 0;
bottom: 0;
}
.loader-22:after {
width: 50%;
height: .1em;
left: 50%;
top: 50%;
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-animation: loader-22 2s linear infinite alternate;
animation: loader-22 2s linear infinite alternate;
}
.loader-22:after, .loader-22:before {
position: absolute;
content: "";
background-color: #544fff;
}
@-webkit-keyframes loader-22 {
0% {
-webkit-transform: rotate(-160deg);
transform: rotate(-160deg); }
100% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg); } }
@keyframes loader-22 {
0% {
-webkit-transform: rotate(-160deg);
transform: rotate(-160deg); }
100% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg); }
}
/***********************************/
.loader-24 {
width: .8em;
height: 1em;
border: 0.1em #ff3f70 solid;
border-radius: 0px 0px .2em .2em;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
color: inherit;
vertical-align: middle;
}
.loader-24:before {
width: .1em;
height: .3em;
background-color: #ff3f70;
top: -.3em;
left: .05em;
-webkit-box-shadow: 0.2em 0px 0px 0px #ff3f70, 0.2em -0.2em 0px 0px #ff3f70, 0.4em 0px 0px 0px #ff3f70;
box-shadow: 0.2em 0px 0px 0px #ff3f70, 0.2em -0.2em 0px 0px #ff3f70, 0.4em 0px 0px 0px #ff3f70;
-webkit-animation: loader-24 1s linear infinite alternate;
animation: loader-24 1s linear infinite alternate;
}
.loader-24:after {
width: .2em;
height: 50%;
border: 0.1em #ff3f70 solid;
border-left: none;
border-radius: 0px .5em .5em 0px;
left: calc(100% + .1em);
top: .1em;
}
.loader-24:after, .loader-24:before {
position: absolute;
content: "";
}
@-webkit-keyframes loader-24 {
0% {
height: 0px; }
100% {
height: 6px; } }
@keyframes loader-24 {
0% {
height: 0px; }
100% {
height: 6px; }
}
/***********************/
.loader-7 {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
vertical-align: middle; }
.loader-7 .line {
width: 8px;
position: absolute;
border-radius: 5px;
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(#158df7), to(#fb2e63));
background: linear-gradient(to bottom, #158df7, #fb2e63); }
.loader-7 .line1 {
left: 0;
-webkit-animation: line-grow 0.5s ease alternate infinite;
animation: line-grow 0.5s ease alternate infinite; }
.loader-7 .line2 {
left: 20px;
-webkit-animation: line-grow 0.5s 0.2s ease alternate infinite;
animation: line-grow 0.5s 0.2s ease alternate infinite; }
.loader-7 .line3 {
left: 40px;
-webkit-animation: line-grow 0.5s 0.4s ease alternate infinite;
animation: line-grow 0.5s 0.4s ease alternate infinite; }
@-webkit-keyframes line-grow {
0% {
height: 0; }
100% {
height: 75%; } }
@keyframes line-grow {
0% {
height: 0; }
100% {
height: 75%; } }
.loader-box .loader-7 {
border: 0 solid transparent;
border-radius: 50%;
position: relative; }
.loader-box .loader-7:before, .loader-box .loader-7:after {
content: '';
border: 0.2em solid #158df7;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
-webkit-animation: loader-07 1s linear infinite;
animation: loader-07 1s linear infinite;
opacity: 0; }
.loader-box .loader-7:before {
-webkit-animation-delay: 1s;
animation-delay: 1s; }
.loader-box .loader-7:after {
-webkit-animation-delay: .5s;
animation-delay: .5s; }
@-webkit-keyframes loader-07 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
50% {
opacity: 1; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes loader-07 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
50% {
opacity: 1; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
.loader-box .loader-8 {
position: relative; }
.loader-box .loader-8:before, .loader-box .loader-8:after {
content: '';
width: inherit;
height: inherit;
border-radius: 50%;
background-color: #fb2e63;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: loader-08 2.0s infinite ease-in-out;
animation: loader-08 2.0s infinite ease-in-out; }
.loader-box .loader-8:after {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s; }
/*************loader 1******************/
.loader1{
border: 6px solid white;
margin: 0 auto;
float: left;
height: 100px;
text-align: center;
margin-right: 5px;
border-radius: 5px;
background-color:white;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.lds-hourglass {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-hourglass:after {
content: " ";
display: block;
border-radius: 50%;
width: 0;
height: 0;
margin: 6px;
box-sizing: border-box;
border: 26px solid #fff;
border-color: #ff8d00 transparent #ff3004 transparent;
animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
0% {
transform: rotate(0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
50% {
transform: rotate(900deg);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
100% {
transform: rotate(1800deg);
}
}
/*************loader 1 End******************/
/*************loader 2******************/
.loader2{
border: 6px solid white;
margin: 0 auto;
height: 100px;
float: left;
background-color:white;
text-align: center;
margin-right: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #6bb718;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 28px;
left: 28px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: -1px;
left: -1px;
width: 58px;
height: 58px;
opacity: 0;
}
}
/*************loader 2 End******************/
/*************loader 3******************/
.loader3{
border: 6px solid white;
margin: 0 auto;
float: left;
text-align: center;
margin-right: 5px;
height: 100px;
border-radius: 5px;
background-color:white;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.lds-circle {
display: inline-block;
transform: translateZ(1px);
}
.lds-circle > div {
display: inline-block;
width: 51px;
height: 51px;
margin: 6px;
border-radius: 50%;
background: #ff5c00;
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
border: 1px solid red;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
@keyframes lds-circle {
0%, 100% {
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(1800deg);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
100% {
transform: rotateY(3600deg);
}
}
/*************loader 3 end******************/
/*************loader 4******************/
.loader4{
border: 6px solid white;
margin: 0 auto;
height: 100px;
float: left;
text-align: center;
background-color:white;
margin-right: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.sk-folding-cube {
margin: 10px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #33f3ea;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
/*************loader 4 end******************/
.over-hidden{overflow:hidden;}
/****************loader 5*****************/
.loader5{
border: 6px solid white;
margin: 5px 10px;
height: 115px;
float: left;
text-align: center;
background-color:white;
margin-right: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.marginauto{margin:auto; width:100%; margin-top:50px;text-align:center;}
#heart {
position: relative;
width: 100px;
margin-top:5px;
height: 90px;
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 30px;
top: 0;
width: 30px;
height: 50px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
/************loader 5 end****************/
.font-icon-wrapper {
text-align: center;
border: #e9ecef solid 1px;
border-radius: 0.25rem;
margin: 0 0 10px;
padding: 5px;
background-color:white;
}
.loader-wrapper {
width: 150px;
height: 100px;
float: left !important;
}
.align-items-center {
align-items: center !important;
}
.justify-content-center {
justify-content: center !important;
}
.d-flex {
display: flex !important;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(26, 54, 126, 0.125);
border-radius: 0.25rem;
}
.pacman {
position: relative;
}
/*************************************************************************************************************************************************************************************************************/
/**
* Dots
*/
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
@keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
.ball-pulse > div:nth-child(0) {
-webkit-animation: scale 0.75s -0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(1) {
-webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(2) {
-webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(3) {
-webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div {
background-color: #6610f2;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
@-webkit-keyframes ball-pulse-sync {
33% {
-webkit-transform: translateY(10px);
transform: translateY(10px); }
66% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes ball-pulse-sync {
33% {
-webkit-transform: translateY(10px);
transform: translateY(10px); }
66% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
.ball-pulse-sync > div:nth-child(0) {
-webkit-animation: ball-pulse-sync 0.6s -0.21s infinite ease-in-out;
animation: ball-pulse-sync 0.6s -0.21s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(1) {
-webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(2) {
-webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(3) {
-webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }
.ball-pulse-sync > div {
background-color: #ffc107;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
@-webkit-keyframes ball-scale {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes ball-scale {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
.ball-scale > div {
background-color: #16aaff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
height: 60px;
width: 60px;
-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
animation: ball-scale 1s 0s ease-in-out infinite; }
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.ball-rotate {
position: relative; }
.ball-rotate > div {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: relative; }
.ball-rotate > div:first-child {
-webkit-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; }
.ball-rotate > div:before, .ball-rotate > div:after {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
content: "";
position: absolute;
opacity: 0.8; }
.ball-rotate > div:before {
top: 0px;
left: -28px; }
.ball-rotate > div:after {
top: 0px;
left: 25px; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6); }
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }
.ball-clip-rotate > div {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border: 2px solid #fd7e14;
border-bottom-color: transparent;
height: 25px;
width: 25px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 0.75s 0s linear infinite;
animation: rotate 0.75s 0s linear infinite; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6); }
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }
@keyframes scale {
30% {
-webkit-transform: scale(0.3);
transform: scale(0.3); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
.ball-clip-rotate-pulse {
position: relative;
-webkit-transform: translateY(-15px);
transform: translateY(-15px); }
.ball-clip-rotate-pulse > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%; }
.ball-clip-rotate-pulse > div:first-child {
background: #3f6ad8;
height: 16px;
width: 16px;
top: 7px;
left: -7px;
-webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
.ball-clip-rotate-pulse > div:last-child {
position: absolute;
border: 2px solid #3f6ad8;
width: 30px;
height: 30px;
left: -16px;
top: -2px;
background: transparent;
border: 2px solid;
border-color: #3f6ad8 transparent #3f6ad8 transparent;
-webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
-webkit-animation-duration: 1s;
animation-duration: 1s; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6); }
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }
.ball-clip-rotate-multiple {
position: relative; }
.ball-clip-rotate-multiple > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
left: -20px;
top: -20px;
border: 2px solid #3f6ad8;
border-bottom-color: transparent;
border-top-color: transparent;
border-radius: 100%;
height: 35px;
width: 35px;
-webkit-animation: rotate 1s 0s ease-in-out infinite;
animation: rotate 1s 0s ease-in-out infinite; }
.ball-clip-rotate-multiple > div:last-child {
display: inline-block;
top: -10px;
left: -10px;
width: 15px;
height: 15px;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
border-color: #3f6ad8 transparent #3f6ad8 transparent;
animation-direction: reverse; }
@-webkit-keyframes ball-scale-ripple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
@keyframes ball-scale-ripple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
.ball-scale-ripple > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
height: 50px;
width: 50px;
border-radius: 100%;
border: 2px solid #3f6ad8;
-webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }
@-webkit-keyframes ball-scale-ripple-multiple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
@keyframes ball-scale-ripple-multiple {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 1; }
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
100% {
opacity: 0.0; } }
.ball-scale-ripple-multiple {
position: relative;
-webkit-transform: translateY(-25px);
transform: translateY(-25px); }
.ball-scale-ripple-multiple > div:nth-child(0) {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.ball-scale-ripple-multiple > div:nth-child(1) {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.ball-scale-ripple-multiple > div:nth-child(2) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.ball-scale-ripple-multiple > div:nth-child(3) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.ball-scale-ripple-multiple > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: -2px;
left: -26px;
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid #3f6ad8;
-webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }
@-webkit-keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
transform: scale(0.75); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
transform: scale(0.75); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.ball-beat > div {
background-color: #dc3545;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: ball-beat 0.7s 0s infinite linear;
animation: ball-beat 0.7s 0s infinite linear; }
.ball-beat > div:nth-child(2n-1) {
-webkit-animation-delay: -0.35s !important;
animation-delay: -0.35s !important; }
@-webkit-keyframes ball-scale-multiple {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
5% {
opacity: 1; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes ball-scale-multiple {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
5% {
opacity: 1; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
.ball-scale-multiple {
position: relative;
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
.ball-scale-multiple > div:nth-child(2) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.ball-scale-multiple > div:nth-child(3) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.ball-scale-multiple > div {
background-color: #28a745;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
left: -30px;
top: 0px;
opacity: 0;
margin: 0;
width: 60px;
height: 60px;
-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
animation: ball-scale-multiple 1s 0s linear infinite; }
@-webkit-keyframes ball-triangle-path-1 {
33% {
-webkit-transform: translate(25px, -50px);
transform: translate(25px, -50px); }
66% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@keyframes ball-triangle-path-1 {
33% {
-webkit-transform: translate(25px, -50px);
transform: translate(25px, -50px); }
66% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@-webkit-keyframes ball-triangle-path-2 {
33% {
-webkit-transform: translate(25px, 50px);
transform: translate(25px, 50px); }
66% {
-webkit-transform: translate(-25px, 50px);
transform: translate(-25px, 50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@keyframes ball-triangle-path-2 {
33% {
-webkit-transform: translate(25px, 50px);
transform: translate(25px, 50px); }
66% {
-webkit-transform: translate(-25px, 50px);
transform: translate(-25px, 50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@-webkit-keyframes ball-triangle-path-3 {
33% {
-webkit-transform: translate(-50px, 0px);
transform: translate(-50px, 0px); }
66% {
-webkit-transform: translate(-25px, -50px);
transform: translate(-25px, -50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
@keyframes ball-triangle-path-3 {
33% {
-webkit-transform: translate(-50px, 0px);
transform: translate(-50px, 0px); }
66% {
-webkit-transform: translate(-25px, -50px);
transform: translate(-25px, -50px); }
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px); } }
.ball-triangle-path {
position: relative;
-webkit-transform: translate(-29.9940012px, -37.50937734px);
transform: translate(-29.9940012px, -37.50937734px); }
.ball-triangle-path > div:nth-child(1) {
-webkit-animation-name: ball-triangle-path-1;
animation-name: ball-triangle-path-1;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.ball-triangle-path > div:nth-child(2) {
-webkit-animation-name: ball-triangle-path-2;
animation-name: ball-triangle-path-2;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.ball-triangle-path > div:nth-child(3) {
-webkit-animation-name: ball-triangle-path-3;
animation-name: ball-triangle-path-3;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite; }
.ball-triangle-path > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid #b924f7; }
.ball-triangle-path > div:nth-of-type(1) {
top: 50px; }
.ball-triangle-path > div:nth-of-type(2) {
left: 25px; }
.ball-triangle-path > div:nth-of-type(3) {
top: 50px;
left: 50px; }
@-webkit-keyframes ball-pulse-rise-even {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
25% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
75% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-pulse-rise-even {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
25% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
75% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(1);
transform: scale(1); } }
@-webkit-keyframes ball-pulse-rise-odd {
0% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
25% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
75% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(0.75);
transform: scale(0.75); } }
@keyframes ball-pulse-rise-odd {
0% {
-webkit-transform: scale(0.4);
transform: scale(0.4); }
25% {
-webkit-transform: translateY(30px);
transform: translateY(30px); }
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
75% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: scale(0.75);
transform: scale(0.75); } }
.ball-pulse-rise > div {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
.ball-pulse-rise > div:nth-child(2n) {
-webkit-animation-name: ball-pulse-rise-even;
animation-name: ball-pulse-rise-even; }
.ball-pulse-rise > div:nth-child(2n-1) {
-webkit-animation-name: ball-pulse-rise-odd;
animation-name: ball-pulse-rise-odd; }
@-webkit-keyframes ball-grid-beat {
50% {
opacity: 0.7; }
100% {
opacity: 1; } }
@keyframes ball-grid-beat {
50% {
opacity: 0.7; }
100% {
opacity: 1; } }
.ball-grid-beat {
width: 57px; }
.ball-grid-beat > div:nth-child(1) {
-webkit-animation-delay: 0.37s;
animation-delay: 0.37s;
-webkit-animation-duration: 1.31s;
animation-duration: 1.31s; }
.ball-grid-beat > div:nth-child(2) {
-webkit-animation-delay: 0.34s;
animation-delay: 0.34s;
-webkit-animation-duration: 1.54s;
animation-duration: 1.54s; }
.ball-grid-beat > div:nth-child(3) {
-webkit-animation-delay: 0.29s;
animation-delay: 0.29s;
-webkit-animation-duration: 0.87s;
animation-duration: 0.87s; }
.ball-grid-beat > div:nth-child(4) {
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
-webkit-animation-duration: 0.72s;
animation-duration: 0.72s; }
.ball-grid-beat > div:nth-child(5) {
-webkit-animation-delay: 0.38s;
animation-delay: 0.38s;
-webkit-animation-duration: 1.41s;
animation-duration: 1.41s; }
.ball-grid-beat > div:nth-child(6) {
-webkit-animation-delay: 0.37s;
animation-delay: 0.37s;
-webkit-animation-duration: 1.21s;
animation-duration: 1.21s; }
.ball-grid-beat > div:nth-child(7) {
-webkit-animation-delay: 0.62s;
animation-delay: 0.62s;
-webkit-animation-duration: 0.98s;
animation-duration: 0.98s; }
.ball-grid-beat > div:nth-child(8) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-duration: 0.88s;
animation-duration: 0.88s; }
.ball-grid-beat > div:nth-child(9) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
-webkit-animation-duration: 0.97s;
animation-duration: 0.97s; }
.ball-grid-beat > div {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
float: left;
-webkit-animation-name: ball-grid-beat;
animation-name: ball-grid-beat;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
@-webkit-keyframes ball-grid-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
@keyframes ball-grid-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
.ball-grid-pulse {
width: 57px; }
.ball-grid-pulse > div:nth-child(1) {
-webkit-animation-delay: 0.67s;
animation-delay: 0.67s;
-webkit-animation-duration: 1.58s;
animation-duration: 1.58s; }
.ball-grid-pulse > div:nth-child(2) {
-webkit-animation-delay: 0.77s;
animation-delay: 0.77s;
-webkit-animation-duration: 1.59s;
animation-duration: 1.59s; }
.ball-grid-pulse > div:nth-child(3) {
-webkit-animation-delay: 0.41s;
animation-delay: 0.41s;
-webkit-animation-duration: 1.03s;
animation-duration: 1.03s; }
.ball-grid-pulse > div:nth-child(4) {
-webkit-animation-delay: 0.67s;
animation-delay: 0.67s;
-webkit-animation-duration: 1.36s;
animation-duration: 1.36s; }
.ball-grid-pulse > div:nth-child(5) {
-webkit-animation-delay: -0.14s;
animation-delay: -0.14s;
-webkit-animation-duration: 1.12s;
animation-duration: 1.12s; }
.ball-grid-pulse > div:nth-child(6) {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-duration: 0.89s;
animation-duration: 0.89s; }
.ball-grid-pulse > div:nth-child(7) {
-webkit-animation-delay: 0.19s;
animation-delay: 0.19s;
-webkit-animation-duration: 0.68s;
animation-duration: 0.68s; }
.ball-grid-pulse > div:nth-child(8) {
-webkit-animation-delay: 0.08s;
animation-delay: 0.08s;
-webkit-animation-duration: 1.16s;
animation-duration: 1.16s; }
.ball-grid-pulse > div:nth-child(9) {
-webkit-animation-delay: 0.17s;
animation-delay: 0.17s;
-webkit-animation-duration: 1.58s;
animation-duration: 1.58s; }
.ball-grid-pulse > div {
background-color: #e83e8c;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
float: left;
-webkit-animation-name: ball-grid-pulse;
animation-name: ball-grid-pulse;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
@-webkit-keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes ball-spin-fade-loader {
50% {
opacity: 0.3;
-webkit-transform: scale(0.4);
transform: scale(0.4); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
.ball-spin-fade-loader {
position: relative;
top: -10px;
left: -10px; }
.ball-spin-fade-loader > div:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
animation: ball-spin-fade-loader 1s -0.96s infinite linear; }
.ball-spin-fade-loader > div:nth-child(2) {
top: 17.04545455px;
left: 17.04545455px;
-webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
animation: ball-spin-fade-loader 1s -0.84s infinite linear; }
.ball-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
animation: ball-spin-fade-loader 1s -0.72s infinite linear; }
.ball-spin-fade-loader > div:nth-child(4) {
top: -17.04545455px;
left: 17.04545455px;
-webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
animation: ball-spin-fade-loader 1s -0.6s infinite linear; }
.ball-spin-fade-loader > div:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
animation: ball-spin-fade-loader 1s -0.48s infinite linear; }
.ball-spin-fade-loader > div:nth-child(6) {
top: -17.04545455px;
left: -17.04545455px;
-webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
animation: ball-spin-fade-loader 1s -0.36s infinite linear; }
.ball-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
animation: ball-spin-fade-loader 1s -0.24s infinite linear; }
.ball-spin-fade-loader > div:nth-child(8) {
top: 17.04545455px;
left: -17.04545455px;
-webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
animation: ball-spin-fade-loader 1s -0.12s infinite linear; }
.ball-spin-fade-loader > div {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute; }
@-webkit-keyframes ball-spin-loader {
75% {
opacity: 0.2; }
100% {
opacity: 1; } }
@keyframes ball-spin-loader {
75% {
opacity: 0.2; }
100% {
opacity: 1; } }
.ball-spin-loader {
position: relative; }
.ball-spin-loader > span:nth-child(1) {
top: 45px;
left: 0;
-webkit-animation: ball-spin-loader 2s 0.9s infinite linear;
animation: ball-spin-loader 2s 0.9s infinite linear; }
.ball-spin-loader > span:nth-child(2) {
top: 30.68181818px;
left: 30.68181818px;
-webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
animation: ball-spin-loader 2s 1.8s infinite linear; }
.ball-spin-loader > span:nth-child(3) {
top: 0;
left: 45px;
-webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
animation: ball-spin-loader 2s 2.7s infinite linear; }
.ball-spin-loader > span:nth-child(4) {
top: -30.68181818px;
left: 30.68181818px;
-webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
animation: ball-spin-loader 2s 3.6s infinite linear; }
.ball-spin-loader > span:nth-child(5) {
top: -45px;
left: 0;
-webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
animation: ball-spin-loader 2s 4.5s infinite linear; }
.ball-spin-loader > span:nth-child(6) {
top: -30.68181818px;
left: -30.68181818px;
-webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
animation: ball-spin-loader 2s 5.4s infinite linear; }
.ball-spin-loader > span:nth-child(7) {
top: 0;
left: -45px;
-webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
animation: ball-spin-loader 2s 6.3s infinite linear; }
.ball-spin-loader > span:nth-child(8) {
top: 30.68181818px;
left: -30.68181818px;
-webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
animation: ball-spin-loader 2s 7.2s infinite linear; }
.ball-spin-loader > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 15px;
height: 15px;
border-radius: 100%;
background: green; }
@-webkit-keyframes ball-zig {
33% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
66% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zig {
33% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
66% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@-webkit-keyframes ball-zag {
33% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
66% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zag {
33% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
66% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
.ball-zig-zag {
position: relative;
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px); }
.ball-zig-zag > div {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
margin-left: 15px;
top: 4px;
left: -7px; }
.ball-zig-zag > div:first-child {
-webkit-animation: ball-zig 0.7s 0s infinite linear;
animation: ball-zig 0.7s 0s infinite linear; }
.ball-zig-zag > div:last-child {
-webkit-animation: ball-zag 0.7s 0s infinite linear;
animation: ball-zag 0.7s 0s infinite linear; }
@-webkit-keyframes ball-zig-deflect {
17% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
34% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
84% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zig-deflect {
17% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
34% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(15px, -30px);
transform: translate(15px, -30px); }
84% {
-webkit-transform: translate(-15px, -30px);
transform: translate(-15px, -30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@-webkit-keyframes ball-zag-deflect {
17% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
34% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
84% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
@keyframes ball-zag-deflect {
17% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
34% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
67% {
-webkit-transform: translate(-15px, 30px);
transform: translate(-15px, 30px); }
84% {
-webkit-transform: translate(15px, 30px);
transform: translate(15px, 30px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); } }
.ball-zig-zag-deflect {
position: relative;
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px); }
.ball-zig-zag-deflect > div {
background-color: #d92550;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
margin-left: 15px;
top: 4px;
left: -7px; }
.ball-zig-zag-deflect > div:first-child {
-webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
animation: ball-zig-deflect 1.5s 0s infinite linear; }
.ball-zig-zag-deflect > div:last-child {
-webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
animation: ball-zag-deflect 1.5s 0s infinite linear; }
/**
* Lines
*/
@-webkit-keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
@keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.line-scale > div:nth-child(1) {
-webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(2) {
-webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(3) {
-webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(4) {
-webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div:nth-child(5) {
-webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.line-scale > div {
background-color: #3f6ad8;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
@-webkit-keyframes line-scale-party {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes line-scale-party {
0% {
-webkit-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
.line-scale-party > div:nth-child(1) {
-webkit-animation-delay: 0.12s;
animation-delay: 0.12s;
-webkit-animation-duration: 0.36s;
animation-duration: 0.36s; }
.line-scale-party > div:nth-child(2) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
-webkit-animation-duration: 1.23s;
animation-duration: 1.23s; }
.line-scale-party > div:nth-child(3) {
-webkit-animation-delay: -0.11s;
animation-delay: -0.11s;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s; }
.line-scale-party > div:nth-child(4) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
-webkit-animation-duration: 0.56s;
animation-duration: 0.56s; }
.line-scale-party > div {
background-color: #3f6ad8;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation-name: line-scale-party;
animation-name: line-scale-party;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0; }
@-webkit-keyframes line-scale-pulse-out {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
@keyframes line-scale-pulse-out {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.line-scale-pulse-out > div {
background-color: #e83e8c;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); }
.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
-webkit-animation-delay: -0.4s !important;
animation-delay: -0.4s !important; }
.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
-webkit-animation-delay: -0.2s !important;
animation-delay: -0.2s !important; }
@-webkit-keyframes line-scale-pulse-out-rapid {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
80% {
-webkit-transform: scaley(0.3);
transform: scaley(0.3); }
90% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
@keyframes line-scale-pulse-out-rapid {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
80% {
-webkit-transform: scaley(0.3);
transform: scaley(0.3); }
90% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.line-scale-pulse-out-rapid > div {
background-color: #6610f2;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
vertical-align: middle;
-webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); }
.line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {
-webkit-animation-delay: -0.25s !important;
animation-delay: -0.25s !important; }
.line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important; }
@-webkit-keyframes line-spin-fade-loader {
50% {
opacity: 0.3; }
100% {
opacity: 1; } }
@keyframes line-spin-fade-loader {
50% {
opacity: 0.3; }
100% {
opacity: 1; } }
.line-spin-fade-loader {
position: relative;
top: -10px;
left: -4px; }
.line-spin-fade-loader > div:nth-child(1) {
top: 20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(2) {
top: 13.63636364px;
left: 13.63636364px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(3) {
top: 0;
left: 20px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(4) {
top: -13.63636364px;
left: 13.63636364px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(5) {
top: -20px;
left: 0;
-webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(6) {
top: -13.63636364px;
left: -13.63636364px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(7) {
top: 0;
left: -20px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; }
.line-spin-fade-loader > div:nth-child(8) {
top: 13.63636364px;
left: -13.63636364px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; }
.line-spin-fade-loader > div {
background-color: #3f6ad8;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
width: 5px;
height: 15px; }
/**
* Misc
*/
@-webkit-keyframes triangle-skew-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
@keyframes triangle-skew-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
.triangle-skew-spin > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #3f6ad8;
-webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
@-webkit-keyframes square-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
@keyframes square-spin {
25% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% {
-webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% {
-webkit-transform: perspective(100px) rotateX(0) rotateY(0);
transform: perspective(100px) rotateX(0) rotateY(0); } }
.square-spin > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 50px;
height: 50px;
background: #3f6ad8;
-webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
@-webkit-keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); } }
@keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); } }
@-webkit-keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }
@keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }
@-webkit-keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
@keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
.pacman {
position: relative; }
.pacman > div:nth-child(2) {
-webkit-animation: pacman-balls 1s -0.99s infinite linear;
animation: pacman-balls 1s -0.99s infinite linear; }
.pacman > div:nth-child(3) {
-webkit-animation: pacman-balls 1s -0.66s infinite linear;
animation: pacman-balls 1s -0.66s infinite linear; }
.pacman > div:nth-child(4) {
-webkit-animation: pacman-balls 1s -0.33s infinite linear;
animation: pacman-balls 1s -0.33s infinite linear; }
.pacman > div:nth-child(5) {
-webkit-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear; }
.pacman > div:first-of-type {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #3f6ad8;
border-left: 25px solid #3f6ad8;
border-bottom: 25px solid #3f6ad8;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
animation: rotate_pacman_half_up 0.5s 0s infinite;
position: relative;
left: -30px; }
.pacman > div:nth-child(2) {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #3f6ad8;
border-left: 25px solid #3f6ad8;
border-bottom: 25px solid #3f6ad8;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
animation: rotate_pacman_half_down 0.5s 0s infinite;
margin-top: -50px;
position: relative;
left: -30px; }
.pacman > div:nth-child(3),
.pacman > div:nth-child(4),
.pacman > div:nth-child(5),
.pacman > div:nth-child(6) {
background-color: #3f6ad8;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
-webkit-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
top: 25px;
left: 70px; }
@-webkit-keyframes cube-transition {
25% {
-webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
transform: translateX(50px) scale(0.5) rotate(-90deg); }
50% {
-webkit-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg); }
75% {
-webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
transform: translateY(50px) scale(0.5) rotate(-270deg); }
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); } }
@keyframes cube-transition {
25% {
-webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
transform: translateX(50px) scale(0.5) rotate(-90deg); }
50% {
-webkit-transform: translate(50px, 50px) rotate(-180deg);
transform: translate(50px, 50px) rotate(-180deg); }
75% {
-webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
transform: translateY(50px) scale(0.5) rotate(-270deg); }
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); } }
.cube-transition {
position: relative;
-webkit-transform: translate(-25px, -25px);
transform: translate(-25px, -25px); }
.cube-transition > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 10px;
height: 10px;
position: absolute;
top: -5px;
left: -5px;
background-color: #3f6ad8;
-webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
animation: cube-transition 1.6s 0s infinite ease-in-out; }
.cube-transition > div:last-child {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
@-webkit-keyframes spin-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.semi-circle-spin {
position: relative;
width: 35px;
height: 35px;
overflow: hidden; }
.semi-circle-spin > div {
position: absolute;
border-width: 0px;
border-radius: 100%;
-webkit-animation: spin-rotate 0.6s 0s infinite linear;
animation: spin-rotate 0.6s 0s infinite linear;
background-image: linear-gradient(transparent 0%, transparent 70%, #3f6ad8 30%, #3f6ad8 100%);
width: 100%;
height: 100%; }
.loading-container {
display: flex;
flex-wrap: wrap; }
.loading {
height: 189px;
width: 189px;
position: relative;
margin: 0 15px 15px 0;
padding: 15px;
border: 1px #ccc solid;
border-radius: 4px; }
.loading p {
margin: 0 0 10px 0; }
.vertical-timeline {
width: 100%;
position: relative;
padding: 1.5rem 0 1rem; }
.vertical-timeline .badge:empty {
display: inline-block; }
.vertical-timeline::after {
content: '';
display: table;
clear: both; }
.vertical-timeline::before {
content: '';
position: absolute;
top: 0;
left: 67px;
height: 100%;
width: 4px;
background: #e9ecef;
border-radius: 0.25rem; }
.vertical-timeline-element {
position: relative;
margin: 0 0 1rem; }
.vertical-timeline-element:after {
content: "";
display: table;
clear: both; }
.vertical-timeline-element:last-child {
margin-bottom: 0; }
.vertical-timeline-element-content {
position: relative;
margin-left: 90px;
font-size: 0.8rem; }
.vertical-timeline-element-content:after {
content: "";
display: table;
clear: both; }
.vertical-timeline-element-content .timeline-title {
font-size: 0.8rem;
text-transform: uppercase;
margin: 0 0 0.5rem;
padding: 2px 0 0;
font-weight: bold; }
.vertical-timeline-element-content p {
color: #6c757d;
margin: 0 0 0.5rem; }
.vertical-timeline-element-content .vertical-timeline-element-date {
display: block;
position: absolute;
left: -90px;
top: 0;
padding-right: 10px;
text-align: right;
color: #adb5bd;
font-size: 0.76190476rem;
white-space: nowrap; }
.vertical-timeline-element-icon {
position: absolute;
top: 0;
left: 60px; }
.vertical-timeline-element-icon .badge-dot-xl {
box-shadow: 0 0 0 5px #fff; }
.vertical-timeline-element--no-children .vertical-timeline-element-content {
background: 0 0;
box-shadow: none; }
.vertical-timeline-element--no-children .vertical-timeline-element-content::before {
display: none; }
.vertical-without-time::before {
left: 11px; }
.vertical-without-time .vertical-timeline-element-content {
margin-left: 36px; }
.vertical-without-time .vertical-timeline-element-icon {
left: 4px; }
.vertical-time-icons {
padding: 2rem 0 0; }
.vertical-time-icons::before {
content: '';
position: absolute;
top: 0;
left: 14px;
height: 100%;
width: 6px;
background: #e9ecef;
border-radius: 0.25rem; }
.vertical-time-icons .vertical-timeline-element {
margin-bottom: 1rem; }
.vertical-time-icons .vertical-timeline-element-content {
margin-left: 50px; }
.vertical-time-icons .vertical-timeline-element-icon {
width: 34px;
height: 34px;
left: 0;
top: -7px; }
.vertical-time-icons .vertical-timeline-element-icon .timeline-icon {
width: 34px;
height: 34px;
background: #fff;
border-radius: 50px;
border-width: 2px;
border-style: solid;
box-shadow: 0 0 0 5px #fff;
text-align: center;
display: flex;
align-items: center;
align-content: center; }
.vertical-time-icons .vertical-timeline-element-icon .timeline-icon i {
display: block;
font-size: 1.1rem;
margin: 0 auto; }
.vertical-time-icons .vertical-timeline-element-icon .timeline-icon svg {
margin: 0 auto; }
.vertical-time-simple {
padding: 0.5rem 0; }
.vertical-time-simple .vertical-timeline-element {
margin: 0 0 0.5rem; }
.vertical-time-simple .timeline-title {
font-weight: normal;
font-size: 0.91666667rem;
padding: 0; }
.vertical-time-simple .vertical-timeline-element-icon {
height: 14px;
width: 14px;
background: #e9ecef;
position: absolute;
left: 6px;
top: 2px;
display: block;
border-radius: 20px; }
.vertical-time-simple .vertical-timeline-element-icon::after {
content: '';
position: absolute;
background: #fff;
left: 50%;
top: 50%;
margin: -4px 0 0 -4px;
display: block;
width: 8px;
height: 8px;
border-radius: 20px; }
.vertical-time-simple .timeline-title {
text-transform: none; }
.dot-primary .vertical-timeline-element-icon {
background: #3f6ad8; }
.dot-secondary .vertical-timeline-element-icon {
background: #6c757d; }
.dot-success .vertical-timeline-element-icon {
background: #3ac47d; }
.dot-info .vertical-timeline-element-icon {
background: #16aaff; }
.dot-warning .vertical-timeline-element-icon {
background: #f7b924; }
.dot-danger .vertical-timeline-element-icon {
background: #d92550; }
.dot-light .vertical-timeline-element-icon {
background: #eeeeee; }
.dot-dark .vertical-timeline-element-icon {
background: #343a40; }
.dot-focus .vertical-timeline-element-icon {
background: #444054; }
.dot-alternate .vertical-timeline-element-icon {
background: #794c8a; }
.vertical-timeline--animate .vertical-timeline-element-icon.is-hidden {
visibility: hidden; }
.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 .8s;
animation: cd-bounce-1 .8s; }
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5); }
60% {
opacity: 1;
-webkit-transform: scale(1.2); }
100% {
-webkit-transform: scale(1); } }
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5); }
60% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
transform: scale(1); } }
.vertical-timeline--animate .vertical-timeline-element-content.is-hidden {
visibility: hidden; }
.vertical-timeline--animate .vertical-timeline-element-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 .6s;
animation: cd-bounce-2 .6s; }
@media only screen and (min-width: 1170px) {
.vertical-timeline--two-columns.vertical-timeline--animate .vertical-timeline-element.vertical-timeline-element--right .vertical-timeline-element-content.bounce-in, .vertical-timeline--two-columns.vertical-timeline--animate .vertical-timeline-element:nth-child(even):not(.vertical-timeline-element--left) .vertical-timeline-element-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse .6s;
animation: cd-bounce-2-inverse .6s; } }
@media only screen and (max-width: 1169px) {
.vertical-timeline--animate .vertical-timeline-element-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2-inverse .6s;
animation: cd-bounce-2-inverse .6s; } }
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px); }
60% {
opacity: 1;
-webkit-transform: translateX(20px); }
100% {
-webkit-transform: translateX(0); } }
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px); }
60% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px); }
60% {
opacity: 1;
-webkit-transform: translateX(-20px); }
100% {
-webkit-transform: translateX(0); } }
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px); }
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
/***********************************************************************************************************************************/
.con-vs-loading .vs-loading {
position: relative;
width: 55px;
height: 55px;
display: block;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid transparent;
}
.con-vs-loading .vs-loading.radius .effect-1, .con-vs-loading .vs-loading.radius .effect-2 {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid #ff9900;
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.con-vs-loading .vs-loading.radius .effect-1 {
-webkit-animation: radius 1s ease infinite;
animation: radius 1s ease infinite;
}
.con-vs-loading .vs-loading .effects {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.con-vs-loading .vs-loading.radius .effect-2 {
-webkit-animation: radius 2s ease .1s infinite;
animation: radius 2s ease .1s infinite;
}
.con-vs-loading .vs-loading.radius .effect-1, .con-vs-loading .vs-loading.radius .effect-2 {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid #ff9900;
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.con-vs-loading .vs-loading .effects {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.con-vs-loading .vs-loading.corners .effect-1, .con-vs-loading .vs-loading.radius .effect-3 {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid #ff9900;
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.con-vs-loading .vs-loading.radius .effect-3 {
-webkit-animation: radius 3s ease .2s infinite;
animation: radius 3s ease .2s infinite;
}
.con-vs-loading .vs-loading .effects {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.vx-card .vx-card__collapsible-content img {
display: block;
}
.con-vs-loading .vs-loading {
position: relative;
width: 55px;
height: 55px;
display: block;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid transparent;
}
@keyframes radius{0%{-webkit-transform:rotate(0deg) scale(.1);transform:rotate(0deg) scale(.1);opacity:1}60%{-webkit-transform:rotate(160deg) scale(1);transform:rotate(160deg) scale(1);opacity:0}to{-webkit-transform:rotate(0deg) scale(.1);transform:rotate(0deg) scale(.1);opacity:1}}
/*************************************************************************************************************************************************************************************************************/
.con-vs-loading .vs-loading.corners .effect-1 {
-webkit-animation: corners 1s ease infinite;
animation: corners 1s ease infinite;
}
.con-vs-loading .vs-loading.corners .effect-1, .con-vs-loading .vs-loading.radius .effect-3 {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid red;
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@keyframes corners{0%{border-radius:50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}25%{border-radius:50% 50% 50% 20%}50%{border-radius:50% 50% 20% 30%}75%{border-radius:50% 20% 30% 30%}to{border-radius:50%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}}
/****************************************************************************************************************************************************************************************************************************/
.card-new {
display: table;
float: none;
margin: 30px auto 0;
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* :not(:required) hides this rule from IE9 and below */
.spinner:not(:required) {
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-ms-border-radius: 0.5em;
-o-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
-moz-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
display: inline-block;
font-size: 10px;
width: 1em;
height: 1em;
margin: 1.5em;
overflow: hidden;
text-indent: 100%;
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* :not(:required) hides this rule from IE9 and below */
.refreshing:not(:required) {
-webkit-animation: spinner 1000ms infinite linear;
-moz-animation: spinner 1000ms infinite linear;
-ms-animation: spinner 1000ms infinite linear;
-o-animation: spinner 1000ms infinite linear;
animation: spinner 1000ms infinite linear;
-webkit-border-radius: 2.4em;
-moz-border-radius: 2.4em;
-ms-border-radius: 2.4em;
-o-border-radius: 2.4em;
border-radius: 2.4em;
border: 0.4em solid #99aacc;
border-left-color: transparent;
color: transparent;
display: inline-block;
font-size: 10px;
line-height: 1.2;
width: 3em;
height: 3em;
text-indent: 100%;
}
.refreshing:not(:required):after {
display: block;
border: 0.5em solid transparent;
border-top-color: #99aacc;
border-left-color: #99aacc;
content: '';
width: 0;
height: 0;
overflow: hidden;
margin-left: -0.2em;
margin-top: 1em;
}
@-webkit-keyframes throbber {
0% {
background: #dde2e7;
}
10% {
background: #6b9dc8;
}
40% {
background: #dde2e7;
}
}
@-moz-keyframes throbber {
0% {
background: #dde2e7;
}
10% {
background: #6b9dc8;
}
40% {
background: #dde2e7;
}
}
@-o-keyframes throbber {
0% {
background: #dde2e7;
}
10% {
background: #6b9dc8;
}
40% {
background: #dde2e7;
}
}
@keyframes throbber {
0% {
background: #dde2e7;
}
10% {
background: #6b9dc8;
}
40% {
background: #dde2e7;
}
}
/* :not(:required) hides these rules from IE9 and below */
.throbber:not(:required) {
-webkit-animation: throbber 2000ms 300ms infinite ease-out;
-moz-animation: throbber 2000ms 300ms infinite ease-out;
-ms-animation: throbber 2000ms 300ms infinite ease-out;
-o-animation: throbber 2000ms 300ms infinite ease-out;
animation: throbber 2000ms 300ms infinite ease-out;
background: #dde2e7;
display: inline-block;
position: relative;
text-indent: -9999px;
width: 0.9em;
height: 1.5em;
margin: 0 1.6em;
}
.throbber:not(:required):before, .throbber:not(:required):after {
background: #dde2e7;
content: '\x200B';
display: inline-block;
width: 0.9em;
height: 1.5em;
position: absolute;
top: 0;
}
.throbber:not(:required):before {
-webkit-animation: throbber 2000ms 150ms infinite ease-out;
-moz-animation: throbber 2000ms 150ms infinite ease-out;
-ms-animation: throbber 2000ms 150ms infinite ease-out;
-o-animation: throbber 2000ms 150ms infinite ease-out;
animation: throbber 2000ms 150ms infinite ease-out;
left: -1.6em;
}
.throbber:not(:required):after {
-webkit-animation: throbber 2000ms 450ms infinite ease-out;
-moz-animation: throbber 2000ms 450ms infinite ease-out;
-ms-animation: throbber 2000ms 450ms infinite ease-out;
-o-animation: throbber 2000ms 450ms infinite ease-out;
animation: throbber 2000ms 450ms infinite ease-out;
right: -1.6em;
}
/* Styles for old versions of IE */
.heartbeat {
font-family: sans-serif;
font-weight: 100;
}
@-webkit-keyframes heartbeat {
0% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
@-moz-keyframes heartbeat {
0% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
@-o-keyframes heartbeat {
0% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
@keyframes heartbeat {
0% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-webkit-transform: rotate(45deg) scale(1.3);
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-o-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
-webkit-animation: heartbeat 1300ms ease 0s infinite normal;
-moz-animation: heartbeat 1300ms ease 0s infinite normal;
-ms-animation: heartbeat 1300ms ease 0s infinite normal;
-o-animation: heartbeat 1300ms ease 0s infinite normal;
animation: heartbeat 1300ms ease 0s infinite normal;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 36px;
height: 36px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.heartbeat:not(:required):after, .heartbeat:not(:required):before {
position: absolute;
content: "";
background: #ee8877;
}
.heartbeat:not(:required):before {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
border-top-left-radius: 12px;
-moz-border-radius-bottomleft: 12px;
-webkit-border-bottom-left-radius: 12px;
border-bottom-left-radius: 12px;
top: 12px;
left: 0;
width: 36px;
height: 24px;
}
.heartbeat:not(:required):after {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
border-top-left-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
border-top-right-radius: 12px;
top: 0;
left: 12px;
width: 24px;
height: 12px;
}
@-webkit-keyframes gauge {
0% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
10% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
24% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
40% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
54% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
56% {
-webkit-transform: rotate(78deg);
-moz-transform: rotate(78deg);
-ms-transform: rotate(78deg);
-o-transform: rotate(78deg);
transform: rotate(78deg);
}
58% {
-webkit-transform: rotate(73deg);
-moz-transform: rotate(73deg);
-ms-transform: rotate(73deg);
-o-transform: rotate(73deg);
transform: rotate(73deg);
}
60% {
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
62% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
70% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
80% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
83% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
86% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
89% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
}
@-moz-keyframes gauge {
0% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
10% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
24% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
40% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
54% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
56% {
-webkit-transform: rotate(78deg);
-moz-transform: rotate(78deg);
-ms-transform: rotate(78deg);
-o-transform: rotate(78deg);
transform: rotate(78deg);
}
58% {
-webkit-transform: rotate(73deg);
-moz-transform: rotate(73deg);
-ms-transform: rotate(73deg);
-o-transform: rotate(73deg);
transform: rotate(73deg);
}
60% {
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
62% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
70% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
80% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
83% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
86% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
89% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
}
@-o-keyframes gauge {
0% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
10% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
24% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
40% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
54% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
56% {
-webkit-transform: rotate(78deg);
-moz-transform: rotate(78deg);
-ms-transform: rotate(78deg);
-o-transform: rotate(78deg);
transform: rotate(78deg);
}
58% {
-webkit-transform: rotate(73deg);
-moz-transform: rotate(73deg);
-ms-transform: rotate(73deg);
-o-transform: rotate(73deg);
transform: rotate(73deg);
}
60% {
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
62% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
70% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
80% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
83% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
86% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
89% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
}
@keyframes gauge {
0% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
10% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
24% {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
40% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
54% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
56% {
-webkit-transform: rotate(78deg);
-moz-transform: rotate(78deg);
-ms-transform: rotate(78deg);
-o-transform: rotate(78deg);
transform: rotate(78deg);
}
58% {
-webkit-transform: rotate(73deg);
-moz-transform: rotate(73deg);
-ms-transform: rotate(73deg);
-o-transform: rotate(73deg);
transform: rotate(73deg);
}
60% {
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
62% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
70% {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
80% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
83% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
86% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
89% {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
100% {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
}
/* Styles for old versions of IE */
.gauge {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.gauge:not(:required) {
background: #66ccaa;
-moz-border-radius-topleft: 32px;
-webkit-border-top-left-radius: 32px;
border-top-left-radius: 32px;
-moz-border-radius-topright: 32px;
-webkit-border-top-right-radius: 32px;
border-top-right-radius: 32px;
display: inline-block;
width: 64px;
height: 32px;
overflow: hidden;
position: relative;
text-indent: -9999px;
}
.gauge:not(:required)::before {
-webkit-animation: gauge 4000ms infinite ease;
-moz-animation: gauge 4000ms infinite ease;
-ms-animation: gauge 4000ms infinite ease;
-o-animation: gauge 4000ms infinite ease;
animation: gauge 4000ms infinite ease;
background: white;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
content: '';
position: absolute;
left: 30px;
top: 5.33333px;
width: 4px;
height: 26.66667px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.gauge:not(:required)::after {
content: '';
background: white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
position: absolute;
left: 25.6px;
top: 25.6px;
width: 12.8px;
height: 12.8px;
}
@-webkit-keyframes timer {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes timer {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes timer {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes timer {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Styles for old versions of IE */
.timer {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.timer:not(:required) {
border: 6px solid #cc88dd;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
-ms-border-radius: 24px;
-o-border-radius: 24px;
border-radius: 24px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
position: relative;
text-indent: -9999px;
width: 48px;
height: 48px;
}
.timer:not(:required)::before {
-webkit-animation: timer 1250ms infinite linear;
-moz-animation: timer 1250ms infinite linear;
-ms-animation: timer 1250ms infinite linear;
-o-animation: timer 1250ms infinite linear;
animation: timer 1250ms infinite linear;
-webkit-transform-origin: 3px 3px;
-moz-transform-origin: 3px 3px;
-ms-transform-origin: 3px 3px;
-o-transform-origin: 3px 3px;
transform-origin: 3px 3px;
background: #cc88dd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
content: '';
display: block;
position: absolute;
width: 6px;
height: 19.2px;
left: 15px;
top: 15px;
}
.timer:not(:required)::after {
-webkit-animation: timer 15000ms infinite linear;
-moz-animation: timer 15000ms infinite linear;
-ms-animation: timer 15000ms infinite linear;
-o-animation: timer 15000ms infinite linear;
animation: timer 15000ms infinite linear;
-webkit-transform-origin: 3px 3px;
-moz-transform-origin: 3px 3px;
-ms-transform-origin: 3px 3px;
-o-transform-origin: 3px 3px;
transform-origin: 3px 3px;
background: #cc88dd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
content: '';
display: block;
position: absolute;
width: 6px;
height: 16px;
left: 15px;
top: 15px;
}
@-webkit-keyframes three-quarters {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes three-quarters {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes three-quarters {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes three-quarters {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Styles for old versions of IE */
.three-quarters {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.three-quarters:not(:required) {
-webkit-animation: three-quarters 1250ms infinite linear;
-moz-animation: three-quarters 1250ms infinite linear;
-ms-animation: three-quarters 1250ms infinite linear;
-o-animation: three-quarters 1250ms infinite linear;
animation: three-quarters 1250ms infinite linear;
border: 8px solid #3388ee;
border-right-color: transparent;
border-radius: 16px;
box-sizing: border-box;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 32px;
height: 32px;
}
@-webkit-keyframes wobblebar {
0% {
left: 4px;
}
3% {
left: 104px;
}
6% {
left: 4px;
}
9% {
left: 104px;
}
12% {
left: 4px;
}
15% {
left: 104px;
}
18% {
left: 32px;
}
27% {
left: 32px;
}
30% {
left: 104px;
}
33% {
left: 4px;
}
36% {
left: 104px;
}
39% {
left: 4px;
}
42% {
left: 104px;
}
45% {
left: 4px;
}
48% {
left: 104px;
}
51% {
left: 52px;
}
63% {
left: 52px;
}
66% {
left: 4px;
}
69% {
left: 104px;
}
72% {
left: 4px;
}
75% {
left: 104px;
}
78% {
left: 4px;
}
81% {
left: 104px;
}
84% {
left: 72px;
}
94% {
left: 72px;
}
97% {
left: 104px;
}
}
@-moz-keyframes wobblebar {
0% {
left: 4px;
}
3% {
left: 104px;
}
6% {
left: 4px;
}
9% {
left: 104px;
}
12% {
left: 4px;
}
15% {
left: 104px;
}
18% {
left: 32px;
}
27% {
left: 32px;
}
30% {
left: 104px;
}
33% {
left: 4px;
}
36% {
left: 104px;
}
39% {
left: 4px;
}
42% {
left: 104px;
}
45% {
left: 4px;
}
48% {
left: 104px;
}
51% {
left: 52px;
}
63% {
left: 52px;
}
66% {
left: 4px;
}
69% {
left: 104px;
}
72% {
left: 4px;
}
75% {
left: 104px;
}
78% {
left: 4px;
}
81% {
left: 104px;
}
84% {
left: 72px;
}
94% {
left: 72px;
}
97% {
left: 104px;
}
}
@-o-keyframes wobblebar {
0% {
left: 4px;
}
3% {
left: 104px;
}
6% {
left: 4px;
}
9% {
left: 104px;
}
12% {
left: 4px;
}
15% {
left: 104px;
}
18% {
left: 32px;
}
27% {
left: 32px;
}
30% {
left: 104px;
}
33% {
left: 4px;
}
36% {
left: 104px;
}
39% {
left: 4px;
}
42% {
left: 104px;
}
45% {
left: 4px;
}
48% {
left: 104px;
}
51% {
left: 52px;
}
63% {
left: 52px;
}
66% {
left: 4px;
}
69% {
left: 104px;
}
72% {
left: 4px;
}
75% {
left: 104px;
}
78% {
left: 4px;
}
81% {
left: 104px;
}
84% {
left: 72px;
}
94% {
left: 72px;
}
97% {
left: 104px;
}
}
@keyframes wobblebar {
0% {
left: 4px;
}
3% {
left: 104px;
}
6% {
left: 4px;
}
9% {
left: 104px;
}
12% {
left: 4px;
}
15% {
left: 104px;
}
18% {
left: 32px;
}
27% {
left: 32px;
}
30% {
left: 104px;
}
33% {
left: 4px;
}
36% {
left: 104px;
}
39% {
left: 4px;
}
42% {
left: 104px;
}
45% {
left: 4px;
}
48% {
left: 104px;
}
51% {
left: 52px;
}
63% {
left: 52px;
}
66% {
left: 4px;
}
69% {
left: 104px;
}
72% {
left: 4px;
}
75% {
left: 104px;
}
78% {
left: 4px;
}
81% {
left: 104px;
}
84% {
left: 72px;
}
94% {
left: 72px;
}
97% {
left: 104px;
}
}
/* Styles for old versions of IE */
.wobblebar {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.wobblebar:not(:required) {
background: #aa99dd;
-webkit-border-radius: 10.66667px;
-moz-border-radius: 10.66667px;
-ms-border-radius: 10.66667px;
-o-border-radius: 10.66667px;
border-radius: 10.66667px;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
width: 128px;
height: 21.33333px;
position: relative;
}
.wobblebar:not(:required)::after {
-webkit-animation: wobblebar 15000ms infinite ease;
-moz-animation: wobblebar 15000ms infinite ease;
-ms-animation: wobblebar 15000ms infinite ease;
-o-animation: wobblebar 15000ms infinite ease;
animation: wobblebar 15000ms infinite ease;
background: white;
display: block;
-webkit-border-radius: 7.11111px;
-moz-border-radius: 7.11111px;
-ms-border-radius: 7.11111px;
-o-border-radius: 7.11111px;
border-radius: 7.11111px;
content: '';
position: absolute;
top: 3.55556px;
left: 4px;
width: 21.33333px;
height: 14.22222px;
}
@-webkit-keyframes atebits {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
3% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
10% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
13% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
20% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
23% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
30% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
33% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
40% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
43% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
53% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
63% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
70% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
73% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
83% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
90% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
93% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes atebits {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
3% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
10% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
13% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
20% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
23% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
30% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
33% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
40% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
43% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
53% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
63% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
70% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
73% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
83% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
90% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
93% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-o-keyframes atebits {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
3% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
10% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
13% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
20% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
23% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
30% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
33% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
40% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
43% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
53% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
63% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
70% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
73% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
83% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
90% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
93% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes atebits {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
3% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
10% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
13% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
20% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
23% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
30% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
33% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
40% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
43% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
53% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
63% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
70% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
73% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
83% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
90% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
93% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* Styles for old versions of IE */
.atebits {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.atebits:not(:required) {
background: rgba(0, 0, 0, 0.5);
display: inline-block;
width: 9px;
height: 9px;
overflow: hidden;
position: relative;
text-indent: -9999px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
-webkit-animation: atebits 8s infinite ease-in-out;
-moz-animation: atebits 8s infinite ease-in-out;
-ms-animation: atebits 8s infinite ease-in-out;
-o-animation: atebits 8s infinite ease-in-out;
animation: atebits 8s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes whirly {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes whirly {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes whirly {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes whirly {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Styles for old versions of IE */
.whirly {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.whirly:not(:required) {
overflow: hidden;
position: relative;
text-indent: -9999px;
display: inline-block;
width: 8px;
height: 8px;
background: transparent;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px;
-moz-box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px;
box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px;
-webkit-animation: whirly 1.25s infinite linear;
-moz-animation: whirly 1.25s infinite linear;
-ms-animation: whirly 1.25s infinite linear;
-o-animation: whirly 1.25s infinite linear;
animation: whirly 1.25s infinite linear;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes flower {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
}
50% {
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
transform: rotate(1080deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
}
}
@-moz-keyframes flower {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
}
50% {
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
transform: rotate(1080deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
}
}
@-o-keyframes flower {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
}
50% {
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
transform: rotate(1080deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
}
}
@keyframes flower {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
}
50% {
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
transform: rotate(1080deg);
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
}
}
/* Styles for old versions of IE */
.flower {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.flower:not(:required) {
overflow: hidden;
position: relative;
text-indent: -9999px;
display: inline-block;
width: 16px;
height: 16px;
background: #f15a00;
border-radius: 100%;
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
-webkit-animation: flower 5s infinite ease-in-out;
-moz-animation: flower 5s infinite ease-in-out;
-ms-animation: flower 5s infinite ease-in-out;
-o-animation: flower 5s infinite ease-in-out;
animation: flower 5s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes dots {
0% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
8.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
16.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
25% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
33.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
}
41.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
50% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
58.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
66.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
75% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
83.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
}
91.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
100% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
}
@-moz-keyframes dots {
0% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
8.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
16.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
25% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
33.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
}
41.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
50% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
58.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
66.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
75% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
83.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
}
91.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
100% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
}
@-o-keyframes dots {
0% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
8.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
16.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
25% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
33.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
}
41.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
50% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
58.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
66.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
75% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
83.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
}
91.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
100% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
}
@keyframes dots {
0% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
8.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
16.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
25% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
33.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
}
41.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
50% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
58.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
66.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
75% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
}
83.33% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
}
91.67% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
100% {
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
}
}
/* Styles for old versions of IE */
.dots {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.dots:not(:required) {
overflow: hidden;
position: relative;
text-indent: -9999px;
display: inline-block;
width: 7px;
height: 7px;
background: transparent;
border-radius: 100%;
-webkit-box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-moz-box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
-webkit-animation: dots 5s infinite ease-in-out;
-moz-animation: dots 5s infinite ease-in-out;
-ms-animation: dots 5s infinite ease-in-out;
-o-animation: dots 5s infinite ease-in-out;
animation: dots 5s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes circles {
0% {
-webkit-transform: rotate(-720deg);
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-o-transform: rotate(-720deg);
transform: rotate(-720deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@-moz-keyframes circles {
0% {
-webkit-transform: rotate(-720deg);
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-o-transform: rotate(-720deg);
transform: rotate(-720deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@-o-keyframes circles {
0% {
-webkit-transform: rotate(-720deg);
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-o-transform: rotate(-720deg);
transform: rotate(-720deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@keyframes circles {
0% {
-webkit-transform: rotate(-720deg);
-moz-transform: rotate(-720deg);
-ms-transform: rotate(-720deg);
-o-transform: rotate(-720deg);
transform: rotate(-720deg);
}
50% {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
}
/* Styles for old versions of IE */
.circles {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.circles:not(:required) {
position: relative;
text-indent: -9999px;
display: inline-block;
width: 25px;
height: 25px;
background: rgba(255, 204, 51, 0.9);
border-radius: 100%;
-webkit-animation: circles 3s infinite ease-in-out;
-moz-animation: circles 3s infinite ease-in-out;
-ms-animation: circles 3s infinite ease-in-out;
-o-animation: circles 3s infinite ease-in-out;
animation: circles 3s infinite ease-in-out;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.circles:not(:required)::before {
background: rgba(255, 102, 0, 0.6);
border-radius: 100%;
content: '';
position: absolute;
width: 25px;
height: 25px;
top: 18.75px;
left: -10.82532px;
}
.circles:not(:required)::after {
background: rgba(255, 51, 0, 0.4);
border-radius: 100%;
content: '';
position: absolute;
width: 25px;
height: 25px;
top: 18.75px;
left: 10.82532px;
}
@-webkit-keyframes plus-top {
2.5% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
13.75% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
13.76% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
27.5% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
41.25% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
41.26% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
52.5% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
63.75% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
63.76% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
77.5% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
91.25% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
91.26% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-moz-keyframes plus-top {
2.5% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
13.75% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
13.76% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
27.5% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
41.25% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
41.26% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
52.5% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
63.75% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
63.76% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
77.5% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
91.25% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
91.26% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-o-keyframes plus-top {
2.5% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
13.75% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
13.76% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
27.5% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
41.25% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
41.26% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
52.5% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
63.75% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
63.76% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
77.5% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
91.25% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
91.26% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@keyframes plus-top {
2.5% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
13.75% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
13.76% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
27.5% {
background: #ffcc66;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
41.25% {
background: #ffae0d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
41.26% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
52.5% {
background: #66dd77;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
63.75% {
background: #2cc642;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
63.76% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
77.5% {
background: #44aaee;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
91.25% {
background: #1386d2;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
91.26% {
background: #ff430d;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
background: #ff8866;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-webkit-keyframes plus-bottom {
0% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
50% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
75% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
100% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-moz-keyframes plus-bottom {
0% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
50% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
75% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
100% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-o-keyframes plus-bottom {
0% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
50% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
75% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
100% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@keyframes plus-bottom {
0% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
50% {
background: #ffcc66;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
75% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
100% {
background: #44aaee;
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-webkit-keyframes plus-background {
0% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
25% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
27.5% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
50% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
52.5% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
75% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
77.5% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
}
100% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-moz-keyframes plus-background {
0% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
25% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
27.5% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
50% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
52.5% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
75% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
77.5% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
}
100% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@-o-keyframes plus-background {
0% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
25% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
27.5% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
50% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
52.5% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
75% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
77.5% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
}
100% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
@keyframes plus-background {
0% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
25% {
background: #ff8866;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
27.5% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
50% {
background: #66dd77;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
52.5% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
75% {
background: #66dd77;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
77.5% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
}
100% {
background: #ff8866;
-webkit-transform: rotateZ(270deg);
-moz-transform: rotateZ(270deg);
-ms-transform: rotateZ(270deg);
-o-transform: rotateZ(270deg);
transform: rotateZ(270deg);
-webkit-animation-timing-function: step-start;
-moz-animation-timing-function: step-start;
-ms-animation-timing-function: step-start;
-o-animation-timing-function: step-start;
animation-timing-function: step-start;
}
}
/* Styles for old versions of IE */
.plus {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.plus:not(:required) {
overflow: hidden;
position: relative;
text-indent: -9999px;
display: inline-block;
width: 48px;
height: 48px;
background: #ff8866;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
-ms-border-radius: 24px;
-o-border-radius: 24px;
border-radius: 24px;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: plus-background 3s infinite ease-in-out;
-moz-animation: plus-background 3s infinite ease-in-out;
-ms-animation: plus-background 3s infinite ease-in-out;
-o-animation: plus-background 3s infinite ease-in-out;
animation: plus-background 3s infinite ease-in-out;
}
.plus:not(:required)::after {
background: #ff8866;
-webkit-border-radius: 24px 0 0 24px;
-moz-border-radius: 24px 0 0 24px;
-ms-border-radius: 24px 0 0 24px;
-o-border-radius: 24px 0 0 24px;
border-radius: 24px 0 0 24px;
content: '';
position: absolute;
right: 50%;
top: 0;
width: 50%;
height: 100%;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: plus-top 3s infinite linear;
-moz-animation: plus-top 3s infinite linear;
-ms-animation: plus-top 3s infinite linear;
-o-animation: plus-top 3s infinite linear;
animation: plus-top 3s infinite linear;
}
.plus:not(:required)::before {
background: #ffcc66;
-webkit-border-radius: 24px 0 0 24px;
-moz-border-radius: 24px 0 0 24px;
-ms-border-radius: 24px 0 0 24px;
-o-border-radius: 24px 0 0 24px;
border-radius: 24px 0 0 24px;
content: '';
position: absolute;
right: 50%;
top: 0;
width: 50%;
height: 100%;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: plus-bottom 3s infinite linear;
-moz-animation: plus-bottom 3s infinite linear;
-ms-animation: plus-bottom 3s infinite linear;
-o-animation: plus-bottom 3s infinite linear;
animation: plus-bottom 3s infinite linear;
}
@-webkit-keyframes ball {
0% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@-moz-keyframes ball {
0% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@-o-keyframes ball {
0% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes ball {
0% {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@-webkit-keyframes ball-highlight {
0% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@-moz-keyframes ball-highlight {
0% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@-o-keyframes ball-highlight {
0% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes ball-highlight {
0% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
transform: skew(-30deg, 0) translate3d(0, 0, 1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@-webkit-keyframes ball-shadow {
0% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@-moz-keyframes ball-shadow {
0% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@-o-keyframes ball-shadow {
0% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes ball-shadow {
0% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
55% {
-webkit-transform: translate3d(12.5px, -15px, -1px);
-moz-transform: translate3d(12.5px, -15px, -1px);
-ms-transform: translate3d(12.5px, -15px, -1px);
-o-transform: translate3d(12.5px, -15px, -1px);
transform: translate3d(12.5px, -15px, -1px);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
/* Styles for old versions of IE */
.ball {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.ball:not(:required) {
position: relative;
display: inline-block;
font-size: 0;
letter-spacing: -1px;
border-radius: 100%;
background: #ff8866;
width: 50px;
height: 50px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-animation: ball 1500ms infinite linear;
-moz-animation: ball 1500ms infinite linear;
-ms-animation: ball 1500ms infinite linear;
-o-animation: ball 1500ms infinite linear;
animation: ball 1500ms infinite linear;
}
.ball:not(:required)::after {
content: '';
position: absolute;
top: 4.5px;
left: 5.5px;
width: 15px;
height: 15px;
background: #ffb099;
border-radius: 100%;
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
-webkit-animation: ball-highlight 1500ms infinite linear;
-moz-animation: ball-highlight 1500ms infinite linear;
-ms-animation: ball-highlight 1500ms infinite linear;
-o-animation: ball-highlight 1500ms infinite linear;
animation: ball-highlight 1500ms infinite linear;
}
.ball:not(:required)::before {
content: '';
position: absolute;
top: 50px;
left: 5.5px;
width: 50px;
height: 15px;
background: rgba(0, 0, 0, 0.2);
border-radius: 100%;
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
-webkit-animation: ball-shadow 1500ms infinite linear;
-moz-animation: ball-shadow 1500ms infinite linear;
-ms-animation: ball-shadow 1500ms infinite linear;
-o-animation: ball-shadow 1500ms infinite linear;
animation: ball-shadow 1500ms infinite linear;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
filter: blur(1px);
}
/* Css Spinners */
.cell {
background: #ffffff none repeat scroll 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
float: left;
height: 185px;
margin-top: 30px;
overflow: hidden;
padding: 20px;
width: 100%;
}
/*******************/
@keyframes lds-wedges {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes lds-wedges {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.lds-wedges {
position: relative;
}
.lds-wedges > div > div {
-webkit-transform-origin: 100px 100px;
transform-origin: 100px 100px;
-webkit-animation: lds-wedges 4s linear infinite;
animation: lds-wedges 4s linear infinite;
opacity: 0.8;
}
.lds-wedges > div > div > div {
position: absolute;
left: 30px;
top: 30px;
width: 70px;
height: 70px;
border-radius: 70px 0 0 0;
-webkit-transform-origin: 100px 100px;
transform-origin: 100px 100px;
}
.lds-wedges > div div:nth-child(1) > div {
background: #05396b;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.lds-wedges > div div:nth-child(1) {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.lds-wedges > div div:nth-child(2) > div {
background: #389583;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.lds-wedges > div div:nth-child(2) {
-webkit-animation-duration: 1.333333333333333s;
animation-duration: 1.333333333333333s;
}
.lds-wedges > div div:nth-child(3) > div {
background: #5cdb94;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.lds-wedges > div div:nth-child(3) {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.lds-wedges > div div:nth-child(4) > div {
background: #8de4af;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.lds-wedges > div div:nth-child(4) {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.lds-wedges {
width: 110px !important;
height: 110px !important;
-webkit-transform: translate(-55px, -55px) scale(0.55) translate(55px, 55px);
transform: translate(-55px, -55px) scale(0.55) translate(55px, 55px);
}
/****loader 100******/
/* Texto cargando */
.heightauto{height:auto !important;}
.ctn-preloader .animation-preloader .txt-loading {
text-align: center;
user-select: none;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
animation: letters-loading 4s infinite;
color: #ff3946;
content: attr(data-text-preloader);
left: 0;
opacity: 0;
top:0;
line-height: 70px;
position: absolute;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading {
font-family: 'Righteous', cursive;
font-weight: 700;
letter-spacing: 15px;
display: inline-block;
color: rgba(255, 57, 70, 0.15);
position: relative;
font-size: 70px;
line-height: 70px;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;}
.ctn-preloader .loader-section {
background-color: #ffffff;
height: 100%;
position: fixed;
top: 0;
width: calc(50% + 1px);
}
.loaded .animation-preloader {
opacity: 0;
transition: 0.3s ease-out;
}
@keyframes letters-loading {
0%,
75%,
100% {
opacity: 0;
transform: rotateY(-90deg);
}
25%,
50% {
opacity: 1;
transform: rotateY(0deg);
}
}
/**finger spinner***/
.fingerprint-spinner, .fingerprint-spinner * {
box-sizing: border-box;
}
.fingerprint-spinner {
height: 115px;
width: 115px;
padding: 2px;
overflow: hidden;
position: relative;
}
.fingerprint-spinner .spinner-ring {
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #87ff09;
animation: fingerprint-spinner-animation 1500ms cubic-bezier(0.680, -0.750, 0.265, 1.750) infinite forwards;
margin: auto;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.fingerprint-spinner .spinner-ring:nth-child(1) {
height: calc(60px / 9 + 0 * 60px / 9);
width: calc(60px / 9 + 0 * 60px / 9);
animation-delay: calc(50ms * 1);
}
.fingerprint-spinner .spinner-ring:nth-child(2) {
height: calc(60px / 9 + 1 * 60px / 9);
width: calc(60px / 9 + 1 * 60px / 9);
animation-delay: calc(50ms * 2);
}
.fingerprint-spinner .spinner-ring:nth-child(3) {
height: calc(60px / 9 + 2 * 60px / 9);
width: calc(60px / 9 + 2 * 60px / 9);
animation-delay: calc(50ms * 3);
}
.fingerprint-spinner .spinner-ring:nth-child(4) {
height: calc(60px / 9 + 3 * 60px / 9);
width: calc(60px / 9 + 3 * 60px / 9);
animation-delay: calc(50ms * 4);
}
.fingerprint-spinner .spinner-ring:nth-child(5) {
height: calc(60px / 9 + 4 * 60px / 9);
width: calc(60px / 9 + 4 * 60px / 9);
animation-delay: calc(50ms * 5);
}
.fingerprint-spinner .spinner-ring:nth-child(6) {
height: calc(60px / 9 + 5 * 60px / 9);
width: calc(60px / 9 + 5 * 60px / 9);
animation-delay: calc(50ms * 6);
}
.fingerprint-spinner .spinner-ring:nth-child(7) {
height: calc(60px / 9 + 6 * 60px / 9);
width: calc(60px / 9 + 6 * 60px / 9);
animation-delay: calc(50ms * 7);
}
.fingerprint-spinner .spinner-ring:nth-child(8) {
height: calc(60px / 9 + 7 * 60px / 9);
width: calc(60px / 9 + 7 * 60px / 9);
animation-delay: calc(50ms * 8);
}
.fingerprint-spinner .spinner-ring:nth-child(9) {
height: calc(60px / 9 + 8 * 60px / 9);
width: calc(60px / 9 + 8 * 60px / 9);
animation-delay: calc(50ms * 9);
}
@keyframes fingerprint-spinner-animation {
100% {
transform: rotate( 360deg );
}
}
/***********************end****/
.intersecting-circles-spinner, .intersecting-circles-spinner * {
box-sizing: border-box;
}
.intersecting-circles-spinner {
height: 115px;
width: 115px;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.intersecting-circles-spinner .spinnerBlock {
animation: intersecting-circles-spinners-animation 1200ms linear infinite;
transform-origin: center;
display: block;
height: 35px;
width: 35px;
}
.intersecting-circles-spinner .circle {
display: block;
border: 2px solid #ff1d5e;
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.intersecting-circles-spinner .circle:nth-child(1) {
left: 0;
top: 0;
}
.intersecting-circles-spinner .circle:nth-child(2) {
left: calc(35px * -0.36);
top: calc(35px * 0.2);
}
.intersecting-circles-spinner .circle:nth-child(3) {
left: calc(35px * -0.36);
top: calc(35px * -0.2);
}
.intersecting-circles-spinner .circle:nth-child(4) {
left: 0;
top: calc(35px * -0.36);
}
.intersecting-circles-spinner .circle:nth-child(5) {
left: calc(35px * 0.36);
top: calc(35px * -0.2);
}
.intersecting-circles-spinner .circle:nth-child(6) {
left: calc(35px * 0.36);
top: calc(35px * 0.2);
}
.intersecting-circles-spinner .circle:nth-child(7) {
left: 0;
top: calc(35px * 0.36);
}
@keyframes intersecting-circles-spinners-animation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/**********end********/
.trinity-rings-spinner, .trinity-rings-spinner * {
box-sizing: border-box;
}
.trinity-rings-spinner {
height: 115px;
width: 115px;
padding: 3px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
overflow: hidden;
box-sizing: border-box;
}
.trinity-rings-spinner .circle {
position:absolute;
display:block;
border-radius:50%;
border: 3px solid #8eff0a;
opacity: 1;
}
.trinity-rings-spinner .circle:nth-child(1) {
height: 60px;
width: 60px;
animation : trinity-rings-spinner-circle1-animation 1.5s infinite linear;
border-width: 3px;
}
.trinity-rings-spinner .circle:nth-child(2) {
height: calc(60px * 0.65);
width: calc(60px * 0.65);
animation : trinity-rings-spinner-circle2-animation 1.5s infinite linear;
border-width: 2px;
}
.trinity-rings-spinner .circle:nth-child(3) {
height: calc(60px * 0.1);
width: calc(60px * 0.1);
animation:trinity-rings-spinner-circle3-animation 1.5s infinite linear;
border-width: 1px;
}
@keyframes trinity-rings-spinner-circle1-animation{
0% {
transform: rotateZ(20deg) rotateY(0deg);
}
100% {
transform: rotateZ(100deg) rotateY(360deg);
}
}
@keyframes trinity-rings-spinner-circle2-animation{
0% {
transform: rotateZ(100deg) rotateX(0deg);
}
100% {
transform: rotateZ(0deg) rotateX(360deg);
}
}
@keyframes trinity-rings-spinner-circle3-animation{
0% {
transform: rotateZ(100deg) rotateX(-360deg);
}
100% {
transform: rotateZ(-360deg) rotateX(360deg);
}
}
/************************end***********/
.atom-spinner, .atom-spinner * {
box-sizing: border-box;
}
.atom-spinner {
height: 100px;
width: 100px;
overflow: hidden;
}
.atom-spinner .spinner-inner {
position: relative;
display: block;
height: 100%;
width: 100%;
}
.atom-spinner .spinner-circle {
display: block;
position: absolute;
color: #1da1ff;
font-size: calc(100px * 0.24);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.atom-spinner .spinner-line {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation-duration: 1s;
border-left-width: calc(60px / 25);
border-top-width: calc(60px / 25);
border-left-color: #2efacb;
border-left-style: solid;
border-top-style: solid;
border-top-color: transparent;
}
.atom-spinner .spinner-line:nth-child(1) {
animation: atom-spinner-animation-1 1s linear infinite;
transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
}
.atom-spinner .spinner-line:nth-child(2) {
animation: atom-spinner-animation-2 1s linear infinite;
transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
}
.atom-spinner .spinner-line:nth-child(3) {
animation: atom-spinner-animation-3 1s linear infinite;
transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
}
@keyframes atom-spinner-animation-1 {
100% {
transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
}
}
@keyframes atom-spinner-animation-2 {
100% {
transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
}
}
@keyframes atom-spinner-animation-3 {
100% {
transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
}
}
/************************end*********/
.breeding-rhombus-spinner {
height: 115px;
width:115px;
position: relative;
transform: rotate(45deg);
margin-top:25px;
}
.breeding-rhombus-spinner, .breeding-rhombus-spinner * {
box-sizing: border-box;
}
.breeding-rhombus-spinner .rhombus {
height: calc(65px / 7.5);
width: calc(65px / 7.5);
animation-duration: 2000ms;
top: calc(65px / 2.3077);
left: calc(65px / 2.3077);
background-color: #00ffdb;
position: absolute;
animation-iteration-count: infinite;
border-radius: 50% 49% 20%;
}
.breeding-rhombus-spinner .rhombus:nth-child(2n+0) {
margin-right: 0;
}
.breeding-rhombus-spinner .rhombus.child-1 {
animation-name: breeding-rhombus-spinner-animation-child-1;
animation-delay: calc(100ms * 1);
}
.breeding-rhombus-spinner .rhombus.child-2 {
animation-name: breeding-rhombus-spinner-animation-child-2;
animation-delay: calc(100ms * 2);
}
.breeding-rhombus-spinner .rhombus.child-3 {
animation-name: breeding-rhombus-spinner-animation-child-3;
animation-delay: calc(100ms * 3);
}
.breeding-rhombus-spinner .rhombus.child-4 {
animation-name: breeding-rhombus-spinner-animation-child-4;
animation-delay: calc(100ms * 4);
}
.breeding-rhombus-spinner .rhombus.child-5 {
animation-name: breeding-rhombus-spinner-animation-child-5;
animation-delay: calc(100ms * 5);
}
.breeding-rhombus-spinner .rhombus.child-6 {
animation-name: breeding-rhombus-spinner-animation-child-6;
animation-delay: calc(100ms * 6);
}
.breeding-rhombus-spinner .rhombus.child-7 {
animation-name: breeding-rhombus-spinner-animation-child-7;
animation-delay: calc(100ms * 7);
}
.breeding-rhombus-spinner .rhombus.child-8 {
animation-name: breeding-rhombus-spinner-animation-child-8;
animation-delay: calc(100ms * 8);
}
.breeding-rhombus-spinner .rhombus.big {
height: calc(65px / 3);
width: calc(65px / 3);
animation-duration: 2000ms;
top: calc(65px / 3);
left: calc(65px / 3);
background-color: #032f48;
animation: breeding-rhombus-spinner-animation-child-big 2s infinite;
animation-delay: 0.5s;
border-radius: 50% 49% 20%;
}
@keyframes breeding-rhombus-spinner-animation-child-1 {
50% {
transform: translate(-325%, -325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-2 {
50% {
transform: translate(0, -325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-3 {
50% {
transform: translate(325%, -325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-4 {
50% {
transform: translate(325%, 0);
}
}
@keyframes breeding-rhombus-spinner-animation-child-5 {
50% {
transform: translate(325%, 325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-6 {
50% {
transform: translate(0, 325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-7 {
50% {
transform: translate(-325%, 325%);
}
}
@keyframes breeding-rhombus-spinner-animation-child-8 {
50% {
transform: translate(-325%, 0);
}
}
@keyframes breeding-rhombus-spinner-animation-child-big {
50% {
transform: scale(0.5);
}
}
/*****************end****************/
.swapping-squares-spinner, .swapping-squares-spinner * {
box-sizing: border-box;
}
.swapping-squares-spinner {
height: 115px;
width: 115px;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.swapping-squares-spinner .square {
height: calc(65px * 0.25 / 1.3);
width: calc(65px * 0.25 / 1.3);
animation-duration: 1000ms;
border: calc(65px * 0.04 / 1.3) solid #ff1d5e;
margin-right: auto;
margin-left: auto;
position: absolute;
animation-iteration-count: infinite;
}
.swapping-squares-spinner .square:nth-child(1) {
animation-name: swapping-squares-animation-child-1;
animation-delay: 500ms;
}
.swapping-squares-spinner .square:nth-child(2) {
animation-name: swapping-squares-animation-child-2;
animation-delay: 0ms;
}
.swapping-squares-spinner .square:nth-child(3) {
animation-name: swapping-squares-animation-child-3;
animation-delay: 500ms;
}
.swapping-squares-spinner .square:nth-child(4) {
animation-name: swapping-squares-animation-child-4;
animation-delay: 0ms;
}
@keyframes swapping-squares-animation-child-1 {
50% {
transform: translate(150%,150%) scale(2,2);
}
}
@keyframes swapping-squares-animation-child-2 {
50% {
transform: translate(-150%,150%) scale(2,2);
}
}
@keyframes swapping-squares-animation-child-3 {
50% {
transform: translate(-150%,-150%) scale(2,2);
}
}
@keyframes swapping-squares-animation-child-4 {
50% {
transform: translate(150%,-150%) scale(2,2);
}
}
/***************End*************/
.flower-circles-spinner, .flower-circles-spinner * {
box-sizing: border-box;
}
.flower-circles-spinner {
height: 115px;
width: 115px;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.flower-circles-spinner .flowerspinnerBlock {
animation: flower-circles-spinners-animation 1200ms linear infinite;
transform-origin: center;
display: block;
height: 35px;
width: 35px;
}
.flower-circles-spinner .circle {
display: block;
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.flower-circles-spinner .circle:nth-child(1) {
left: 0;
top: 0;
background-color: rgba(66, 255, 0, 0.5);
}
.flower-circles-spinner .circle:nth-child(2) {
left: calc(35px * -0.36);
top: calc(35px * 0.2);
background-color: rgba(66, 255, 0, 0.5);
}
.flower-circles-spinner .circle:nth-child(3) {
left: calc(35px * -0.36);
top: calc(35px * -0.2);
background-color: rgba(66, 255, 0, 0.5);
}
.flower-circles-spinner .circle:nth-child(4) {
left: 0;
top: calc(35px * -0.36);
background-color: rgba(66, 255, 0, 0.5);
}
.flower-circles-spinner .circle:nth-child(5) {
left: calc(35px * 0.36);
top: calc(35px * -0.2);
background-color: rgba(66, 255, 0, 0.5);
}
.flower-circles-spinner .circle:nth-child(6) {
left: calc(35px * 0.36);
top: calc(35px * 0.2);
background-color: rgba(66, 255, 0, 0.5);
}
.flower-circles-spinner .circle:nth-child(7) {
left: 0;
top: calc(35px * 0.36);
background-color: rgba(66, 255, 0, 0.5);
}
@keyframes flower-circles-spinners-animation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/**********end********/
/************bg*********/
.bg-blue
{
background-color: #133471 !important;
}
.bg-blue-gradient
{
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12) !important;
}
.bg-perpule-gradient
{
background-image: linear-gradient(to right top, #380892, #630caa, #8c0fc1, #b711d7, #e212eb) !important;
}
.bg-blue-gradient
{
background-image: linear-gradient(to right top, #2c54e5, #0242b1, #00307e, #001e4d, #000621) !important;
}
.bg-green-grd
{
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12) !important;
}
.bg-new-blue
{
background-image: linear-gradient(to right top, #052137, #004d6b, #008099, #00b5b7, #12ebc5) !important;
}
!
