.committee {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: calc(100vw - 40px);
}

.committee.mobile .ringName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  border-top: 2px solid var(--blue-med);
  padding: 10px 0 0 5px;
  margin: 10px 0;
}

.committee.mobile .ringName .number,
.committee.mobile .ringName .name {
  text-transform: uppercase;
  font-size: var(--F11);
}

.committee.mobile .ringName .name {
  font-weight: var(--black);
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .committee {
    max-width: 1440px;
    padding: var(--header-height) 0 90px;
    height: var(--app-height);
  }

  .committee.mobile {
    display: none;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .committee {
    overflow: hidden;
    padding: 120px 20px 110px;
  }
}

@media (min-width: 1920px) {
  .committee {
    max-width: 1760px;
  }
}

@media (min-width: 2560px) {
  .committee {
    max-width: 1920px;
  }
}

@media (min-width: 3840px) {
  .committee {
    max-width: 2560px;
  }
}

@media (max-width: 1023px) {
  .committee {
    flex-direction: column;
    justify-content: flex-start;
    min-height: calc(var(--app-height) - 80px);
    padding-top: var(--header-height);
    margin-bottom: 80px;
  }

  .committee.desktop {
    display: none;
  }
}

/* SECTION Rings */

.committeeRings .ringsPosition {
  position: relative;
  user-select: none;
  width: 620px;
  height: 290px;
  margin: 100px auto 80px;
}

.committeeRings .ringsPosition:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100px;
  top: calc(100% + 100px);
  background-image: url('/img/rings-shadow.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ANCHOR Media Query */

@media (min-width: 768px) {
  .committeeRings .ringsPosition {
    width: 620px;
    height: 290px;
  }
}

@media (min-width: 2560px) {
  .committeeRings .ringsPosition {
    width: 690px;
    height: 330px;
  }
}

@media (min-width: 3840px) {
  .committeeRings .ringsPosition {
    width: 940px;
    height: 450px;
  }
}

@media (max-width: 1023px) {
  .committeeRings .ringsPosition {
    max-width: 620px;
    max-height: 290px;
    margin: 180px auto 200px;
  }
}

@media (max-width: 767px) {
  .committeeRings {
    width: 100%;
  }
  .committeeRings .ringsPosition {
    width: calc(100% - 10px);
    height: 290px;
  }
}

.committeeRings .ring {
  width: var(--ring-size);
  height: var(--ring-size);
  display: flex;
  z-index: 1;
  position: absolute;
}

/* ANCHOR Media Query */

@media (max-width: 767px) {
  .committeeRings .ring {
    --ring-size: 100px;
    --ring-thickness: 10px;
  }
}

@media (min-width: 768px) {
  .committeeRings .ring {
    --ring-size: 200px;
    --ring-thickness: 20px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .committeeRings .ring {
    --ring-size: 200px;
    --ring-thickness: 18px;
  }
}

@media (min-width: 2560px) {
  .committeeRings .ring {
    --ring-size: 220px;
    --ring-thickness: 20px;
  }
}

@media (min-width: 3840px) {
  .committeeRings .ring {
    --ring-size: 300px;
    --ring-thickness: 29px;
  }
}

.committeeRings .ring:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: var(--ring-thickness) solid;
  top: 8px;
  left: 0;
  z-index: -1;
}

.committeeRings .ring h2 {
  font-size: var(--F12);
  font-weight: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  width: 110px;
  left: 50%;
  transform: translateX(-50%);
}

.committeeRings .ring h2 span {
  font-weight: var(--medium);
}

.committeeRings .ring:nth-child(odd) h2 {
  top: 40px;
}

.committeeRings .ring:nth-child(even) h2 {
  bottom: 40px;
}

/* ANCHOR Media Query */

@media (min-width: 3840px) {
  .committeeRings .ring:nth-child(odd) h2 {
    top: 60px;
  }

  .committeeRings .ring:nth-child(even) h2 {
    bottom: 60px;
  }
}

.committeeRings .ring.one {
  top: 0;
  left: 0;
}

.committeeRings .ring.two {
  bottom: 0;
  left: calc(33% - (var(--ring-size) / 2));
}

.committeeRings .ring.three {
  top: 0;
  left: calc(50% - (var(--ring-size) / 2));
}

.committeeRings .ring.four {
  bottom: 0;
  left: calc(66% - (var(--ring-size) / 2));
}

.committeeRings .ring.five {
  top: 0;
  left: calc(100% - var(--ring-size));
}

.committeeRings .ring .ringBorder {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: var(--ring-thickness) solid;
}

.committeeRings .ring.one .ringBorder {
  border-color: var(--blue-darker);
}

.committeeRings .ring.two .ringBorder {
  border-color: var(--blue-lighter);
}

.committeeRings .ring.three .ringBorder {
  border-color: var(--blue-dark);
}

.committeeRings .ring.four .ringBorder {
  border-color: var(--blue-light);
}

.committeeRings .ring.five .ringBorder {
  border-color: var(--blue-med);
}

.committeeRings .ring.one:before {
  border-color: var(--blue-darker-shadow);
}

.committeeRings .ring.two:before {
  border-color: var(--blue-lighter-shadow);
}

.committeeRings .ring.three:before {
  border-color: var(--blue-dark-shadow);
}

.committeeRings .ring.four:before {
  border-color: var(--blue-light-shadow);
}

.committeeRings .ring.five:before {
  border-color: var(--blue-med-shadow);
}

.committeeRings .membersWrapper {
  position: absolute;
}

.committeeRings .ring:nth-child(odd) .membersWrapper {
  bottom: calc(100% + 20px);
}

.committeeRings .ring:nth-child(even) .membersWrapper {
  top: calc(100% + 20px);
}

.committeeRings .ring.one .membersWrapper {
  left: 50%;
  transform: translateX(-50%);
}

.committeeRings .ring.two .membersWrapper {
  right: 0;
}

.committeeRings .ring.three .membersWrapper {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 70px);
}

.committeeRings .ring.four .membersWrapper {
  left: 0;
}

.committeeRings .ring.five .membersWrapper {
  left: 50%;
  transform: translateX(-50%);
}

.committeeRings .memberClick {
  font-size: var(--F15);
  font-weight: var(--black);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  color: var(--blue-darker);
}

.committeeRings .memberClick span {
  font-weight: var(--medium);
}

@media (hover: hover) {
  .committeeRings .memberClick:hover {
    background-color: var(--blue-darker);
  }

  .committeeRings .memberClick:hover p,
  .committeeRings .memberClick:hover span {
    color: var(--white);
  }
}

.committeeRings .memberClick.active {
  background-color: var(--blue-darker);
}

.committeeRings .memberClick.active p,
.committeeRings .memberClick.active span {
  color: var(--white);
}

/* !SECTION */

/* SECTION Content */

.committeeContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.committeeContent .wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.committee .wrapper .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.committeeContent .coordinator {
  font-size: var(--F12);
  margin: 0 0 2px 5px;
  text-transform: uppercase;
}

.committeeContent .accordionClick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: 20px;
  background-color: var(--blue-med);
  color: var(--white);
  text-transform: uppercase;
  font-size: var(--F13);
  font-weight: var(--black);
  padding: 2px 10px;
  position: relative;
  margin-bottom: 10px;
}

