body {
	counter-reset: figCaptionCounter;
}


figure {
    border: thin #a0a0a0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}

figcaption {
    display: block;  
    /* background-color: rgb(214, 214, 214); */
    color: black;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
    width:100%;
    height:20%;
    counter-increment: figCaptionCounter;
}

figcaption:before {
	content: counter(figCaptionCounter) '. ';
}


.label,
.badge {
  background-color: #b5b5b5;
  color: #fff;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  font-weight: bold;
  padding: 3px 7px;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.label {
  border-radius: 4px;
  display: inline;
}

.badge {
  border-radius: 10px;
  display: inline-block;
  padding: 1px 7px;
}

.label[href]:hover, .label[href]:focus {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

a.badge:hover, a.badge:focus {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.label a,
.badge a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.label:empty,
.badge:empty {
  display: none;
}

.bg-red {
    background-color: #d9534f !important;
}

.bg-green {
    background-color: #5cb85c !important;
}

.bg-yellow {
    background-color: #ed9c28 !important;
}