body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* background:url(images/Star-field-8-with-nebulae.JPG); */
}
@font-face {
    font-family: Josefin Sans bold;
    src: url(JosefinSans-SemiBold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: Typewriter;
    src: url(TravelingTypewriter.ttf);
    font-weight: bold;
}
@font-face {
    font-family: LionKing;
    src: url(lion_king.ttf);
    font-weight: bold;
}
@font-face {
    font-family: cows;
    src: url(aliens and cows_trial.ttf);
    font-weight: bold;
}
@font-face {
  font-family: 'bernadette';
  src: url('bernadette.ttf'); /* IE9 Compat Modes */
  src: url('bernadette.ttf') format('embedded-opentype'), /* IE6-IE8 */
       url('bernadette.ttf') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('bernadette.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

#mercury, #venus, #earth, #mars, #jupiter, #saturn, #uranus, #neptune, #pluto, #sun{
	 position: absolute;
				top: 48%;
				left: 50%;
				margin-top: -50px;
				margin-left: -50px;
}

#contain{
	/* background-image:url("../images/Star-field-8-with-nebulae.JPG"); */
	 background: url('../images/Star-field-8-with-nebulae.JPG') no-repeat center center fixed; 
      height:100vh;
	  width:100vw;
	 
}



	 
		 

#loader{
	position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}







#sun{
	z-index:1000;
	border-radius:50%
}
#sun img{
	background:rgba(255,255,255,0.2);
	-webkit-box-shadow: 0px 0px 300px 23px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 300px 23px rgba(255,255,255,1);
