body{background-color:#000000;}



.scene{

width:50vw;

height:50vw;

margin:2% auto;

-webkit-perspective:86.333vw;

-moz-perspective:86.333vw;

-ms-perspective:86.333vw;

-o-perspective:86.333vw;

perspective:86.333vw}



.wrapper {

width:100%;

height:100%;

-webkit-transform:rotateX(45deg) rotateY(45deg);

-moz-transform:rotateX(45deg) rotateY(45deg);

-ms-transform:rotateX(45deg) rotateY(45deg);

-o-transform:rotateX(45deg) rotateY(45deg);

transform:rotateX(45deg) rotateY(45deg);

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d}



.ball{

position:relative;

width:70%;

height:70%;

margin:0 auto;

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transform-style:preserve-3d;

-webkit-animation:roundandround 7.5s 1.3s infinite linear;

-moz-animation:roundandround 7.5s 1.3s infinite linear;

-ms-animation:roundandround 7.5s 1.3s infinite linear;

-o-animation:roundandround 7.5s 1.3s infinite linear;

animation:roundandround 7.5s 1.3s infinite linear}

  

.ball .ring{

overflow:hidden;

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:.5vw;

border-style:dashed;

border-radius:50%;

opacity:0;

-webkit-animation:show .75s forwards ease-in-out;

-moz-animation:show .75s forwards ease-in-out;

-ms-animation:show .75s forwards ease-in-out;

-o-animation:show .75s forwards ease-in-out;

animation:show .75s forwards ease-in-out}



.ring:nth-child(1){

color:#8df435;

-webkit-transform:rotateY(4deg);

-moz-transform:rotateY(4deg);

-ms-transform:rotateY(4deg);

-o-transform:rotateY(4deg);

transform:rotateY(4deg);

-webkit-animation-delay:0;

-moz-animation-delay:0;

-ms-animation-delay:0;

-o-animation-delay:0;

animation-delay:0}



.ring:nth-child(2){

color:#a8e526;

-webkit-transform:rotateY(8deg);

-moz-transform:rotateY(8deg);

-ms-transform:rotateY(8deg);

-o-transform:rotateY(8deg);

transform:rotateY(8deg);

-webkit-animation-delay:.1s;

-moz-animation-delay:.1s;

-ms-animation-delay:.1s;

-o-animation-delay:.1s;

animation-delay:.1s}



.ring:nth-child(3){

color:#c2d11c;

-webkit-transform:rotateY(12deg);

-moz-transform:rotateY(12deg);

-ms-transform:rotateY(12deg);

-o-transform:rotateY(12deg);

transform:rotateY(12deg);

-webkit-animation-delay:.2s;

-moz-animation-delay:.2s;

-ms-animation-delay:.2s;

-o-animation-delay:.2s;

animation-delay:.2s}



.ring:nth-child(4){

color:#c8cb1b;

-webkit-transform:rotateY(16deg);

-moz-transform:rotateY(16deg);

-ms-transform:rotateY(16deg);

-o-transform:rotateY(16deg);

transform:rotateY(16deg);

-webkit-animation-delay:.3s;

-moz-animation-delay:.3s;

-ms-animation-delay:.3s;

-o-animation-delay:.3s;

animation-delay:.3s}



.ring:nth-child(5){

color:#deb21a;

-webkit-transform:rotateY(20deg);

-moz-transform:rotateY(20deg);

-ms-transform:rotateY(20deg);

-o-transform:rotateY(20deg);

transform:rotateY(20deg);

-webkit-animation-delay:.4s;

-moz-animation-delay:.4s;

-ms-animation-delay:.4s;

-o-animation-delay:.4s;

animation-delay:.4s}



.ring:nth-child(6){

color:#ef9621;

-webkit-transform:rotateY(24deg);

-moz-transform:rotateY(24deg);

-ms-transform:rotateY(24deg);

-o-transform:rotateY(24deg);

transform:rotateY(24deg);

-webkit-animation-delay:.5s;

-moz-animation-delay:.5s;

-ms-animation-delay:.5s;

-o-animation-delay:.5s;

animation-delay:.5s}



.ring:nth-child(7){

color:#f29122;

-webkit-transform:rotateY(28deg);

-moz-transform:rotateY(28deg);

-ms-transform:rotateY(28deg);

-o-transform:rotateY(28deg);

transform:rotateY(28deg);

-webkit-animation-delay:.6s;

-moz-animation-delay:.6s;

-ms-animation-delay:.6s;

-o-animation-delay:.6s;

animation-delay:.6s}



.ring:nth-child(8){

color:#fb7430;

-webkit-transform:rotateY(32deg);

-moz-transform:rotateY(32deg);

-ms-transform:rotateY(32deg);

-o-transform:rotateY(32deg);

transform:rotateY(32deg);

-webkit-animation-delay:.7s;

-moz-animation-delay:.7s;

-ms-animation-delay:.7s;

-o-animation-delay:.7s;

animation-delay:.7s}



.ring:nth-child(9){

color:#fe5944;

-webkit-transform:rotateY(36deg);

-moz-transform:rotateY(36deg);

-ms-transform:rotateY(36deg);

-o-transform:rotateY(36deg);

transform:rotateY(36deg);

-webkit-animation-delay:.8s;

-moz-animation-delay:.8s;

-ms-animation-delay:.8s;

-o-animation-delay:.8s;

animation-delay:.8s}



.ring:nth-child(10){

color:#fe5548;

-webkit-transform:rotateY(40deg);

-moz-transform:rotateY(40deg);

-ms-transform:rotateY(40deg);

-o-transform:rotateY(40deg);

transform:rotateY(40deg);

-webkit-animation-delay:.9s;

-moz-animation-delay:.9s;

-ms-animation-delay:.9s;

-o-animation-delay:.9s;

animation-delay:.9s}



.ring:nth-child(11){

color:#f83d61;

-webkit-transform:rotateY(44deg);

-moz-transform:rotateY(44deg);

-ms-transform:rotateY(44deg);

-o-transform:rotateY(44deg);

transform:rotateY(44deg);

-webkit-animation-delay:1s;

-moz-animation-delay:1s;

-ms-animation-delay:1s;

-o-animation-delay:1s;

animation-delay:1s}



.ring:nth-child(12){

color:#ec2b7d;

-webkit-transform: rotateY(48deg);

-moz-transform: rotateY(48deg);

-ms-transform: rotateY(48deg);

-o-transform: rotateY(48deg);

transform: rotateY(48deg);

-webkit-animation-delay:1.1s;

-moz-animation-delay:1.1s;

-ms-animation-delay:1.1s;

-o-animation-delay:1.1s;

animation-delay:1.1s}



.ring:nth-child(13){

color:#e82983;

-webkit-transform:rotateY(52deg);

-moz-transform:rotateY(52deg);

-ms-transform:rotateY(52deg);

-o-transform:rotateY(52deg);

transform:rotateY(52deg);

-webkit-animation-delay:1s;

-moz-animation-delay:1s;

-ms-animation-delay:1s;

-o-animation-delay:1s;

animation-delay:1s}



.ring:nth-child(14){

color:#d41e9f;

-webkit-transform:rotateY(56deg);

-moz-transform:rotateY(56deg);

-ms-transform:rotateY(56deg);

-o-transform:rotateY(56deg);

transform:rotateY(56deg);

-webkit-animation-delay:.9s;

-moz-animation-delay:.9s;

-ms-animation-delay:.9s;

-o-animation-delay:.9s;

animation-delay:.9s}



.ring:nth-child(15){

color:#bd1aba;

-webkit-transform:rotateY(60deg);

-moz-transform:rotateY(60deg);

-ms-transform:rotateY(60deg);

-o-transform:rotateY(60deg);

transform:rotateY(60deg);

-webkit-animation-delay:.8s;

-moz-animation-delay:.8s;

-ms-animation-delay:.8s;

-o-animation-delay:.8s;

animation-delay:.8s}

  

.ring:nth-child(16){

color:#b81ac0;

-webkit-transform:rotateY(64deg);

-moz-transform:rotateY(64deg);

-ms-transform:rotateY(64deg);

-o-transform:rotateY(64deg);

transform:rotateY(64deg);

-webkit-animation-delay:.7s;

-moz-animation-delay:.7s;

-ms-animation-delay:.7s;

-o-animation-delay:.7s;

animation-delay:.7s;}



.ring:nth-child(17){

color:#9c1fd7;

-webkit-transform:rotateY(68deg);

-moz-transform:rotateY(68deg);

-ms-transform:rotateY(68deg);

-o-transform:rotateY(68deg);

transform:rotateY(68deg);

-webkit-animation-delay:.6s;

-moz-animation-delay:.6s;

-ms-animation-delay:.6s;

-o-animation-delay:.6s;

animation-delay:.6s}



.ring:nth-child(18){

color:#802aea;

-webkit-transform:rotateY(72deg);

-moz-transform:rotateY(72deg);

-ms-transform:rotateY(72deg);

-o-transform:rotateY(72deg);

transform:rotateY(72deg);

-webkit-animation-delay:.5s;

-moz-animation-delay:.5s;

-ms-animation-delay:.5s;

-o-animation-delay:.5s;

animation-delay:.5s}



.ring:nth-child(19){

color:#7a2dee;

-webkit-transform:rotateY(76deg);

-moz-transform:rotateY(76deg);

-ms-transform:rotateY(76deg);

-o-transform:rotateY(76deg);

transform:rotateY(76deg);

-webkit-animation-delay:.4s;

-moz-animation-delay:.4s;

-ms-animation-delay:.4s;

-o-animation-delay:.4s;

animation-delay:.4s}



.ring:nth-child(20){

color:#5f40f9;

-webkit-transform:rotateY(80deg);

-moz-transform:rotateY(80deg);

-ms-transform:rotateY(80deg);

-o-transform:rotateY(80deg);

transform:rotateY(80deg);

-webkit-animation-delay:.3s;

-moz-animation-delay:.3s;

-ms-animation-delay:.3s;

-o-animation-delay:.3s;

animation-delay:.3s}



.ring:nth-child(21){

color:#4657fe;

-webkit-transform:rotateY(84deg);

-moz-transform:rotateY(84deg);

-ms-transform:rotateY(84deg);

-o-transform:rotateY(84deg);

transform:rotateY(84deg);

-webkit-animation-delay:.2s;

-moz-animation-delay:.2s;

-ms-animation-delay:.2s;

-o-animation-delay:.2s;

animation-delay:.2s}

  

.ring:nth-child(22){

color:#425cfe;

-webkit-transform:rotateY(88deg);

-moz-transform:rotateY(88deg);

-ms-transform:rotateY(88deg);

-o-transform:rotateY(88deg);

transform:rotateY(88deg);

-webkit-animation-delay:.1s;

-moz-animation-delay:.1s;

-ms-animation-delay:.1s;

-o-animation-delay:.1s;

animation-delay:.1s}

  

.ring:nth-child(23){

color:#2f77fb;

-webkit-transform:rotateY(92deg);

-moz-transform:rotateY(92deg);

-ms-transform:rotateY(92deg);

-o-transform:rotateY(92deg);

transform:rotateY(92deg);

-webkit-animation-delay:0;

-moz-animation-delay:0;

-ms-animation-delay:0;

-o-animation-delay:0;

animation-delay:0}



@keyframes roundandround{to{-webkit-transform:rotateX(360deg) rotateY(360deg);-moz-transform:rotateX(360deg) rotateY(360deg);-ms-transform:rotateX(360deg) rotateY(360deg);-o-transform:rotateX(360deg) rotateY(360deg);transform:rotateX(360deg) rotateY(360deg)}}

@keyframes show{to{opacity:1}}