/* Small circular-motion */
#sm-circular-motion{		
	overflow: hidden;
	position: relative;
	/* margin: auto; */
	margin-top: 0px;
	padding: 25px;
	margin-bottom: 15px;
	display: inline-block;
	width: 320px;
	height: 320px;
	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 */
#sm-html{
	width: 25px;
	height: 25px;
	position: absolute;
	margin-top: 120px;
	margin-left: 120px;
	border-radius: 50%;
	/* background: linear-gradient(#7d7d7d, #cccccc); */
/*	background: -moz-linear-gradient(#7d7d7d, #cccccc);*/
	/* background: -webkit-linear-gradient(#7d7d7d, #cccccc); */
	animation: sm-html_eclipse 15s linear infinite;
	-webkit-animation: sm-html_eclipse 15s linear infinite;
}

#sm-css{
	width: 25px;
	height: 25px;
	position: absolute;
	margin-top: 120px;
	margin-left: 120px;
	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: sm-css_eclipse 15s linear infinite;
	-webkit-animation: sm-css_eclipse 15s linear infinite;
}

#sm-js{
	width: 20px;
	height: 20px;
	position: absolute;
	margin-top: 120px;
	margin-left: 120px;

	border-radius: 50%;

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

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

#sm-java{
	width: 45px;
	height: auto;
	position: absolute;
	margin-top: 115px;
	margin-left: 115px;

	border-radius: 50%;

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

#sm-bootstrap{
	width: 35px;
	height: auto;
	position: absolute;
	margin-top: 115px;
	margin-left: 115px;

	border-radius: 50%;

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

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

	border-radius: 50%;

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

	border-radius: 50%;

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

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

	border-radius: 50%;

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

/* Image Size*/
.img-size {
	width: 60px;
	height: auto;
}
.img-size-2 {
	width: 100px;
	height: auto;
}
/* ORBITS */

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

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

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

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

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

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


/* ANIMATIONS */

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

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

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

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

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

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

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

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

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

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

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