@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 10px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  background-color: #08090a;
}

#universe {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover;
}

#galaxy {
  position: relative;
  width: 100%;
  height: 100%;
 
}

#solar-system {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 46%;
  transform-style: preserve-3d;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.orbit .orbit {
  animation-name: suborbit;
}

.pos {
  position: absolute;
  top: 50%;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  transform-style: preserve-3d;
  animation-name: invert;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#sun,
.planet,
#earth .moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  transform-style: preserve-3d;
}


.planet {
 
  
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}



#mercury {
  z-index: 10;
}

#venus {
  z-index: 9;
}

#earth {
  z-index: 8;
}

#moon {
  z-index: 7;
}

#mars {
  z-index: 6;
}

#jupiter {
  z-index: 5;
}

#saturn {
  z-index: 4;
}

#uranus {
  z-index: 3;
}

#neptune {
  z-index: 2;
}

#sun {
  z-index: 1;
}


@keyframes orbit {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(-360deg);
  }
}

@keyframes suborbit {
  0% {
    transform: rotateX(90deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(90deg) rotateZ(-360deg);
  }
}

@keyframes invert {
  0% {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
}

/* --------------------------------------------------------------------------- opening */
.view-3D .opening #sun,
.view-3D .opening .orbit,
.view-3D .opening .pos,
.view-3D .opening .planet,
.view-3D .opening .satelite,
.view-3D .opening .ring {
  transition-duration: 4s;
}

#universe.opening #sun {
  box-shadow: 0 0 0 rgba(255, 160, 60, 0);
}


.view-2D.zoom-large #sun {
  transform-style: flat;
}

.view-2D.zoom-large .orbit {
  transform-style: flat;
}

.view-2D #sun,
.view-2D .ring {
  transform: rotateX(0deg);
}

.view-2D .planet,
.view-2D .moon {
  transform: rotateX(90deg);
}


.view-3D.zoom-large #sun {
  transform-style: preserve-3d;
}

.view-3D.zoom-large .orbit {
  transform-style: preserve-3d;
}

.view-3D #solar-system {
  transform: rotateX(75deg);
}

.view-3D #sun {
  transform: rotateX(-90deg);
}

.view-3D .ring {
  transform: rotateX(90deg);
}

.view-3D .planet,
.view-3D .moon {
  transform: rotateX(0deg);
}


.zoom-large #solar-system {
  width: 100%;
}

.zoom-large.view-2D .scale-stretched #solar-system {
  font-size: 26%;
}

.zoom-large.view-3D .scale-stretched #solar-system {
  font-size: 62%;
}

.zoom-large.view-2D .scale-d #solar-system {
  font-size: 22%;
}

.zoom-large.view-3D .scale-d #solar-system {
  font-size: 48%;
}

.zoom-large.view-2D .scale-s #solar-system {
  font-size: 7%;
}

.zoom-large.view-3D .scale-s #solar-system {
  font-size: 14%;
}


.zoom-close #solar-system {
  width: 200%;
  font-size: 100%;
}

.zoom-close .scale-stretched #solar-system {
  margin-left: -100%;
}

.zoom-close .scale-d #solar-system {
  margin-left: -106%;
}

.zoom-close.view-2D .scale-d #solar-system {
  font-size: 84%;
}

.zoom-close.view-3D .scale-d #solar-system {
  font-size: 84%;
}

.zoom-close .scale-s #solar-system {
  margin-left: -145%;
}

.zoom-close.view-2D .scale-s #solar-system {
  font-size: 40%;
}

.zoom-close.view-3D .scale-s #solar-system {
  font-size: 40%;
}

.zoom-close .orbit,
.zoom-close .pos,
.zoom-close .planet,
.zoom-close .satelite,
.zoom-close .ring {
  animation-play-state: paused !important;
  animation-duration: 0s !important;
  animation: none !important;
}

.zoom-close.view-2D .planet,
.zoom-close.view-2D .moon {
  transform: rotateX(0deg);
}

