/* ROTATION ANIMATION */
/* ROTATION ANIMATION */
/* ROTATION ANIMATION */

/* 4 Planets position and animation */
/* 4 Planets position and animation */
/* 4 Planets position and animation */
/* 4 Planets position and animation */
.fourP1 { -webkit-animation: fourP1 90s infinite linear; }
@-webkit-keyframes fourP1 { from {-webkit-transform: rotateZ(0deg)   translateX(200px)}
                                to {-webkit-transform:   rotateZ(360deg) translateX(200px)} 
}
.XfourP1 { -webkit-animation: fourP1x 90s infinite linear; }
@-webkit-keyframes fourP1x { from {-webkit-transform: rotateZ(0deg)   }
                                 to {-webkit-transform:   rotateZ(-360deg)}
}
.fourP2 { -webkit-animation: fourP2 90s infinite linear; }
@-webkit-keyframes fourP2 { from {-webkit-transform: rotateZ(-90deg)   translateX(200px)}
                                to {-webkit-transform:   rotateZ(270deg) translateX(200px)}
}
.XfourP2 { -webkit-animation: fourP2x 90s infinite linear; }
@-webkit-keyframes fourP2x { from {-webkit-transform: rotateZ(90deg)   }
                                 to {-webkit-transform:   rotateZ(-270deg) }
}
.fourP3 { -webkit-animation: fourP3 90s infinite linear; }
@-webkit-keyframes fourP3 { from {-webkit-transform: rotateZ(-180deg)   translateX(200px)}
                                  to {-webkit-transform:   rotateZ(180deg) translateX(200px)}
}
.XfourP3 { -webkit-animation: fourP3x 90s infinite linear; }
@-webkit-keyframes fourP3x { from {-webkit-transform: rotateZ(180deg)  }
                                   to {-webkit-transform:   rotateZ(-180deg) }
}
.fourP4 { -webkit-animation: fourP4 90s infinite linear; }
@-webkit-keyframes fourP4 { from {-webkit-transform: rotateZ(-270deg)   translateX(200px)}
                                 to {-webkit-transform:   rotateZ(90deg) translateX(200px)}
}
.XfourP4 { -webkit-animation: fourP4x 90s infinite linear; }
@-webkit-keyframes fourP4x { from {-webkit-transform: rotateZ(270deg)  }
                                  to {-webkit-transform:   rotateZ(-90deg) }
}