box-shadow: 0px 0px 300px 23px rgba(255,255,255,1);
border-radius:50%
}
#mercury{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit 20s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 20s linear infinite; /* Firefox 5-15 */
         -ms-animation: myOrbit 20s linear infinite; /* Opera 12+ */
         -o-animation: myOrbit 20s linear infinite; /* Opera 12+ */
            animation: myOrbit 20s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit {
   0%  { -webkit-transform: rotate(0deg) translateX(10px) translateY(120px) rotate(0deg) scale(1); }
 25%  { -webkit-transform: rotate(90deg) translateX(10px) translateY(120px) rotate(-90deg) scale(.75); }
 50%  { -webkit-transform: rotate(180deg) translateX(10px) translateY(120px) rotate(-180deg) scale(.60); }
 75%  { -webkit-transform: rotate(270deg) translateX(10px) translateY(120px) rotate(-270deg) scale(.75); }
 100%  { -webkit-transform: rotate(360deg) translateX(10px) translateY(120px) rotate(-360deg) scale(1); }
 
 0%  { -moz-transform: rotate(0deg) translateX(10px) translateY(120px) rotate(0deg) scale(1); }
 25%  { -moz-transform: rotate(90deg) translateX(10px) translateY(120px) rotate(-90deg) scale(.75); }
 50%  { -moz-transform: rotate(180deg) translateX(10px) translateY(120px) rotate(-180deg) scale(.60); }
 75%  { -moz-transform: rotate(270deg) translateX(10px) translateY(120px) rotate(-270deg) scale(.75); }
 100%  { -moz-transform: rotate(360deg) translateX(10px) translateY(120px) rotate(-360deg) scale(1); }
 
 0%  { -ms-transform: rotate(0deg) translateX(10px) translateY(120px) rotate(0deg) scale(1); }
 25%  { -ms-transform: rotate(90deg) translateX(10px) translateY(120px) rotate(-90deg) scale(.75); }
 50%  { -ms-transform: rotate(180deg) translateX(10px) translateY(120px) rotate(-180deg) scale(.60); }
 75%  { -ms-transform: rotate(270deg) translateX(10px) translateY(120px) rotate(-270deg) scale(.75); }
 100%  { -ms-transform: rotate(360deg) translateX(10px) translateY(120px) rotate(-360deg) scale(1); }
 
  0%  { -o-transform: rotate(0deg) translateX(10px) translateY(120px) rotate(0deg) scale(1); }
 25%  { -o-transform: rotate(90deg) translateX(10px) translateY(120px) rotate(-90deg) scale(.75); }
 50%  { -o-transform: rotate(180deg) translateX(10px) translateY(120px) rotate(-180deg) scale(.60); }
 75%  { -o-transform: rotate(270deg) translateX(10px) translateY(120px) rotate(-270deg) scale(.75); }
 100%  { -o-transform: rotate(360deg) translateX(10px) translateY(120px) rotate(-360deg) scale(1); }
 
   0%  { transform: rotate(0deg) translateX(10px) translateY(120px) rotate(0deg) scale(1); }
 25%  { transform: rotate(90deg) translateX(10px) translateY(120px) rotate(-90deg) scale(.75); }
 50%  { transform: rotate(180deg) translateX(10px) translateY(120px) rotate(-180deg) scale(.60); }
 75%  { transform: rotate(270deg) translateX(10px) translateY(120px) rotate(-270deg) scale(.75); }
 100%  { transform: rotate(360deg) translateX(10px) translateY(120px) rotate(-360deg) scale(1); }
}
#venus{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit1 28s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit1 28s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit1 28s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit1 28s linear infinite; /* Opera 12+ */
            animation: myOrbit1 28s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit1 {
   0%  { -webkit-transform: rotate(0deg) translateX(40px) translateY(130px) rotate(0deg) scale(1); }
 25%  { -webkit-transform: rotate(90deg) translateX(40px) translateY(130px) rotate(-90deg) scale(.75); }
 50%  { -webkit-transform: rotate(180deg) translateX(40px) translateY(130px) rotate(-180deg) scale(.60); }
 75%  { -webkit-transform: rotate(270deg) translateX(40px) translateY(130px) rotate(-270deg) scale(.75); }
 100%  { -webkit-transform: rotate(360deg) translateX(40px) translateY(130px) rotate(-360deg) scale(1); }
 
 0%  { -moz-transform: rotate(0deg) translateX(40px) translateY(130px) rotate(0deg) scale(1); }
 25%  { -moz-transform: rotate(90deg) translateX(40px) translateY(130px) rotate(-90deg) scale(.75); }
 50%  { -moz-transform: rotate(180deg) translateX(40px) translateY(130px) rotate(-180deg) scale(.60); }
 75%  { -moz-transform: rotate(270deg) translateX(40px) translateY(130px) rotate(-270deg) scale(.75); }
 100%  { -moz-transform: rotate(360deg) translateX(40px) translateY(130px) rotate(-360deg) scale(1); }
 
  0%  { -ms-transform: rotate(0deg) translateX(40px) translateY(130px) rotate(0deg) scale(1); }
 25%  { -ms-transform: rotate(90deg) translateX(40px) translateY(130px) rotate(-90deg) scale(.75); }
 50%  { -ms-transform: rotate(180deg) translateX(40px) translateY(130px) rotate(-180deg) scale(.60); }
 75%  { -ms-transform: rotate(270deg) translateX(40px) translateY(130px) rotate(-270deg) scale(.75); }
 100%  { -ms-transform: rotate(360deg) translateX(40px) translateY(130px) rotate(-360deg) scale(1); }
 
   0%  { -o-transform: rotate(0deg) translateX(40px) translateY(130px) rotate(0deg) scale(1); }
 25%  { -o-transform: rotate(90deg) translateX(40px) translateY(130px) rotate(-90deg) scale(.75); }
 50%  { -o-transform: rotate(180deg) translateX(40px) translateY(130px) rotate(-180deg) scale(.60); }
 75%  { -o-transform: rotate(270deg) translateX(40px) translateY(130px) rotate(-270deg) scale(.75); }
 100%  { -o-transform: rotate(360deg) translateX(40px) translateY(130px) rotate(-360deg) scale(1); }
 
  0%  { transform: rotate(0deg) translateX(40px) translateY(130px) rotate(0deg) scale(1); }
 25%  { transform: rotate(90deg) translateX(40px) translateY(130px) rotate(-90deg) scale(.75); }
 50%  { transform: rotate(180deg) translateX(40px) translateY(130px) rotate(-180deg) scale(.60); }
 75%  { transform: rotate(270deg) translateX(40px) translateY(130px) rotate(-270deg) scale(.75); }
 100%  { transform: rotate(360deg) translateX(40px) translateY(130px) rotate(-360deg) scale(1); }
}

