/*********************************************
* Ufo1
*********************************************/
 
@keyframes rocket1move {
0% {
    transform: rotate(45.2deg);
    left: 4.7em;
    top: 10.7em;
}
8% {
    transform: rotate(45.2deg);
    left: 10.5em;
    top: 4.7em;
}
16% {
   left: 10.5em;
   top: 4.7em;
   transform: rotate(140.2deg);
}
24% {
    left: 18.5em;
    top: 13.7em;
    transform: rotate(140.2deg);
}
32% {
    left: 18.5em;
    top: 13.7em;
    transform: rotate(45.2deg);
}
40% {
left: 29.7em;
    top: 5em;
        transform: rotate(45.2deg);
}
48% {
left: 29.7em;
    top: 5em;
        transform: rotate(157.4deg);
}
80% {
left: 29.7em;
    top: 5em;
    transform: rotate(500.2deg);
}
90% {
left: 37.3em;
    top: 10.7em;
        transform: rotate(500.2deg);
}
95% {
left: 37.3em;
    top: 10.7em;
   
    transform: rotate(360deg);
}
100% {
     left: 37.2em;
    top: 13.7em;
    transform: rotate(360deg);
}
}

#rocket1.animate{
	animation: rocket1move 5s forwards;
	animation-delay: 1s;
    animation-timing-function:linear;
}

#rocket2.animate{
	animation: rocket2move 2s forwards;
	animation-delay: 0s;
    animation-timing-function:linear;
}
 
@keyframes rocket2move {
0% {
    transform: rotate(45.2deg);
    left: 4.7em;
    top: 10.7em;
}
30%{
    left: 21em;
    top: 6.9em;
    transform: rotate(90.7deg);
}
60% {
    left: 35.2em;
    top: 8.7em;
    transform: rotate(110deg);
}
80% {
    left: 35.2em;
    top: 8.7em;
    transform: rotate(110deg);
}
90% {
    left: 35.2em;
    top: 8.7em;
    transform: rotate(00deg);
}
100% {
    left: 35.2em;
    top: 10.7em;
    transform: rotate(00deg);
}
}

@keyframes ufo1move {
0% {
    top: 0em;
    left: 0%;
    transform: rotate(195deg);
}
10% {
    top: -3em;
    left: 3em;
    transform: rotate(190deg);
}

20% {
    top: -5em;
    left: 8em;
    transform: rotate(190deg);
}
30% {
    top: -5.5em;
    left: 12em;
    transform: rotate(190deg);
}
40% {
    top: -6em;
    left: 18em;
    transform: rotate(180deg);
}
50% {
    top: -5em;
    left: 16em;
    transform: rotate(180deg);
}
60% {
    top: -4.5em;
    left: 13em;
    transform: rotate(90deg);
}
70% {
    top: -2.5em;
    left: 10em;
    transform: rotate(30deg);
}
80% {
    top: -2.5em;
    left: 4em;
    transform: rotate(15deg);
}
90% {
    top: -1em;
    left: 0.5em;
    transform: rotate(10deg);
}
100% {
    top: 0em;
    left: 0;
    transform: rotate(0deg);
}
}
@keyframes ufo2move {
	0% {
	    top: 0em;
	    left: 0%;
	    transform: rotate(20deg);
	}
	10% {
	    top: 3em;
	    left: 0em;
	}
	20% {
	    top: 5em;
	    left: 0em;
	    transform: rotate(135deg);
	}
	30% {
	    top: 6em;
	    left: -2em;
	}
	40% {
	    top: 6em;
	    left: -4em;
	}
	50% {
	    top: 8em;
	    left: -6em;
	    /* transform: rotate(360deg); */
	}
	60% {
	    top: 4em;
	    left: -5.5em;
	    transform: rotate(360deg);
	}
	70% {
	    top: 2em;
	    left: -5em;
	}
	80% {
	    top: 4em;
	    left: -3em;
	}
	90% {
	    top: 2em;
	    left: -2em;
	}
	100% {
	    top: 0em;
	    left: 0;
	    transform: rotate(360deg);
	}
}
@keyframes ufo1datamove {
  0% {
     margin-top:0px;
     }
  100% {
    margin-top: -80px;
    display: none;
    opacity:0;
  }
}
@keyframes ufo2datamove {
  0% {
     margin-top:0px;
     opacity:0;
     }
  10% {
     margin-top:0px;
     opacity:1;
     }
  100% {
    margin-top: -80px;
    display: none;
    opacity:0;
  }
}
@keyframes uforeportmove {
  0% {
     margin-top:-150px;
     margin-left: 20px;
	 opacity:1;
     }
  100% {
    margin-top: -150px;
    margin-left: 200px;
    display: none;
    opacity:0.5;
  }
}
@keyframes uforeportwarp {
  0% {
     margin-top:-220px;
     margin-left: 340px;
	 opacity:1;
     }
  100% {
    margin-top: -220px;
    margin-left: 200px;
    display: none;
    opacity:0.5;
  }
}