.zoom-close.view-3D .planet {
  transform: rotateX(-90deg);
}

.zoom-close.view-3D .moon {
  transform: rotateX(90deg);
}

.zoom-close .pos {
  left: 100% !important;
  top: 50% !important;
}



#mercury .pos,
#mercury .planet,
#mercury.orbit {
  animation-duration: 2.89016s;
}

#venus .pos,
#venus .planet,
#venus.orbit {
  animation-duration: 7.38237s;
}

#earth .pos,
#earth .planet,
#earth.orbit {
  animation-duration: 12.00021s;
}

#earth .orbit .pos,
#earth .orbit {
  animation-duration: 0.89764s;
}

#mars .pos,
#mars .planet,
#mars.orbit {
  animation-duration: 22.57017s;
}

#jupiter .pos,
#jupiter .planet,
#jupiter.orbit {
  animation-duration: 142.35138s;
}

#saturn .pos,
#saturn .planet,
#saturn.orbit,
#saturn .ring {
  animation-duration: 353.36998s;
}

#uranus .pos,
#uranus .planet,
#uranus.orbit {
  animation-duration: 1008.20215s;
}

#neptune .pos,
#neptune .planet,
#neptune.orbit {
  animation-duration: 1977.49584s;
}


.scale-stretched #sun {
  font-size: 24em;
}

.scale-stretched #mercury .planet {
  font-size: 1.5em;
}

.scale-stretched #venus .planet {
  font-size: 3.72em;
}

.scale-stretched #earth .planet {
  font-size: 3.92em;
}

.scale-stretched #earth .moon {
  font-size: 1.2em;
}

.scale-stretched #mars .planet {
  font-size: 2.9em;
}

.scale-stretched #jupiter .planet {
  font-size: 12em;
}

.scale-stretched #saturn .planet {
  font-size: 10.8em;
}

.scale-stretched #uranus .planet {
  font-size: 4.68em;
}

.scale-stretched #neptune .planet {
  font-size: 4.9em;
}


.scale-d #sun {
  font-size: 41.73048em;
}

.scale-d #mercury .planet {
  font-size: 0.14634em;
}

.scale-d #venus .planet {
  font-size: 0.36306em;
}

.scale-d #earth .planet {
  font-size: 0.38226em;
}

.scale-d #earth .moon {
  font-size: 0.08226em;
}

.scale-d #mars .planet {
  font-size: 0.20334em;
}

.scale-d #jupiter .planet {
  font-size: 4.19466em;
}

.scale-d #saturn .planet {
  font-size: 3.49392em;
}

.scale-d #uranus .planet {
  font-size: 1.52172em;
}

.scale-d #neptune .planet {
  font-size: 1.47732em;
}


.scale-s #sun {
  font-size: 417.3048em;
}

.scale-s #mercury .planet {
  font-size: 1.4634em;
}

.scale-s #venus .planet {
  font-size: 3.6306em;
}

.scale-s #earth .planet {
  font-size: 3.8226em;
}

.scale-s #earth .moon {
  font-size: 0.8226em;
}

.scale-s #mars .planet {
  font-size: 2.0334em;
}

.scale-s #jupiter .planet {
  font-size: 41.9466em;
}

.scale-s #saturn .planet {
  font-size: 34.9392em;
}

.scale-s #uranus .planet {
  font-size: 15.2172em;
}

.scale-s #neptune .planet {
  font-size: 14.7732em;
}


.scale-stretched #mercury.orbit {
  width: 32em;
  height: 32em;
  margin-top: -16em;
  margin-left: -16em;
}

.scale-stretched #venus.orbit {
  width: 40em;
  height: 40em;
  margin-top: -20em;
  margin-left: -20em;
}

.scale-stretched #earth.orbit {
  width: 56em;
  height: 56em;
  margin-top: -28em;
  margin-left: -28em;
}

