.loyalty__item {
    position: relative;
    display: none
}

.loyalty__item.current,
.loyalty__item.active {
    display: block
}

.loyalty__img,
.loyalty__item .piechart {
    width: 90px
}

.loyalty__item.done .piechart,
.loyalty__item .loyalty__img {
    display: none
}

.loyalty__item.done .loyalty__img {
    display: block
}

.loyalty__title {
    color: #fff;
    font-weight: 700;
    font-size: 1.802em;
    text-align: center;
    padding: .75rem 0
}

.loyalty__separator::after {
    position: relative;
    content: "\f105";
    font-family: FontAwesome;
    font-size: 60px;
    color: #ccc
}

.rtl-layout .loyalty__separator::after {
    content: "\f104"
}

.loyalty__item.current .loyalty__status::before,
.loyalty__item.current .loyalty__status::after {
    position: absolute;
    bottom: -3rem;
    left: 0;
    right: 0;
    content: "";
    width: 20px;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #bdbdbd;
    margin: 0 auto
}

.loyalty__item.current .loyalty__status::after {
    bottom: -3.080rem;
    border-bottom: 20px solid #fff
}

.loyalty-info__label {
    font-size: 1.125em;
    font-weight: bold
}

.loyalty-info__value {
    font-size: 1.424em;
    font-weight: bold;
    color: #d51820;
    text-align: left
}

.loyalty-points__imgTitle {
    font-weight: 700;
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 0;
    margin-top: .25rem
}

html[lang="ja"] .loyalty-points__imgTitle,
html[lang="vn"] .loyalty-points__imgTitle,
html[lang="el"] .loyalty-points__imgTitle {
    font-size: 1.5rem
}

.loyalty-points__imgTitle--bonus {
    color: #f57d26
}

.loyalty-points__imgTitle--usd {
    color: #6ecddd
}

.loyalty-points img {
    display: block;
    margin: 0 auto;
    max-width: 85px
}

@media(min-width:576px) {
    .loyalty__item {
        display: block
    }
    .loyalty-points__imgTitle {
        font-size: 2rem
    }
    html[lang="ja"] .loyalty-points__imgTitle,
    html[lang="vn"] .loyalty-points__imgTitle,
    html[lang="el"] .loyalty-points__imgTitle {
        font-size: 1.75rem
    }
    .loyalty-points img {
        max-width: 110px
    }
}

@media(min-width:768px) {
    .loyalty__item {
        width: 150px
    }
    .loyalty__img,
    .loyalty__item .piechart {
        margin: .75rem auto
    }
}

@media(min-width:992px) {
    .loyalty__item {
        width: 175px
    }
    .loyalty__img,
    .loyalty__item .piechart {
        width: 100px;
        margin: 1.25rem auto
    }
}

@media(min-width:1200px) {
    .loyalty__item {
        width: 200px
    }
    .loyalty__img,
    .loyalty__item .piechart {
        width: 110px
    }
}