body{
	/*height:100vh;*/
	touch-action: none;
	overflow:hidden;	
}
.animatedWood{
position:absolute;
bottom:0;
left:0;
height:200vh!important;
width:100%;
z-index:-99999;
background-image:url("img/seamless_back_1.png");
	background-repeat: repeat;
	background-size:auto 100vh;
	animation: animatedBackground 10s linear infinite;
	}

th,thead { position: sticky; top: 0; }

@keyframes animatedBackground {
	from {transform: translateY(0); }
	to { transform: translateY(50%); }
	
	
}.loader {width:100%; height:100%;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; background-color:rgba(200,200,200,1); z-index:999999; position:fixed; top:0;left:0;}
img {user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-webkit-user-drag: none;
 user-drag: none;}

.space {width:100%; height:100vh;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; }
.mb {position:absolute; bottom:0; right:0; height:20px;}

.modal {
overflow: auto !important;
}
@keyframes shake{
	0%,100%{transform:translate(0,0)}
	10%,50%,90%{transform:translate(-1px,1px)}
	40%,80%{transform:translate(2px,-2px)}
	30%,60% {transform:translate(1px,1px)}
	70%,20% {transform:translate(-2px,-2px)}
	}
@keyframes basicRotate1 {
   from {
    top: -75%;
	transform: rotate(0deg);
	}
  to {
    top: 150%;	
	transform: rotate(180deg);
	}
  }
@keyframes basicRotate2 {
   from {
    top: -75%;
	transform: rotate(0deg);
	}
  to {
    top: 150%;	
	transform: rotate(270deg);
	}
  }
@keyframes basicRotate3 {
   from {
    top: -75%;
	transform: rotate(0deg);
	}
  to {
    top: 150%;	
	transform: rotate(-200deg);
	}
  }
  
@keyframes basic {
   from {
    top: -50%;
	}
  to {
    top: 120%;
	}
  }
@keyframes ufo {
	0% {
    top: -25%;
	left: -25%
	}
	20%{
	top: 15%;
	left: 15%	
	}
	40%{
	top: 25%;
	left: 45%	
	}
	70%{
	top: 65%;
	left: 95%	
	}
	100% {
	left: 150%
    top: 150%;
	}
  }
@keyframes basicExaust1 {
   0% {
    top: 10%;
	opacity: 0;
	}
	50%{opacity:1}
	100% {
    top: 90%;	
	opacity:0;
	}
  }
 @keyframes basicExaust2{
   0% {
    top: 2%;
	opacity: 0;
	}
	50%{opacity:1}
	100% {
    top: 60%;	
	opacity:0;
	}
  }
 @keyframes basicExaust3{
   0% {
    top: 13%;
	opacity: 0;
	}
	50%{opacity:1}
	100% {
    top: 80%;	
	opacity:0;
	}
  }
  @keyframes basicExaust4{
   0% {
    top: 6%;
	opacity: 0;
	}
	50%{opacity:1}
	100% {
    top: 65%;	
	opacity:0;
	}
  }  
  @keyframes basicExaust5{
   0% {
    top: 20%;
	opacity: 0;
	}
	50%{opacity:1}
	100% {
    top: 100%;	
	opacity:0;
	}
  }  
  @keyframes basicExaust6{
   0% {
    top: 4%;
	opacity: 0;
	}
	50%{opacity:1}
	100% {
    top: 70%;	
	opacity:0;
	}
  }  
  @keyframes basicExaust7{
   0% {
    top: 20%;
	opacity: 0;
	}
	50%{opacity:1}
	100% {
    top: 100%;	
	opacity:0;
	}
  }
 @keyframes AnimSuccess{
   0% {
    color: #0f0;
	opacity: 0;
	}
	50%{opacity:1}
	100% {opacity:0;}
  }
   @keyframes AnimSuccess{
   0% {
    color: #0ff;
	opacity: 0;
	}
	50%{opacity:1}
	100% {opacity:0;}
  }

.textbg{
	background-image:url("img/seamless_paper1.jpg");
	background-repeat:repeat;
}

.lightTextBg{
	background-image:url("img/seamless_paper2.jpg");
	background-repeat:repeat;
}
.lightYellowBack {
	box-shadow:inset 0 0 0 2000px rgba(214, 171, 52, 0.3); 
}