.scale-stretched #earth .orbit {
  width: 6em;
  height: 6em;
  margin-top: -3em;
  margin-left: -3em;
}

.scale-stretched #mars.orbit {
  width: 72em;
  height: 72em;
  margin-top: -36em;
  margin-left: -36em;
}

.scale-stretched #jupiter.orbit {
  width: 100em;
  height: 100em;
  margin-top: -50em;
  margin-left: -50em;
}

.scale-stretched #saturn.orbit {
  width: 150em;
  height: 150em;
  margin-top: -75em;
  margin-left: -75em;
}

.scale-stretched #uranus.orbit {
  width: 186em;
  height: 186em;
  margin-top: -93em;
  margin-left: -93em;
}

.scale-stretched #neptune.orbit {
  width: 210em;
  height: 210em;
  margin-top: -105em;
  margin-left: -105em;
}


.scale-d #mercury.orbit {
  width: 44.74176em;
  height: 44.74176em;
  margin-top: -22.37088em;
  margin-left: -22.37088em;
}

.scale-d #venus.orbit {
  width: 47.35737em;
  height: 47.35737em;
  margin-top: -23.67869em;
  margin-left: -23.67869em;
}

.scale-d #earth.orbit {
  width: 49.50959em;
  height: 49.50959em;
  margin-top: -24.75479em;
  margin-left: -24.75479em;
}

.scale-d #mars.orbit {
  width: 53.58356em;
  height: 53.58356em;
  margin-top: -26.79178em;
  margin-left: -26.79178em;
}

.scale-d #jupiter.orbit {
  width: 82.2042em;
  height: 82.2042em;
  margin-top: -41.1021em;
  margin-left: -41.1021em;
}

.scale-d #saturn.orbit {
  width: 115.91713em;
  height: 115.91713em;
  margin-top: -57.95857em;
  margin-left: -57.95857em;
}

.scale-d #uranus.orbit {
  width: 191.00471em;
  height: 191.00471em;
  margin-top: -95.50235em;
  margin-left: -95.50235em;
}

.scale-d #neptune.orbit {
  width: 275.64709em;
  height: 275.64709em;
  margin-top: -137.82355em;
  margin-left: -137.82355em;
}

/* Moon */
.scale-d #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
}


.scale-s #mercury.orbit {
  width: 441.3048em;
  height: 441.3048em;
  margin-top: -220.6524em;
  margin-left: -220.6524em;
}

.scale-s #venus.orbit {
  width: 457.3048em;
  height: 457.3048em;
  margin-top: -228.6524em;
  margin-left: -228.6524em;
}

.scale-s #earth.orbit {
  width: 473.3048em;
  height: 473.3048em;
  margin-top: -236.6524em;
  margin-left: -236.6524em;
}

.scale-s #mars.orbit {
  width: 489.3048em;
  height: 489.3048em;
  margin-top: -244.6524em;
  margin-left: -244.6524em;
}

.scale-s #jupiter.orbit {
  width: 561.3048em;
  height: 561.3048em;
  margin-top: -280.6524em;
  margin-left: -280.6524em;
}

.scale-s #saturn.orbit {
  width: 705.3048em;
  height: 705.3048em;
  margin-top: -352.6524em;
  margin-left: -352.6524em;
}

.scale-s #uranus.orbit {
  width: 817.3048em;
  height: 817.3048em;
  margin-top: -408.6524em;
  margin-left: -408.6524em;
}

.scale-s #neptune.orbit {
  width: 881.3048em;
  height: 881.3048em;
  margin-top: -440.6524em;
  margin-left: -440.6524em;
}


.scale-s #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
}


.set-speed dl.infos dd span:after {
  content: "Orbit Velocity";
}

.set-speed #sun dl.infos dd:after {
  content: "230km/s";
}

.set-speed #mercury dl.infos dd:after {
  content: "170,503 km/h";
}

.set-speed #venus dl.infos dd:after {
  content: "126,074 km/h";
}

