.hub--start-order-background {
    display: flex;    
    /* align-items: center;*/
    background-repeat: repeat;
    flex: 1;
    max-width: 1200px;
    background-image: url(../images/Reward/background/Pattern-Repeat.png);
    padding-left: 5%;
    padding-top: 120px;    
}
.main-hub{
    display:flex;
}

.hub--start-order-background .button--primary.red.bolder {
    width: 70%;
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 3vw;
}

.hub--start-order--text {
    display: flex;
    flex-direction: column;
    font-size: 1.3em;
    margin-left: 1em;
}

.hub--start-order-background--welcome {
    display: flex;
    align-items: flex-start;
}
.hub--start-order-content{
    height:auto;
    margin-bottom:auto;
    display:flex;
    flex-flow:row;
}
.hub--content {   
    padding: 2% 5%;
    display: block;    
    align-items: center;    
}

.hub--content .order-card {
    margin-bottom: 1em;
}

.hub--content .order-card {
    max-width: 600px;
    width: 100%;
}

#point-balance-card {
    padding: 2em 2em;
    font-size: 0.8em;
}

.order-card img {
    width: 100%;
}

#point-balance-card .redline img {
    width: 60%;
}
.claim-points-btn{
    max-width:220px;
}
/* --------progress-bar------------ */
.order-card--wrapper-progressbar {
    margin-top: 2em;
    width: 100%
}

.progressbar li {
    list-style-type: none;
    float: left;
    position: relative;
    font-size: 1.5em;
    font-weight: 600;
    z-index: 2;
    text-align: center;
}

ul.progressbar[steps="2"] li {
    width: 49%;
}

ul.progressbar[steps="3"] li {
    width: 33%;
}

ul.progressbar[steps="4"] li {
    width: 24%;
}

ul.progressbar[steps="5"] li {
    width: 19%;
}

ul.progressbar[steps="6"] li {
    width: 16%;
}

ul.progressbar[steps="7"] li {
    width: 14%;
}

ul.progressbar[steps="8"] li {
    width: 12%;
}

ul.progressbar[steps="9"] li {
    width: 11%;
}

.progressbar li:before {
    content: " ";
    border-radius: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid var(--main-primary-color);
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    background-color: white;
}

.progressbar li#progressbar-first-circle::after {
    left: -40%;
    width: 120%;
    height: 4%;
}

.progressbar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5%;
    background-color: var(--main-primary-color);
    top: 12%;
    left: -30%;
    z-index: -1;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active:before {
    border-color: var(--main-primary-color);
    background-color: var(--main-primary-color)
}

.progressbar .active:after {
    background-color: var(--main-primary-color);
}

.progressbar li.redline:after {
    top: 10%;
}


/* --------reedem card------ */

.order-card .button--primary.red {
    margin: 1em 0;
    /*font-size: 0.9em;*/
    font-weight: 600;
    /*padding: 0.6em 1.4em;*/
    display: inline-block;
}

.order-card .circle {
    margin-top: 0.5em;
}

.order-card h1 {
    margin-top: 0.2em;
    font-size:1.8em;
}
@media (max-width:1024px) and  (min-width:769px) {
    .hub--start-order--text h1 {
        font-size: 30px;
    }
}
@media (max-width:820px) and (min-width:769px) {
    .hub--start-order-background {
        padding-left: 2%;
    }
}

@media (min-width:769px) {
    .hub--start-order-background {
        min-height: 400px;
    }
}
@media (max-width:376px) {
    .progressbar li:after {        
        left: -33%;        
    }
}
@media (max-width:450px) and (min-width:377px) {
    .progressbar li:after {
        left: -35%;
    }
}
@media (max-width:768px ) and (min-width:451px) {
    .progressbar li:after {
        left: -42%;
    }
}

    @media (max-width:768px) {
      

        main {
            flex-direction: column;
        }

        .hub--start-order-content {
            padding-top: 1em;
            align-items: center;
            width: 100%;
            flex-wrap: wrap;
        }

        .claim-points-btn {
            align-self: center;
        }

        .hub--start-order-background {
            height: 15vh;
            padding: 0;
            flex: none;
        }

            .hub--start-order-background div.flex.flex-align-start {
                padding-top: 1em;
                align-items: center;
                width: 100%;
            }

            .hub--start-order-background img {
                width: 10%;
                margin-left: 1em;
                margin-right: 0.5em;
            }

        .hub--start-order--text {
            align-items: baseline;
            display: flex;
            font-size: 0.6em;
            flex-direction: row;
            margin-bottom: auto;
            margin-top: auto;
        }

        .hub--start-order-background .button--primary.red.show-only-mobile {
            margin: auto;
            margin-top: 10px;
            width: 70%;
            display: block;
        }
    }