.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;
  }
}