.set-speed #earth dl.infos dd:after {
  content: "107,218 km/h";
}

.set-speed #mars dl.infos dd:after {
  content: "86,677 km/h";
}

.set-speed #jupiter dl.infos dd:after {
  content: "47,002 km/h";
}

.set-speed #saturn dl.infos dd:after {
  content: "34,701 km/h";
}

.set-speed #uranus dl.infos dd:after {
  content: "24,477 km/h";
}

.set-speed #neptune dl.infos dd:after {
  content: "19,566 km/h";
}


.set-size dl.infos dd span:after {
  content: "Equatorial Circumference";
}

.set-size #sun dl.infos dd:after {
  content: "4,370,005 km";
}

.set-size #mercury dl.infos dd:after {
  content: "15,329 km";
}

.set-size #venus dl.infos dd:after {
  content: "38,024 km";
}

.set-size #earth dl.infos dd:after {
  content: "40,030 km";
}

.set-size #mars dl.infos dd:after {
  content: "21,296 km";
}

.set-size #jupiter dl.infos dd:after {
  content: "439,263 km";
}

.set-size #saturn dl.infos dd:after {
  content: "365,882 km";
}

.set-size #uranus dl.infos dd:after {
  content: "159,354 km";
}

.set-size #neptune dl.infos dd:after {
  content: "154,704 km";
}


.set-distance dl.infos dd span:after {
  content: "From Sun";
}

.set-distance #sun dl.infos dd span:after {
  content: "From Earth";
}

.set-distance #sun dl.infos dd:after {
  content: "149,598,262 km";
}

.set-distance #mercury dl.infos dd:after {
  content: "57,909,227 km";
}

.set-distance #venus dl.infos dd:after {
  content: "108,209,475 km";
}

.set-distance #earth dl.infos dd:after {
  content: "149,598,262 km";
}

.set-distance #mars dl.infos dd:after {
  content: "227,943,824 km";
}

.set-distance #jupiter dl.infos dd:after {
  content: "778,340,821 km";
}

.set-distance #saturn dl.infos dd:after {
  content: "1,426,666,422 km";
}

.set-distance #uranus dl.infos dd:after {
  content: "2,870,658,186 km";
}

.set-distance #neptune dl.infos dd:after {
  content: "4,498,396,441 km";
}


#mercury .pos {
  left: 50%;
  top: -1%;
}

#mercury .planet {
  animation-name: shadow-mercury;
}

@keyframes shadow-mercury {
  0% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);

  }

  25% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
  
  }

  50% {
    box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
    
  }

  50.01% {
    box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
  
  }

  75% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    
  }

  100% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
 
  }
}

.scaled.view-2D #mercury .planet,
.scaled.view-3D #mercury .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
 
}


#venus .pos {
  left: 0;
  top: 50%;
}

#venus .planet {
  animation-name: shadow-venus;
}

@keyframes shadow-venus {
  0% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
  
  }

  25% {
    box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);

  }

  25.5% {
    box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
  
  }

  50% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
 
  }

  75% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);

  }

  100% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);

  }
}

.scaled.view-2D #venus .planet,
.scaled.view-3D #venus .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);

}


#earth .pos {
  left: 100%;
  top: 50%;
}

#earth .planet {
  animation-name: shadow-earth;
}

@keyframes shadow-earth {
  0% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    
  }

  25% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
   
  }

  50% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
 
  }

  75% {
    box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
   
  }

  75.01% {
    box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
    
  }

  100% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
   
  }
}

.scaled.view-2D #earth .planet,
.scaled.view-3D #earth .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
 
}


#earth .orbit .pos {
  left: 100%;
  top: 50%;
}


#mars .pos {
  left: 50%;
  top: 100%;
}

#mars .planet {
  animation-name: shadow-mars;
}

@keyframes shadow-mars {
  0% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);

  }

  25% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
 
  }

  50% {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);

  }

  75% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
  
  }

  99.99% {
    box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
  
  }

  100% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
   
  }
}

