body {
  background-color: #ffffff; }

path {
  stroke: #333333;
  stroke-width: 1.5px;
  fill: none; }

.outer {
  stroke: purple; }

.mid {
  stroke: red; }

.inner {
  stroke: blue; }

.ring, .lines {
  stroke: 2px; }

.dots {
  stroke: none; }
  .dots.outer {
    fill: purple; }
  .dots.mid {
    fill: red; }
  .dots.inner {
    fill: blue; }

.ring {
  stroke-dasharray: 5,4; }

.connectlines {
  stroke: #777777; }

.dotlines {
  stroke-dasharray: 5,4; }

.lines, .connectlines {
  -webkit-animation: spin 8s infinite linear;
          animation: spin 8s infinite linear; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(-360deg); } }

.uselines.outer {
  -webkit-transform: rotate(-25deg); }

.uselines.mid {
  -webkit-transform: rotate(0deg); }

.uselines.inner {
  -webkit-transform: rotate(-72.5deg); }

.lines.outer path, .lines.outer marker {
  stroke: purple;
  fill: purple; }

.lines.mid path, .lines.mid marker {
  stroke: red;
  fill: red; }

.lines.inner path, .lines.inner marker {
  stroke: blue;
  fill: blue; }

.triangles {
  stroke: #777777; }