#circular-motion{		
	overflow: hidden;
	position: relative;
	/* margin: auto; */
	margin-top: 0px;
	padding: 30px 0 0 30px;
	margin-bottom: 15px;
	display: inline-block;
	width: 600px;
	height: 550px;
	z-index: 1;
}
/* Hover Effects */
#html:hover, #css:hover, #js:hover,
#php:hover, #java:hover, #bootstrap:hover,
#jquery:hover, #wordpress:hover, #laravel:hover,
#photoshop:hover, #woo:hover {
	animation-play-state: paused;
}
/* LANGUAGE */
#html{
	width: 40px;
	height: 40px;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;
	border-radius: 50%;
	/* background: linear-gradient(#7d7d7d, #cccccc); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#7d7d7d, #cccccc); */
	animation: html_eclipse 15s linear infinite;
	-webkit-animation: html_eclipse 15s linear infinite;
}

#css{
	width: 40px;
	height: 40px;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;
	border-radius: 50%;
	/* background-image: url("/images/logo/css.png"); */
	/* background: linear-gradient(#436247, #73AD7A); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#436247, #73AD7A); */

	animation: css_eclipse 15s linear infinite;
	-webkit-animation: css_eclipse 15s linear infinite;
}

#js{
	width: 40px;
	height: 40px;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;

	border-radius: 50%;

	/* background: linear-gradient(#232B5B, #5166EA); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#232B5B, #5166EA); */
	
	animation: js_eclipse 15s linear infinite;
	-webkit-animation: js_eclipse 15s linear infinite;
}
#php{
	width: 50px;
	height: 50px;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;
	border-radius: 50%;

	/* background: linear-gradient(#a99fa6, #D75412); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#b9b9b9, #D75412); */
	
	animation: php_eclipse 20s linear infinite;
	-webkit-animation: php_eclipse 20s linear infinite;
}

#java{
	width: 80px;
	height: auto;
	position: absolute;
	margin-top: 215px;
	margin-left: 215px;

	border-radius: 50%;

	/* background: linear-gradient(#2c000f, #140e55); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#070f51, #000658); */
	
	animation: java_eclipse 20s linear infinite;
	-webkit-animation: java_eclipse 20s linear infinite;
}

#bootstrap{
	width: 55px;
	height: 55px;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;

	border-radius: 50%;

	/* background: linear-gradient(#590777, #DFB009); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#38035c, #bfbcb0); */
	
	animation: bootstrap_eclipse 20s linear infinite;
	-webkit-animation: bootstrap_eclipse 20s linear infinite;
}
#jquery{
	width: 100px;
	height: auto;
	position: absolute;
	margin-top: 220px;
	margin-left: 220px;

	border-radius: 50%;

	/* background: linear-gradient(#14130f, #090579); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#775F07, #DFB009); */
	
	animation: jquery_eclipse 25s linear infinite;
	-webkit-animation: jquery_eclipse 25s linear infinite;
}
#wordpress{
	width: 55px;
	height: 55px;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;

	border-radius: 50%;

	/* background: linear-gradient(#775F07, #DFB009); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#775F07, #DFB009); */
	
	animation: wordpress_eclipse 25s linear infinite;
	-webkit-animation: wordpress_eclipse 25s linear infinite;
}
#laravel{
	width: 90px;
	height: auto;
	position: absolute;
	margin-top: 215px;
	margin-left: 215px;

	border-radius: 50%;

	/* background: linear-gradient(#775F07, #DFB009); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#775F07, #DFB009); */
	
	animation: laravel_eclipse 25s linear infinite;
	-webkit-animation: laravel_eclipse 25s linear infinite;
}
#woo{
	width: 80px;
	height: auto;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;
	border-radius: 50%;

	/* background: linear-gradient(#775F07, #DFB009); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#775F07, #DFB009); */
	
	animation: woo_eclipse 25s linear infinite;
	-webkit-animation: woo_eclipse 25s linear infinite;
}
#photoshop{
	width: 60px;
	height: 60px;
	position: absolute;
	margin-top: 225px;
	margin-left: 225px;

	border-radius: 50%;

	/* background: linear-gradient(#775F07, #DFB009); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#775F07, #DFB009); */
	
	animation: photoshop_eclipse 25s linear infinite;
	-webkit-animation: photoshop_eclipse 25s linear infinite;
}


/* ORBITS */

#orbit-1 {
	position: absolute;
	margin-top: 160px;
	margin-left: 160px;

	border: 1px solid #FFF;
	width: 180px;
	height: 180px;
	border-radius: 50%;
}

#orbit-2{
	position: absolute;
	margin-top: 90px;
	margin-left: 90px;

	border: 1px solid #FFF;
	width: 320px;
	height: 320px;
	border-radius: 50%;
}

#orbit-3{
	position: absolute;
	margin-top: 20px;
	margin-left: 20px;

	border: 1px solid #FFF;
	width: 460px;
	height: 460px;
	border-radius: 50%;
}


