@charset "utf-8";
/* CSS Document */


	
	
	.svgwrp{

	position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
/*background: rgba(100,104,123,1.00);*/
	}
	



		.panelillo{
			position:absolute;
			bottom:0px;
			height:calc(100% - 3em);
		opacity:0;




	}
	
		.panel{
		height:100vh;
		position: relative;

		
	}

	.panelliner{
		height:100vh;
		position: relative;
	}
	


/*ANIMATIONS*/

	.showit .svgwrp .panelillo{
		opacity:1;
	}

/*ship*/
	.showit .svgwrp .shipoutline{
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 2800ms linear forwards;
}

	.showit .svgwrp #ship {
				opacity:0;
   animation: showthis 1.5s 1.5s  linear forwards;

}
	.showit	.svgwrp #pi1 #gantry {
				opacity:0;
   animation: showthis 500ms 3s  linear forwards;

}
	/*launch*/
	

	
		.showit .svgwrp  #heavy{

		transform: translateY(300px);
		   animation: launchheavy 700ms linear forwards;
	}
	

	

	
	.showit .svgwrp #heavyfull{
	opacity:0;
	animation: showthis 1s linear forwards;		
	}
	
	.showit .svgwrp #smokefront,.showit .svgwrp #tower{
		opacity:0;
	animation: showthis 1s   linear forwards;	
	}
		.showit .svgwrp #smokeback{
		opacity:0;
	transform: translateY(60px);
			animation: moveclouds 2s 500ms  linear forwards;
 
	}
	
/*0rion*/
	.showit .svgwrp #fullship{
	
		animation: movefullship 5s linear forwards;
	}
	
	#wireship , #realship{
		opacity:0;
	}


	
	
		 	.showit .svgwrp  #realship{
	animation: showthis 1s linear forwards;	
	}
	

	
	.showit .svgwrp #wireship{
	animation: hidethis 3s 1s  linear forwards;	
	}
	/*lander*/
	
	.showit .svgwrp #fulllander{

		 animation: touchdown 1.5s linear forwards;
		
	}
	
				.showit .svgwrp  #fulllander #Lander{
				opacity:0;
				   animation: showthis 700ms 300ms linear forwards;
	}
	
			.showit .svgwrp  #landeroutline{
animation: hidethis 500ms  linear forwards;
		
	}
	
			.showit .svgwrp  #thrust{
			opacity:0;

		 animation: thrusters 500ms 500ms linear forwards;
		
	}
			.showit .svgwrp #shadow{
				opacity:0;
				   animation: showthis 1s 500ms  linear forwards;
	}

/*spaceman*/
	#spaceoutline,#spaceman{
	transform: translatex(-50px)	
	}
				.showit .svgwrp #spaceman{
				opacity:0;
   animation: showthis 1s 1s  linear forwards;
}
	
	
		.showit .svgwrp  #spaceoutline{
		 stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
	  animation: dash 2s linear forwards;	
	}
	

	

	
	
	/*keyframes*/
	
@keyframes dash {
  0% {
	  }
	80% {
			  opacity:1;
	}
 
  100% {
	  opacity:0;
	  stroke-dashoffset: 0;}
	}	

	

	@keyframes showthis {
 0% { opacity: 0; }
  100% { opacity: 1; }
	
} 
		@keyframes hidethis {
 0% { opacity: 1; }
  100% { opacity: 0; }
	
} 
	
	
		@keyframes launchheavy {

 0% {  }
  100% { transform: translateY(0px);}
	
} 
	

	
			@keyframes liftoffclouds {
 0% { opacity: 0; }
  100% { opacity: 1;
}
	
}
	
	@keyframes movefullship {
 0% { transform: translateY(0px);
}
  100% { transform: translateY(24px);}
	

	
	}
	
				@keyframes moveclouds {
 0% { opacity: 0; }
					50% { opacity: 1;}
  100% {
	   opacity: 1;
	  transform: translateY(0px);}
	
}
	
					@keyframes thrusters {
 0% { opacity: 0; }
					25% { opacity: 1;}
						50% { opacity: 0;}
						75% { opacity: 1;}
  100% {
	   opacity: 0;

	
}
	}
						



	
	@keyframes movethis {
 0% {transform: translateX(0px)}
  100% { transform: translateX(70px) }
	
} 	
	
			@keyframes touchdown {

 0% {  }
  100% {

	  transform: translateY(225px);
				
				}
	
} 

/* Miles Added Code*/
@media only screen and (max-width : 992px)	
{
	.panel{
		height:auto;
	}
}