<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--<div class="container"> .assembly - 9.times do .ring .rot - 96.times do .dot </div>--> <div class='assembly'> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> <div class='ring'> <div class='rot'> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> </div>

body { background: #03001c; } div, :before, :after { position: absolute; } .assembly { top: 50%; left: 50%; animation: r 53.1s linear infinite reverse; } .ring:nth-child(1) { transform: rotate(0deg) translate(5.72753em); } .ring:nth-child(2) { transform: rotate(40deg) translate(5.72753em); } .ring:nth-child(3) { transform: rotate(80deg) translate(5.72753em); } .ring:nth-child(4) { transform: rotate(120deg) translate(5.72753em); } .ring:nth-child(5) { transform: rotate(160deg) translate(5.72753em); } .ring:nth-child(6) { transform: rotate(200deg) translate(5.72753em); } .ring:nth-child(7) { transform: rotate(240deg) translate(5.72753em); } .ring:nth-child(8) { transform: rotate(280deg) translate(5.72753em); } .ring:nth-child(9) { transform: rotate(320deg) translate(5.72753em); } .rot { animation: r 3.1s steps(96) infinite; } @keyframes r { 0% { transform: rotate(1turn); } } .dot:before, .dot:after { border-radius: 50%; background: currentColor; color: #77477e; animation: scale 2.7s infinite alternate; content: ''; } .dot:after { opacity: .999; color: #fe9600; animation-name: scale, alpha; animation-duration: 2.7s, 1.9s; } .dot:nth-child(1) { transform: rotate(0deg) translate(7.63671em); } .dot:nth-child(1):before, .dot:nth-child(1):after { margin: -0.26084em; width: 0.52168em; height: 0.52168em; animation-delay: 0s, -1.9s; } .dot:nth-child(2) { transform: rotate(3.75deg) translate(7.63671em); } .dot:nth-child(2):before, .dot:nth-child(2):after { margin: -0.26065em; width: 0.52131em; height: 0.52131em; animation-delay: 0s, -1.89797s; } .dot:nth-child(3) { transform: rotate(7.5deg) translate(7.63671em); } .dot:nth-child(3):before, .dot:nth-child(3):after { margin: -0.2601em; width: 0.5202em; height: 0.5202em; animation-delay: 0s, -1.89187s; } .dot:nth-child(4) { transform: rotate(11.25deg) translate(7.63671em); } .dot:nth-child(4):before, .dot:nth-child(4):after { margin: -0.25918em; width: 0.51837em; height: 0.51837em; animation-delay: 0s, -1.88175s; } .dot:nth-child(5) { transform: rotate(15deg) translate(7.63671em); } .dot:nth-child(5):before, .dot:nth-child(5):after { margin: -0.2579em; width: 0.51581em; height: 0.51581em; animation-delay: 0s, -1.86763s; } .dot:nth-child(6) { transform: rotate(18.75deg) translate(7.63671em); } .dot:nth-child(6):before, .dot:nth-child(6):after { margin: -0.25626em; width: 0.51252em; height: 0.51252em; animation-delay: 0s, -1.84958s; } .dot:nth-child(7) { transform: rotate(22.5deg) translate(7.63671em); } .dot:nth-child(7):before, .dot:nth-child(7):after { margin: -0.25426em; width: 0.50852em; height: 0.50852em; animation-delay: 0s, -1.82769s; } .dot:nth-child(8) { transform: rotate(26.25deg) translate(7.63671em); } .dot:nth-child(8):before, .dot:nth-child(8):after { margin: -0.25191em; width: 0.50382em; height: 0.50382em; animation-delay: 0s, -1.80203s; } .dot:nth-child(9) { transform: rotate(30deg) translate(7.63671em); } .dot:nth-child(9):before, .dot:nth-child(9):after { margin: -0.24921em; width: 0.49843em; height: 0.49843em; animation-delay: 0s, -1.77272s; } .dot:nth-child(10) { transform: rotate(33.75deg) translate(7.63671em); } .dot:nth-child(10):before, .dot:nth-child(10):after { margin: -0.24618em; width: 0.49236em; height: 0.49236em; animation-delay: 0s, -1.7399s; } .dot:nth-child(11) { transform: rotate(37.5deg) translate(7.63671em); } .dot:nth-child(11):before, .dot:nth-child(11):after { margin: -0.24281em; width: 0.48562em; height: 0.48562em; animation-delay: 0s, -1.70369s; } .dot:nth-child(12) { transform: rotate(41.25deg) translate(7.63671em); } .dot:nth-child(12):before, .dot:nth-child(12):after { margin: -0.23912em; width: 0.47824em; height: 0.47824em; animation-delay: 0s, -1.66425s; } .dot:nth-child(13) { transform: rotate(45deg) translate(7.63671em); } .dot:nth-child(13):before, .dot:nth-child(13):after { margin: -0.23512em; width: 0.47023em; height: 0.47023em; animation-delay: 0s, -1.62175s; } .dot:nth-child(14) { transform: rotate(48.75deg) translate(7.63671em); } .dot:nth-child(14):before, .dot:nth-child(14):after { margin: -0.23081em; width: 0.46162em; height: 0.46162em; animation-delay: 0s, -1.57638s; } .dot:nth-child(15) { transform: rotate(52.5deg) translate(7.63671em); } .dot:nth-child(15):before, .dot:nth-child(15):after { margin: -0.22621em; width: 0.45242em; height: 0.45242em; animation-delay: 0s, -1.52832s; } .dot:nth-child(16) { transform: rotate(56.25deg) translate(7.63671em); } .dot:nth-child(16):before, .dot:nth-child(16):after { margin: -0.22133em; width: 0.44266em; height: 0.44266em; animation-delay: 0s, -1.47779s; } .dot:nth-child(17) { transform: rotate(60deg) translate(7.63671em); } .dot:nth-child(17):before, .dot:nth-child(17):after { margin: -0.21618em; width: 0.43236em; height: 0.43236em; animation-delay: 0s, -1.425s; } .dot:nth-child(18) { transform: rotate(63.75deg) translate(7.63671em); } .dot:nth-child(18):before, .dot:nth-child(18):after { margin: -0.21078em; width: 0.42155em; height: 0.42155em; animation-delay: 0s, -1.37017s; } .dot:nth-child(19) { transform: rotate(67.5deg) translate(7.63671em); } .dot:nth-child(19):before, .dot:nth-child(19):after { margin: -0.20513em; width: 0.41027em; height: 0.41027em; animation-delay: 0s, -1.31355s; } .dot:nth-child(20) { transform: rotate(71.25deg) translate(7.63671em); } .dot:nth-child(20):before, .dot:nth-child(20):after { margin: -0.19926em; width: 0.39853em; height: 0.39853em; animation-delay: 0s, -1.25537s; } .dot:nth-child(21) { transform: rotate(75deg) translate(7.63671em); } .dot:nth-child(21):before, .dot:nth-child(21):after { margin: -0.19319em; width: 0.38637em; height: 0.38637em; animation-delay: 0s, -1.19588s; } .dot:nth-child(22) { transform: rotate(78.75deg) translate(7.63671em); } .dot:nth-child(22):before, .dot:nth-child(22):after { margin: -0.18691em; width: 0.37383em; height: 0.37383em; animation-delay: 0s, -1.13534s; } .dot:nth-child(23) { transform: rotate(82.5deg) translate(7.63671em); } .dot:nth-child(23):before, .dot:nth-child(23):after { margin: -0.18047em; width: 0.36093em; height: 0.36093em; animation-delay: 0s, -1.074s; } .dot:nth-child(24) { transform: rotate(86.25deg) translate(7.63671em); } .dot:nth-child(24):before, .dot:nth-child(24):after { margin: -0.17386em; width: 0.34772em; height: 0.34772em; animation-delay: 0s, -1.01213s; } .dot:nth-child(25) { transform: rotate(90deg) translate(7.63671em); } .dot:nth-child(25):before, .dot:nth-child(25):after { margin: -0.16712em; width: 0.33424em; height: 0.33424em; animation-delay: 0s, -0.95s; } .dot:nth-child(26) { transform: rotate(93.75deg) translate(7.63671em); } .dot:nth-child(26):before, .dot:nth-child(26):after { margin: -0.16026em; width: 0.32051em; height: 0.32051em; animation-delay: 0s, -0.88787s; } .dot:nth-child(27) { transform: rotate(97.5deg) translate(7.63671em); } .dot:nth-child(27):before, .dot:nth-child(27):after { margin: -0.1533em; width: 0.30659em; height: 0.30659em; animation-delay: 0s, -0.826s; } .dot:nth-child(28) { transform: rotate(101.25deg) translate(7.63671em); } .dot:nth-child(28):before, .dot:nth-child(28):after { margin: -0.14626em; width: 0.29252em; height: 0.29252em; animation-delay: 0s, -0.76466s; } .dot:nth-child(29) { transform: rotate(105deg) translate(7.63671em); } .dot:nth-child(29):before, .dot:nth-child(29):after { margin: -0.13917em; width: 0.27834em; height: 0.27834em; animation-delay: 0s, -0.70412s; } .dot:nth-child(30) { transform: rotate(108.75deg) translate(7.63671em); } .dot:nth-child(30):before, .dot:nth-child(30):after { margin: -0.13205em; width: 0.2641em; height: 0.2641em; animation-delay: 0s, -0.64463s; } .dot:nth-child(31) { transform: rotate(112.5deg) translate(7.63671em); } .dot:nth-child(31):before, .dot:nth-child(31):after { margin: -0.12492em; width: 0.24984em; height: 0.24984em; animation-delay: 0s, -0.58645s; } .dot:nth-child(32) { transform: rotate(116.25deg) translate(7.63671em); } .dot:nth-child(32):before, .dot:nth-child(32):after { margin: -0.11781em; width: 0.23562em; height: 0.23562em; animation-delay: 0s, -0.52983s; } .dot:nth-child(33) { transform: rotate(120deg) translate(7.63671em); } .dot:nth-child(33):before, .dot:nth-child(33):after { margin: -0.11075em; width: 0.2215em; height: 0.2215em; animation-delay: 0s, -0.475s; } .dot:nth-child(34) { transform: rotate(123.75deg) translate(7.63671em); } .dot:nth-child(34):before, .dot:nth-child(34):after { margin: -0.10376em; width: 0.20752em; height: 0.20752em; animation-delay: 0s, -0.42221s; } .dot:nth-child(35) { transform: rotate(127.5deg) translate(7.63671em); } .dot:nth-child(35):before, .dot:nth-child(35):after { margin: -0.09688em; width: 0.19375em; height: 0.19375em; animation-delay: 0s, -0.37168s; } .dot:nth-child(36) { transform: rotate(131.25deg) translate(7.63671em); } .dot:nth-child(36):before, .dot:nth-child(36):after { margin: -0.09013em; width: 0.18026em; height: 0.18026em; animation-delay: 0s, -0.32362s; } .dot:nth-child(37) { transform: rotate(135deg) translate(7.63671em); } .dot:nth-child(37):before, .dot:nth-child(37):after { margin: -0.08355em; width: 0.16711em; height: 0.16711em; animation-delay: 0s, -0.27825s; } .dot:nth-child(38) { transform: rotate(138.75deg) translate(7.63671em); } .dot:nth-child(38):before, .dot:nth-child(38):after { margin: -0.07719em; width: 0.15437em; height: 0.15437em; animation-delay: 0s, -0.23575s; } .dot:nth-child(39) { transform: rotate(142.5deg) translate(7.63671em); } .dot:nth-child(39):before, .dot:nth-child(39):after { margin: -0.07107em; width: 0.14214em; height: 0.14214em; animation-delay: 0s, -0.19631s; } .dot:nth-child(40) { transform: rotate(146.25deg) translate(7.63671em); } .dot:nth-child(40):before, .dot:nth-child(40):after { margin: -0.06525em; width: 0.1305em; height: 0.1305em; animation-delay: 0s, -0.1601s; } .dot:nth-child(41) { transform: rotate(150deg) translate(7.63671em); } .dot:nth-child(41):before, .dot:nth-child(41):after { margin: -0.05977em; width: 0.11954em; height: 0.11954em; animation-delay: 0s, -0.12728s; } .dot:nth-child(42) { transform: rotate(153.75deg) translate(7.63671em); } .dot:nth-child(42):before, .dot:nth-child(42):after { margin: -0.05469em; width: 0.10939em; height: 0.10939em; animation-delay: 0s, -0.09797s; } .dot:nth-child(43) { transform: rotate(157.5deg) translate(7.63671em); } .dot:nth-child(43):before, .dot:nth-child(43):after { margin: -0.05008em; width: 0.10015em; height: 0.10015em; animation-delay: 0s, -0.07231s; } .dot:nth-child(44) { transform: rotate(161.25deg) translate(7.63671em); } .dot:nth-child(44):before, .dot:nth-child(44):after { margin: -0.04599em; width: 0.09197em; height: 0.09197em; animation-delay: 0s, -0.05042s; } .dot:nth-child(45) { transform: rotate(165deg) translate(7.63671em); } .dot:nth-child(45):before, .dot:nth-child(45):after { margin: -0.0425em; width: 0.08499em; height: 0.08499em; animation-delay: 0s, -0.03237s; } .dot:nth-child(46) { transform: rotate(168.75deg) translate(7.63671em); } .dot:nth-child(46):before, .dot:nth-child(46):after { margin: -0.03968em; width: 0.07935em; height: 0.07935em; animation-delay: 0s, -0.01825s; } .dot:nth-child(47) { transform: rotate(172.5deg) translate(7.63671em); } .dot:nth-child(47):before, .dot:nth-child(47):after { margin: -0.0376em; width: 0.0752em; height: 0.0752em; animation-delay: 0s, -0.00813s; } .dot:nth-child(48) { transform: rotate(176.25deg) translate(7.63671em); } .dot:nth-child(48):before, .dot:nth-child(48):after { margin: -0.03633em; width: 0.07265em; height: 0.07265em; animation-delay: 0s, -0.00203s; } .dot:nth-child(49) { transform: rotate(180deg) translate(7.63671em); } .dot:nth-child(49):before, .dot:nth-child(49):after { margin: -0.0359em; width: 0.07179em; height: 0.07179em; animation-delay: 0s, 0s; } .dot:nth-child(50) { transform: rotate(183.75deg) translate(7.63671em); } .dot:nth-child(50):before, .dot:nth-child(50):after { margin: -0.03633em; width: 0.07265em; height: 0.07265em; animation-delay: 0s, -0.00203s; } .dot:nth-child(51) { transform: rotate(187.5deg) translate(7.63671em); } .dot:nth-child(51):before, .dot:nth-child(51):after { margin: -0.0376em; width: 0.0752em; height: 0.0752em; animation-delay: 0s, -0.00813s; } .dot:nth-child(52) { transform: rotate(191.25deg) translate(7.63671em); } .dot:nth-child(52):before, .dot:nth-child(52):after { margin: -0.03968em; width: 0.07935em; height: 0.07935em; animation-delay: 0s, -0.01825s; } .dot:nth-child(53) { transform: rotate(195deg) translate(7.63671em); } .dot:nth-child(53):before, .dot:nth-child(53):after { margin: -0.0425em; width: 0.08499em; height: 0.08499em; animation-delay: 0s, -0.03237s; } .dot:nth-child(54) { transform: rotate(198.75deg) translate(7.63671em); } .dot:nth-child(54):before, .dot:nth-child(54):after { margin: -0.04599em; width: 0.09197em; height: 0.09197em; animation-delay: 0s, -0.05042s; } .dot:nth-child(55) { transform: rotate(202.5deg) translate(7.63671em); } .dot:nth-child(55):before, .dot:nth-child(55):after { margin: -0.05008em; width: 0.10015em; height: 0.10015em; animation-delay: 0s, -0.07231s; } .dot:nth-child(56) { transform: rotate(206.25deg) translate(7.63671em); } .dot:nth-child(56):before, .dot:nth-child(56):after { margin: -0.05469em; width: 0.10939em; height: 0.10939em; animation-delay: 0s, -0.09797s; } .dot:nth-child(57) { transform: rotate(210deg) translate(7.63671em); } .dot:nth-child(57):before, .dot:nth-child(57):after { margin: -0.05977em; width: 0.11954em; height: 0.11954em; animation-delay: 0s, -0.12728s; } .dot:nth-child(58) { transform: rotate(213.75deg) translate(7.63671em); } .dot:nth-child(58):before, .dot:nth-child(58):after { margin: -0.06525em; width: 0.1305em; height: 0.1305em; animation-delay: 0s, -0.1601s; } .dot:nth-child(59) { transform: rotate(217.5deg) translate(7.63671em); } .dot:nth-child(59):before, .dot:nth-child(59):after { margin: -0.07107em; width: 0.14214em; height: 0.14214em; animation-delay: 0s, -0.19631s; } .dot:nth-child(60) { transform: rotate(221.25deg) translate(7.63671em); } .dot:nth-child(60):before, .dot:nth-child(60):after { margin: -0.07719em; width: 0.15437em; height: 0.15437em; animation-delay: 0s, -0.23575s; } .dot:nth-child(61) { transform: rotate(225deg) translate(7.63671em); } .dot:nth-child(61):before, .dot:nth-child(61):after { margin: -0.08355em; width: 0.16711em; height: 0.16711em; animation-delay: 0s, -0.27825s; } .dot:nth-child(62) { transform: rotate(228.75deg) translate(7.63671em); } .dot:nth-child(62):before, .dot:nth-child(62):after { margin: -0.09013em; width: 0.18026em; height: 0.18026em; animation-delay: 0s, -0.32362s; } .dot:nth-child(63) { transform: rotate(232.5deg) translate(7.63671em); } .dot:nth-child(63):before, .dot:nth-child(63):after { margin: -0.09688em; width: 0.19375em; height: 0.19375em; animation-delay: 0s, -0.37168s; } .dot:nth-child(64) { transform: rotate(236.25deg) translate(7.63671em); } .dot:nth-child(64):before, .dot:nth-child(64):after { margin: -0.10376em; width: 0.20752em; height: 0.20752em; animation-delay: 0s, -0.42221s; } .dot:nth-child(65) { transform: rotate(240deg) translate(7.63671em); } .dot:nth-child(65):before, .dot:nth-child(65):after { margin: -0.11075em; width: 0.2215em; height: 0.2215em; animation-delay: 0s, -0.475s; } .dot:nth-child(66) { transform: rotate(243.75deg) translate(7.63671em); } .dot:nth-child(66):before, .dot:nth-child(66):after { margin: -0.11781em; width: 0.23562em; height: 0.23562em; animation-delay: 0s, -0.52983s; } .dot:nth-child(67) { transform: rotate(247.5deg) translate(7.63671em); } .dot:nth-child(67):before, .dot:nth-child(67):after { margin: -0.12492em; width: 0.24984em; height: 0.24984em; animation-delay: 0s, -0.58645s; } .dot:nth-child(68) { transform: rotate(251.25deg) translate(7.63671em); } .dot:nth-child(68):before, .dot:nth-child(68):after { margin: -0.13205em; width: 0.2641em; height: 0.2641em; animation-delay: 0s, -0.64463s; } .dot:nth-child(69) { transform: rotate(255deg) translate(7.63671em); } .dot:nth-child(69):before, .dot:nth-child(69):after { margin: -0.13917em; width: 0.27834em; height: 0.27834em; animation-delay: 0s, -0.70412s; } .dot:nth-child(70) { transform: rotate(258.75deg) translate(7.63671em); } .dot:nth-child(70):before, .dot:nth-child(70):after { margin: -0.14626em; width: 0.29252em; height: 0.29252em; animation-delay: 0s, -0.76466s; } .dot:nth-child(71) { transform: rotate(262.5deg) translate(7.63671em); } .dot:nth-child(71):before, .dot:nth-child(71):after { margin: -0.1533em; width: 0.30659em; height: 0.30659em; animation-delay: 0s, -0.826s; } .dot:nth-child(72) { transform: rotate(266.25deg) translate(7.63671em); } .dot:nth-child(72):before, .dot:nth-child(72):after { margin: -0.16026em; width: 0.32051em; height: 0.32051em; animation-delay: 0s, -0.88787s; } .dot:nth-child(73) { transform: rotate(270deg) translate(7.63671em); } .dot:nth-child(73):before, .dot:nth-child(73):after { margin: -0.16712em; width: 0.33424em; height: 0.33424em; animation-delay: 0s, -0.95s; } .dot:nth-child(74) { transform: rotate(273.75deg) translate(7.63671em); } .dot:nth-child(74):before, .dot:nth-child(74):after { margin: -0.17386em; width: 0.34772em; height: 0.34772em; animation-delay: 0s, -1.01213s; } .dot:nth-child(75) { transform: rotate(277.5deg) translate(7.63671em); } .dot:nth-child(75):before, .dot:nth-child(75):after { margin: -0.18047em; width: 0.36093em; height: 0.36093em; animation-delay: 0s, -1.074s; } .dot:nth-child(76) { transform: rotate(281.25deg) translate(7.63671em); } .dot:nth-child(76):before, .dot:nth-child(76):after { margin: -0.18691em; width: 0.37383em; height: 0.37383em; animation-delay: 0s, -1.13534s; } .dot:nth-child(77) { transform: rotate(285deg) translate(7.63671em); } .dot:nth-child(77):before, .dot:nth-child(77):after { margin: -0.19319em; width: 0.38637em; height: 0.38637em; animation-delay: 0s, -1.19588s; } .dot:nth-child(78) { transform: rotate(288.75deg) translate(7.63671em); } .dot:nth-child(78):before, .dot:nth-child(78):after { margin: -0.19926em; width: 0.39853em; height: 0.39853em; animation-delay: 0s, -1.25537s; } .dot:nth-child(79) { transform: rotate(292.5deg) translate(7.63671em); } .dot:nth-child(79):before, .dot:nth-child(79):after { margin: -0.20513em; width: 0.41027em; height: 0.41027em; animation-delay: 0s, -1.31355s; } .dot:nth-child(80) { transform: rotate(296.25deg) translate(7.63671em); } .dot:nth-child(80):before, .dot:nth-child(80):after { margin: -0.21078em; width: 0.42155em; height: 0.42155em; animation-delay: 0s, -1.37017s; } .dot:nth-child(81) { transform: rotate(300deg) translate(7.63671em); } .dot:nth-child(81):before, .dot:nth-child(81):after { margin: -0.21618em; width: 0.43236em; height: 0.43236em; animation-delay: 0s, -1.425s; } .dot:nth-child(82) { transform: rotate(303.75deg) translate(7.63671em); } .dot:nth-child(82):before, .dot:nth-child(82):after { margin: -0.22133em; width: 0.44266em; height: 0.44266em; animation-delay: 0s, -1.47779s; } .dot:nth-child(83) { transform: rotate(307.5deg) translate(7.63671em); } .dot:nth-child(83):before, .dot:nth-child(83):after { margin: -0.22621em; width: 0.45242em; height: 0.45242em; animation-delay: 0s, -1.52832s; } .dot:nth-child(84) { transform: rotate(311.25deg) translate(7.63671em); } .dot:nth-child(84):before, .dot:nth-child(84):after { margin: -0.23081em; width: 0.46162em; height: 0.46162em; animation-delay: 0s, -1.57638s; } .dot:nth-child(85) { transform: rotate(315deg) translate(7.63671em); } .dot:nth-child(85):before, .dot:nth-child(85):after { margin: -0.23512em; width: 0.47023em; height: 0.47023em; animation-delay: 0s, -1.62175s; } .dot:nth-child(86) { transform: rotate(318.75deg) translate(7.63671em); } .dot:nth-child(86):before, .dot:nth-child(86):after { margin: -0.23912em; width: 0.47824em; height: 0.47824em; animation-delay: 0s, -1.66425s; } .dot:nth-child(87) { transform: rotate(322.5deg) translate(7.63671em); } .dot:nth-child(87):before, .dot:nth-child(87):after { margin: -0.24281em; width: 0.48562em; height: 0.48562em; animation-delay: 0s, -1.70369s; } .dot:nth-child(88) { transform: rotate(326.25deg) translate(7.63671em); } .dot:nth-child(88):before, .dot:nth-child(88):after { margin: -0.24618em; width: 0.49236em; height: 0.49236em; animation-delay: 0s, -1.7399s; } .dot:nth-child(89) { transform: rotate(330deg) translate(7.63671em); } .dot:nth-child(89):before, .dot:nth-child(89):after { margin: -0.24921em; width: 0.49843em; height: 0.49843em; animation-delay: 0s, -1.77272s; } .dot:nth-child(90) { transform: rotate(333.75deg) translate(7.63671em); } .dot:nth-child(90):before, .dot:nth-child(90):after { margin: -0.25191em; width: 0.50382em; height: 0.50382em; animation-delay: 0s, -1.80203s; } .dot:nth-child(91) { transform: rotate(337.5deg) translate(7.63671em); } .dot:nth-child(91):before, .dot:nth-child(91):after { margin: -0.25426em; width: 0.50852em; height: 0.50852em; animation-delay: 0s, -1.82769s; } .dot:nth-child(92) { transform: rotate(341.25deg) translate(7.63671em); } .dot:nth-child(92):before, .dot:nth-child(92):after { margin: -0.25626em; width: 0.51252em; height: 0.51252em; animation-delay: 0s, -1.84958s; } .dot:nth-child(93) { transform: rotate(345deg) translate(7.63671em); } .dot:nth-child(93):before, .dot:nth-child(93):after { margin: -0.2579em; width: 0.51581em; height: 0.51581em; animation-delay: 0s, -1.86763s; } .dot:nth-child(94) { transform: rotate(348.75deg) translate(7.63671em); } .dot:nth-child(94):before, .dot:nth-child(94):after { margin: -0.25918em; width: 0.51837em; height: 0.51837em; animation-delay: 0s, -1.88175s; } .dot:nth-child(95) { transform: rotate(352.5deg) translate(7.63671em); } .dot:nth-child(95):before, .dot:nth-child(95):after { margin: -0.2601em; width: 0.5202em; height: 0.5202em; animation-delay: 0s, -1.89187s; } .dot:nth-child(96) { transform: rotate(356.25deg) translate(7.63671em); } .dot:nth-child(96):before, .dot:nth-child(96):after { margin: -0.26065em; width: 0.52131em; height: 0.52131em; animation-delay: 0s, -1.89797s; } @keyframes scale { to { transform: scale(0.65); } } @keyframes alpha { to { opacity: .001; } }