/*
 * Source:
   https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions
   https://www.useragentman.com/tests/css3-animation-circle/transition-circle-keyframes.html
 * Animation 1: for Saturn.  Keep the planet in the "upright position".
 */
#saturn1 { position: absolute; top: 682px; left:110px;
	-webkit-animation: oval 6.2s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 6.2s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 6.2s linear infinite; /* Opera 12+ */
           animation: oval 6.2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn2 { position: absolute; top: 602px; left:181px;
	-webkit-animation: oval 9.8s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 9.8s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 9.8s linear infinite; /* Opera 12+ */
           animation: oval 9.8s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn3 { position: absolute; top: 542px; left:381px;
	-webkit-animation: oval 7.0s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 7.0s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 7.0s linear infinite; /* Opera 12+ */
           animation: oval 7.0s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn4 { position: absolute; top: 722px; left:291px;
	-webkit-animation: oval 6.3s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 6.3s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 6.3s linear infinite; /* Opera 12+ */
           animation: oval 6.3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn9 { position: absolute; top: 682px; left:351px;
	-webkit-animation: oval 7.7s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 7.7s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 7.7s linear infinite; /* Opera 12+ */
           animation: oval 7.7s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn5 { position: absolute; top: 682px; left:211px;
	-webkit-animation: oval 5.1s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 5.1s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 5.1s linear infinite; /* Opera 12+ */
           animation: oval 5.1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn6 { position: absolute; top: 512px; left:631px;
	-webkit-animation: oval 4.8s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 4.8s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 4.8s linear infinite; /* Opera 12+ */
           animation: oval 4.8s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn7 { position: absolute; top: 680px; left:830px;
	-webkit-animation: oval 4.8s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 4.8s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 4.8s linear infinite; /* Opera 12+ */
           animation: oval 4.8s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn8 { position: absolute; top: 536px; left:600px;
	-webkit-animation: oval 4.5s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 4.5s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 4.5s linear infinite; /* Opera 12+ */
           animation: oval 4.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn11 { position: absolute; top: 528px; left:840px;
	-webkit-animation: oval 4.2s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 4.2s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 4.2s linear infinite; /* Opera 12+ */
           animation: oval 4.2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn12 { position: absolute; top: 663px; left:370px;
	-webkit-animation: oval 4.9s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 4.9s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 4.9s linear infinite; /* Opera 12+ */
           animation: oval 4.9s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn13 { position: absolute; top: 708px; left:630px;
	-webkit-animation: oval 4.4s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 4.4s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 4.4s linear infinite; /* Opera 12+ */
           animation: oval 4.4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn14 { position: absolute; top: 562px; left:490px;
	-webkit-animation: oval 5.1s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 5.1s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 5.1s linear infinite; /* Opera 12+ */
           animation: oval 5.1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn15 { position: absolute; top: 728px; left:760px;
	-webkit-animation: oval 3.3s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 3.3s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 3.3s linear infinite; /* Opera 12+ */
           animation: oval 3.3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn19 { position: absolute; top: 708px; left:530px;
	-webkit-animation: oval 4.0s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 4.0s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 4.0s linear infinite; /* Opera 12+ */
           animation: oval 4.0s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn16 { position: absolute; top: 488px; left:330px;
	-webkit-animation: oval 5.3s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 5.3s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 5.3s linear infinite; /* Opera 12+ */
           animation: oval 5.3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn17 { position: absolute; top: 458px; left:420px;
	-webkit-animation: oval 6.1s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 6.1s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 6.1s linear infinite; /* Opera 12+ */
           animation: oval 6.1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#saturn18 { position: absolute; top: 752px; left:531px;
	-webkit-animation: oval 5.8s linear infinite; /* Chrome, Safari 5 */
        -moz-animation: oval 5.8s linear infinite; /* Firefox 5-15 */
        -o-animation: oval 5.8s linear infinite; /* Opera 12+ */
           animation: oval 5.8s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
@-webkit-keyframes oval {
	from { 	-webkit-transform: rotate(0deg) translateX(100px) rotate(0deg); }
	to   {  -webkit-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@-moz-keyframes oval {
	from { 	-moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
	to   {  -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@-o-keyframes oval {
	from { 	-o-transform: rotate(0deg) translateX(100px) rotate(0deg); }
	to   {  -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}
@keyframes oval {
	from { 	transform: rotate(0deg) translateX(100px) rotate(0deg); }
	to   {  transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}