.animation1{
	animation-name: basic;
}
.animation2{
	animation-name: basicRotate1;
}
.animation3{
	animation-name: basicRotate2;
}
.animation4{
	animation-name: basicRotate3;
}
.animation10{
	animation-name: ufo;
}
.shake{
	animation-name: shake;
	animation-duration: 0.5s;
	animation-iteration-count:infinite;
}
.size1{
	width:100px;
}
.size2{
	width:130px;
}
.size3{
	width:160px;
}
.starSize1{width:20px;/*animation-timing-function: steps(25, jump-none);*/}
.starSize2{width:28px;/*animation-timing-function: steps(35, jump-none);*/}
.starSize3{width:35px;/*animation-timing-function: steps(40, jump-none);*/}
.inSpace{
	position:fixed;
	user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
}
.hud {
	position: absolute;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	font-size:12px;
}

.clickable{
	pointer-events:auto;
}
.toBeHarvested{
	/* background-color:#E5F9DE; */
	/* border: 3px dotted #6c757d; */
	animation: harvestAnimaion;
	animation-duration: 0.8s; 
	animation-fill-mode: forwards;	
}



@keyframes harvestAnimaion {
/*	0%{box-shadow: none;border-radius:0;} */
/*	100%{box-shadow: inset 0px 0px 10px 3px #666666;border-radius: 50%;} */
	0%{border: 4px dashed rgba(250,250,250,0);border-radius:50%;}
	100%{border:4px dashed rgba(250,250,250,1);border-radius: 50%;}
}


.colonized{
	animation: colonizeAnimaion;
	animation-duration: 0.8s; 
	animation-fill-mode: forwards;
}

@keyframes colonizeAnimaion {
	0%{border: 4px dashed rgba(250,250,250,1);border-radius:50%;}
	100%{border:4px dashed rgba(189,213,131,1);border-radius: 50%;}
}


.harvestable {
	box-shadow: 20px 15px 84px -55px rgba(0,0,0,0.42);
}
.rocket{z-index:200;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}
.burst{
	z-index:100;
	user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
	position:fixed;
left:50%;
top:50%;
margin-left:-30px;
margin-top:30px;
width:60px}
.aStar{z-index:-9998;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}

.shake-top {
	-webkit-animation: shake-top 0.8s infinite both;
	        animation: shake-top 0.8s infinite both;
}

#beam{ animation: shake 0.8s infinite both; display:none;overflow:visible;}
.planetsBox {cursor: pointer;}
.achievementsListToggle {cursor: pointer;}

.exaust1{
	left:37%;
}
.exaust2{
	left:44%;
}
.exaust3{
	left:57%;
}
.exaust4{
	left:61%;
}
.exaust5{
	left:77%;
}
.exaust6{
	left:17%;
}
.exaust7{
	left:24%;
}
.speedlinesAnim3{
	animation-name: basicExaust3;
	animation-duration: 2s;
	animation-iteration-count:infinite;
}
.speedlinesAnim2{
	animation-name: basicExaust2;
	animation-duration: 3s;
	animation-iteration-count:infinite;
}
.speedlinesAnim1{
	animation-name: basicExaust1;
	animation-duration: 4s;
	animation-iteration-count:infinite;
}
.speedlinesAnim4{
	animation-name: basicExaust4;
	animation-duration: 3s;
	animation-iteration-count:infinite;
}
.speedlinesAnim5{
	animation-name: basicExaust5;
	animation-duration: 5s;
	animation-iteration-count:infinite;
}
.speedlinesAnim6{
	animation-name: basicExaust6;
	animation-duration: 3s;
	animation-iteration-count:infinite;
}
.speedlinesAnim7{
	animation-name: basicExaust7;
	animation-duration: 2s;
	animation-iteration-count:infinite;
}



.ufoShip{position:fixed;opacity:0;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}


.explosion {
  position: absolute; 
  width: 600px;
  height: 600px;
  pointer-events: none; 
  
}

  .particle {
    position: absolute; 
    width: 10px;
    height: 10px;
    /*border-radius: 50%;*/
    animation: pop 0.7s reverse forwards; 
  }


@keyframes pop {
  from {
    opacity: 0;
  }
  to {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
.planetThumb{
	width: 50px;
}






.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff; 
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.shake-bottom {
	-webkit-animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-11-26 9:48:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-bottom
 * ----------------------------------------
 */
@-webkit-keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}