@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
/*
  Copyright (c) 2012 Julian Garnier
  Licensed under the MIT license
*/
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; }

a:link {
  color: gray;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

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%;
  /*perspective: 4000;*/ }

#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: 50%;
  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; }
/* moon --> mercury*/
#sun, .planet, #earth .moon {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0.6em;
  height: 0.6em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  transform-style: preserve-3d; }

#sun {
  background-color: #FB7209;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); }

.planet {
  background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

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

#saturn .ring {
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  border: 0.3em solid rgba(160, 147, 130, 0.7);
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

#saturn .ring:after {
  border-radius: 50%;
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 2.2em;
  height: 2.2em;
  margin-top: -1.1em;
  margin-left: -1.1em;
  border: 0.07em solid rgba(160, 147, 130, 0.5);
  box-sizing: border-box;
  box-sizing: border-box; }

/* --------------------------------------------------------------------------- planets index */
#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; }

#sun {
  z-index: 1; }

/* --------------------------------------------------------------------------- animations */
@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); }

/* --------------------------------------------------------------------------- 2D view */
.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); }

/* --------------------------------------------------------------------------- 3D view */
.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); }

/* --------------------------------------------------------------------------- large zoom */
.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%; }

/* --------------------------------------------------------------------------- close zoom */
.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; }

/* --------------------------------------------------------------------------- data */
/* --------------------------------------------------------------------------- speed */
/* sideral years */
/* rahu */
#mercury .pos,
#mercury .planet,
#mercury.orbit {
  animation-duration: 999999999s; }

/* moon */
#venus .pos,
#venus .planet,
#venus.orbit {
  animation-duration: 23.605915104s; }

/* sun */
#earth .pos,
#earth .planet,
#earth.orbit {
  animation-duration: 315.581184s; }

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

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

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

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


/* --------------------------------------------------------------------------- planets sizes */
/* --------------------------------------------------------------------------- stretched sizes */
/* sun --> earth */
.scale-stretched #sun {
  font-size: 22em; }
/* rahu */
.scale-stretched #mercury .planet {
  font-size: 6em; }
/* venus --> moon */
.scale-stretched #venus .planet {
  font-size: 6em; }
/*   earth -->sun*/
.scale-stretched #earth .planet {
  font-size: 6em; }
/* mercury */
.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; }



/* --------------------------------------------------------------------------- scaled sizes */
/*
(planets radius * 2) * ratio
*/
/*$distanceScaleRatio:   0.000075em;*/
/* --------------------------------------------------------------------------- planets distance scale sizes */
/* sun --> earth */
.scale-d #sun {
  font-size: 41.73048em; }
/* rahu */
.scale-d #mercury .planet {
  font-size: 0.38226em; }
/* venus --> moon */
.scale-d #venus .planet {
  font-size: 0.38226em; }
/* earth -->sun*/
.scale-d #earth .planet {
  font-size: 0.38226em; }
/* mercury */
.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; }



/* --------------------------------------------------------------------------- planet size scale sizes */
/* sun --> earth */
.scale-s #sun {
  font-size: 417.3048em; }
/* rahu */
.scale-s #mercury .planet {
  font-size: 3.8226em; }
/* venus --> moon */
.scale-s #venus .planet {
  font-size: 3.8226em; }
/* earth -->sun*/
.scale-s #earth .planet {
  font-size: 3.8226em; }
/* mercury */
.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; }



/* --------------------------------------------------------------------------- stretched orbits */
/* rahu */
.scale-stretched #mercury.orbit {
  width: 56em;
  height: 56em;
  margin-top: -26em;
  margin-left: -26em; }

/* moon */
.scale-stretched #venus.orbit {
  width: 56em;
  height: 56em;
  margin-top: -20em;
  margin-left: -20em; }

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

/* mercury */
.scale-stretched #earth .orbit {
  width: 8em;
  height: 8em;
  margin-top: -4em;
  margin-left: -5em; }

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

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

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



/* --------------------------------------------------------------------------- scaled orbits */
/* --------------------------------------------------------------------------- distance scale orbits */
/* rahu */
.scale-d #mercury.orbit {
  width: 44.74176em;
  height: 44.74176em;
  margin-top: -22.37088em;
  margin-left: -22.37088em; }

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

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

/* mercury */
.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; }



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

/* --------------------------------------------------------------------------- size scale orbits */
/* rahu */
.scale-s #mercury.orbit {
  width: 441.3048em;
  height: 441.3048em;
  margin-top: -220.6524em;
  margin-left: -220.6524em; }

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

