.badges {
    display:inline-block;
    overflow:hidden;
    background-repeat: no-repeat;
    margin: auto;
    transform: scale(0.5) translate(0%, 0%);
    position: absolute;
    top: -50%;
    left: -50%;
    background-image:url(../sprites/badge_100.png);
}

.badges-container {
    height: 50px;
    width: 50px;
    margin: auto;
    position: relative;
}

.badge_0 {width:100px; height:100px; background-position: -1px -1px}
.badge_1 {width:100px; height:100px; background-position: -103px -1px}
.badge_10 {width:100px; height:100px; background-position: -1px -205px}
.badge_11 {width:100px; height:100px; background-position: -103px -205px}
.badge_12 {width:100px; height:100px; background-position: -205px -205px}
.badge_13 {width:100px; height:100px; background-position: -307px -205px}
.badge_14 {width:100px; height:100px; background-position: -409px -205px}
.badge_15 {width:100px; height:100px; background-position: -1px -307px}
.badge_16 {width:100px; height:100px; background-position: -103px -307px}
.badge_17 {width:100px; height:100px; background-position: -205px -307px}
.badge_18 {width:100px; height:100px; background-position: -307px -307px}
.badge_19 {width:100px; height:100px; background-position: -409px -307px}
.badge_2 {width:100px; height:100px; background-position: -205px -1px}
.badge_20 {width:100px; height:100px; background-position: -1px -409px}
.badge_21 {width:100px; height:100px; background-position: -103px -409px}
.badge_22 {width:100px; height:100px; background-position: -205px -409px}
.badge_23 {width:100px; height:100px; background-position: -307px -409px}
.badge_24 {width:100px; height:100px; background-position: -409px -409px}
.badge_25 {width:100px; height:100px; background-position: -1px -511px}
.badge_26 {width:100px; height:100px; background-position: -103px -511px}
.badge_27 {width:100px; height:100px; background-position: -205px -511px}
.badge_28 {width:100px; height:100px; background-position: -307px -511px}
.badge_29 {width:100px; height:100px; background-position: -409px -511px}
.badge_3 {width:100px; height:100px; background-position: -307px -1px}
.badge_30 {width:100px; height:100px; background-position: -1px -613px}
.badge_31 {width:100px; height:100px; background-position: -103px -613px}
.badge_32 {width:100px; height:100px; background-position: -205px -613px}
.badge_33 {width:100px; height:100px; background-position: -307px -613px}
.badge_34 {width:100px; height:100px; background-position: -409px -613px}
.badge_35 {width:100px; height:100px; background-position: -1px -715px}
.badge_36 {width:100px; height:100px; background-position: -103px -715px}
.badge_37 {width:100px; height:100px; background-position: -205px -715px}
.badge_38 {width:100px; height:100px; background-position: -307px -715px}
.badge_39 {width:100px; height:100px; background-position: -409px -715px}
.badge_4 {width:100px; height:100px; background-position: -409px -1px}
.badge_40 {width:100px; height:100px; background-position: -1px -817px}
.badge_5 {width:100px; height:100px; background-position: -1px -103px}
.badge_6 {width:100px; height:100px; background-position: -103px -103px}
.badge_7 {width:100px; height:100px; background-position: -205px -103px}
.badge_8 {width:100px; height:100px; background-position: -307px -103px}
.badge_9 {width:100px; height:100px; background-position: -409px -103px}


.leaderboard-badge i {
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    height: 45px;
    width: 41px;
    vertical-align: middle;
    display: inline-block;
}

.leaderboard-avatar {
    height: 40px;
    background: #ffffff;
    margin-right: 10px;
    border-radius: 10px;
}

@media (max-width: 575.98px) { 
    .leaderboard-badge i {
        height: 35px;
        width: 32px;
    }
    .leaderboard-avatar {
        height: 30px;
    }
}

@media (max-height: 450px) { 
    .leaderboard-badge i {
        height: 35px;
        width: 32px;
    }
    .leaderboard-avatar {
        height: 30px;
    }
 }