.scaled.view-2D #mars .planet,
.scaled.view-3D #mars .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);

}


#jupiter .pos {
  left: 100%;
  top: 50%;
}

#jupiter .planet {
  animation-name: shadow-jupiter;
}



.scaled.view-2D #jupiter .planet,
.scaled.view-3D #jupiter .planet {
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);

}


#saturn .pos {
  left: 0%;
  top: 50%;
}

#saturn .planet {
  animation-name: shadow-saturn;
}



.scaled.view-2D #saturn .planet,
.scaled.view-3D #saturn .planet {
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
 
}

#uranus .pos {
  left: 0;
  top: 50%;
}

#uranus .planet {
  animation-name: shadow-uranus;
}

@keyframes shadow-uranus {
  0% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
 
  }

  25% {
    box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);

  }

  25.01% {
    box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
  
  }

  50% {
    box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
   
  }

  75% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
 
  }

  100% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
   
  }
}

.scaled.view-2D #uranus .planet,
.scaled.view-3D #uranus .planet {
  box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
 
}


#neptune .pos {
  left: 50%;
  top: 0;
}

#neptune .planet {
  animation-name: shadow-neptune;
}

@keyframes shadow-neptune {
  0% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);

  }

  25% {
    box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
 
  }

  50% {
    box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
 
  }

  50.01% {
    box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
  
  }

  75% {
    box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);

  }

  100% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
 
  }
}

.scaled.view-2D #neptune .planet,
.scaled.view-3D #neptune .planet {
  box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);

}

dl.infos {
  position: absolute;
  display: block;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin-top: -90%;
  margin-left: 90%;
  padding-left: 100%;
  transform-origin: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(90deg);
}

dl.infos:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 30px;
  left: 15px;
  bottom: 0;
  border-top: 1px solid white;
  border-left: 1px solid white;
  transform-style: preserve-3d;
  transform: skew(-45deg, 0deg);
  box-shadow: inset 1px 1px black;
}

dl.infos dt {
  position: absolute;
  left: 50px;
  margin-bottom: 26px;
  bottom: 30px;
  color: #fff;
  font-size: 14px;
  text-shadow: 1px 1px 2px black;
}

dl.infos dd:after {
  position: absolute;
  left: 50px;
  bottom: 30px;
  width: 300px;
  color: #fff;
  font-size: 22px;
  text-shadow: 1px 1px 2px black;
}

dl.infos dd span:after {
  position: absolute;
  left: 50px;
  bottom: 14px;
  width: 300px;
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px 2px black;
}

.sun #sun .infos,
.mercury #mercury .infos,
.venus #venus .infos,
.earth #earth .infos,
.mars #mars .infos,
.jupiter #jupiter .infos,
.saturn #saturn .infos,
.uranus #uranus .infos,
.neptune #neptune .infos {
  display: block;
  opacity: 1;
  transform: rotateX(0deg);
}

.mercury #mercury.orbit,
.venus #venus.orbit,
.earth #earth.orbit,
.mars #mars.orbit,
.jupiter #jupiter.orbit,
.saturn #saturn.orbit,
.uranus #uranus.orbit,
.neptune #neptune.orbit {
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.hide-UI h1,
.hide-UI #data,
.hide-UI dl.infos,
.hide-UI #controls {
  opacity: 0 !important;
  margin-top: -30px;
}

.hide-UI #data {
  margin-bottom: -30px;
}

.hide-UI .orbit {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

h1 {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

h1 span,
#navbar h1 a {
  display: inline;
  position: relative;
  padding: 0;
  font-weight: 300;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}



#navbar {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  width: 100%;
  height: 48px;
}

#navbar a,
#data a,
#controls label {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  position: relative;
  text-decoration: none;
}

#navbar a:hover,
#data a:hover,
#controls label:hover {
  color: #000;
}

