.circle-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.circle-container {
  position: relative;
  width: 350px;
  height: 350px;
}
.circle {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease, left 0.8s ease, top 0.8s ease;
}
.circle img {
  width: 120px;
  height: auto;
  border-radius: 50%;
}
.center {
  /*background: #3A99BB;*/
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 2;
}
.blue { background: #F4AF76; }
.yellow { background: #F16800; }
.red { background: #9CCCDD; }
.green { background: #3A99BB; }
.orange { background: #F4AF76; }
.teal { background: #F16800; }

/* Tablet */
@media (max-width: 1024px) {
  .circle { width: 85px; height: 85px; }
  .circle img { width: 80px; }
  .circle-container { width: 300px; height: 300px; }
}
/* Mobile */
@media (max-width: 600px) {
  .circle { width: 70px; height: 70px; }
  .circle img { width: 65px; }
  .circle-container { width: 240px; height: 240px; }
}