/* sun */
.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; }



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

/* --------------------------------------------------------------------------- text infos data */
/* --------------------------------------------------------------------------- speed */
.set-speed dl.infos dd span:after {
  content: 'Orbit Velocity'; }

.set-speed #sun dl.infos dd:after {
  content: '107,000 km/h'; }

.set-speed #mercury dl.infos dd:after {
  content: '3,683 km/h'; }

.set-speed #venus dl.infos dd:after {
  content: '3,683 km/h'; }

.set-speed #earth dl.infos dd:after {
  content: '220 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'; }



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

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

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

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

.set-size #earth dl.infos dd:after {
  content: '4,370,005 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'; }



/* --------------------------------------------------------------------------- distance */
.set-distance dl.infos dd span:after {
  content: 'From Earth'; }

.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'; }
/*Venus --> Moon*/
.set-distance #venus dl.infos dd:after {
  content: '384,400 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'; }



/* --------------------------------------------------------------------------- vedas */
.set-vedas dl.infos dd span:after {
  content: 'Cycle in Mantra-Days'; }

.set-vedas #sun dl.infos dd span:after {
  content: 'Draconic Year'; }

.set-vedas #sun dl.infos dd:after {
  content: '1'; }
/* moon --> rahu */
.set-vedas #mercury dl.infos dd:after {
  content: '6798'; }
/* venus --> moon */
.set-vedas #venus dl.infos dd:after {
  content: '27,21222'; }
/* earth --> sun */
.set-vedas #earth dl.infos dd:after {
  content: '346.62'; }

.set-vedas #mars dl.infos dd:after {
  content: '687'; }

.set-vedas #jupiter dl.infos dd:after {
  content: '4332'; }

.set-vedas #saturn dl.infos dd:after {
  content: '10759'; }


  
/* --------------------------------------------------------------------------- planets starting position and lighting effect */
/* --------------------------------------------------------------------------- mercury ; pos: Top */
/* mercury --> rahu */
#mercury .pos {
  left: 20%;
  top: 95%; }

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------- venus --> moon ; pos: Left */
#venus .pos {
  left: 20%;
  top: 90%; }

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------- earth --> sun ; pos: Right */
#earth .pos {
  left: 17%;
  top: 90%; }

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------- moon */
#earth .orbit .pos {
  left: 35%;
  top: 90%; }

/* --------------------------------------------------------------------------- mars ; pos: Bottom */
#mars .pos {
  left: 45%;
  top: 0%; }

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------- jupiter ; pos: Right */
#jupiter .pos {
  left: 100%;
  top: 60%; }

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

@keyframes shadow-jupiter {
  0% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  25% {
    box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  50% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  75% {
    box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  100% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }

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

/* --------------------------------------------------------------------------- saturn ; pos: Left */
#saturn .pos {
  left: 95%;
  top: 80%; }

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

@keyframes shadow-saturn {
  0% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  25% {
    box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

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

  100% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } 
	}

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

/* --------------------------------------------------------------------------- navigation styles */
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); }

#navbar, #controls, #data {
  background: rgba(0, 0, 0, 0.4); }

#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: #FFF; }

#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-close #controls {
  right: -100%; }

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

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

#controls label {
  opacity: .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 #FFF;
  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: #FFF;
  z-index: 99; }

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

#controls input[type="checkbox"]:after {
  content: '';
  display: block;
  top: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  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; }

/* --------------------------------------------------------------------------- transitions */
.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: .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: .8s;
  transition-timing-function: ease-in-out; }

h1 {
  transition-delay: .35s; }

#data {
  transition-delay: .7s; }

#controls {
  transition-delay: 1s; }

/* --------------------------------------------------------------------------- images */
body {
    background: url(../img/zodiac.jpeg) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }

#universe {
    background: url(../img/bg-glow.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }

#sun 
{
    background: url(../img/p-earth2.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }


#mercury .planet 
{
    background: url(../img/p-mercury.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }


#venus .planet
{
    background: url(../img/p-venus2.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   } 


#earth .planet 
{
    background: url(../img/sun.jpg) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }


#earth .moon {
  background-color: green; }

#mars .planet 
{
    background: url(../img/p-mars.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }


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

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



/* --------------------------------------------------------------------------- responsive styles */
@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, #controls, #data {
    background: transparent; }

  #navbar a {
    display: none; }

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

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

  #data {
    position: fixed;
    top: inherit;
    bottom: 0;
    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; }

  .controls-open #controls, .controls-close #controls {
    right: 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%; } }