/* 5 Planets position and animation */
/* 5 Planets position and animation */
/* 5 Planets position and animation */
/* 5 Planets position and animation */
.fiveP1 { -webkit-animation: fiveP1 90s infinite linear; }
@-webkit-keyframes fiveP1 { from {-webkit-transform: rotateZ(0deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(360deg) translateX(200px)} 
}
.XfiveP1 { -webkit-animation: fiveP1x 90s infinite linear; }
@-webkit-keyframes fiveP1x { from {-webkit-transform: rotateZ(0deg)   }
                             to {-webkit-transform:   rotateZ(-360deg)}
}
.fiveP2 { -webkit-animation: fiveP2 90s infinite linear; }
@-webkit-keyframes fiveP2 { from {-webkit-transform: rotateZ(-72deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(288deg) translateX(200px)}
}
.XfiveP2 { -webkit-animation: fiveP2x 90s infinite linear; }
@-webkit-keyframes fiveP2x { from {-webkit-transform: rotateZ(72deg)   }
                             to {-webkit-transform:   rotateZ(-288deg) }
}
.fiveP3 { -webkit-animation: fiveP3 90s infinite linear; }
@-webkit-keyframes fiveP3 { from {-webkit-transform: rotateZ(-144deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(216deg) translateX(200px)}
}
.XfiveP3 { -webkit-animation: fiveP3x 90s infinite linear; }
@-webkit-keyframes fiveP3x { from {-webkit-transform: rotateZ(144deg)  }
                             to {-webkit-transform:   rotateZ(-216deg) }
}
.fiveP4 { -webkit-animation: fiveP4 90s infinite linear; }
@-webkit-keyframes fiveP4 { from {-webkit-transform: rotateZ(-216deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(144deg) translateX(200px)}
}
.XfiveP4 { -webkit-animation: fiveP4x 90s infinite linear; }
@-webkit-keyframes fiveP4x { from {-webkit-transform: rotateZ(216deg)  }
                             to {-webkit-transform:   rotateZ(-144deg) }
}
.fiveP5 { -webkit-animation: fiveP5 90s infinite linear; }
@-webkit-keyframes fiveP5 { from {-webkit-transform: rotateZ(-288deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(72deg) translateX(200px)}
}
.XfiveP5 { -webkit-animation: fiveP5x 90s infinite linear; }
@-webkit-keyframes fiveP5x { from {-webkit-transform: rotateZ(288deg)  }
                             to {-webkit-transform:   rotateZ(-72deg) }
}

/* 6 Planets position and animation */
/* 6 Planets position and animation */
/* 6 Planets position and animation */
/* 6 Planets position and animation */
.sixP1 { -webkit-animation: sixP1 90s infinite linear; }
@-webkit-keyframes sixP1 { from {-webkit-transform: rotateZ(0deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(360deg) translateX(200px)} 
}
.XsixP1 { -webkit-animation: sixP1x 90s infinite linear; }
@-webkit-keyframes sixP1x { from {-webkit-transform: rotateZ(0deg)   }
                             to {-webkit-transform:   rotateZ(-360deg)}
}
.sixP2 { -webkit-animation: sixP2 90s infinite linear; }
@-webkit-keyframes sixP2 { from {-webkit-transform: rotateZ(-60deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(300deg) translateX(200px)}
}
.XsixP2 { -webkit-animation: sixP2x 90s infinite linear; }
@-webkit-keyframes sixP2x { from {-webkit-transform: rotateZ(60deg)   }
                             to {-webkit-transform:   rotateZ(-300deg) }
}
.sixP3 { -webkit-animation: sixP3 90s infinite linear; }
@-webkit-keyframes sixP3 { from {-webkit-transform: rotateZ(-120deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(240deg) translateX(200px)}
}
.XsixP3 { -webkit-animation: sixP3x 90s infinite linear; }
@-webkit-keyframes sixP3x { from {-webkit-transform: rotateZ(120deg)  }
                             to {-webkit-transform:   rotateZ(-240deg) }
}
.sixP4 { -webkit-animation: sixP4 90s infinite linear; }
@-webkit-keyframes sixP4 { from {-webkit-transform: rotateZ(-180deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(180deg) translateX(200px)}
}
.XsixP4 { -webkit-animation: sixP4x 90s infinite linear; }
@-webkit-keyframes sixP4x { from {-webkit-transform: rotateZ(180deg)  }
                             to {-webkit-transform:   rotateZ(-180deg) }
}
.sixP5 { -webkit-animation: sixP5 90s infinite linear; }
@-webkit-keyframes sixP5 { from {-webkit-transform: rotateZ(-240deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(120deg) translateX(200px)}
}
.XsixP5 { -webkit-animation: sixP5x 90s infinite linear; }
@-webkit-keyframes sixP5x { from {-webkit-transform: rotateZ(240deg)  }
                             to {-webkit-transform:   rotateZ(-120deg) }
}
.sixP6 { -webkit-animation: sixP6 90s infinite linear; }
@-webkit-keyframes sixP6 { from {-webkit-transform: rotateZ(-300deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(60deg) translateX(200px)}
}
.XsixP6 { -webkit-animation: sixP6x 90s infinite linear; }
@-webkit-keyframes sixP6x { from {-webkit-transform: rotateZ(300deg)  }
                             to {-webkit-transform:   rotateZ(-60deg) }
}

/* 8 Planets position and animation */
/* 8 Planets position and animation */
/* 8 Planets position and animation */
/* 8 Planets position and animation */
.eightP1 { -webkit-animation: eightP1 90s infinite linear; }
@-webkit-keyframes eightP1 { from {-webkit-transform: rotateZ(0deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(360deg) translateX(200px)} 
}
.XeightP1 { -webkit-animation: eightP1x 90s infinite linear; }
@-webkit-keyframes eightP1x { from {-webkit-transform: rotateZ(0deg)   }
                             to {-webkit-transform:   rotateZ(-360deg)}
}
.eightP2 { -webkit-animation: eightP2 90s infinite linear; }
@-webkit-keyframes eightP2 { from {-webkit-transform: rotateZ(-45deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(315deg) translateX(200px)}
}
.XeightP2 { -webkit-animation: eightP2x 90s infinite linear; }
@-webkit-keyframes eightP2x { from {-webkit-transform: rotateZ(45deg)   }
                             to {-webkit-transform:   rotateZ(-315deg) }
}
.eightP3 { -webkit-animation: eightP3 90s infinite linear; }
@-webkit-keyframes eightP3 { from {-webkit-transform: rotateZ(-90deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(270deg) translateX(200px)}
}
.XeightP3 { -webkit-animation: eightP3x 90s infinite linear; }
@-webkit-keyframes eightP3x { from {-webkit-transform: rotateZ(90deg)  }
                             to {-webkit-transform:   rotateZ(-270deg) }
}
.eightP4 { -webkit-animation: eightP4 90s infinite linear; }
@-webkit-keyframes eightP4 { from {-webkit-transform: rotateZ(-135deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(225deg) translateX(200px)}
}
.XeightP4 { -webkit-animation: eightP4x 90s infinite linear; }
@-webkit-keyframes eightP4x { from {-webkit-transform: rotateZ(135deg)  }
                             to {-webkit-transform:   rotateZ(-225deg) }
}
.eightP5 { -webkit-animation: eightP5 90s infinite linear; }
@-webkit-keyframes eightP5 { from {-webkit-transform: rotateZ(-180deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(180deg) translateX(200px)}
}
.XeightP5 { -webkit-animation: eightP5x 90s infinite linear; }
@-webkit-keyframes eightP5x { from {-webkit-transform: rotateZ(180deg)  }
                             to {-webkit-transform:   rotateZ(-180deg) }
}
.eightP6 { -webkit-animation: eightP6 90s infinite linear; }
@-webkit-keyframes eightP6 { from {-webkit-transform: rotateZ(-225deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(135deg) translateX(200px)}
}
.XeightP6 { -webkit-animation: eightP6x 90s infinite linear; }
@-webkit-keyframes eightP6x { from {-webkit-transform: rotateZ(225deg)  }
                             to {-webkit-transform:   rotateZ(-135deg) }
}
.eightP7 { -webkit-animation: eightP7 90s infinite linear; }
@-webkit-keyframes eightP7 { from {-webkit-transform: rotateZ(-270deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(90deg) translateX(200px)}
}
.XeightP7 { -webkit-animation: eightP7x 90s infinite linear; }
@-webkit-keyframes eightP7x { from {-webkit-transform: rotateZ(270deg)  }
                             to {-webkit-transform:   rotateZ(-90deg) }
}
.eightP8 { -webkit-animation: eightP8 90s infinite linear; }
@-webkit-keyframes eightP8 { from {-webkit-transform: rotateZ(-315deg)   translateX(200px)}
                            to {-webkit-transform:   rotateZ(45deg) translateX(200px)}
}
.XeightP8 { -webkit-animation: eightP8x 90s infinite linear; }
@-webkit-keyframes eightP8x { from {-webkit-transform: rotateZ(315deg)  }
                             to {-webkit-transform:   rotateZ(-45deg) }
}