.badge.unearned,
.badge.unclaimed {
  opacity:.3333;
}

.badge {
  background: transparent url('../img/badge/generic.png') no-repeat top center;
  display: inline-block;
  font-size: 1.3rem;
  white-space: normal;
}

#top-badges .badge {
  background-size: 100% 100%;
  height: 108px;
  margin: 0 10px 10px;
  text-indent: -9999px;
  width: 108px;
}

#my-badges .badge {
  background-size: 77px 77px;
  color: #702bb0;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.025rem;
  margin-bottom: 65px;
  padding-top: 97px;
  text-align: center;
  vertical-align: top;
  white-space: normal;
  width: 116px;
}

#top-badges .badge.unclaimed,
#top-badges .badge.unearned {
  display: none;
}

#my-badges {
  text-align: center;
}

/*Individual Badges*/
.badge[name="rising-star-team"] {
  background-image: url('../img/badge/team/rising-star.png');
}

.badge[name="bronze-team"] {
  background-image: url('../img/badge/team/bronze.png');
}

.badge[name="silver-team"] {
  background-image: url('../img/badge/team/silver.png');
}

.badge[name="gold-team"] {
  background-image: url('../img/badge/team/gold.png');
}

.badge[name="platinum-team"] {
  background-image: url('../img/badge/team/platinum.png');
}

.badge[name="jade-team"] {
  background-image: url('../img/badge/team/jade.png');
}

.badge[name="sapphire-team"] {
  background-image: url('../img/badge/team/sapphire.png');
}

.badge[name="emerald-team"] {
  background-image: url('../img/badge/team/emerald.png');
}

.badge[name="ruby-team"] {
  background-image: url('../img/badge/team/ruby.png');
}

.badge[name="purple-team"] {
  background-image: url('../img/badge/team/purple.png');
}

.badge[name="turquoise-team"] {
  background-image: url('../img/badge/team/turquoise.png');
}

.badge[name="titanium-team"] {
  background-image: url('../img/badge/team/titanium.png');
}

.badge[name="cure-team"] {
  background-image: url('../img/badge/team/cure.png');
}

.badge[name="purple-club"] {
  background-image: url('../img/badge/individual/milestone/purple.png');
}

.badge[name="ruby-club"] {
  background-image: url('../img/badge/individual/milestone/ruby.png');
}

.badge[name="emerald-club"] {
  background-image: url('../img/badge/individual/milestone/emerald.png');
}

.badge[name="sapphire-club"] {
  background-image: url('../img/badge/individual/milestone/sapphire.png');
}

.badge[name="jade-club"] {
  background-image: url('../img/badge/individual/milestone/jade.png');
}

.badge[name="platinum-club"] {
  background-image: url('../img/badge/individual/milestone/platinum.png');
}

.badge[name="gold-club"] {
  background-image: url('../img/badge/individual/milestone/gold.png');
}

.badge[name="silver-club"] {
  background-image: url('../img/badge/individual/milestone/silver.png');
}

.badge[name="bronze-club"] {
  background-image: url('../img/badge/individual/milestone/bronze.png');
}

.badge[name="hope-club"] {
  background-image: url('../img/badge/individual/milestone/hope.png');
}

.badge[name="caregiver"] {
  background-image: url('../img/badge/individual/caregiver.png');
}

.badge[name="donor"] {
  background-image: url('../img/badge/individual/donor.png');
}

.badge[name="luminaria-purchaser"] {
  background-image: url('../img/badge/individual/luminaria-purchaser.png');
}

.badge[name="mobile-fundraiser"] {
  background-image: url('../img/badge/individual/mobile-fundraiser.png');
}

.badge[name="personalized-page"] {
  background-image: url('../img/badge/individual/personalized-page.png');
}

.badge[name="received-donations"] {
  background-image: url('../img/badge/individual/received-donations.png');
}

.badge[name="sent-emails"] {
  background-image: url('../img/badge/individual/sent-emails.png');
}

.badge[name="survivor"] {
  background-image: url('../img/badge/individual/survivor.png');
}

.badge[name="team-captain"] {
  background-image: url('../img/badge/individual/team-captain.png');
}

/* Hover states for badges */
.badge[name="donor"]:hover {
  background-image: url('../img/badge/individual/donor-hover.png');
}

.badge[name="personalized-page"]:hover {
  background-image: url('../img/badge/individual/personalized-page-hover.png');
}

.badge[name="luminaria-purchaser"]:hover {
  background-image: url('../img/badge/individual/luminaria-purchaser-hover.png');
}

.badge[name="mobile-fundraiser"]:hover {
  background-image: url('../img/badge/individual/mobile-fundraiser-hover.png');
}

.badge[name="received-donations"]:hover {
  background-image: url('../img/badge/individual/received-donations-hover.png');
}

.badge[name="sent-emails"]:hover {
  background-image: url('../img/badge/individual/sent-emails-hover.png');
}

.badge[name="caregiver"]:hover {
  background-image: url('../img/badge/individual/caregiver-hover.png');
}

.badge[name="survivor"]:hover {
  background-image: url('../img/badge/individual/survivor-hover.png');
}

.badge[name="team-captain"]:hover {
  background-image: url('../img/badge/individual/team-captain-hover.png');
}

@media only screen and (max-width: 767px) {
  #top-badges .badge {
    height: 40px;
    width: 40px;
  }

  #my-badges .badge {
    background-size: 57px 57px;
    font-size: 1.4rem;
    height: 117px;
    margin: 0 25px 20px 25px;
    padding-top: 67px;
    width: 70px;
  }

  /*Individual Badges */
  .badge[name="rising-star-team"] {
    background-image: url('../img/badge/team/rising-star.small.png');
  }

  .badge[name="bronze-team"] {
    background-image: url('../img/badge/team/bronze.small.png');
  }

  .badge[name="silver-team"] {
    background-image: url('../img/badge/team/silver.small.png');
  }

  .badge[name="gold-team"] {
    background-image: url('../img/badge/team/gold.small.png');
  }

  .badge[name="platinum-team"] {
    background-image: url('../img/badge/team/platinum.small.png');
  }

  .badge[name="jade-team"] {
    background-image: url('../img/badge/team/jade.small.png');
  }

  .badge[name="sapphire-team"] {
    background-image: url('../img/badge/team/sapphire.small.png');
  }

  .badge[name="emerald-team"] {
    background-image: url('../img/badge/team/emerald.small.png');
  }

  .badge[name="ruby-team"] {
    background-image: url('../img/badge/team/ruby.small.png');
  }

  .badge[name="purple-team"] {
    background-image: url('../img/badge/team/purple.small.png');
  }

  .badge[name="turquoise-team"] {
    background-image: url('../img/badge/team/turquoise.small.png');
  }

  .badge[name="titanium-team"] {
    background-image: url('../img/badge/team/titanium.small.png');
  }

  .badge[name="cure-team"] {
    background-image: url('../img/badge/team/cure.small.png');
  }

}
