/*http://oskargustafsson.github.io/CSS-spinners/#sphere*/
:focus {outline:none;}
    body {
      text-align: center;
      background: url(bg.png);
      height: 100%;
      margin: 0;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
    }

    
/* GENERAL */

@-webkit-keyframes fade {
  from { opacity: 1; }
  to { opacity: 0.2; }
}
@keyframes fade {
  from { opacity: 1; }
  to { opacity: 0.2; }
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



/* COLOR SPHERE */

@-webkit-keyframes sphereSpin {
  0% { -webkit-transform: rotateX(360deg) rotateY(0deg); }
  100% { -webkit-transform: rotateX(0deg) rotateY(360deg); }
}
@keyframes sphereSpin {
  0% { transform: rotateX(360deg) rotateY(0deg); }
  100% { transform: rotateX(0deg) rotateY(360deg); }
}

.spinner.sphere {
  width: 15em;
  height: 5em;
  -webkit-transform: perspective(20em) rotateX(-24deg) rotateY(20deg) rotateZ(30deg);
  transform: perspective(20em) rotateX(-24deg) rotateY(20deg) rotateZ(30deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  top: -60px;
}

.spinner .inner {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: sphereSpin 6s linear infinite;
  animation: sphereSpin 6s linear infinite;
}

.spinner.sphere .disc {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 0.2em dotted #06C606;
}

@-webkit-keyframes rotateDisc2 {
  from { -webkit-transform: rotateX(90deg) rotateZ(0deg); }
  to { -webkit-transform: rotateX(90deg) rotateZ(360deg); }
}
@keyframes rotateDisc2 {
  from { transform: rotateX(90deg) rotateZ(0deg); }
  to { transform: rotateX(90deg) rotateZ(360deg); }
}

@-webkit-keyframes rotateDisc3 {
  from { -webkit-transform: rotateY(90deg) rotateZ(0deg); }
  to { -webkit-transform: rotateY(90deg) rotateZ(360deg); }
}
@keyframes rotateDisc3 {
  from { transform: rotateY(90deg) rotateZ(0deg); }
  to { transform: rotateY(90deg) rotateZ(360deg); }
}

.spinner.sphere .disc:nth-child(1) {
  -webkit-animation: rotate 12s linear infinite;
  animation: rotate 12s linear infinite;
}
.spinner.sphere .disc:nth-child(2) {
  -webkit-animation: rotateDisc2 12s linear infinite;
  animation: rotateDisc2 12s linear infinite;
}
.spinner.sphere .disc:nth-child(3) {
  -webkit-animation: rotateDisc3 12s linear infinite;
  animation: rotateDisc3 12s linear infinite;
}