/*
|-----------------------------------------------------------------------------------------------------------
| STARS
|-----------------------------------------------------------------------------------------------------------
*/
.stars.tospace {
  background-image: url("/includes/public/assets/stardust.png");
  background-position: 0px 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9999;
  -webkit-animation: starynight 2s ease forwards;
          animation: starynight 2s ease forwards;
}

@-webkit-keyframes starynight {
  0% {
    opacity:0;
    background-position:0px 0px;
  }
  15% {
    opacity:.3;
  }
  35% {
    opacity:.5;
  }
  80% {
    opacity:.9;
  }
  90% {
    opacity:.9;
  }
  100% {
    opacity:0;
    background-position:0px 3700px;
  }
}
@-moz-keyframes starynight {
  0% {
    opacity:0;
    background-position:0px 0px;
  }
  15% {
    opacity:.3;
  }
  35% {
    opacity:.5;
  }
  80% {
    opacity:.9;
  }
  90% {
    opacity:.9;
  }
  100% {
    opacity:0;
    background-position:0px 3700px;
  }
}

/*
|-----------------------------------------------------------------------------------------------------------
| ROCKETSHIP
|-----------------------------------------------------------------------------------------------------------
*/
.blast-off-cont {
  text-align: center;
  position: relative;
  top: -15px;
}
.panel_custom_footer .blast-off-button.tospace:before { display: none; }
.pagecontent.blastoff { position: static; }
.rocket-fixed-cont {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  display: none;
  z-index: 999999;
}
.rocket-fixed-cont.blastoff { display: block; }
.rocket-fixed-cont.tospace {
  -webkit-animation: tospace 1.3s ease .5s forwards;
          animation: tospace 1.3s ease .5s forwards;
}
.rocketship {
  position: absolute;
  bottom: 87px;
  text-align: center;
  width: 100%;
}
.shipbox {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}
.flame {
  border-width: 40px;
  border-style: solid;
  border-color: #f00 transparent transparent transparent;
  -webkit-transform: scale(.1,1);
      -ms-transform: scale(.1,1);
          transform: scale(.1,1);
  position: absolute;
  bottom: -63px;
  left: -12px;
  z-index: 99;
  -webkit-animation: flameer .2s ease infinite;
          animation: flameer .2s ease infinite;
}
.flame.flame2 {
  border-width: 60px;
  border-style: solid;
  border-color: #fc0 transparent transparent transparent;
  -webkit-transform: scale(.13,1);
      -ms-transform: scale(.13,1);
          transform: scale(.13,1);
  position: absolute;
  bottom: -103px;
  left: -32px;
  z-index: 9;
  -webkit-animation: flameer2 .11s ease infinite;
          animation: flameer2 .11s ease infinite;
}
.sideflame,
.sideflame.flame2 {
  border-width: 30px;
  border-style: solid;
  border-color: #fc0 transparent transparent transparent;
  position: absolute;
  -webkit-transform: rotate(24deg) scale(.1,1);
      -ms-transform: rotate(24deg) scale(.1,1);
          transform: rotate(24deg) scale(.1,1);
  bottom: -50px;
  left: -19px;
  -webkit-animation: sputtering .25s ease infinite;
          animation: sputtering .25s ease infinite;
}
.sideflame.flame2 {
  border-color: #f00 transparent transparent transparent;
  -webkit-transform: rotate(69deg) scale(.13,1);
      -ms-transform: rotate(69deg) scale(.13,1);
          transform: rotate(69deg) scale(.13,1);
  bottom: -20px;
  left: -16px;
  border-width: 20px;
  -webkit-animation: sputtering2 .37s ease infinite;
    animation: sputtering2 .37s ease infinite;
}
.sideflame.flame3 {
  border-width: 30px;
  border-style: solid;
  border-color: #fc0 transparent transparent transparent;
  position: absolute;
  -webkit-transform: rotate(-24deg) scale(.1,1);
      -ms-transform: rotate(-24deg) scale(.1,1);
          transform: rotate(-24deg) scale(.1,1);
  bottom: -50px;
  left: 17px;
  -webkit-animation: sputtering3 .22s ease infinite;
          animation: sputtering3 .22s ease infinite;
}
.sideflame.flame4 {
  border-color: #f00 transparent transparent transparent;
  -webkit-transform: rotate(-69deg) scale(.13,1);
      -ms-transform: rotate(-69deg) scale(.13,1);
          transform: rotate(-69deg) scale(.13,1);
  bottom: -20px;
  left: 35px;
  border-width: 20px;
  -webkit-animation: sputtering4 .39s ease infinite;
          animation: sputtering4 .39s ease infinite;
}
.trail {
  width: 18px;
  height: 300px;
  background: -webkit-linear-gradient(#324d68, transparent);
  background: -o-linear-gradient(#324d68, transparent);
  background: -moz-linear-gradient(#324d68, transparent);
  background: linear-gradient(#324d68, transparent);
  position: absolute;
  bottom: -283px;
  left: 19px;
  opacity: 0;
  -webkit-animation: trail .9s ease .4s infinite;
          animation: trail .9s ease .4s infinite;
}
.booster {
  width: 20px;
  height: 583px;
  background: -webkit-linear-gradient(#ff9600 0%, #ffea00 30%, transparent 80%);
  background: -o-linear-gradient(#ff9600 0%, #ffea00 30%, transparent 80%);
  background: -moz-linear-gradient(#ff9600 0%, #ffea00 30%, transparent 80%);
  background: linear-gradient(#ff9600 0%, #ffea00 30%, transparent 80%);
  position: absolute;
  bottom: -590px;
  left: 18px;
  opacity: 0;
  -webkit-animation: booster 1s ease 1.1s infinite;
          animation: booster 1s ease 1.1s infinite;
}
.rocketship.blastoff {
  -webkit-animation: bounceup .8s ease forwards;
          animation: bounceup .8s ease forwards;
}

@-webkit-keyframes bounceup {
  0% {
    bottom:45px;
    -webkit-transform:scale(1,.7);
        -ms-transform:scale(1,.7);
            transform:scale(1,.7);
  }
  30% {
    bottom:135px;
    -webkit-transform:scale(1,1.4);
        -ms-transform:scale(1,1.4);
            transform:scale(1,1.4);
  }
  40% {
    bottom:60px;
    -webkit-transform:scale(1.5,.8);
        -ms-transform:scale(1.5,.8);
            transform:scale(1.5,.8);
  }
  60% {
    bottom:94px;
    -webkit-transform:scale(1);
        -ms-transform:scale(1);
            transform:scale(1);
  }
  70% {
    bottom:67px;
  }
}
@-moz-keyframes bounceup {
  0% {
    bottom:45px;
    -webkit-transform:scale(1,.7);
        -ms-transform:scale(1,.7);
            transform:scale(1,.7);
  }
  30% {
    bottom:135px;
    -webkit-transform:scale(1,1.4);
        -ms-transform:scale(1,1.4);
            transform:scale(1,1.4);
  }
  40% {
    bottom:60px;
    -webkit-transform:scale(1.5,.8);
        -ms-transform:scale(1.5,.8);
            transform:scale(1.5,.8);
  }
  60% {
    bottom:94px;
    -webkit-transform:scale(1);
        -ms-transform:scale(1);
            transform:scale(1);
  }
  70% {
    bottom:67px;
  }
}
@-webkit-keyframes flameer {
  0% {
    opacity:.35;
    border-width:30px;
    bottom:-40px;
    left:-2px;
  }
  100% {
    opacity:.6;
    border-width:40px;
    bottom:-60px;
    left:-11px;
  }
}
@-moz-keyframes flameer {
  0% {
    opacity:.35;
    border-width:30px;
    bottom:-40px;
    left:-2px;
  }
  100% {
    opacity:.6;
    border-width:40px;
    bottom:-60px;
    left:-11px;
  }
}
@-webkit-keyframes flameer2 {
  0% {
    opacity:.17;
    border-width:50px;
    bottom:-95px;
    left:-21px;
  }
  100% {
    opacity:.53;
    border-width:60px;
    bottom:-100px;
    left:-32px;
  }
}
@-moz-keyframes flameer2 {
  0% {
    opacity:.17;
    border-width:50px;
    bottom:-95px;
    left:-21px;
  }
  100% {
    opacity:.53;
    border-width:60px;
    bottom:-100px;
    left:-32px;
  }
}
@-webkit-keyframes tospace {
  0% {
    bottom:0%;
  }
  10% {
    bottom:0%;
  }
  20% {
    bottom:0%;
  }
  75% {
    bottom:40%;
  }
  79% {
    bottom:35%;
  }
  84% {
    bottom: 46%;
  }
  100% {
    bottom:122%;
  }
}
@-moz-keyframes tospace {
  0% {
    bottom:0%;
  }
  10% {
    bottom:0%;
  }
  20% {
    bottom:0%;
  }
  75% {
    bottom:40%;
  }
  79% {
    bottom:35%;
  }
  84% {
    bottom: 46%;
  }
  100% {
    bottom:122%;
  }
}
@-webkit-keyframes sputtering {
  0% {
    bottom:-50px;
    left:-19px;
    opacity:.7;
  }
  100% {
    bottom:-66px;
    left:-29px;
    opacity:0;
  }
}
@-moz-keyframes sputtering {
  0% {
    bottom:-50px;
    left:-19px;
    opacity:.7;
  }
  100% {
    bottom:-66px;
    left:-29px;
    opacity:0;
  }
}
@-webkit-keyframes sputtering2 {
  0% {
    bottom:-20px;
    left:-16px;
    opacity:.7;
  }
  100% {
    bottom:-24px;
    left:-35px;
    opacity:0;
  }
}
@-moz-keyframes sputtering2 {
  0% {
    bottom:-20px;
    left:-16px;
    opacity:.7;
  }
  100% {
    bottom:-24px;
    left:-35px;
    opacity:0;
  }
}
@-webkit-keyframes sputtering3 {
  0% {
    bottom:-50px;
    left:17px;
    opacity:.7;
  }
  100% {
    bottom:-66px;
    left:27px;
    opacity:0;
  }
}
@-moz-keyframes sputtering3 {
  0% {
    bottom:-50px;
    left:17px;
    opacity:.7;
  }
  100% {
    bottom:-66px;
    left:27px;
    opacity:0;
  }
}
@-webkit-keyframes sputtering4 {
  0% {
    bottom:-20px;
    left:35px;
    opacity:.7;
  }
  100% {
    bottom:-24px;
    left:46px;
    opacity:0;
  }
}
@-moz-keyframes sputtering4 {
  0% {
    bottom:-20px;
    left:35px;
    opacity:.7;
  }
  100% {
    bottom:-24px;
    left:46px;
    opacity:0;
  }
}
@-webkit-keyframes trail {
  0% {
    opacity:0;
  }
  60% {
    opacity:.7;
  }
  83% {
    opacity:.85;
    width:4px;
    left:26.3px;
    background: -webkit-linear-gradient(#ffde00, transparent);
    background: -o-linear-gradient(#ffde00, transparent);
    background: -moz-linear-gradient(#ffde00, transparent);
    background: linear-gradient(#ffde00, transparent);
  }
  100% {
    opacity:0;
  }
}
@-moz-keyframes trail {
  0% {
    opacity:0;
  }
  60% {
    opacity:.7;
  }
  83% {
    opacity:.85;
    width:4px;
    left:26.3px;
    background: -webkit-linear-gradient(#ffde00, transparent);
    background: -o-linear-gradient(#ffde00, transparent);
    background: -moz-linear-gradient(#ffde00, transparent);
    background: linear-gradient(#ffde00, transparent);
  }
  100% {
    opacity:0;
  }
}
@-webkit-keyframes booster {
  0% {
    opacity:.01;
  }
  10% {
    opacity:.11;
  }
  83% {
    opacity:.22;
  }
  100% {
    opacity:.01;
  }
}
@-moz-keyframes booster {
  0% {
    opacity:.01;
  }
  10% {
    opacity:.11;
  }
  83% {
    opacity:.22;
  }
  100% {
    opacity:.01;
  }
}