#earth{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit2 32s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit2 32s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit2 32s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit2 32s linear infinite; /* Opera 12+ */
            animation: myOrbit2 32s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit2 {
   0%  { -webkit-transform: rotate(0deg) translateX(70px) translateY(140px) rotate(0deg) scale(1); }
 25%  { -webkit-transform: rotate(90deg) translateX(70px) translateY(140px) rotate(-90deg) scale(.75); }
 50%  { -webkit-transform: rotate(180deg) translateX(70px) translateY(140px) rotate(-180deg) scale(.60); }
 75%  { -webkit-transform: rotate(270deg) translateX(70px) translateY(140px) rotate(-270deg) scale(.75); }
 100%  { -webkit-transform: rotate(360deg) translateX(70px) translateY(140px) rotate(-360deg) scale(1); }
 
 0%  { -moz-transform: rotate(0deg) translateX(70px) translateY(140px) rotate(0deg) scale(1); }
 25%  { -moz-transform: rotate(90deg) translateX(70px) translateY(140px) rotate(-90deg) scale(.75); }
 50%  { -moz-transform: rotate(180deg) translateX(70px) translateY(140px) rotate(-180deg) scale(.60); }
 75%  { -moz-transform: rotate(270deg) translateX(70px) translateY(140px) rotate(-270deg) scale(.75); }
 100%  { -moz-transform: rotate(360deg) translateX(70px) translateY(140px) rotate(-360deg) scale(1); }
 
 0%  { -ms-transform: rotate(0deg) translateX(70px) translateY(140px) rotate(0deg) scale(1); }
 25%  { -ms-transform: rotate(90deg) translateX(70px) translateY(140px) rotate(-90deg) scale(.75); }
 50%  { -ms-transform: rotate(180deg) translateX(70px) translateY(140px) rotate(-180deg) scale(.60); }
 75%  { -ms-transform: rotate(270deg) translateX(70px) translateY(140px) rotate(-270deg) scale(.75); }
 100%  { -ms-transform: rotate(360deg) translateX(70px) translateY(140px) rotate(-360deg) scale(1); }
 
  0%  { -o-transform: rotate(0deg) translateX(70px) translateY(140px) rotate(0deg) scale(1); }
 25%  { -o-transform: rotate(90deg) translateX(70px) translateY(140px) rotate(-90deg) scale(.75); }
 50%  { -o-transform: rotate(180deg) translateX(70px) translateY(140px) rotate(-180deg) scale(.60); }
 75%  { -o-transform: rotate(270deg) translateX(70px) translateY(140px) rotate(-270deg) scale(.75); }
 100%  { -o-transform: rotate(360deg) translateX(70px) translateY(140px) rotate(-360deg) scale(1); }
 
   0%  { transform: rotate(0deg) translateX(70px) translateY(140px) rotate(0deg) scale(1); }
 25%  { transform: rotate(90deg) translateX(70px) translateY(140px) rotate(-90deg) scale(.75); }
 50%  { transform: rotate(180deg) translateX(70px) translateY(140px) rotate(-180deg) scale(.60); }
 75%  { transform: rotate(270deg) translateX(70px) translateY(140px) rotate(-270deg) scale(.75); }
 100%  { transform: rotate(360deg) translateX(70px) translateY(140px) rotate(-360deg) scale(1); }
}
#mars{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit3 36s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit3 36s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit3 36s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit3 36s linear infinite; /* Opera 12+ */
            animation: myOrbit3 36s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit3 {
   0%  { -webkit-transform: rotate(0deg) translateX(100px) translateY(150px) rotate(0deg) scale(1); }
 25%  { -webkit-transform: rotate(90deg) translateX(100px) translateY(150px) rotate(-90deg) scale(.75); }
 50%  { -webkit-transform: rotate(180deg) translateX(100px) translateY(150px) rotate(-180deg) scale(.60); }
 75%  { -webkit-transform: rotate(270deg) translateX(100px) translateY(150px) rotate(-270deg) scale(.75); }
 100%  { -webkit-transform: rotate(360deg) translateX(100px) translateY(150px) rotate(-360deg) scale(1); }
 
  0%  { -moz-transform: rotate(0deg) translateX(100px) translateY(150px) rotate(0deg) scale(1); }
 25%  { -moz-transform: rotate(90deg) translateX(100px) translateY(150px) rotate(-90deg) scale(.75); }
 50%  { -moz-transform: rotate(180deg) translateX(100px) translateY(150px) rotate(-180deg) scale(.60); }
 75%  { -moz-transform: rotate(270deg) translateX(100px) translateY(150px) rotate(-270deg) scale(.75); }
 100%  { -moz-transform: rotate(360deg) translateX(100px) translateY(150px) rotate(-360deg) scale(1); }
 
 0%  { -ms-transform: rotate(0deg) translateX(100px) translateY(150px) rotate(0deg) scale(1); }
 25%  { -ms-transform: rotate(90deg) translateX(100px) translateY(150px) rotate(-90deg) scale(.75); }
 50%  { -ms-transform: rotate(180deg) translateX(100px) translateY(150px) rotate(-180deg) scale(.60); }
 75%  { -ms-transform: rotate(270deg) translateX(100px) translateY(150px) rotate(-270deg) scale(.75); }
 100%  { -ms-transform: rotate(360deg) translateX(100px) translateY(150px) rotate(-360deg) scale(1); }
 
 0%  { -o-transform: rotate(0deg) translateX(100px) translateY(150px) rotate(0deg) scale(1); }
 25%  { -o-transform: rotate(90deg) translateX(100px) translateY(150px) rotate(-90deg) scale(.75); }
 50%  { -o-transform: rotate(180deg) translateX(100px) translateY(150px) rotate(-180deg) scale(.60); }
 75%  { -o-transform: rotate(270deg) translateX(100px) translateY(150px) rotate(-270deg) scale(.75); }
 100%  { -o-transform: rotate(360deg) translateX(100px) translateY(150px) rotate(-360deg) scale(1); }
 
 0%  { transform: rotate(0deg) translateX(100px) translateY(150px) rotate(0deg) scale(1); }
 25%  { transform: rotate(90deg) translateX(100px) translateY(150px) rotate(-90deg) scale(.75); }
 50%  { transform: rotate(180deg) translateX(100px) translateY(150px) rotate(-180deg) scale(.60); }
 75%  { transform: rotate(270deg) translateX(100px) translateY(150px) rotate(-270deg) scale(.75); }
 100%  { transform: rotate(360deg) translateX(100px) translateY(150px) rotate(-360deg) scale(1); }
}
#jupiter{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit4 44s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit4 44s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit4 44s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit4 44s linear infinite; /* Opera 12+ */
            animation: myOrbit4 44s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit4 {
   0%  { -webkit-transform: rotate(0deg) translateX(130px) translateY(160px) rotate(0deg); }
 25%  { -webkit-transform: rotate(90deg) translateX(130px) translateY(160px) rotate(-90deg); }
 50%  { -webkit-transform: rotate(180deg) translateX(130px) translateY(160px) rotate(-180deg); }
 75%  { -webkit-transform: rotate(270deg) translateX(130px) translateY(160px) rotate(-270deg); }
 100%  { -webkit-transform: rotate(360deg) translateX(130px) translateY(160px) rotate(-360deg); }
 
  0%  { -moz-transform: rotate(0deg) translateX(130px) translateY(160px) rotate(0deg); }
 25%  { -moz-transform: rotate(90deg) translateX(130px) translateY(160px) rotate(-90deg); }
 50%  { -moz-transform: rotate(180deg) translateX(130px) translateY(160px) rotate(-180deg); }
 75%  { -moz-transform: rotate(270deg) translateX(130px) translateY(160px) rotate(-270deg); }
 100%  { -moz-transform: rotate(360deg) translateX(130px) translateY(160px) rotate(-360deg); }
 
  0%  { -ms-transform: rotate(0deg) translateX(130px) translateY(160px) rotate(0deg); }
 25%  { -ms-transform: rotate(90deg) translateX(130px) translateY(160px) rotate(-90deg); }
 50%  { -ms-transform: rotate(180deg) translateX(130px) translateY(160px) rotate(-180deg); }
 75%  { -ms-transform: rotate(270deg) translateX(130px) translateY(160px) rotate(-270deg); }
 100%  { -ms-transform: rotate(360deg) translateX(130px) translateY(160px) rotate(-360deg); }
 
  0%  { -o-transform: rotate(0deg) translateX(130px) translateY(160px) rotate(0deg); }
 25%  { -o-transform: rotate(90deg) translateX(130px) translateY(160px) rotate(-90deg); }
 50%  { -o-transform: rotate(180deg) translateX(130px) translateY(160px) rotate(-180deg); }
 75%  { -o-transform: rotate(270deg) translateX(130px) translateY(160px) rotate(-270deg); }
 100%  { -o-transform: rotate(360deg) translateX(130px) translateY(160px) rotate(-360deg); }
 
  0%  { transform: rotate(0deg) translateX(130px) translateY(160px) rotate(0deg); }
 25%  { transform: rotate(90deg) translateX(130px) translateY(160px) rotate(-90deg); }
 50%  { transform: rotate(180deg) translateX(130px) translateY(160px) rotate(-180deg); }
 75%  { transform: rotate(270deg) translateX(130px) translateY(160px) rotate(-270deg); }
 100%  { transform: rotate(360deg) translateX(130px) translateY(160px) rotate(-360deg); }
}
#saturn{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit5 52s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit5 52s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit5 52s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit5 52s linear infinite; /* Opera 12+ */
            animation: myOrbit5 52s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit5 {
   0%  { -webkit-transform: rotate(0deg) translateX(160px) translateY(170px) rotate(0deg); }
 25%  { -webkit-transform: rotate(90deg) translateX(160px) translateY(170px) rotate(-90deg); }
 50%  { -webkit-transform: rotate(180deg) translateX(160px) translateY(170px) rotate(-180deg); }
 75%  { -webkit-transform: rotate(270deg) translateX(160px) translateY(170px) rotate(-270deg); }
 100%  { -webkit-transform: rotate(360deg) translateX(160px) translateY(170px) rotate(-360deg); }
 
 0%  { -moz-transform: rotate(0deg) translateX(160px) translateY(170px) rotate(0deg); }
 25%  { -moz-transform: rotate(90deg) translateX(160px) translateY(170px) rotate(-90deg); }
 50%  { -moz-transform: rotate(180deg) translateX(160px) translateY(170px) rotate(-180deg); }
 75%  { -moz-transform: rotate(270deg) translateX(160px) translateY(170px) rotate(-270deg); }
 100%  { -moz-transform: rotate(360deg) translateX(160px) translateY(170px) rotate(-360deg); }
 
 0%  { -ms-transform: rotate(0deg) translateX(160px) translateY(170px) rotate(0deg); }
 25%  { -ms-transform: rotate(90deg) translateX(160px) translateY(170px) rotate(-90deg); }
 50%  { -ms-transform: rotate(180deg) translateX(160px) translateY(170px) rotate(-180deg); }
 75%  { -ms-transform: rotate(270deg) translateX(160px) translateY(170px) rotate(-270deg); }
 100%  { -ms-transform: rotate(360deg) translateX(160px) translateY(170px) rotate(-360deg); }
 
 0%  { -o-transform: rotate(0deg) translateX(160px) translateY(170px) rotate(0deg); }
 25%  { -o-transform: rotate(90deg) translateX(160px) translateY(170px) rotate(-90deg); }
 50%  { -o-transform: rotate(180deg) translateX(160px) translateY(170px) rotate(-180deg); }
 75%  { -o-transform: rotate(270deg) translateX(160px) translateY(170px) rotate(-270deg); }
 100%  { -o-transform: rotate(360deg) translateX(160px) translateY(170px) rotate(-360deg); }
 
 0%  { transform: rotate(0deg) translateX(160px) translateY(170px) rotate(0deg); }
 25%  { transform: rotate(90deg) translateX(160px) translateY(170px) rotate(-90deg); }
 50%  { transform: rotate(180deg) translateX(160px) translateY(170px) rotate(-180deg); }
 75%  { transform: rotate(270deg) translateX(160px) translateY(170px) rotate(-270deg); }
 100%  { transform: rotate(360deg) translateX(160px) translateY(170px) rotate(-360deg); }
}
#uranus{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit6 60s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit6 60s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit6 60s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit6 60s linear infinite; /* Opera 12+ */
            animation: myOrbit6 60s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit6 {
   0%  { -webkit-transform: rotate(0deg) translateX(190px) translateY(180px) rotate(0deg); }
 25%  { -webkit-transform: rotate(90deg) translateX(190px) translateY(180px) rotate(-90deg); }
 50%  { -webkit-transform: rotate(180deg) translateX(190px) translateY(180px) rotate(-180deg); }
 75%  { -webkit-transform: rotate(270deg) translateX(190px) translateY(180px) rotate(-270deg); }
 100%  { -webkit-transform: rotate(360deg) translateX(190px) translateY(180px) rotate(-360deg); }
 
 0%  { -moz-transform: rotate(0deg) translateX(190px) translateY(180px) rotate(0deg); }
 25%  { -moz-transform: rotate(90deg) translateX(190px) translateY(180px) rotate(-90deg); }
 50%  { -moz-transform: rotate(180deg) translateX(190px) translateY(180px) rotate(-180deg); }
 75%  { -moz-transform: rotate(270deg) translateX(190px) translateY(180px) rotate(-270deg); }
 100%  { -moz-transform: rotate(360deg) translateX(190px) translateY(180px) rotate(-360deg); }
 
 0%  { -ms-transform: rotate(0deg) translateX(190px) translateY(180px) rotate(0deg); }
 25%  { -ms-transform: rotate(90deg) translateX(190px) translateY(180px) rotate(-90deg); }
 50%  { -ms-transform: rotate(180deg) translateX(190px) translateY(180px) rotate(-180deg); }
 75%  { -ms-transform: rotate(270deg) translateX(190px) translateY(180px) rotate(-270deg); }
 100%  { -ms-transform: rotate(360deg) translateX(190px) translateY(180px) rotate(-360deg); }
 
 0%  { -o-transform: rotate(0deg) translateX(190px) translateY(180px) rotate(0deg); }
 25%  { -o-transform: rotate(90deg) translateX(190px) translateY(180px) rotate(-90deg); }
 50%  { -o-transform: rotate(180deg) translateX(190px) translateY(180px) rotate(-180deg); }
 75%  { -o-transform: rotate(270deg) translateX(190px) translateY(180px) rotate(-270deg); }
 100%  { -o-transform: rotate(360deg) translateX(190px) translateY(180px) rotate(-360deg); }
 
 0%  { transform: rotate(0deg) translateX(190px) translateY(180px) rotate(0deg); }
 25%  { transform: rotate(90deg) translateX(190px) translateY(180px) rotate(-90deg); }
 50%  { transform: rotate(180deg) translateX(190px) translateY(180px) rotate(-180deg); }
 75%  { transform: rotate(270deg) translateX(190px) translateY(180px) rotate(-270deg); }
 100%  { transform: rotate(360deg) translateX(190px) translateY(180px) rotate(-360deg); }
}
#neptune{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit7 64s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit7 64s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit7 64s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit7 64s linear infinite; /* Opera 12+ */
            animation: myOrbit7 64s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit7 {
   0%  { -webkit-transform: rotate(0deg) translateX(220px) translateY(190px) rotate(0deg); }
 25%  { -webkit-transform: rotate(90deg) translateX(220px) translateY(190px) rotate(-90deg); }
 50%  { -webkit-transform: rotate(180deg) translateX(220px) translateY(190px) rotate(-180deg); }
 75%  { -webkit-transform: rotate(270deg) translateX(220px) translateY(190px) rotate(-270deg); }
 100%  { -webkit-transform: rotate(360deg) translateX(220px) translateY(190px) rotate(-360deg); }
 
  0%  { -moz-transform: rotate(0deg) translateX(220px) translateY(190px) rotate(0deg); }
 25%  { -moz-transform: rotate(90deg) translateX(220px) translateY(190px) rotate(-90deg); }
 50%  { -moz-transform: rotate(180deg) translateX(220px) translateY(190px) rotate(-180deg); }
 75%  { -moz-transform: rotate(270deg) translateX(220px) translateY(190px) rotate(-270deg); }
 100%  { -moz-transform: rotate(360deg) translateX(220px) translateY(190px) rotate(-360deg); }
 
  0%  { -ms-transform: rotate(0deg) translateX(220px) translateY(190px) rotate(0deg); }
 25%  { -ms-transform: rotate(90deg) translateX(220px) translateY(190px) rotate(-90deg); }
 50%  { -ms-transform: rotate(180deg) translateX(220px) translateY(190px) rotate(-180deg); }
 75%  { -ms-transform: rotate(270deg) translateX(220px) translateY(190px) rotate(-270deg); }
 100%  { -ms-transform: rotate(360deg) translateX(220px) translateY(190px) rotate(-360deg); }
 
  0%  { -o-transform: rotate(0deg) translateX(220px) translateY(190px) rotate(0deg); }
 25%  { -o-transform: rotate(90deg) translateX(220px) translateY(190px) rotate(-90deg); }
 50%  { -o-transform: rotate(180deg) translateX(220px) translateY(190px) rotate(-180deg); }
 75%  { -o-transform: rotate(270deg) translateX(220px) translateY(190px) rotate(-270deg); }
 100%  { -o-transform: rotate(360deg) translateX(220px) translateY(190px) rotate(-360deg); }
 
  0%  { transform: rotate(0deg) translateX(220px) translateY(190px) rotate(0deg); }
 25%  { transform: rotate(90deg) translateX(220px) translateY(190px) rotate(-90deg); }
 50%  { transform: rotate(180deg) translateX(220px) translateY(190px) rotate(-180deg); }
 75%  { transform: rotate(270deg) translateX(220px) translateY(190px) rotate(-270deg); }
 100%  { transform: rotate(360deg) translateX(220px) translateY(190px) rotate(-360deg); }
}
#pluto{
    position: absolute;
    left: 52%;
    top: 54%;
	z-index:-1
    -webkit-animation: myOrbit8 72s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit8 72s linear infinite; /* Firefox 5-15 */
       -ms-animation: myOrbit8 72s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit8 72s linear infinite; /* Opera 12+ */
            animation: myOrbit8 72s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}

