.planet_basic{
	
	position:absolute;
	cursor:pointer;
		
	box-shadow:rgba(19, 142, 253, 0.8) 0px 0px 50px, inset 0px 0px 80px rgba(0,0,0,1);
	-moz-box-shadow:rgba(19, 142, 253, 0.8) 0px 0px 50px, inset 0px 0px 80px rgba(0,0,0,1);
	-webkit-box-shadow:rgba(19, 142, 253, 0.8) 0px 0px 50px, inset 0px 0px 30px rgba(0,0,0,1);
	      
     background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
		
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); 	/* IE 9 */
	-moz-transform:rotate(30deg); 	/* Firefox */
	-webkit-transform:rotate(30deg); /* Safari บอ Chrome */
	-o-transform:rotate(30deg); 

	border-radius: 500px;
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.planet_rotate_10{
	animation: rotate 10s infinite linear;
    -webkit-animation: rotate 10s infinite linear;
	-moz-animation: rotate 10s infinite linear;
	/* animation-direction:alternate; */
}

.planet_rotate_20{
	animation: rotate 20s infinite linear;
    -webkit-animation: rotate 20s infinite linear;
	-moz-animation: rotate 20s infinite linear;
	/* animation-direction:alternate; */
}

.planet_rotate_30{
	animation: rotate 30s infinite linear;
    -webkit-animation: rotate 30s infinite linear;
	-moz-animation: rotate 30s infinite linear;
	/* animation-direction:alternate; */
}

.planet_float{
  -webkit-animation: float 3s infinite ease-in-out;
  -moz-animation: float 3s infinite ease-in-out;
  animation: float 3s infinite ease-in-out;
}

@keyframes rotate {
  from { background-position:0; } 
  to { background-position:100%; }
}
@-webkit-keyframes rotate {
  from { background-position:0; } 
  to { background-position:100%; }
}
@-moz-keyframes rotate {
  from { background-position:0; } 
  to { background-position:100%; }
}