:root {
  --primary: #23366B;
  --secondary: #81BC40;
  --highlight: #218ACB;
  --fontfamily:"Open Sans", sans-serif;
}

.wedge .segment {
  fill: var(--highlight);
  stroke: var(--primary);
  stroke-width: 2px;
}
.wedge:hover .segment, .wedge.active .segment {
  fill: var(--secondary);
  transition: ease-in-out 0.2s;
}
.wedge:hover .label, .wedge.active .label {
  fill: var(--primary);
  transition: ease-in-out 0.2s;
}

.label {
  fill: white;
}

.central-circle {
  fill: var(--primary);
}

.center-circle-text {
  fill: #fff;
}

.as-logo-center {
  fill: #fff;
}

.infographic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}
.infographic .content-section {
  display: none;
}
.infographic .content-section.active {
  display: block;
}
@media screen and (min-width: 1075px) {
  .infographic {
    grid-template-columns: 2fr 3fr;
    gap: 5vw;
  }
  .infographic .panel-image {
    order: 2;
  }
  .infographic .panel-content {
    order: 1;
  }
}
@media screen and (min-width: 1440px) {
  .infographic {
    grid-template-columns: 1fr 1fr;
  }
}