#data a.active {
  color: #0cf;
}

#navbar a {
  position: absolute;
  top: 0;
  height: 48px;
  padding: 16px;
  font-size: 14px;
}

#toggle-data {
  left: 0;
}

#toggle-controls {
  right: 0;
}

#data,
#controls {
  z-index: 99;
  position: fixed;
  opacity: 1;
  top: 49px;
  padding: 16px;
}

.data-close #data {
  left: -100%;
}

.data-open #data {
  left: 0px;
}



.controls-open #controls {
  right: 0px;
}

#data a {
  margin-bottom: 1px;
  padding: 6px 10px;
  font-size: 18px;
}

#controls label {
  opacity: 0.6;
  height: 24px;
  margin-bottom: 28px;
}

#controls label:hover {
  opacity: 1;
}

#controls label:before {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  text-align: center;
  color: #fff;
  z-index: 99;
}

#controls label span {
  display: block;
  margin-left: 36px;
  padding-top: 4px;
  font-size: 18px;
  color: #fff;
}

#controls input {
  display: block;
  appearance: none;
}

#controls input[type="radio"]:before {
  content: "";
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #000000;
  border-radius: 16px;
}

#controls input:checked[type="radio"]:after {
  content: "";
  display: block;
  top: 3px;
  margin-left: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #000000;
  z-index: 99;
}

#controls input[type="checkbox"]:before {
  content: "";
  display: block;
  position: absolute;
  width: 100px;
  height: 22px;
  border: 2px solid #000000;
  border-radius: 16px;
}

#controls input[type="checkbox"]:after {
  content: "";
  display: block;
  top: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #000000;
  z-index: 99;
}

#controls label.set-view:before {
  font: bold small-caps 11px/20px sans-serif;
}

.view-3D #controls label.set-view:before {
  content: "2D";
  margin-left: 82px;
}

.view-2D #controls label.set-view:before {
  content: "3D";
  margin-left: 7px;
}

.view-3D #controls .set-view input:after {
  margin-left: 3px;
}

.view-2D #controls .set-view input:after {
  margin-left: 81px;
}

#controls label.set-zoom:before {
  font: normal small-caps 18px/14px sans-serif;
}

.zoom-large #controls label.set-zoom:before {
  content: "+";
  margin-left: 82px;
}

.zoom-close #controls label.set-zoom:before {
  content: "-";
  margin-left: 7px;
}

.zoom-large #controls .set-zoom input:after {
  margin-left: 3px;
}

.zoom-close #controls .set-zoom input:after {
  margin-left: 81px;
}

.pos {
  transition-property: top, left;
}

#solar-system,
.orbit,
.planet,
.satelite,
.ring {
  transition-property: width, height, top, left, margin-left, margin-top,
    webkit-transform;
}

#sun,
.icon {
  transition-property: width, height, webkit-transform;
}

#solar-system,
#sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

#solar-system,
#sun,
.planet,
.satelite,
.ring {
  transition-delay: 0s;
}

.pos {
  transition-delay: 1s;
}

.opening #solar-system,
.opening #sun,
.opening .orbit,
.opening .pos,
.opening .planet,
.opening .satelite,
.opening .ring,
.opening .infos,
.opening h1,
.opening #data,
.opening dl.infos,
.opening #controls {
  transition-duration: 0s;
  transition-delay: 0s;
}

.opening .pos {
  transition-delay: 0s;
}

h1,
#data,
#controls {
  transition-property: opacity, margin;
  transition-duration: 0.8s;
  transition-timing-function: ease-in-out;
}

h1 {
  transition-delay: 0.35s;
}

#data {
  transition-delay: 0.7s;
}

#controls {
  transition-delay: 1s;
}




#universe {
  background-image: url('/Assets/IMG/univ.jpg')
}

#mercury .planet {
  background-image: url('/Assets/IMG/Mercury.png')
}
#sun .planet {
    background-image: url('/Assets/IMG/Mercury.png')
  }
  