@keyframes ufo2warp {
  0% {
     top:0;
     left:0;
     transform: rotate(180deg);
     }
  50% {
     top: 8em;
     left: -6em;
  }
  100% {
    left: 7em;
    top: 0.6em;
  }
}
/*********************************************
* Ufo CSS
*********************************************/
.ufo{
	width:  4em;
	height: 4em;
}
.ufo img{
	width: 100%
}
/*********************************************
* Ufo1
*********************************************/
#ufo1_container {
	position: relative;
    top: -33em;
    left: 5%;
  	
}
#ufo1_data{
	width: 40%
}
#ufo1_report{
	width: 30%;
	margin-top: -150px;
	opacity:0;
}
#ufo1_ufo{
	position:relative;
}
#ufo1_ufo.animate{
	animation: ufo1move 2s forwards;
	animation-delay: 1s;
    animation-timing-function:linear;
    animation-direction:reverse;
}
#ufo1_data.animate{
	animation-name: ufo1datamove;
	animation-duration: 1000ms;
	animation-fill-mode: forwards;
}
#ufo1_report.animate{
	animation-name: uforeportmove;
	animation-duration: 2000ms;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}

/*********************************************
* Ufo2
*********************************************/
 
#ufo2_container {
	left: 26em;
    top: -48.4em;
    position: relative;
}

#ufo2_data{
	width: 40%;
	opacity:0;
	filter: hue-rotate(151deg) brightness(1.3);
}
#ufo2_report{
	width: 30%;
	margin-top: -150px;
	opacity:0;
	    filter: hue-rotate(151deg) brightness(1.3);
}
#ufo2_ufo{
	position:relative;
	filter: hue-rotate(151deg) brightness(1.3);
}

#ufo2_ufo.animate{
	animation: ufo2move 2s normal;
	animation-delay: 6s;
    animation-timing-function:linear;
    
}
#ufo2_data.animate{
	animation-name: ufo2datamove;
	animation-duration: 1000ms;
	animation-delay: 5s; /* Start after ufo1 is animated */
	animation-fill-mode: forwards;
}
#ufo2_report.animate{
	animation-name: uforeportmove;
	animation-duration: 2000ms;
	animation-delay: 8s;
	animation-fill-mode: forwards;
}





/*********************************************
* WARP
*********************************************/
#warp{
	position: relative;
    top: -43.3em;
    left: 21.1em;
    z-index: -1;
}

#line1{
	    height: 0.1em;
    width: 9.2em;
    background-color: #7fe9ff;
    opacity: 0.9;
    transform: rotate(-60deg);
    box-shadow: 0em 0.2em 0.5em white, 0em -0.2em 0.5em white, 0.1em 0.1em 0.2em #7fe9ff;
}
#line2{
	height: 0.1em;
    width: 14.3em;
    background-color: #7fe9ff;
    opacity: 0.9;
    transform: rotate(-30deg);
    box-shadow: 0em 0.2em 0.5em white, 0em -0.2em 0.5em white, 0.1em 0.1em 0.2em #7fe9ff;
    position: relative;
    top: 0.3em;
    left: 1.3em;
}

#ufo2_ufo.warp{
	animation: ufo2warp 1s forwards;
	animation-delay: 3s;
    animation-timing-function:linear;
    
}
#ufo2_report.warp{
	animation-name: uforeportwarp;
	animation-duration: 1000ms;
	animation-delay: 4s;
	animation-fill-mode: forwards;
}