.cs-animation {
visibility: hidden;
}
.cs-start-animation {
visibility: visible;
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.cs-start-animation.infinite {
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.cs-start-animation.fadeIn {
-moz-animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.cs-start-animation.fadeInLeft {
-moz-animation-name: fadeInLeft;
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.cs-start-animation.fadeInRight {
-moz-animation-name: fadeInRight;
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.cs-start-animation.fadeInUp {
-moz-animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.cs-start-animation.fadeInDown {
-moz-animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.cs-start-animation.bounce {
-moz-animation-name: bounce;
-webkit-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.cs-start-animation.flash {
-moz-animation-name: flash;
-webkit-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes pulse {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
.cs-start-animation.pulse {
-moz-animation-name: pulse;
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes shake {
0%, 100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
.cs-start-animation.shake {
-moz-animation-name: shake;
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes swing {
20% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.cs-start-animation.swing {
-moz-animation-name: swing;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-moz-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-moz-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-moz-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-moz-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-moz-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-moz-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.cs-start-animation.tada {
-moz-animation-name: tada;
-webkit-animation-name: tada;
animation-name: tada;
}
@-webkit-keyframes wobble {
0% {
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-moz-transform: translateX(-25%) rotate(-5deg);
-ms-transform: translateX(-25%) rotate(-5deg);
-webkit-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-moz-transform: translateX(20%) rotate(3deg);
-ms-transform: translateX(20%) rotate(3deg);
-webkit-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-moz-transform: translateX(-15%) rotate(-3deg);
-ms-transform: translateX(-15%) rotate(-3deg);
-webkit-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-moz-transform: translateX(10%) rotate(2deg);
-ms-transform: translateX(10%) rotate(2deg);
-webkit-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-moz-transform: translateX(-5%) rotate(-1deg);
-ms-transform: translateX(-5%) rotate(-1deg);
-webkit-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes wobble {
0% {
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-moz-transform: translateX(-25%) rotate(-5deg);
-ms-transform: translateX(-25%) rotate(-5deg);
-webkit-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-moz-transform: translateX(20%) rotate(3deg);
-ms-transform: translateX(20%) rotate(3deg);
-webkit-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-moz-transform: translateX(-15%) rotate(-3deg);
-ms-transform: translateX(-15%) rotate(-3deg);
-webkit-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-moz-transform: translateX(10%) rotate(2deg);
-ms-transform: translateX(10%) rotate(2deg);
-webkit-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-moz-transform: translateX(-5%) rotate(-1deg);
-ms-transform: translateX(-5%) rotate(-1deg);
-webkit-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
.cs-start-animation.wobble {
-moz-animation-name: wobble;
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
.cs-start-animation.bounceIn {
-moz-animation-name: bounceIn;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
-ms-transform: translateX(30px);
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
-ms-transform: translateX(30px);
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.cs-start-animation.bounceInLeft {
-moz-animation-name: bounceInLeft;
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
-ms-transform: translateX(2000px);
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
-ms-transform: translateX(2000px);
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.cs-start-animation.bounceInRight {
-moz-animation-name: bounceInRight;
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.cs-start-animation.bounceInUp {
-moz-animation-name: bounceInUp;
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
-ms-transform: translateY(2000px);
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
-ms-transform: translateY(2000px);
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.cs-start-animation.bounceInDown {
-moz-animation-name: bounceInDown;
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
.fade {
opacity: 0;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.cs-fade {
opacity: 0;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.cs-fade.in {
opacity: 1;
}
.cs-start {
cursor: pointer;
}
.cs-start-icon {
color: #fff;
font-size: 20px;
padding: 12px;
cursor: pointer;
border-width: 2px;
border-style: solid;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.5);
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: startdown;
animation-name: startdown;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-transition: all 2s;
-o-transition: all 2s;
-webkit-transition: all 2s;
transition: all 2s;
}
.cs-start-icon:hover {
border-color: rgba(255, 255, 255, 0.2);
}
@-webkit-keyframes startdown {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes startdown {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.cs-start-animation.startdown {
-moz-animation-name: startdown;
-webkit-animation-name: startdown;
animation-name: startdown;
}
.cs-loader {
display: none;
position: relative;
left: 50%;
width: 20px;
height: 20px;
margin: 10px 0 10px -10px;
background: #ccc;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
}
.cs-loader:after {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
content: "";
margin-top: -2px;
margin-left: -2px;
background-color: white;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-name: csLoader;
-webkit-animation-name: csLoader;
animation-name: csLoader;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
@-webkit-keyframes csLoader {
0% {
-moz-transform: rotate(0deg) translateX(-6px) rotate(0deg);
-ms-transform: rotate(0deg) translateX(-6px) rotate(0deg);
-webkit-transform: rotate(0deg) translateX(-6px) rotate(0deg);
transform: rotate(0deg) translateX(-6px) rotate(0deg);
}
100% {
-moz-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
-ms-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
-webkit-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
transform: rotate(360deg) translateX(-6px) rotate(-360deg);
}
}
@keyframes csLoader {
0% {
-moz-transform: rotate(0deg) translateX(-6px) rotate(0deg);
-ms-transform: rotate(0deg) translateX(-6px) rotate(0deg);
-webkit-transform: rotate(0deg) translateX(-6px) rotate(0deg);
transform: rotate(0deg) translateX(-6px) rotate(0deg);
}
100% {
-moz-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
-ms-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
-webkit-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
transform: rotate(360deg) translateX(-6px) rotate(-360deg);
}
}
.cs-start-animation.csLoader {
-moz-animation-name: csLoader;
-webkit-animation-name: csLoader;
animation-name: csLoader;
}