.circle-container {
  position: relative;
  width: 28em;
  height: 28em;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  margin: 5em auto 0;
}
.circle-container > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 6em;
  margin: -3em;
}
.circle-container > *:nth-of-type(1) {
  transform: rotate(0deg) translate(14em) rotate(0deg);
}
.circle-container > *:nth-of-type(2) {
  transform: rotate(45deg) translate(14em) rotate(-45deg);
}
.circle-container > *:nth-of-type(3) {
  transform: rotate(90deg) translate(14em) rotate(-90deg);
}
.circle-container > *:nth-of-type(4) {
  transform: rotate(135deg) translate(14em) rotate(-135deg);
}
.circle-container > *:nth-of-type(5) {
  transform: rotate(180deg) translate(14em) rotate(-180deg);
}
.circle-container > *:nth-of-type(6) {
  transform: rotate(225deg) translate(14em) rotate(-225deg);
}
.circle-container > *:nth-of-type(7) {
  transform: rotate(270deg) translate(14em) rotate(-270deg);
}
.circle-container > *:nth-of-type(8) {
  transform: rotate(315deg) translate(14em) rotate(-315deg);
}
.circle-container img {
  display: block;
  max-width: 100%;
  border-radius: 50%;
  filter: grayscale(100%);
  transition: 0.15s;
}
.circle-container img:hover, .circle-container img:active {
  filter: grayscale(0);
}/*# sourceMappingURL=circle.css.map */