#venus .planet {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAABGdBTUEAALGPC/xhBQAAAGBQTFRFnHlVuYpjfWdJpX5aqoFcu4xkm3lWjnFQj3JQdmNFhGxMk3RSmXhUqoFcq4JdgGlKr4VelHVSim9OvIxkon1ZvIxkvIxkvIxkvIxkvIxkvIxkvIxkvIxkvIxkAAAAvIxkls4uvQAAACB0Uk5Tm/1srVqO0Ycro9cNHcDU6ezowbzpv8Lgx8zq5dLbAOwHjDEIAAAB2UlEQVQoz12TiZbqMAiG49Zq16TZIAF5/7e8pLXOzMVjPfEr8EPAvE+b7g9fBGO63afvn+aEjxg51ZovJLz0z7/4AQk5FmYWNfLz9RceE2LKQkBCIlkwpWDGE49JsBR1IqkgtfkLhNv4wamdSymZcgIPO5YlbAd+6AFzjoBECSKwZA0lwfUNP/eXiQCIqQoCE2gCssE9FT+OYFoPqru0H9Aima17vc10UInY3HPBijH6iAJLcJO5f3CJCUBDFwCtC6RUDNvd+BNLSlgoJaoAiUplO2+90XYcwXPOFRGlUkvSLGyb4fSRBj5mxlqYmGvV0mpwqzm63Iw5A9TMKaZWt2jw1cgvQypau5TjlGYNjuUHq3Qp55kuLbePtdlFsj5V74E1I83d8DI6BtH7jJK91zuve4PJs6Z2iu+FPO36kteaFTPo61mvzK1XM3HxdGTLgE0W7wnssq3rZN63E2thfOhCjWFV2KtdqG09azMkPn+agErdsLYLffdWSJVXbeW3RBu6Ybgew3Rb2NfK+ily9ER9t2E7R9HMMxChDqo06XbpNk08fgfZdMuiHBVbq65uXV/jrzXouy4swS52CTtc+79L9Ow351yn3wZf/y1R27LrNqxDY9efFfwHiRFWry5LGJMAAAAASUVORK5CYII=);
}

#earth .planet {
  background-image: url('/Assets/IMG/Earth.png')
}
#sun {
    background-image: url('/Assets/IMG/sun.png');
    background-repeat: no-repeat;
    background-size: cover;
   
  }
#earth .moon {
  background-color: white;
}

#mars .planet {
  background-image: url('/Assets/IMG/Mars.png')
}

#jupiter .planet {
  background-image: url('/Assets/IMG/Jupiter.png')
}

#saturn .planet {
  background-image: url('/Assets/IMG/saturn.png')
}

#uranus .planet {
  background-image: url(data:image/png;base64,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);
}

