/*=============================================
[ Page Setup ]
==============================================*/
#rocket-wrap {width:100%;overflow:hidden;}
#rocket{display:block;margin:0 auto;}

/*=============================================
[ Inactive State Styles ]
==============================================*/

.rocket_inner {
    transform: translateY(0.938rem) translateX(-0.188rem);
    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    margin: 0;
    padding: 0;
}
.icon_circle {
    transition: .2s;
    fill: transparent;
}
.large_window_path {
    transition: .2s;
    fill: #22303e;
}
.small_window_path {
    fill: #22303e;
}
.wing_shadow {
    fill: #34495e;
}
.rocket_bottom { fill: #34495e }
.rocket_base { fill: #34495e }
.rocket_shadow { fill: #34495e }
.window_grandient { stop-color: #2DCB73 }
.window_grandient1 { stop-color: #2AC16D }
.window_grandient2 { stop-color: #29B968 }
.window_grandient3 { stop-color: #28B767 }
.wing_base { fill: #34495e }
.fire_path { fill: #FC0 }

/*=============================================
[ Hover Styles ]
==============================================*/
.rocket_wrap .rocket_base {
    fill: #FFFFFF !important;
    stroke-width: 0px !important;
}
.rocket_wrap .rocket_shadow {
    fill: #EDEDED !important;
    stroke-width: 0px !important;
}
.rocket_wrap .icon_circle {
    fill: transparent !important;
    stroke: transparent !important;
    stroke-width: 0px !important;
}
.rocket_wrap .small_window_path {
    fill: #28B767 !important;
    stroke-width: 0px !important;
}
.rocket_wrap .wing_shadow {
    display: block !important;
    fill: #FC9252 !important;
}
.rocket_wrap .wing_base {
    fill: #E16E36 !important;
    stroke-width: 0px !important;
}
.rocket_wrap .rocket_bottom {
    fill: #2DCB73 !important;
    stroke-width: 0px !important;
}
.rocket_wrap .large_window_path {
    fill: url(#SVGID_2_) !important;
    stroke-width: 0px !important;
}
.rocket_wrap .rocket_inner { transform: translateY(0px) translateX(-3px) !important; }

/*=============================================
[ Animation Classes ]
==============================================*/
.fire {
    display: none;
    animation-delay: 0s;
    fill-opacity: 1;
    animation-timing-function: ease-in;
    stroke-width: 0px;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 50% 50%;
    animation-direction: normal;
}
.rocket_wrap #fireLeft {
    display: block;
    animation-delay: 0s;
    animation-name: fireLeft, fillOpacity1;
    animation-duration: 1.2s;
}
.rocket_wrap #fireMiddle {
    display: block;
    animation-delay: 0s;
    animation-name: fireMiddle, fillOpacity1;
    animation-duration: 1s;
}
.rocket_wrap #fireRight {
    display: block;
    animation-delay: 0s;
    animation-name: fireRight, fillOpacity1;
    animation-duration: 1.3s;
}
.rocket_wrap #fireSmallLeft {
    display: block;
    animation-delay: 0s;
    animation-name: fireSmall, fillOpacity2;
    animation-duration: 1.3s;
    transform-origin: bottom;
}
.rocket_wrap #fireSmallRight {
    display: block;
    animation-delay: 0.3s;
    animation-name: fireSmall, fillOpacity3;
    animation-duration: 1.6s;
    transform-origin: bottom;
}
/*=============================================
[ KeyFrame Animations ]
==============================================*/
@keyframes fireSmall { 
    10% { transform: rotate(17deg) translateY(0.063rem) }
    20% { transform: rotate(-13deg) translateY(0.125rem) }
    30% { transform: rotate(21deg) translateY(0.188rem) }
    40% { transform: rotate(-34deg)translateY(0.25rem) }
    50% { transform: rotate(24deg) translateY(0.313rem) }
    60% { transform: rotate(-17deg) translateY(0.375rem) }
    70% { transform: rotate(31deg) translateY(0.438rem) }
    80% { transform: rotate(-28deg) translateY(0.5rem) }
    90% { transform: rotate(14deg) translateY(0.563rem) }
    99% { transform: rotate(0deg) translateY(0.625rem) }
}
@keyframes fireLeft { 
    6% { transform: rotate(25deg) }
    15% { transform: rotate(-19deg) }
    25% { transform: rotate(25deg) }
    32% { transform: rotate(-30deg) }
    46% { transform: rotate(22deg) }
    54% { transform: rotate(-29deg) }
    61% { transform: rotate(32deg) }
    74% { transform: rotate(-9deg) }
    83% { transform: rotate(16deg) }
    99% { transform: rotate(0deg) }
}
@keyframes fireMiddle { 
    10% { transform: rotate(25deg) }
    20% { transform: rotate(-25deg) }
    30% { transform: rotate(30deg) }
    40% { transform: rotate(-22deg) }
    50% { transform: rotate(29deg) }
    60% { transform: rotate(-45deg) }
    70% { transform: rotate(37deg) }
    80% { transform: rotate(-15deg) }
    90% { transform: rotate(16deg) }
    99% { transform: rotate(0deg) }
}
@keyframes fireRight { 
    15% { transform: rotate(17deg) }
    23% { transform: rotate(-13deg) }
    37% { transform: rotate(21deg) }
    45% { transform: rotate(-34deg) }
    54% { transform: rotate(24deg) }
    67% { transform: rotate(-17deg) }
    72% { transform: rotate(31deg) }
    84% { transform: rotate(-28deg) }
    96% { transform: rotate(14deg) }
    99% { transform: rotate(0deg) }
}
@keyframes fillOpacity1 { 
    0% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    50% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    100% {
        fill-opacity: 0;
        stroke-opacity: 0;
    }
}
@keyframes fillOpacity2 { 
    0% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    25% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    100% {
        fill-opacity: 0;
        stroke-opacity: 0;
    }
}
@keyframes fillOpacity3 { 
    0% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    67% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    100% {
        fill-opacity: 0;
        stroke-opacity: 0;
    }
}
@keyframes rocektMove { 
    0% { transform: translateY(0px) }
    100% { transform: translateY(1.25rem) }
}