.title{
    margin-top: 30px;
    margin-bottom: 25px;
    min-height: 32px;
}

.logo-container .logo{
    overflow: hidden;
    border-radius: 50%;
    border: 0px solid #333333;
    width: 50px;
    float: left;
}

.logo-container .brand{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 18px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    width: 85px;
    height: 20px;
    text-align: left;
}
.logo-container .logo img{
    width: 100%;
}

@media (max-width: 768px){
    .btn{
        margin-bottom: 10px;
    }
}

/*       Loading dots  */

/*      transitions */
.logo-container .logo, .logo-container .brand{
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


/*      layer animation          */

#pw {width:100%;overflow:hidden;}
#rocket{display:block;margin:0 auto;}

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

.rocket_inner {
    transform: translateY(15px) translateX(-3px);
    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
}
.icon_circle {
    transition: .2s;
    fill: #22303e;
}
.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:hover .rocket_base {
    fill: #FFFFFF !important;
    stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_shadow {
    fill: #EDEDED !important;
    stroke-width: 0px !important;
}
.rocket_wrap:hover .icon_circle {
    fill: #282e3a !important;
    stroke: #fff !important;
    stroke-width: 7px !important;
}
.rocket_wrap:hover .small_window_path {
    fill: #28B767 !important;
    stroke-width: 0px !important;
}
.rocket_wrap:hover .wing_shadow {
    display: block !important;
    fill: #FC9252 !important;
}
.rocket_wrap:hover .wing_base {
    fill: #E16E36 !important;
    stroke-width: 0px !important;
}
.rocket_wrap:hover .rocket_bottom {
    fill: #2DCB73 !important;
    stroke-width: 0px !important;
}
.rocket_wrap:hover .large_window_path {
    fill: url(#SVGID_2_) !important;
    stroke-width: 0px !important;
}
.rocket_wrap:hover .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:hover #fireLeft {
    display: block;
    animation-delay: 0s;
    animation-name: fireLeft, fillOpacity1;
    animation-duration: 1.2s;
}
.rocket_wrap:hover #fireMiddle {
    display: block;
    animation-delay: 0s;
    animation-name: fireMiddle, fillOpacity1;
    animation-duration: 1s;
}
.rocket_wrap:hover #fireRight {
    display: block;
    animation-delay: 0s;
    animation-name: fireRight, fillOpacity1;
    animation-duration: 1.3s;
}
.rocket_wrap:hover #fireSmallLeft {
    display: block;
    animation-delay: 0s;
    animation-name: fireSmall, fillOpacity2;
    animation-duration: 1.3s;
    transform-origin: bottom;
}
.rocket_wrap:hover #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(1px) }
    20% { transform: rotate(-13deg) translateY(2px) }
    30% { transform: rotate(21deg) translateY(3px) }
    40% { transform: rotate(-34deg)translateY(4px) }
    50% { transform: rotate(24deg) translateY(5px) }
    60% { transform: rotate(-17deg) translateY(6px) }
    70% { transform: rotate(31deg) translateY(7px) }
    80% { transform: rotate(-28deg) translateY(8px) }
    90% { transform: rotate(14deg) translateY(9px) }
    99% { transform: rotate(0deg) translateY(10px) }
}
@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;
    }
}