* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin: 0; padding: 0px;}
.logo-new #universe { z-index: 1; position: absolute; overflow: hidden; width: 100%; height: 100%; }
.logo-new #galaxy { position: relative; width: 100%; height: 100%; }

.logo-new .solar-system { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; -ms-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }

.logo-new .solar-system.left-box {transform: rotate(0deg) rotateX(0deg) rotateY(35deg);}
.logo-new .solar-system.right-box {transform: rotate(0deg) rotateX(-151deg) rotateY(215deg);}


.logo-new .border-rud { position: absolute; top: 50%; left: 50%; border: 0px solid #fff; border-radius: 50%; transform-style: preserve-3d; -ms-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; width: 40em; height: 40em; margin-top: -20em; margin-left: -20em; transform: rotateX(75deg) rotateY(0deg);z-index:2; }

.logo-new .orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform-style: preserve-3d; -ms-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation-name: orbit; animation-iteration-count: infinite; animation-timing-function: linear; }
.logo-new .pos, .logo-new .pos2 { 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; }
.logo-new .pos2 { right: 0px; }
.logo-new .sun, .logo-new .planet { 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; -ms-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.logo-new .sun { background:url(../img/logo-animation.png) 50% 50% no-repeat; width:100%; height:100%; top:0px; left:0px; margin:0px; background-size: 88% auto;}
.logo-new .planet {background:url(../img/logo-animation-yellow-sphere.png) left top no-repeat; background-size:100% auto; }


.logo-new .border-rud .planet.green {background:url(../img/logo-animation-green-sphere.png) left top no-repeat; background-size:100% auto; }

/* planets index */
.logo-new .earth { z-index: 8; position: relative; }
.logo-new .sun { z-index: 1;  transform: rotateX(-90deg) rotateY(0deg) rotate(0deg);  }


/* animations */
@keyframes orbit {
	0% {transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);}
	100% {transform: rotateZ(-360deg); -ms-transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg);}
}

@-webkit-keyframes orbit {
	0% {transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);}
	100% {transform: rotateZ(-360deg); -ms-transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg);}
}

@-moz-keyframes orbit {
	0% {transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);}
	100% {transform: rotateZ(-360deg); -ms-transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg);}
}



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

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

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

/* 3D view */
.logo-new .view-3D.zoom-large .orbit { transform-style: preserve-3d; -ms-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.logo-new .view-3D #solar-system { transform: rotateX(0deg) rotateY(0deg); -ms-transform: rotateX(0deg) rotateY(0deg); -webkit-transform: rotateX(0deg) rotateY(0deg); }
.logo-new .view-3D .sun { transform:rotateX(-90deg) rotateY(0deg) rotate(0deg); -ms-transform:rotateX(-90deg) rotateY(0deg) rotate(0deg); -webkit-transform:rotateX(-90deg) rotateY(0deg) rotate(0deg); }
/* sideral years */
.logo-new .earth .pos, .logo-new .earth .pos2, .logo-new .earth .planet, .logo-new .earth.orbit { animation-duration: 2.5s; }
.logo-new .earth .orbit .pos, .logo-new .earth .orbit .pos2 { animation-duration: 0.1s; }
/* stretched sizes */
.logo-new .scale-stretched .sun { font-size: 20em; }
.logo-new .scale-stretched .earth .planet { font-size: 3.92em; }
/* stretched orbits */
.logo-new .scale-stretched .earth.orbit { width: 40em; height: 40em; margin-top: -20em; margin-left: -20em; }