方形变圆形html动画,CSS3 方形和圆形的切换过渡动画

CSS

语言：

CSSSCSS

确定

*,

*:before,

*:after {

box-sizing: border-box;

}

div {

margin: 0;

}

html {

height: 100%;

}

body {

background: -webkit-linear-gradient(305deg, #ededed, #aaa);

background: linear-gradient(145deg, #ededed, #aaa);

}

.grid {

width: 450px;

height: 250px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

.point {

width: 50px;

height: 50px;

float: left;

}

.point:nth-child(1) {

background: #960b92;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 0.8;

position: relative;

-webkit-animation: shift-1 10s ease infinite alternate;

animation: shift-1 10s ease infinite alternate;

}

@-webkit-keyframes shift-1 {

0% {

background: #962e67;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #960585;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96328b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #962b21;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96216a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #962574;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96067b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962666;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-1 {

0% {

background: #962e67;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #960585;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96328b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #962b21;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96216a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #962574;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96067b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962666;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(2) {

background: #962860;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.9;

position: relative;

-webkit-animation: shift-2 10s ease infinite alternate;

animation: shift-2 10s ease infinite alternate;

}

@-webkit-keyframes shift-2 {

0% {

background: #96283e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #961f61;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962c6c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #96144b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96048a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #9621a0;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #962302;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960b4f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-2 {

0% {

background: #96283e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #961f61;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962c6c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #96144b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96048a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #9621a0;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #962302;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960b4f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(3) {

background: #962a1e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.4;

position: relative;

-webkit-animation: shift-3 9s ease infinite alternate;

animation: shift-3 9s ease infinite alternate;

}

@-webkit-keyframes shift-3 {

0% {

background: #960625;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #960884;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #9630a8;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #9616a0;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962c68;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #96094e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #9608ba;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #961d21;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-3 {

0% {

background: #960625;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #960884;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #9630a8;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #9616a0;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962c68;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #96094e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #9608ba;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #961d21;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(4) {

background: #960c1c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.6;

position: relative;

-webkit-animation: shift-4 7s ease infinite alternate;

animation: shift-4 7s ease infinite alternate;

}

@-webkit-keyframes shift-4 {

0% {

background: #961a30;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961d32;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #961818;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #960a56;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #961708;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #96188b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962faf;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #96255b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-4 {

0% {

background: #961a30;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961d32;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #961818;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #960a56;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #961708;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #96188b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962faf;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #96255b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(5) {

background: #961934;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.4;

position: relative;

-webkit-animation: shift-5 8s ease infinite alternate;

animation: shift-5 8s ease infinite alternate;

}

@-webkit-keyframes shift-5 {

0% {

background: #962d3c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #962461;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #96097e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #962e7e;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962361;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #962d32;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #960f93;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96021a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-5 {

0% {

background: #962d3c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #962461;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #96097e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #962e7e;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962361;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #962d32;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #960f93;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96021a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(6) {

background: #962e9a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 1;

position: relative;

-webkit-animation: shift-6 7s ease infinite alternate;

animation: shift-6 7s ease infinite alternate;

}

@-webkit-keyframes shift-6 {

0% {

background: #960bbb;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #962b39;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #962e5f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962f8c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96318e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #962d8f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961520;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #962e02;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-6 {

0% {

background: #960bbb;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #962b39;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #962e5f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962f8c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96318e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #962d8f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961520;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #962e02;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(7) {

background: #961c6e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.5;

position: relative;

-webkit-animation: shift-7 10s ease infinite alternate;

animation: shift-7 10s ease infinite alternate;

}

@-webkit-keyframes shift-7 {

0% {

background: #962405;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961a9f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962b20;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962c90;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #960435;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #961615;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96293e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #9602a9;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-7 {

0% {

background: #962405;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961a9f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962b20;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962c90;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #960435;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #961615;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96293e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #9602a9;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(8) {

background: #96131d;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.7;

position: relative;

-webkit-animation: shift-8 8s ease infinite alternate;

animation: shift-8 8s ease infinite alternate;

}

@-webkit-keyframes shift-8 {

0% {

background: #961d6d;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #963165;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96207c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962113;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #960b6b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #963253;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961254;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #962b4a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-8 {

0% {

background: #961d6d;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #963165;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96207c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962113;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #960b6b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #963253;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961254;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #962b4a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(9) {

background: #962a0c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 0.3;

position: relative;

-webkit-animation: shift-9 9s ease infinite alternate;

animation: shift-9 9s ease infinite alternate;

}

@-webkit-keyframes shift-9 {

0% {

background: #960a14;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960476;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #960f89;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #961ca9;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96246f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #960123;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #96211f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #960851;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-9 {

0% {

background: #960a14;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960476;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #960f89;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #961ca9;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96246f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #960123;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #96211f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #960851;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(10) {

background: #962436;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 1.1;

position: relative;

-webkit-animation: shift-10 7s ease infinite alternate;

animation: shift-10 7s ease infinite alternate;

}

@-webkit-keyframes shift-10 {

0% {

background: #962d81;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960833;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #96328e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #963264;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961c2b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #962960;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96143e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96045b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-10 {

0% {

background: #962d81;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960833;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #96328e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #963264;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961c2b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #962960;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96143e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96045b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(11) {

background: #9628b7;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 1.1;

position: relative;

-webkit-animation: shift-11 10s ease infinite alternate;

animation: shift-11 10s ease infinite alternate;

}

@-webkit-keyframes shift-11 {

0% {

background: #960f41;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #962d36;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #962578;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #96037e;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #961e4f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #96044d;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #9610be;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960f0c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-11 {

0% {

background: #960f41;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #962d36;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #962578;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #96037e;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #961e4f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #96044d;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #9610be;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960f0c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(12) {

background: #96122c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.8;

position: relative;

-webkit-animation: shift-12 8s ease infinite alternate;

animation: shift-12 8s ease infinite alternate;

}

@-webkit-keyframes shift-12 {

0% {

background: #96283e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #961667;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #960120;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #961a04;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96067c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #963237;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #96105b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #963130;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-12 {

0% {

background: #96283e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #961667;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #960120;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #961a04;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96067c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #963237;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #96105b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #963130;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(13) {

background: #961842;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.5;

position: relative;

-webkit-animation: shift-13 8s ease infinite alternate;

animation: shift-13 8s ease infinite alternate;

}

@-webkit-keyframes shift-13 {

0% {

background: #961f25;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96249d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #96313e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962392;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #9611a6;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #960f5b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #962187;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #9617ac;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-13 {

0% {

background: #961f25;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96249d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #96313e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962392;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #9611a6;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #960f5b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #962187;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #9617ac;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(14) {

background: #962cc7;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.4;

position: relative;

-webkit-animation: shift-14 9s ease infinite alternate;

animation: shift-14 9s ease infinite alternate;

}

@-webkit-keyframes shift-14 {

0% {

background: #962254;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961962;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #963017;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961d6b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #961aa1;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #962fa8;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #961a53;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962196;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-14 {

0% {

background: #962254;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961962;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #963017;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961d6b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #961aa1;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #962fa8;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #961a53;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962196;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(15) {

background: #962297;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.4;

position: relative;

-webkit-animation: shift-15 10s ease infinite alternate;

animation: shift-15 10s ease infinite alternate;

}

@-webkit-keyframes shift-15 {

0% {

background: #961841;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #9606b2;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #963230;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #960761;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962e17;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #962c31;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962872;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #9618b5;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-15 {

0% {

background: #961841;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #9606b2;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #963230;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #960761;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962e17;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #962c31;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962872;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #9618b5;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(16) {

background: #963246;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.4;

position: relative;

-webkit-animation: shift-16 7s ease infinite alternate;

animation: shift-16 7s ease infinite alternate;

}

@-webkit-keyframes shift-16 {

0% {

background: #962d81;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #96148f;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962bc1;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #962949;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96014d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #9625c2;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962fc8;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962152;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-16 {

0% {

background: #962d81;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #96148f;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962bc1;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #962949;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96014d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #9625c2;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962fc8;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962152;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(17) {

background: #96268e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.9;

position: relative;

-webkit-animation: shift-17 7s ease infinite alternate;

animation: shift-17 7s ease infinite alternate;

}

@-webkit-keyframes shift-17 {

0% {

background: #960666;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #9615c3;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962055;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #962fa5;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #962bae;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #962e12;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961a3a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962dc2;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-17 {

0% {

background: #960666;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #9615c3;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962055;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #962fa5;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #962bae;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #962e12;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961a3a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962dc2;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(18) {

background: #96047d;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 1.2;

position: relative;

-webkit-animation: shift-18 7s ease infinite alternate;

animation: shift-18 7s ease infinite alternate;

}

@-webkit-keyframes shift-18 {

0% {

background: #9603bf;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #961d8e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #96109f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962909;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96021b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961f5a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #962544;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #963259;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-18 {

0% {

background: #9603bf;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #961d8e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #96109f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962909;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96021b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961f5a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #962544;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #963259;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(19) {

background: #9624bd;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.7;

position: relative;

-webkit-animation: shift-19 8s ease infinite alternate;

animation: shift-19 8s ease infinite alternate;

}

@-webkit-keyframes shift-19 {

0% {

background: #96079a;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #961941;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #96300d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96103f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96052d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #96017a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #9622bb;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #96119a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-19 {

0% {

background: #96079a;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #961941;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #96300d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96103f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96052d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #96017a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #9622bb;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #96119a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(20) {

background: #96059e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.6;

position: relative;

-webkit-animation: shift-20 10s ease infinite alternate;

animation: shift-20 10s ease infinite alternate;

}

@-webkit-keyframes shift-20 {

0% {

background: #96027e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #962c6a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #961f2c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96240c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96252e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #96283c;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961588;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #960b8e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-20 {

0% {

background: #96027e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #962c6a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #961f2c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96240c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #96252e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #96283c;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961588;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #960b8e;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(21) {

background: #96239c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 1.2;

position: relative;

-webkit-animation: shift-21 10s ease infinite alternate;

animation: shift-21 10s ease infinite alternate;

}

@-webkit-keyframes shift-21 {

0% {

background: #960aa9;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #960c6a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962c1c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #961abb;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #960539;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #961766;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #961566;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962ebe;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-21 {

0% {

background: #960aa9;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #960c6a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962c1c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #961abb;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #960539;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #961766;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #961566;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962ebe;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(22) {

background: #960140;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.4;

position: relative;

-webkit-animation: shift-22 8s ease infinite alternate;

animation: shift-22 8s ease infinite alternate;

}

@-webkit-keyframes shift-22 {

0% {

background: #96025b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #9619c5;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #9618a4;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #962faf;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96014b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960eb3;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960418;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962902;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-22 {

0% {

background: #96025b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #9619c5;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #9618a4;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #962faf;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96014b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960eb3;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960418;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #962902;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(23) {

background: #960c60;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.9;

position: relative;

-webkit-animation: shift-23 10s ease infinite alternate;

animation: shift-23 10s ease infinite alternate;

}

@-webkit-keyframes shift-23 {

0% {

background: #96309e;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #960976;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #960a0a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #961a77;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961d90;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #960959;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #962e04;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #961106;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-23 {

0% {

background: #96309e;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #960976;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #960a0a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #961a77;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961d90;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #960959;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #962e04;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #961106;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(24) {

background: #962e7f;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.5;

position: relative;

-webkit-animation: shift-24 9s ease infinite alternate;

animation: shift-24 9s ease infinite alternate;

}

@-webkit-keyframes shift-24 {

0% {

background: #961e79;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962b38;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #960d53;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961b02;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96056e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960517;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #96224e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960497;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-24 {

0% {

background: #961e79;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962b38;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #960d53;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961b02;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96056e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960517;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #96224e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960497;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(25) {

background: #96114e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 0.8;

position: relative;

-webkit-animation: shift-25 8s ease infinite alternate;

animation: shift-25 8s ease infinite alternate;

}

@-webkit-keyframes shift-25 {

0% {

background: #962397;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96070b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962089;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961498;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #960518;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #9605c2;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #961502;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #96106e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-25 {

0% {

background: #962397;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96070b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #962089;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961498;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #960518;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #9605c2;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #961502;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #96106e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(26) {

background: #96053f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 1;

position: relative;

-webkit-animation: shift-26 9s ease infinite alternate;

animation: shift-26 9s ease infinite alternate;

}

@-webkit-keyframes shift-26 {

0% {

background: #96297a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962d9e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #961350;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #960e83;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #961f04;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #962b06;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962289;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960e96;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-26 {

0% {

background: #96297a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962d9e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #961350;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #960e83;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #961f04;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #962b06;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #962289;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #960e96;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(27) {

background: #962233;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.8;

position: relative;

-webkit-animation: shift-27 7s ease infinite alternate;

animation: shift-27 7s ease infinite alternate;

}

@-webkit-keyframes shift-27 {

0% {

background: #96195f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960d36;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #961278;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #960f5c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961b94;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960d53;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #96306e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #960964;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-27 {

0% {

background: #96195f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960d36;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #961278;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #960f5c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961b94;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960d53;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #96306e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #960964;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(28) {

background: #962d6a;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 0.7;

position: relative;

-webkit-animation: shift-28 9s ease infinite alternate;

animation: shift-28 9s ease infinite alternate;

}

@-webkit-keyframes shift-28 {

0% {

background: #962c6a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961381;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #960594;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962686;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #9627c5;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #960f6f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960a8d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #960ca3;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-28 {

0% {

background: #962c6a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961381;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #960594;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962686;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #9627c5;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #960f6f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960a8d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #960ca3;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(29) {

background: #961d24;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 1.2;

position: relative;

-webkit-animation: shift-29 8s ease infinite alternate;

animation: shift-29 8s ease infinite alternate;

}

@-webkit-keyframes shift-29 {

0% {

background: #961baa;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #96298a;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #962d86;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #960706;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #961365;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #9617c4;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #9628b9;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96116b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-29 {

0% {

background: #961baa;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #96298a;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #962d86;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #960706;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #961365;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #9617c4;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #9628b9;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96116b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(30) {

background: #96132a;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 0.5;

position: relative;

-webkit-animation: shift-30 7s ease infinite alternate;

animation: shift-30 7s ease infinite alternate;

}

@-webkit-keyframes shift-30 {

0% {

background: #9613ba;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96306d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #961812;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #961b5f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #9602af;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #961e2f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #9603c8;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #96019e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-30 {

0% {

background: #9613ba;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96306d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #961812;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #961b5f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #9602af;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #961e2f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #9603c8;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #96019e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(31) {

background: #9623a7;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.8;

position: relative;

-webkit-animation: shift-31 8s ease infinite alternate;

animation: shift-31 8s ease infinite alternate;

}

@-webkit-keyframes shift-31 {

0% {

background: #9629b8;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #961abb;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #960362;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #960d05;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96289f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #96186f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960a91;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #961966;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-31 {

0% {

background: #9629b8;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #961abb;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #960362;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #960d05;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96289f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #96186f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960a91;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #961966;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(32) {

background: #96290c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.7;

position: relative;

-webkit-animation: shift-32 9s ease infinite alternate;

animation: shift-32 9s ease infinite alternate;

}

@-webkit-keyframes shift-32 {

0% {

background: #962738;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #962448;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #9618be;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #961729;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #9612af;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961e20;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #961687;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96138b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-32 {

0% {

background: #962738;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

5% {

background: #962448;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #9618be;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #961729;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #9612af;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961e20;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #961687;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #96138b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(33) {

background: #961524;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.9;

position: relative;

-webkit-animation: shift-33 9s ease infinite alternate;

animation: shift-33 9s ease infinite alternate;

}

@-webkit-keyframes shift-33 {

0% {

background: #9620c7;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96309b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962961;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #9627b3;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #961117;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961944;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961c16;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962269;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-33 {

0% {

background: #9620c7;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #96309b;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962961;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #9627b3;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #961117;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961944;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #961c16;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962269;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(34) {

background: #960121;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.9;

position: relative;

-webkit-animation: shift-34 9s ease infinite alternate;

animation: shift-34 9s ease infinite alternate;

}

@-webkit-keyframes shift-34 {

0% {

background: #961c98;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962a8b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #962017;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961507;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962a89;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #960994;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #962315;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #960ca7;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-34 {

0% {

background: #961c98;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962a8b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #962017;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #961507;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #962a89;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #960994;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #962315;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #960ca7;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(35) {

background: #96101b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.4;

position: relative;

-webkit-animation: shift-35 7s ease infinite alternate;

animation: shift-35 7s ease infinite alternate;

}

@-webkit-keyframes shift-35 {

0% {

background: #96183b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960d3f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #960eb3;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #9632b9;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961371;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #96203a;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #9616ba;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #962683;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-35 {

0% {

background: #96183b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

5% {

background: #960d3f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #960eb3;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #9632b9;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #961371;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #96203a;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #9616ba;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #962683;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(36) {

background: #96287f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 0.5;

position: relative;

-webkit-animation: shift-36 8s ease infinite alternate;

animation: shift-36 8s ease infinite alternate;

}

@-webkit-keyframes shift-36 {

0% {

background: #960b06;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #960413;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96036b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #9614c1;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #962a57;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #962a50;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #9627a2;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #962082;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-36 {

0% {

background: #960b06;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #960413;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96036b;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #9614c1;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #962a57;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #962a50;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #9627a2;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #962082;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(37) {

background: #960eb9;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.4;

position: relative;

-webkit-animation: shift-37 10s ease infinite alternate;

animation: shift-37 10s ease infinite alternate;

}

@-webkit-keyframes shift-37 {

0% {

background: #962a3d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962774;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #960fa6;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #960e63;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #9615a3;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960406;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #961e5f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #961baf;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-37 {

0% {

background: #962a3d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962774;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #960fa6;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #960e63;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #9615a3;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #960406;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #961e5f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #961baf;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(38) {

background: #96146c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

opacity: 1;

position: relative;

-webkit-animation: shift-38 7s ease infinite alternate;

animation: shift-38 7s ease infinite alternate;

}

@-webkit-keyframes shift-38 {

0% {

background: #96180d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #961003;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962372;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #9602b8;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96229f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #961e95;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #962d37;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962dc4;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

@keyframes shift-38 {

0% {

background: #96180d;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #961003;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #962372;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #9602b8;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #96229f;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

75% {

background: #961e95;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #962d37;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962dc4;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(39) {

background: #9610ab;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.6;

position: relative;

-webkit-animation: shift-39 10s ease infinite alternate;

animation: shift-39 10s ease infinite alternate;

}

@-webkit-keyframes shift-39 {

0% {

background: #9628a0;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #962da1;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #961562;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96323c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #961f6c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #962a94;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #960686;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #9611b0;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-39 {

0% {

background: #9628a0;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #962da1;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #961562;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96323c;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #961f6c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #962a94;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

90% {

background: #960686;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

100% {

background: #9611b0;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(40) {

background: #962626;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 1;

position: relative;

-webkit-animation: shift-40 7s ease infinite alternate;

animation: shift-40 7s ease infinite alternate;

}

@-webkit-keyframes shift-40 {

0% {

background: #961a5d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #962e61;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #961e3a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #96320e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #962977;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961710;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96166f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #960e36;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-40 {

0% {

background: #961a5d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #962e61;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #961e3a;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #96320e;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #962977;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961710;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #96166f;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #960e36;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(41) {

background: #961283;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.7;

position: relative;

-webkit-animation: shift-41 9s ease infinite alternate;

animation: shift-41 9s ease infinite alternate;

}

@-webkit-keyframes shift-41 {

0% {

background: #963002;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #9632bd;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #961568;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #96139c;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #960eb4;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961862;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #960615;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #9629aa;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-41 {

0% {

background: #963002;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #9632bd;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

25% {

background: #961568;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #96139c;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

50% {

background: #960eb4;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

75% {

background: #961862;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #960615;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #9629aa;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(42) {

background: #96077f;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 0.8;

position: relative;

-webkit-animation: shift-42 8s ease infinite alternate;

animation: shift-42 8s ease infinite alternate;

}

@-webkit-keyframes shift-42 {

0% {

background: #960e86;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #960ec2;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #961e23;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962b72;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #960a46;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #9612b7;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #962110;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #961765;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-42 {

0% {

background: #960e86;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #960ec2;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

25% {

background: #961e23;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

40% {

background: #962b72;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #960a46;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #9612b7;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #962110;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #961765;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(43) {

background: #961a51;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

opacity: 0.3;

position: relative;

-webkit-animation: shift-43 9s ease infinite alternate;

animation: shift-43 9s ease infinite alternate;

}

@-webkit-keyframes shift-43 {

0% {

background: #961b12;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961d95;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96137c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962c44;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #962c5b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #961a6b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960134;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #962db6;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-43 {

0% {

background: #961b12;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

5% {

background: #961d95;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #96137c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

40% {

background: #962c44;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

50% {

background: #962c5b;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #961a6b;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

90% {

background: #960134;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

100% {

background: #962db6;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(44) {

background: #960564;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

opacity: 0.6;

position: relative;

-webkit-animation: shift-44 7s ease infinite alternate;

animation: shift-44 7s ease infinite alternate;

}

@-webkit-keyframes shift-44 {

0% {

background: #96232c;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962ac0;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #960845;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #960934;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #9619bd;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #961cc4;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #9614c5;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962d1c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

@keyframes shift-44 {

0% {

background: #96232c;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #962ac0;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

25% {

background: #960845;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

40% {

background: #960934;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

50% {

background: #9619bd;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

75% {

background: #961cc4;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

90% {

background: #9614c5;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

100% {

background: #962d1c;

border-top-right-radius: 50%;

border-top-left-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}

.point:nth-child(45) {

background: #960744;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

opacity: 0.3;

position: relative;

-webkit-animation: shift-45 8s ease infinite alternate;

animation: shift-45 8s ease infinite alternate;

}

@-webkit-keyframes shift-45 {

0% {

background: #96302c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #961a75;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #961e03;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96326a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96282d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #962e1e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #961025;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #960b7f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

@keyframes shift-45 {

0% {

background: #96302c;

border-top-right-radius: 0;

border-top-left-radius: 0;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

5% {

background: #961a75;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

25% {

background: #961e03;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

40% {

background: #96326a;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

50% {

background: #96282d;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 0;

}

75% {

background: #962e1e;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

90% {

background: #961025;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

100% {

background: #960b7f;

border-top-right-radius: 0;

border-top-left-radius: 50%;

border-bottom-right-radius: 0;

border-bottom-left-radius: 50%;

}

}

.point:nth-child(9n + 1) {

position: relative;

-webkit-transform: translateX(-25%);

-ms-transform: translateX(-25%);

transform: translateX(-25%);

}

.point:nth-child(9n + 2) {

position: relative;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

.point:nth-child(9n + 3) {

position: relative;

-webkit-transform: translateX(-75%);

-ms-transform: translateX(-75%);

transform: translateX(-75%);

}

.point:nth-child(9n + 4) {

position: relative;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.point:nth-child(9n + 5) {

position: relative;

-webkit-transform: translateX(-125%);

-ms-transform: translateX(-125%);

transform: translateX(-125%);

}

.point:nth-child(9n + 6) {

position: relative;

-webkit-transform: translateX(-150%);

-ms-transform: translateX(-150%);

transform: translateX(-150%);

}

.point:nth-child(9n + 7) {

position: relative;

-webkit-transform: translateX(-175%);

-ms-transform: translateX(-175%);

transform: translateX(-175%);

}

.point:nth-child(9n + 8) {

position: relative;

-webkit-transform: translateX(-200%);

-ms-transform: translateX(-200%);

transform: translateX(-200%);

}

.point:nth-child(9n + 9) {

position: relative;

-webkit-transform: translateX(-225%);

-ms-transform: translateX(-225%);

transform: translateX(-225%);

}