@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 100%;
	background: linear-gradient(to bottom, #004059 0%, #006f95 100%);
	overflow: hidden;
}
.text{
  position: absolute;
  z-index: 10;
  bottom: 3%;
  left: 3%;
}
.text h1{
  font-size: 1.5em;
  color: #000;
}
.text p{
  font-size: 1em;
  color: #000;
}
.text p span{
  color: #000;
}
@keyframes animationRocket {
	0%{
		transform: rotate(90deg);
		left: -40%;
		top: calc(50% - 200px);
		opacity: 1;
	}
	49%{
		transform: rotate(90deg);
		left: 120%;
		top: calc(50% - 200px);
		opacity: 1;
	}
	50%{
		transform: rotate(90deg);
		left: 120%;
		opacity: 0;
	}
	51%{
		opacity: 0;
		top: 100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
	52%{
		opacity: 1;
		top: 100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
	99%{
		opacity: 1;
		top: -100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
	100%{
		opacity: 1;
		top: -100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
}
.container{
	width: 260px;
	height: 400px;
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 130px);
	transform: rotate(90deg);
	animation: animationRocket 8s linear infinite;
}
.rocket{
	width: 210px;
	height: 210px;
	top: 50px;
	left: 22px;
	position: absolute;
	z-index: 2;
	background-color: #d03543;
	border-radius: 210px 0 210px 0;
	transform: rotate(-45deg);
}
.rocket:before{
	content: "";
	border-top: 47px solid #d03543;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 83px;
	position: absolute;
	bottom: 20px;
	left: -8px;
	transform: rotate(45deg);
}
.rocket:after{
	content: "";
	width: 83px;
	height: 5px;
	position: absolute;
	bottom: 23px;
	left: -16px;
	background-color: #000;
	transform: rotate(45deg);
}
.window{
	width: 90px;
  height: 90px;
  position: absolute;
  z-index: 3;
  top: 53px;
  left: 67px;
  background-color: #a9dbd2;
  border-radius: 50%;
  border: 10px solid #25aae1;
}
@keyframes animationFire {
	0%{
		transform: translateX(0px);
	}
	40%{
		transform: translateX(1px);
	}
	80%{
		transform: translateX(-1px);
	}
	100%{
		transform: translateX(0px);
	}
}
.fire{
	width: 75px;
	height: 128px;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 90px;
	animation: animationFire .25s linear infinite;
}
.fire:before{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 128px solid #f7a037;
	border-left: 38px solid transparent;
	border-right: 0px solid transparent;
}
.fire:after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	right: 0;
	border-top: 128px solid #f9b74b;
	border-left: 0px solid transparent;
	border-right: 38px solid transparent;
}
@keyframes animationFire1 {
	0%{
		transform: translateX(0px);
	}
	40%{
		transform: translateX(1px);
	}
	80%{
		transform: translateX(-1px);
	}
	100%{
		transform: translateX(0px);
	}
}
.fire1{
	width: 34px;
	height: 86px;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 90px;
	animation: animationFire1 .07s linear infinite;
}
.fire1:before{
	content: "";
	width: 45;
	height: 39;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 128px solid #a03b6e;
	border-left: 38px solid transparent;
	border-right: 0px solid transparent;
}
.fire1:after{
	content: "";
	width: 40;
	height: 20;
	position: absolute;
	top: 0;
	right: 0;
	border-top: 128px solid #191942;
	border-left: 0px solid transparent;
	border-right: 38px solid transparent;
}
@keyframes animationFire2 {
	0%{
		transform: translateX(50px);
	}
	40%{
		transform: translateX(13px);
	}
	80%{
		transform: translateX(-21px);
	}
	100%{
		transform: translateX(63px);
	}
}
.fire2{
	width: 23px;
	height: 18px;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 90px;
	animation: animationFire2 .089s linear infinite;
}
.fire2:before{
	content: "";
	width: 99;
	height: 76;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 128px solid #aaaaaa;
	border-left: 38px solid transparent;
	border-right: 0px solid transparent;
}
.fire2:after{
	content: "";
	width: 20;
	height: 70;
	position: absolute;
	top: 0;
	right: 0;
	border-top: 128px solid #7200ff;
	border-left: 0px solid transparent;
	border-right: 38px solid transparent;
}
@keyframes animationFire3 {
	0%{
		transform: translateX(100px);
	}
	40%{
		transform: translateX(14px);
	}
	80%{
		transform: translateX(-61px);
	}
	100%{
		transform: translateX(90px);
	}
}
.fire3{
	width: 75px;
	height: 128px;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 90px;
	animation: animationFire3 .02s linear infinite;
}
.fire3:before{
	content: "";
	width: 88;
	height: 60;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 128px solid #000000;
	border-left: 38px solid transparent;
	border-right: 0px solid transparent;
}
.fire3:after{
	content: "";
	width: 20;
	height: 40;
	position: absolute;
	top: 0;
	right: 0;
	border-top: 128px solid #ff0000;
	border-left: 0px solid transparent;
	border-right: 38px solid transparent;
}
@keyframes animationFire4 {
	0%{
		transform: translateX(23px);
	}
	40%{
		transform: translateX(14px);
	}
	80%{
		transform: translateX(-19px);
	}
	100%{
		transform: translateX(60px);
	}
}
.fire4{
	width: 120px;
	height: 12px;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 90px;
	animation: animationFire4 .05s linear infinite;
}
.fire4:before{
	content: "";
	width: 80;
	height: 5;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 128px solid #ffffff;
	border-left: 38px solid transparent;
	border-right: 0px solid transparent;
}
.fire4:after{
	content: "";
	width: 33;
	height: 50;
	position: absolute;
	top: 0;
	right: 0;
	border-top: 128px solid #ffcc00;
	border-left: 0px solid transparent;
	border-right: 38px solid transparent;
}
@keyframes animationFire5 {
	0%{
		transform: translateX(10px);
	}
	40%{
		transform: translateX(25px);
	}
	80%{
		transform: translateX(-25px);
	}
	100%{
		transform: translateX(10px);
	}
}
.fire5{
	width: 25px;
	height: 12px;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 90px;
	animation: animationFire5 .01s linear infinite;
}
.fire5:before{
	content: "";
	width: 10;
	height: 10;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 128px solid #48ff00;
	border-left: 38px solid transparent;
	border-right: 0px solid transparent;
}
.fire5:after{
	content: "";
	width: 10;
	height: 10;
	position: absolute;
	top: 0;
	right: 0;
	border-top: 128px solid #f9b74b;
	border-left: 0px solid transparent;
	border-right: 38px solid transparent;
}
.wing-left{
	width: 0;
	height: 0;
	position: absolute;
	z-index: 1;
	bottom: 63px;
	left: 36px;
	border-right: 50px solid #97282b;
	border-top: 70px solid transparent;
	border-bottom: 70px solid transparent;
	transform: rotate(15deg);
}
.wing-right{
	width: 0;
	height: 0;
	position: absolute;
	z-index: 1;
	bottom: 63px;
	right: 36px;
	border-left: 50px solid #97282b;
	border-top: 70px solid transparent;
	border-bottom: 70px solid transparent;
	transform: rotate(-15deg);
}