.circle-container {
  position: relative;
  width: 40em;
  height: 40em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
  border: solid 5px tomato; }
  .circle-container > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7.5em;
    width: 15em;
    height: 15em; }
    .circle-container > *:nth-of-type(1) {
      transform: rotate(0deg) translate(20em) rotate(0deg); }
    .circle-container > *:nth-of-type(2) {
      transform: rotate(60deg) translate(20em) rotate(-60deg); }
    .circle-container > *:nth-of-type(3) {
      transform: rotate(120deg) translate(20em) rotate(-120deg); }
    .circle-container > *:nth-of-type(4) {
      transform: rotate(180deg) translate(20em) rotate(-180deg); }
    .circle-container > *:nth-of-type(5) {
      transform: rotate(240deg) translate(20em) rotate(-240deg); }
    .circle-container > *:nth-of-type(6) {
      transform: rotate(300deg) translate(20em) rotate(-300deg); }
  .circle-container img {
    display: block;
    max-width: 100%;
    border-radius: 50%;
    filter: grayscale(100%);
    border: solid 5px tomato;
    transition: .15s; }
    .circle-container img:hover {
      filter: grayscale(0); }
  .circle-container li {
    text-align: center;
    background: #cccccc;
    border-radius: 50%; }
  .circle-container li.bg_orange {
    background: #e79b49; }
  .circle-container li.bg_yellow {
    background: #FFC000; }
  .circle-container li.bg_blue {
    background: #3f96d2;
    color: #FFF; }
  .circle-container li.bg_green {
    background: #70AD47; }
  .circle-container li.bg_red {
    background: #ab1919;
    color: #FFF; }
  .circle-container .circle-border {
    height: 100%;
    padding: 10px;
    position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center; }
  .circle-container .circle-border > div {
    padding: 10px; }
  .circle-container h3 {
    margin-bottom: 0;
    font-size: 20px; }

/*# sourceMappingURL=circledisplay.css.map */