/* ANIMATIONS */

@keyframes html_eclipse {
	0% {transform: rotate(0deg) translateY(-90px) rotate(0deg);}
	100% {transform: rotate(360deg) translateY(-90px) rotate(-360deg);}	
}

@-webkit-keyframes html_eclipse{
	from  {transform: rotate(0deg) translateY(-90px) rotate(0deg);}
	to {transform: rotate(360deg) translateY(-90px) rotate(-360deg);}
}

@keyframes css_eclipse {
	from  {transform: rotate(-120deg) translateY(-90px) rotate(120deg);}
	to {transform: rotate(240deg) translateY(-90px) rotate(-240deg);}
}

@-webkit-keyframes css_eclipse{
	from  {transform: rotate(-120deg) translateY(-90px) rotate(120deg);}
	to {transform: rotate(240deg) translateY(-90px) rotate(-240deg);}
}

@keyframes js_eclipse {
	from  {transform: rotate(-230deg) translateY(-90px) rotate(230deg);}
	to {transform: rotate(130deg) translateY(-90px) rotate(-130deg);}
}

@-webkit-keyframes js_eclipse{
	from  {transform: rotate(-230deg) translateY(-90px) rotate(230deg);}
	to {transform: rotate(130deg) translateY(-90px) rotate(-130deg);}
}
/* 2nd Circle */
@keyframes php_eclipse {
	from  {transform: rotate(-280deg) translateY(-160px) rotate(280deg);}
	to {transform: rotate(80deg) translateY(-160px) rotate(-80deg);}
}

@-webkit-keyframes php_eclipse{
	from  {transform: rotate(190deg) translateY(-160px) rotate(-190deg);}
	to {transform: rotate(-170deg) translateY(-160px) rotate(170deg);}
}

@keyframes java_eclipse {
	from  {transform: rotate(-180deg) translateY(-160px) rotate(180deg);}
	to {transform: rotate(180deg) translateY(-160px) rotate(-180deg);}
}

@-webkit-keyframes java_eclipse{
	from  {transform: rotate(-180deg) translateY(-160px) rotate(180deg);}
	to {transform: rotate(180deg) translateY(-160px) rotate(-180deg);}
}

@keyframes bootstrap_eclipse {
	from  {transform: rotate(-80deg) translateY(-160px) rotate(80deg);}
	to {transform: rotate(280deg) translateY(-160px) rotate(-280deg);}
}

@-webkit-keyframes bootstrap_eclipse{
	from  {transform: rotate(-275deg) translateY(-160px) rotate(275deg);}
	to {transform: rotate(85deg) translateY(-160px) rotate(-85deg);}
}
/* 3rd Circle */
@keyframes jquery_eclipse {
	from  {transform: rotate(-130deg) translateY(-230px) rotate(130deg);}
	to {transform: rotate(230deg) translateY(-230px) rotate(-230deg);}
}
@-webkit-keyframes jquery_eclipse {
	from  {transform: rotate(-130deg) translateY(-230px) rotate(130deg);}
	to {transform: rotate(230deg) translateY(-230px) rotate(-230deg);}
}
@keyframes wordpress_eclipse {
	from  {transform: rotate(-210deg) translateY(-230px) rotate(210deg);}
	to {transform: rotate(150deg) translateY(-230px) rotate(-150deg);}
}
@-webkit-keyframes wordpress_eclipse {
	from  {transform: rotate(-210deg) translateY(-230px) rotate(210deg);}
	to {transform: rotate(150deg) translateY(-230px) rotate(-150deg);}
}
@keyframes laravel_eclipse {
	from  {transform: rotate(0deg) translateY(-230px) rotate(0deg);}
	to {transform: rotate(360deg) translateY(-230px) rotate(-360deg);}
}
@-webkit-keyframes laravel_eclipse {
	from  {transform: rotate(0deg) translateY(-230px) rotate(0deg);}
	to {transform: rotate(360deg) translateY(-230px) rotate(-360deg);}
}
@keyframes woo_eclipse {
	from  {transform: rotate(-270deg) translateY(-230px) rotate(270deg);}
	to {transform: rotate(90deg) translateY(-230px) rotate(-90deg);}
}
@-webkit-keyframes woo_eclipse {
	from  {transform: rotate(-270deg) translateY(-230px) rotate(270deg);}
	to {transform: rotate(90deg) translateY(-230px) rotate(-90deg);}
}
@keyframes photoshop_eclipse {
	from  {transform: rotate(-40deg) translateY(-230px) rotate(40deg);}
	to {transform: rotate(320deg) translateY(-230px) rotate(-320deg);}
}
@-webkit-keyframes photoshop_eclipse {
	from  {transform: rotate(-40deg) translateY(-230px) rotate(40deg);}
	to {transform: rotate(320deg) translateY(-230px) rotate(-320deg);}
}