/*
Copyright (c) 2012 Julian Garnier
Licensed under the MIT license
*/
@import url("css/planets.css") all;
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; }

* {
	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: 2rem;
	height: 2rem;
	margin-top: -1rem;
	margin-left: -1rem;
	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: 1rem;
	height: 1rem;
	margin-top: -0.5rem;
	margin-left: -0.5rem;
	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;
	will-change: transform;
	-webkit-will-change: transform;
}

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

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

#saturn .ring:after {
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.2rem;
	height: 2.2rem;
	margin-top: -1.1rem;
	margin-left: -1.1rem;
	border: 0.07rem 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; }

#uranus {
	z-index: 3; }

#neptune {
	z-index: 2; }

#eris {
	z-index: 1; }

#sun {
	z-index: 0; }

/* --------------------------------------------------------------------------- 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 */
#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; }
	
#eris .pos,
#eris .planet,
#eris .orbit {
	animation-duration: 6696.1273s; }

/* --------------------------------------------------------------------------- planets sizes */
/* --------------------------------------------------------------------------- stretched sizes */
.scale-stretched #sun {
	font-size: 24rem; }

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

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

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

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

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

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

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

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

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

.scale-stretched #eris .planet {
	font-size: 15rem; }

/* --------------------------------------------------------------------------- scaled sizes */
/*
(planets radius * 2) * ratio
*/
/*$distanceScaleRatio:   0.000075rem;*/
/* --------------------------------------------------------------------------- planets distance scale sizes */
.scale-d #sun {
	font-size: 41.73048rem; }

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

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

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

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

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

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

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

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

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

.scale-d #eris .planet {
	font-size: 36.2rem; }

/* --------------------------------------------------------------------------- planet size scale sizes */
.scale-s #sun {
	font-size: 417.3048rem; }

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

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

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

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

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

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

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

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

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

.scale-s #eris .planet {
	font-size: 7rem; }

/* --------------------------------------------------------------------------- stretched orbits */
.scale-stretched #mercury.orbit {
	width: 32rem;
	height: 32rem;
	margin-top: -16rem;
	margin-left: -16rem; }

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

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

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

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

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

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

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

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

.scale-stretched #eris.orbit {
	width: 420rem;
	height: 420rem;
	margin-top: -260rem;
	margin-left: -260rem; }

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

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

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

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

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

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

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

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

.scale-d #eris.orbit {
	width: 420rem;
	height: 420rem;
	margin-top: -260rem;
	margin-left: -260rem; }

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

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

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

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

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

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

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

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

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

.scale-s #eris.orbit {
	width: 900.3048rem;
	height: 800.3048rem;
	margin-top: -400.6524rem;
	margin-left: -440.6524rem; }

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

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

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

.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-speed #eris dl.infos dd:after {
	content: '3,434 km/h'; }

/* --------------------------------------------------------------------------- size */
.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-size #eris dl.infos dd:after {
	content: '1,163 km'; }

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

.set-distance #eris dl.infos dd:after {
	content: '10,166,000,000 km'; }

/* --------------------------------------------------------------------------- planets starting position and lighting effect */
/* --------------------------------------------------------------------------- mercury ; pos: Top */
#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);
		/* 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 ; pos: Left */
#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);
		/* 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 ; pos: Right */
#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);
		/* 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: 100%;
	top: 50%; }

/* --------------------------------------------------------------------------- mars ; pos: Bottom */
#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);
		/* 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: 50%; }

#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: 0%;
	top: 50%; }

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

/* --------------------------------------------------------------------------- saturn ring */

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

@keyframes 
shadow-saturn-ring{ 0%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45); opacity: .4; }
25%    { box-shadow: inset -5px   -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
25.01% { box-shadow: inset 5px    -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
50%    { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
75%    { box-shadow: inset 0      30px  50px  rgba(20, 40, 50, 0);  opacity: .3; }
100%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
}/*

.scaled.view-2D #saturn .ring,
.scaled.view-3D #saturn .ring { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.6); }

*/
/* --------------------------------------------------------------------------- uranus ; pos: Left */
#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);
		/* LEFT */ }

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

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

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

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

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

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

/* --------------------------------------------------------------------------- neptune ; pos: Top */
#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);
		/* TOP */ }

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

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

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

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

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

.scaled.view-2D #neptune .planet,
.scaled.view-3D #neptune .planet {
	box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
	/* RIGHT */ }
/* --------------------------------------------------------------------------- eris ; pos: Left */
#eris .pos {
	left: 50%;
	top: 100%; }

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------- DEBUG 
.pos, 
.planet, 
.orbit,
.ring { animation-duration: 20s!important; }

/* */
/* --------------------------------------------------------------------------- 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,
.eris #eris .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,
.eris #eris.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, #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;
	-webkit-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; }
.infos {
	z-index: 9999 !important;
}
#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; }


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