.committeeContent .accordionClick:not(.open) {
  color: var(--blue-darker);
}

.committeeContent .accordionClick .icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.committeeContent .accordionClick .icon svg * {
  fill: var(--white);
}

.committeeContent .accordionContent {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.committeeContent .imageWrapper {
  width: var(--image-size);
  height: var(--image-size);
  border-radius: 100%;
  overflow: hidden;
  user-select: none;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .committeeContent {
    max-width: 600px;
    margin-left: 100px;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 15px;
  }

  .committeeContent .accordionClick {
    display: none;
  }

  .committeeContent .wrapper {
    flex-direction: column;
  }

  .committeeContent .imageWrapper {
    --image-size: 170px;
  }

  .committeeContent .coordinator {
    display: none;
  }
}

@media (min-width: 1920px) {
  .committeeContent {
    max-width: 800px;
  }
}

@media (min-width: 2560px) {
  .committeeContent {
    max-width: 900px;
    margin-left: 200px;
  }
  .committeeContent .imageWrapper {
    --image-size: 200px;
  }
}

@media (min-width: 3840px) {
  .committeeContent {
    max-width: 1000px;
  }
  .committeeContent .imageWrapper {
    --image-size: 250px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .committeeContent {
    justify-content: flex-start;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .committeeContent .imageWrapper {
    --image-size: 130px;
  }
}

@media (max-width: 1023px) {
  .committeeContent {
    width: 100%;
  }

  .committeeContent .wrapper .divider,
  .committeeContent .wrapper .currentRing,
  .committeeContent .wrapper .name {
    display: none;
  }

  .committeeContent .imageWrapper {
    --image-size: 90px;
  }

  .committeeContent .accordionContent {
    margin-top: 10px;
  }

  .committeeContent .accordionContent:not(.open) {
    display: none;
  }

  .committeeContent .accordionClick:not(.open) .icon {
    transform: translateY(-50%) rotate(180deg);
  }
}

/* ANCHOR End Media Query */

.committeeContent .imageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.committeeContent .currentRing {
  font-size: var(--F18);
  font-weight: var(--regular);
  text-transform: uppercase;
  margin-top: var(--spacing-x1);
}

.committeeContent .subtitle,
.committeeContent .name {
  font-weight: var(--black);
  text-transform: uppercase;
}

.committeeContent .divider {
  margin: var(--spacing-x1) auto;
}

.committeeContent .position {
  font-weight: var(--black);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.committeeContent .content {
  width: 100%;
  font-weight: var(--regular);
  margin-top: var(--spacing-x1);
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .committeeContent .subtitle,
  .committeeContent .name {
    font-size: var(--F45);
    line-height: var(--F50);
    margin-top: 10px;
  }

  .committeeContent .content {
    font-size: var(--F16);
  }

  .committeeContent .position {
    font-size: var(--F17);
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .committeeContent .name {
    font-size: var(--F40);
    line-height: var(--F40);
  }
}

@media (max-width: 1023px) {
  .committeeContent .wrapper {
    justify-content: space-between;
  }

  .committeeContent .info {
    flex: 1 1 0;
    margin-left: 10px;
  }

  .committeeContent .subtitle,
  .committeeContent .name {
    font-size: var(--F18);
  }
  .committeeContent .position {
    font-size: var(--F13);
    line-height: var(--F14);
  }

  .committeeContent .content {
    font-size: var(--F13);
  }
}

/* ANCHOR End Media Query */

/* !SECTION */