.badge.badge-30 {
  height: 30px;
  width: 30px;
  position: relative;
}

.badge.badge-30 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(30px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-30 .tag.tag-xs {
  top: -3px;
  left: calc(30px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-30 .img-circle {
  z-index: 1;
  max-width: 30px;
  width: 30px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge.badge-40 {
  height: 40px;
  width: 40px;
  position: relative;
}

.badge.badge-40 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(40px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-40 .tag.tag-xs {
  top: -3px;
  left: calc(40px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-40 .img-circle {
  z-index: 1;
  max-width: 40px;
  width: 40px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge.badge-50 {
  height: 50px;
  width: 50px;
  position: relative;
}

.badge.badge-50 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(50px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-50 .tag.tag-xs {
  top: -3px;
  left: calc(50px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-50 .img-circle {
  z-index: 1;
  max-width: 50px;
  width: 50px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge.badge-60 {
  height: 60px;
  width: 60px;
  position: relative;
}

.badge.badge-60 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(60px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-60 .tag.tag-xs {
  top: -3px;
  left: calc(60px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-60 .img-circle {
  z-index: 1;
  max-width: 60px;
  width: 60px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge.badge-70 {
  height: 70px;
  width: 70px;
  position: relative;
}

.badge.badge-70 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(70px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-70 .tag.tag-xs {
  top: -3px;
  left: calc(70px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-70 .img-circle {
  z-index: 1;
  max-width: 70px;
  width: 70px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge.badge-80 {
  height: 80px;
  width: 80px;
  position: relative;
}

.badge.badge-80 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(80px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-80 .tag.tag-xs {
  top: -3px;
  left: calc(80px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-80 .img-circle {
  z-index: 1;
  max-width: 80px;
  width: 80px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge.badge-90 {
  height: 90px;
  width: 90px;
  position: relative;
}

.badge.badge-90 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(90px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-90 .tag.tag-xs {
  top: -3px;
  left: calc(90px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-90 .img-circle {
  z-index: 1;
  max-width: 90px;
  width: 90px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge.badge-100 {
  height: 100px;
  width: 100px;
  position: relative;
}

.badge.badge-100 .tag {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: calc(100px * 0.66);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
  border-width: 0;
}

.badge.badge-100 .tag.tag-xs {
  top: -3px;
  left: calc(100px * 0.66)-3px;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.badge.badge-100 .img-circle {
  z-index: 1;
  max-width: 100px;
  width: 100px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.badge-demos .badge {
  float: left;
  display: block;
  margin-right: 10px;
}