@keyframes myOrbit8 {
   0%  { -webkit-transform: rotate(0deg) translateX(250px) translateY(200px) rotate(0deg); }
 25%  { -webkit-transform: rotate(90deg) translateX(250px) translateY(200px) rotate(-90deg); }
 50%  { -webkit-transform: rotate(180deg) translateX(250px) translateY(200px) rotate(-180deg); }
 75%  { -webkit-transform: rotate(270deg) translateX(250px) translateY(200px) rotate(-270deg); }
 100%  { -webkit-transform: rotate(360deg) translateX(250px) translateY(200px) rotate(-360deg); }
 
  0%  { -moz-transform: rotate(0deg) translateX(250px) translateY(200px) rotate(0deg); }
 25%  { -moz-transform: rotate(90deg) translateX(250px) translateY(200px) rotate(-90deg); }
 50%  { -moz-transform: rotate(180deg) translateX(250px) translateY(200px) rotate(-180deg); }
 75%  { -moz-transform: rotate(270deg) translateX(250px) translateY(200px) rotate(-270deg); }
 100%  { -moz-transform: rotate(360deg) translateX(250px) translateY(200px) rotate(-360deg); }
 
  0%  { -ms-transform: rotate(0deg) translateX(250px) translateY(200px) rotate(0deg); }
 25%  { -ms-transform: rotate(90deg) translateX(250px) translateY(200px) rotate(-90deg); }
 50%  { -ms-transform: rotate(180deg) translateX(250px) translateY(200px) rotate(-180deg); }
 75%  { -ms-transform: rotate(270deg) translateX(250px) translateY(200px) rotate(-270deg); }
 100%  { -ms-transform: rotate(360deg) translateX(250px) translateY(200px) rotate(-360deg); }
 
  0%  { -o-transform: rotate(0deg) translateX(250px) translateY(200px) rotate(0deg); }
 25%  { -o-transform: rotate(90deg) translateX(250px) translateY(200px) rotate(-90deg); }
 50%  { -o-transform: rotate(180deg) translateX(250px) translateY(200px) rotate(-180deg); }
 75%  { -o-transform: rotate(270deg) translateX(250px) translateY(200px) rotate(-270deg); }
 100%  { -o-transform: rotate(360deg) translateX(250px) translateY(200px) rotate(-360deg); }
 
  0%  { transform: rotate(0deg) translateX(250px) translateY(200px) rotate(0deg); }
 25%  { transform: rotate(90deg) translateX(250px) translateY(200px) rotate(-90deg); }
 50%  { transform: rotate(180deg) translateX(250px) translateY(200px) rotate(-180deg); }
 75%  { transform: rotate(270deg) translateX(250px) translateY(200px) rotate(-270deg); }
 100%  { transform: rotate(360deg) translateX(250px) translateY(200px) rotate(-360deg); }
}