/* mmmmmmmmmmmmmmmmmm  PLANET EARTH mmmmmmmmmmmmmmmm */

.ball {
	display: inline-block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 50%;
	position: absolute;
	z-index:-1;

	transform:rotate(9deg);
		-ms-transform:rotate(9deg); 
			-moz-transform:rotate(9deg);
				-webkit-transform:rotate(9deg); 

	-webkit-transform-style: preserve-3d;
	
	background: url(../images/worldmapgreen.jpg) repeat-x;                
	background-size: auto 100%;
	
	-webkit-animation: move-map 30s infinite linear;
		-moz-animation: move-map 30s infinite linear;
			-ms-animation: move-map 30s infinite linear;
				animation: move-map 30s infinite linear;
}

@-moz-keyframes move-map {
  0% 		{background-position: -849px 0; }
  100% 	{    background-position: 0 0; } 
  }

@-webkit-keyframes move-map {
  0% 		{background-position: -849px 0; }
  100% 	{    background-position: 0 0; } 
  }

@-ms-keyframes move-map {
  0% 		{background-position: -849px 0; }
  100% 	{    background-position: 0 0; } 
  }

@keyframes move-map {
  0% 		{background-position: -849px 0; }
  100% 	{    background-position: 0 0; } 
  }

.ball:before {
	content: "";
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 40px 10px 70px 20px rgba(0,0,0,0.9) inset;
	z-index: 2;

	-webkit-gradient(radial, 50% 80%, 0, 50% 80%, 100, color-stop(0%, #81e8f6), 
	color-stop(10%, #76deef), color-stop(66%, #055194), color-stop(100%, #062745));
	-webkit-radial-gradient(50% 80%, circle cover, #81e8f6, 
	#76deef 10%, #055194 66%, #062745 100%);
 }  	

.ball:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-filter: blur(0);
	opacity: 0.2;
	z-index:3;

	background: -webkit-gradient(radial, 80% 65%, 0, 80% 65%, 100, 
	color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(66%, #055194), 
	color-stop(100%, #062745));
 
	background: -webkit-radial-gradient(80% 65%, circle cover, #81e8f6, 
	#76deef 10%, #055194 66%, #062745 100%);
 
	background: -moz-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, 
	#055194 66%, #062745 100%);
	background: -o-radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, 
	#055194 66%, #062745 100%);
	background: radial-gradient(50% 80%, circle cover, #81e8f6, #76deef 10%, 
	#055194 66%, #062745 100%);
}


  /* wwwwwwwwwwwwwwww  STAGE = Planet Container  WWWWWWWWWWWW  */

.stage {
	position:absolute;
	/*top:375px;*/
	top:50vh;
	margin-top:-150px;
	left: 50%;	
	margin-left: -150px;	
	width: 300px;
	height: 300px;
	display:block;

	-webkit-perspective: 1200px;
		-moz-perspective: 1200px;
			-ms-perspective: 1200px;
				perspective: 1200px;
				
	-webkit-perspective-origin: 50% 50%;
		-moz-perspective-origin: 50% 50%;
			-ms-perspective-origin: 50% 50%;
				perspective-origin: 50% 50%;
}


   /* mmmmmmmmmmmmmmmmmm  FADING PLANET EARTH IN  mmmmmmmmmmmm  */


#fadein{

	opacity:0;
	z-index:400;

	-webkit-animation: fadein 1s ease 40s 1 forwards;
		-moz-animation: fadein 1s ease 40s 1 forwards;
			-msanimation: fadein 1s ease 40s 1 forwards;
				animation: fadein 1s ease 40s 1 forwards;
}

@-webkit-keyframes fadein {
0%   		{opacity:0;}
100%   	{opacity:1;}
}
@-moz-keyframes fadein {
0%   		{opacity:0;}
100%   	{opacity:1;}
}
@-ms-keyframes fadein {
0%   		{opacity:0;}
100%   	{opacity:1;}
}
@keyframes fadein {
0%   		{opacity:0;}
100%   	{opacity:1;}
}