/* COMET ORBITS */
.orbit-comet-blue { z-index:-10; position: absolute; margin-top: 40vh; margin-left: 10vh; }
.orbit-comet-red { z-index:-10; position: absolute; margin-left: 0vw; margin-top: 30vw; }
.orbit-comet { width: 100%; height: 5%; }

/* COMETS */
.comet-red { height: 12%; width: 5%; background-size: 100%; background-repeat:no-repeat; background-position: center;  -webkit-animation: move-from-right 15s normal infinite; -moz-animation: move-from-right 15s normal infinite; -o-animation: move-from-right 15s normal infinite; }
.comet-blue { height: 9%; width: 5%; background-size: 100%; background-repeat:no-repeat; background-position: center; -webkit-animation: move-from-left 19s normal infinite; -moz-animation: move-from-left 19s normal infinite; -o-animation: move-from-left 19s normal infinite; }
.comet-white { height: 10%; width: 5%; background-size: 100%; background-repeat:no-repeat; background-position: center; -webkit-animation: move-from-left 15s normal infinite; -moz-animation: move-from-left 15s normal infinite; -o-animation: move-from-left 15s normal infinite; }

/*********************/
/* ANIMATION CLASSES */
/*********************/

.spin-right-half { -webkit-animation-name: spin-right-half; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-right-half; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-right-half; -ms-animation-duration: 40000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-right-half-faster { -webkit-animation-name: spin-right-half; -webkit-animation-duration: 8000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-right-half; -moz-animation-duration: 8000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-right-half; -ms-animation-duration: 8000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-right-whole { -webkit-animation-name: spin-right-whole; -webkit-animation-duration: 60000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-right-whole; -moz-animation-duration: 60000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-right-whole; -ms-animation-duration: 60000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-right-whole-faster { -webkit-animation-name: spin-right-whole; -webkit-animation-duration: 20000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-right-whole; -moz-animation-duration: 20000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-right-whole; -ms-animation-duration: 20000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-right-whole-fastest { -webkit-animation-name: spin-right-whole; -webkit-animation-duration: 5000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-right-whole; -moz-animation-duration: 5000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-right-whole; -ms-animation-duration: 5000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-right-whole-slower { -webkit-animation-name: spin-right-whole; -webkit-animation-duration: 90000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-right-whole; -moz-animation-duration: 90000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-right-whole; -ms-animation-duration: 90000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-left-half { -webkit-animation-name: spin-left-half; -webkit-animation-duration: 12000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-left-half; -moz-animation-duration: 12000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-left-half; -ms-animation-duration: 12000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-left-whole { -webkit-animation-name: spin-left-whole; -webkit-animation-duration: 10000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-left-whole; -moz-animation-duration: 10000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-left-whole; -ms-animation-duration: 10000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.spin-left-half-faster { -webkit-animation-name: spin-left-half; -webkit-animation-duration: 8000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-left-half; -moz-animation-duration: 8000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-left-half; -ms-animation-duration: 8000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; }
.move-from-left { -webkit-animation: move-from-left 156s infinite; -moz-animation: move-from-left 156s infinite; -o-animation: move-from-left 156s infinite; }


/*************************/
/* ANIMATION DEFINITIONS */
/*************************/

/* SPINING */

@keyframes spin-right-half {
  from { transform:rotateZ(-25deg); -ms-transform:rotateZ(-25deg); /* IE 9 */ -moz-transform:rotateZ(-25deg); /* Firefox */ -webkit-transform:rotateZ(-25deg); /* Safari and Chrome */ -o-transform:rotateZ(-25deg); /* Opera */ }
  to { transform:rotateZ(65deg); -ms-transform:rotateZ(65deg); /* IE 9 */ -moz-transform:rotateZ(65deg); /* Firefox */ -o-transform:rotateZ(65deg); /* Opera */-webkit-transform:rotateZ(65deg); }
}

@keyframes spin-right-whole {
  from { transform:rotateZ(0deg); -ms-transform:rotateZ(0deg); /* IE 9 */ -moz-transform:rotateZ(0deg); /* Firefox */ -webkit-transform:rotateZ(0deg); /* Safari and Chrome */ -o-transform:rotateZ(0deg); /* Opera */ }
  to { transform:rotateZ(360deg); -ms-transform:rotateZ(360deg); /* IE 9 */ -moz-transform:rotateZ(360deg); /* Firefox */ -o-transform:rotateZ(360deg); /* Opera */-webkit-transform:rotateZ(360deg); }
}

@keyframes spin-left-whole {
  from { transform:rotateZ(0deg); -ms-transform:rotateZ(0deg); /* IE 9 */ -moz-transform:rotateZ(0deg); /* Firefox */ -webkit-transform:rotateZ(0deg); /* Safari and Chrome */ -o-transform:rotateZ(0deg); /* Opera */ }
  to { transform:rotateZ(-360deg); -ms-transform:rotateZ(-360deg); /* IE 9 */ -moz-transform:rotateZ(-360deg); /* Firefox */ -o-transform:rotateZ(-360deg); /* Opera */-webkit-transform:rotateZ(-360deg); }
}

@keyframes spin-left-half {
  from { transform:rotateZ(25deg); -ms-transform:rotateZ(25deg); /* IE 9 */ -moz-transform:rotateZ(25deg); /* Firefox */ -webkit-transform:rotateZ(25deg); /* Safari and Chrome */ -o-transform:rotateZ(25deg); /* Opera */ }
  to { transform:rotateZ(-65deg); -ms-transform:rotateZ(-65deg); /* IE 9 */ -moz-transform:rotateZ(-65deg); /* Firefox */ -o-transform:rotateZ(-65deg); /* Opera */-webkit-transform:rotateZ(-65deg); }
}

@-webkit-keyframes spin-right-half {
  from { transform:rotateZ(-25deg); -ms-transform:rotateZ(-25deg); /* IE 9 */ -moz-transform:rotateZ(-25deg); /* Firefox */ -webkit-transform:rotateZ(-25deg); /* Safari and Chrome */ -o-transform:rotateZ(-25deg); /* Opera */ }
  to { transform:rotateZ(65deg); -ms-transform:rotateZ(65deg); /* IE 9 */ -moz-transform:rotateZ(65deg); /* Firefox */ -o-transform:rotateZ(65deg); /* Opera */-webkit-transform:rotateZ(65deg); }
}

@-webkit-keyframes spin-right-whole {
  from { transform:rotateZ(0deg); -ms-transform:rotateZ(0deg); /* IE 9 */ -moz-transform:rotateZ(0deg); /* Firefox */ -webkit-transform:rotateZ(0deg); /* Safari and Chrome */ -o-transform:rotateZ(0deg); /* Opera */ }
  to { transform:rotateZ(360deg); -ms-transform:rotateZ(360deg); /* IE 9 */ -moz-transform:rotateZ(360deg); /* Firefox */ -o-transform:rotateZ(360deg); /* Opera */-webkit-transform:rotateZ(360deg); }
}

@-webkit-keyframes spin-left-whole {
  from { transform:rotateZ(0deg); -ms-transform:rotateZ(0deg); /* IE 9 */ -moz-transform:rotateZ(0deg); /* Firefox */ -webkit-transform:rotateZ(0deg); /* Safari and Chrome */ -o-transform:rotateZ(0deg); /* Opera */ }
  to { transform:rotateZ(-360deg); -ms-transform:rotateZ(-360deg); /* IE 9 */ -moz-transform:rotateZ(-360deg); /* Firefox */ -o-transform:rotateZ(-360deg); /* Opera */-webkit-transform:rotateZ(-360deg); }
}

@-webkit-keyframes spin-left-half {
  from { transform:rotateZ(25deg); -ms-transform:rotateZ(25deg); /* IE 9 */ -moz-transform:rotateZ(25deg); /* Firefox */ -webkit-transform:rotateZ(25deg); /* Safari and Chrome */ -o-transform:rotateZ(25deg); /* Opera */ }
  to { transform:rotateZ(-65deg); -ms-transform:rotateZ(-65deg); /* IE 9 */ -moz-transform:rotateZ(-65deg); /* Firefox */ -o-transform:rotateZ(-65deg); /* Opera */-webkit-transform:rotateZ(-65deg); }
}

/* HORIZONTAL MOVEMENT */

@-webkit-keyframes move-from-left {
  0% { margin-left: -550vh; }
  100% { margin-left: 550vh; }
}
@-moz-keyframes move-from-left {
  0% { margin-left: -550vh; }
  100% { margin-left: 550vh; }
}
@-o-keyframes move-from-left {
  0% { margin-left: -550vh; }
  100% { margin-left: 550vh; }
}

@-webkit-keyframes move-from-right {
  0% { margin-left: 550vh; }
  100% { margin-left: -550vh; }
}
@-moz-keyframes move-from-right {
  0% { margin-left: 550vh; }
  100% { margin-left: -550vh; }
}
@-o-keyframes move-from-right {
  0% { margin-left: 550vh; }
  100% { margin-left: -550vh; }
}