#solar-system{
	position:relative;
	margin:30px auto;
	width:700px;
	min-height:270px;
	/*overflow:hidden;
	padding:10px;*/
	top: -70px;
}

#neptune-circle{
	position:absolute;
	width:620px;
	height:620px;
	background-color:rgba(0,0,0,0);
	border: 1px solid rgba(255,255,255,0.20);
	border-radius:100%;
	animation: rotation 70s linear infinite;
	left:35px;
	top:35px;
}

#neptune-circle:after{
	position:absolute;
	width:39px;
	height:39px;
	background: url("../images/icons/solar/neptune.png")no-repeat;
	/*border-radius:100%;
	background-color:#00F;
	border-color:#00009B;
	border-style:solid;
	border-width: 4px 1px 1px 1px;*/
	content:'';
	left:210px;
	top:-5px;
	background-size: 80%;
}

#uranus-circle{
	position:absolute;
	width:555px;
	height:555px;
	background-color:rgba(0,0,0,0);
	border: 2px solid rgba(255,255,255,0.20);
	border-radius:100%;
	left:70px;
	top:70px;
	animation: rotation 60s linear infinite;
}

#uranus-circle:after{
	position:absolute;
	width:51px;
	height:51px;
	background: url("../images/icons/solar/uranus.png")no-repeat;
	/*border-radius:100%;
	border-color:#005353;
	border-style:solid;
	border-width: 4px 1px 1px 1px;
	background-color:#00B9B9;*/
	content:'';
	left:200px;
	top:-10px;
	background-size: 70%;
}

#saturn-circle {
	position: absolute;
	width: 475px;
	height: 475px;
	background-color: rgba(0,0,0,0);
	border: 2px solid rgba(255,255,255,0.20);
	border-radius: 100%;
	left:107px;
	top: 107px;
	animation: rotation 50s linear infinite;
}

/*#saturn-circle:before{
	position:absolute;
	width:13px;
	height:9px;
	border-radius:100%;
	background-color:#C0C0C0;
	border-color:#838383;
	border-style:solid;
	border-width: 5px 1px 1px 1px;
	content:'';
	left:230px;
	top:-6px;
}*/

#saturn-circle:after{
	
	position:absolute;
	width:133px;
	height:99px;
	background: url("../images/icons/solar/saturn.png")no-repeat;
	/*border-radius:100%;
	background-color:rgba(0,0,0,0);
	border-color:#838383;
	border-style:solid;
	border-width: 1px 1px 3px 1px;*/
	content:'';
	left:30px;
	top:-5px;
	-webkit-transform: rotate(115deg);
	transform: rotate(115deg);
	background-size: 60%;
}

#jupiter-circle {
	position: absolute;
	width: 380px;
	height: 380px;
	background-color: rgba(0,0,0,0);
	border: 1px solid rgba(255,255,255,0.20);
	border-radius: 100%;
	left: 155px;
	top: 155px;
	animation: rotation 40s linear infinite;
}
#jupiter-circle::after {
	position: absolute;
	width: 82px;
	height: 82px;
	background: url("../images/icons/solar/jupitor.png")no-repeat;
	/* border-radius: 100%; */
	/* background-color: #F60; */
	/* border-color: #630; */
	/* border-style: solid; */
	/* border-width: 6px 1px 1px 1px; */
	content: '';
	left: 115px;
	top: -15px;
	background-size: 65%;
}

#mars-circle {
	position: absolute;
	width: 290px;
	height: 290px;
	background-color: rgba(0,0,0,0);
	border: 1px solid rgba(255,255,255,0.20);
	border-radius: 100%;
	left: 200px;
	top: 200px;
	animation: rotation 30s linear infinite;
}

#mars-circle::after {
	position: absolute;
	width: 66px;
	height: 66px;
	background: url("../images/icons/solar/mars.png")no-repeat;
	/* border-radius: 100%; */
	/* background-color: #B00000; */
	/* border-color: #600; */
	/* border-style: solid; */
	/* border-width: 3px 1px 1px 1px; */
	content: '';
	left: 70px;
	top: -5px;
	background-size: 65%;
}

#earth-circle {
	position: absolute;
	width: 210px;
	height: 210px;
	background-color: rgba(0,0,0,0);
	border: 1px solid rgba(255,255,255,0.20);
	border-radius: 100%;
	left: 240px;
	top: 240px;
	animation: rotation 20s linear infinite;
}

/*#earth-circle:before{
	position:absolute;
	width:4px;
	height:4px;
	border-radius:100%;
	background-color:#CCC;
	content:'';
	left:66px;
	top:-2px;
	transform-origin:15px;
	animation: rotation 2s linear infinite;
}*/

#earth-circle::after {
	position: absolute;
	width: 55px;
	height: 55px;
	background: url("../images/icons/solar/earth.png")no-repeat;
	/* border-radius: 100%; */
	/* background-color: #0058B0; */
	/* border-color: #00366C; */
	/* border-style: solid; */
	/* border-width: 3px 1px 1px 1px; */
	content: '';
	left: 30px;
	top: -6px;
	background-size: 80%;
}


#venus-circle {
	position: absolute;
	width: 140px;
	height: 140px;
	background-color: rgba(0,0,0,0);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 100%;
	left: 276px;
	top: 276px;
	animation: rotation 10s linear infinite;
}

#venus-circle::after {
	position: absolute;
	width: 46px;
	height: 45px;
	background: url("../images/icons/solar/venus.png")no-repeat;
	/* border-radius: 100%; */
	/* background-color: #FFD3A8; */
	/* border-color: #FFA579; */
	/* border-style: solid; */
	/* border-width: 4px 1px 1px 1px; */
	content: '';
	left: 15px;
	top: -5px;
	background-size: 80%;
}

#mercury-circle {
	position: absolute;
	width: 75px;
	height: 75px;
	background-color: rgba(0,0,0,0);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 100%;
	left: 312px;
	top: 312px;
	animation: rotation 5s linear infinite;
}

#mercury-circle::after {
	position: absolute;
	width: 36px;
	height: 36px;
	/* border-radius: 100%; */
	background: url("../images/icons/solar/mercury.png")no-repeat;
	/* background-color: #713800; */
	border-style: none;
	/* border-width: 2px 1px 1px 1px; */
	content: '';
	left: 55px;
	top: 0px;
	background-size: 80%;
}

#sun{
	position:absolute;
	width:40px;
	height:40px;
	background-color:#F90;
	border-radius:100%;
	left:330px;
	top:330px;
	background:radial-gradient(circle, #F60, #FC0);
	box-shadow:0px 0px 50px #F90;
	animation: sun-shadow 2s ease infinite;
}

@keyframes rotation {
 from {transform: rotate(0deg);}
 to {transform: rotate(-360deg);}
}

@keyframes sun-shadow {
 0% {box-shadow:0px 0px 20px #F90;}
 50% {box-shadow:0px 0px 50px #F90;}
 100% {box-shadow:0px 0px 20px #F90;}
}

.right-panel-img img {
    width: 80%;
}
.loginPage #solar-system {
    top: 0;   
}
.loginPage .left-panel {
    padding-top: 150px;
}