.status-bar .status-bar-text{
    display:flex;
    justify-content:center;
    background:#2bc72b;
    color:#fff;
    padding:.5em;
    text-transform:uppercase
}
.status-bar-text h1{
    font-size:1.5rem
}
.status-bar__status{
    margin-left:30px;
    font-size:1.5rem
}
.intro{
    margin:1em
}
.intro__img img{
    width:200px
}
.intro__footer{
    font-size:1.5rem
}
.social-imgs{
    display:block
}
.fb-data{
    display:flex;
    justify-content:center;
    align-items:center;
    width:50%;
    margin:0 auto;
    margin-top:2px
}
.fb-data>div img{
    width:80px
}
.brand{
    display:block
}
.brand img{
    width:150px;
    margin-top:50px
}
.brand::before{
    content:"";
    width:30%;
    height:2px;
    margin:10px auto;
    margin-top:20px;
    background:#2bc72b;
    display:block
}
.brand__top{
    text-align:center;
    font-size:2.5rem;
    font-weight:700;
    line-height:26px;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin-bottom:10px
}
.brand__bottom{
    margin:auto;
    width:650px;
    height:110px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    top:-18px
}
.brand__bottom>div{
    font-style:normal;
    font-weight:700;
    font-size:26px;
    line-height:64px;
    text-align:center;
    box-sizing:border-box;
    min-width:64px;
    color:#fff;
    position:relative;
    height:64px;
    width:auto;
    display:block;
    background:url(locked.svg) no-repeat center center transparent;
    background-size:64px 64px
}
*,::after,::before{
    box-sizing:border-box;
    padding:0;
    margin:0
}
.custom-bar{
    width:30%;
    height:.5em;
    background:linear-gradient(rgba(86,166,43,.4),rgba(86,166,43,.4));
    color:#fff;
    position:relative;
    margin:20px auto
}
.custom-bar::before{
    content:attr(data-label);
    display:flex;
    height:.5em;
    align-items:center;
    poisition:fixed;
    left:.5em;
    top:.5em;
    width:calc(var(--width,0) * 1%);
    min-width:0;
    max-width:100%;
    background-color:#54a62b
}
:root{
    --height:100px
}
.path-flow{
    background:#fff
}
.form-container{
    width:100%
}
.form{
    background:#fff;
    padding:0 50px;
    border-radius:4px
}
.form-group{
    width:60%;
    margin:10px auto
}
#smarticlepath .slide__footer{
    margin:0;
    padding:0 25px;
    padding-bottom:10px;
    bottom:0
}
#smarticlepath .btn-continue,#smarticlepath .survey__button{
    background:#54a62b;
    border:4px solid #54a62b!important;
    color:#fff;
    font-family:Roboto,sans-serif;
    font-size:20px;
    font-weight:500;
    letter-spacing:.6px;
    margin:1rem auto;
    position:relative;
    text-align:center;
    text-transform:uppercase;
    width:50%;
    transition:.3s all ease-in-out
}
#smarticlepath .btn-continue,#smarticlepath .survey__button:hover{
    background:#55da13;
    border:4px solid #55da13!important
}
#smarticlepath button{
    background:#17c671;
    background-color:#17c671;
    border:1px solid #17c671!important;
    border-radius:100px;
    color:#fff!important;
    width:258px
}
.footer-top{
    min-height:var(--height)!important;
    margin-top:50vh
}
.slide{
    display:none
}
#smarticlepath .slide__main--description{
    font-size:20px;
    line-height:32px;
    font-weight:600;
    color:#000;
    margin:10px;
    text-align:center
}
#smarticlepath .slide__main--description.margin--top{
    margin-top:40px
}
.survey__answers.survey__answers--list{
    text-align:center;
    margin-top:20px
}
.survey__answers.survey__answers--list{
    text-align:center;
    margin:0 auto;
    margin-top:20px;
    width:80%;
    display:flex;
    flex-direction:column
}
#smarticlepath .survey__button{
    width:70%;
    padding:5px
}
#smarticlepath .btn-continue{
    color:#000!important;
    background:0 0;
    border:none!important;
    transition:.3s all ease-in-out
}
@keyframes jump{
    0%{
        transform:translate(0,0) scale(1.25,.75)
    }
    50%{
        transform:translate(0,-50%) scale(1,1)
    }
    55%{
        transform:translate(0,-50%) rotate(15deg)
    }
    60%{
        transform:translate(0,-50%) rotate(-15deg)
    }
    65%{
        transform:translate(0,-50%) rotate(15deg)
    }
    70%{
        transform:translate(0,-50%) rotate(-15deg)
    }
    100%{
        transform:translate(0,0) scale(1.25,.75)
    }
}
@media (max-width:980px){
    .status-bar .status-bar-text{
        display:flex;
        flex-direction:column;
        justify-content:center;
        background:#2bc72b;
        color:#fff;
        padding:.3em
    }
    .status-bar-text h1{
        font-size:20px
    }
    .status-bar__status{
        margin-left:0
    }
    .custom-bar{
        width:50%
    }
    .brand{
        flex-direction:column
    }
    .brand__bottom>div{
        font-size:4.53333vw;
        line-height:9.6vw;
        min-width:9.6vw;
        background-size:9.6vw 95%
    }
    .brand__top{
        font-size:2.93333vw;
        line-height:4.8vw;
        position:relative;
        left:0;
        width:100%;
        margin-left:0;
        top:0;
        margin-top:0
    }
    .brand__bottom{
        width:75%
    }
    .brand img{
        width:100px;
        margin:10px auto 0
    }
    .form-container{
        width:100%
    }
    .form-group{
        width:90%;
        margin:10px auto
    }
    #smarticlepath .slide__main--description{
        font-size:18px;
        line-height:20px;
        font-weight:600;
        margin:4px 0;
        text-align:center
    }
    #smarticlepath .slide__main--description.margin--top{
        margin-top:30px
    }
    .survey__answers.survey__answers--list{
        width:100%;
        flex-direction:column
    }
    #smarticlepath .btn-continue,#smarticlepath .survey__button{
        width:90%;
        padding:5px;
        font-size:18px
    }
}