#neptune .planet {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA3CAMAAACfBSJ0AAAABGdBTUEAALGPC/xhBQAAAGBQTFRFZoGyU2ybWHKiU2yZV3CgVm+eVm+dV3GhVG2bAAAAmLjslbbqk7ToZIO3aovBZ4e7cJTMkLHmbI/FYX+yXnusWnWlja7kiavhc5fRg6bdhqjfeZ3WgKTbdprUfqHZe5/XTjN33QAAAAp0Uk5T82DQILiggOhMAI3C2HIAAAPgSURBVEjHjZaLVqNAEEQxkoAmIAYIb/j/v9yuqp4BNetum8R4Dtfq6elX8vbE8kt6apsWdkov+bNHkp/QOWvbpqlhTQM6O+f/5F4Mag0qPmSFwUBffuXyLEBleaeVpaNZ/lfuNTWoMMSYqur7pTerqjtQI9PX51yekSICW2DTsvTV/U7yKLlzFxP7gJIAMZPZAlSal5/cuW0oFigA9t62jSi9bdrzdw4YKTw6TfrcgNkX+wpvywOYRCcd29YNLzy+8su6umRvYB1cFZfjbMD4FF6rPmR0lr6aYr5zrxmxBWpusz7nnQNYlUWbvUYubS2ScjJgMxD/2MH+/lG3aeByHs6xmTaY2R/DwL94UESnj56Co5cW/wM2DuMo3N5z8NWyB4KZuJe2LuglqIEUbNhtlq/IuwqCL+SypvDDyb9h6Dqj8BpHvgdydoc6YZOBy1t5KTnY2BkI6/gDZXELr988zY07Q245yAE7GhQRG+QPU7VozsbRzckxONZ1j91cGorh9o3L3hK6aVm5Omfe2eOfZvglshsV1G0Ld5gnF7qJpJoVC8p93m4gRUNS14iaWsBdkvToJgQld7uRjCDzgLVojtZNmpwQTXDrzn2Cu15vDhvIE+p8POAp0S2Qm3l1D9e7wggqOkrThQdsWnJL5HAH0rte39/fAUZuVmB6BibohXtwvZu4d+eMHDzXvnKLH5B3/l3vU5hu8AvXRy44+lWvG0NuH7gi6s2Bo6PCwHVDyG1dfCHO7h2NyxMmCN5iOJVpIWFUSsmpcS4mWoioru/xCAmq3BZ3snypwcWL8JuHIl4Pcp37OakgrMckFwsMywh+oikMI2/iEbIsFgTzs1dYLlYPTShbNbChe8RCwuEcw/mm2Clyrz8JsuMOLNZDAVLMK16cdSbVu2W2WrvVYaz3HTMvvFH47Z3VX4qyNykLjY2gNQR1bxPhCryK2EHZzyyi08YjTmjP86HJhCYhrj/0M+ufjIwlG2OqQhyjDfHqvPhq75+MjA0jVu+ssA7sGV/a7jSFbpbF+aCxogGxBXBW9/agqH169wzzyMeY0m3dfEqEoUQnUOmSS4/zT9OWU5qp6hMmjsItrAfNYf5xkn0I3CaN5n1qhoLlblA3+ff57iCig55+mNUcfhzTdXP5sU94cBZ2rYnbhLQnbjEVl5/zk/0Faw9Kaln21Wfa1KQxh57tL9qXdI991UdQ/4ar1vN9Ke5nZRkWNC5pKPAKa6GlV/7LPlhD1Ha7SssgpAyCj3/bB+P+GdfP0n7ugGzx/WX/9H0XO3Khfdd+FVhbm3/su0/2a9uw/2e/3vf59td9/g/87+wnzrJ1rQAAAABJRU5ErkJggg==);
}


@media screen and (max-width: 299px) {
  #universe {
    font-size: 20%;
  }
}
@media screen and (min-width: 300px) {
  #universe {
    font-size: 24%;
  }
}
@media screen and (min-width: 500px) {
  #universe {
    font-size: 36%;
  }
}
@media screen and (min-width: 600px) {
  #universe {
    font-size: 44%;
  }
}
@media screen and (min-width: 760px) {
  #universe {
    font-size: 58%;
  }
}
@media screen and (min-width: 1000px) {
  #universe {
    font-size: 73%;
  }


  #navbar a {
    display: none;
  }

  h1 {
    font-size: 22px;
    margin-top: 8px;
  }


    #controls {
        padding-right: 8px;
        top: 12px;
    }


  #data {
    position: fixed;
    top: inherit;
  
    width: 100%;
    text-align: center;
  }

  #data a {
    display: inline-block;
    text-align: center;
    font-size: 20px;
    padding: 15px 15px;
  }

  .data-open #data,
  .data-close #data {
    left: 0px;
  }


}
@media screen and (min-width: 1300px) {
  #universe {
    font-size: 100%;
  }
}
@media screen and (min-width: 1600px) {
  .zoom-close .scale-d #solar-system {
    margin-left: -120%;
  }
}

#Control{
    bottom: 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
}