#Infographic {
    width: 40em;
    margin: .5em auto;
    padding: 1em;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color: #fff;
    height: 40em;
}

#Infographic span {
    display: none;
}

.circle {
    border-radius: 50%;
    width: 25em;
    height: 25em;
    text-align: center;
    vertical-align: center;
    position: absolute;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 300px;
    border-radius: 100%;
}

#c1 {
    width: 30em;
    height: 30em;
    border: 2.5em solid #662B91;
    top: 0;
    left: 6.5em;
    z-index: 10;
}

/* #c2 {
    border: 2.5em solid #231f20;
    top: 22em;
    left: 0;
    z-index: 12;
} */
#c2 {
    background-image: linear-gradient(deepskyblue, mediumblue);
    position: relative;
    z-index: 1;
    top: 22em;
    left: 0;
    z-index: 12;
}

#c2::before {
    content: '';
    display: block;
    background-color: white;
    position: absolute;
    border-radius: 100%;
    height: 90%;
    width: 90%;
    z-index: -1;
}

#c3 {
    border: 2.5em solid #231f20;
    top: 22em;
    left: 18em;
    z-index: 9;
}

.arrow {
    position: absolute;
    width: 50px;
    height: 50px;
}

.arrow path {
    stroke: black;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.text {
    position: absolute;
    font-size: 1.25rem;
    font-weight: 500;
}

.joined {
    position: absolute;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#j12 {
    top: 5em;
    left: 15em;
    width: 10em;
    height: 7em;
    padding-top: 3em;
}

#j13 {
    top: 17em;
    left: 10em;
    width: 7em;
    height: 5em;
    padding-top: 2.5em;
}

#j23 {
    top: 17em;
    left: 23em;
    width: 7em;
    height: 5em;
    padding-top: 2.5em;
}

#all {
    top: 15em;
    left: 15em;
    width: 10em;
    height: 5em;
    padding-top: 1em;
}


.rings {
    list-style: none;
    /* margin: -9.75em -20.5em; */
    position: absolute;

    li {
      border-radius: 1em;
      font-size: 1em;
      height: 12em;
      margin-left: 1em;
      margin-top: 1em;
      position: absolute;
      width: 12em;

      &:before, &:after {
        border-radius: 50%;
        position: absolute;
      }

      &:before {
        content: "";
      }
    }

    li:after {
      border: 1.15em solid #000;
      bottom: 0;
      content: "";
      left: -0.1em;
      right: -0.1em;
      top: -0.1em;
    }

    .blue {
      left: 0;
      top: 0;
      z-index: 10;

      &:after {
        border-color: #0080cb;
      }

      +.chain {
        z-index: 24;

        &:before, &:after {
          border-bottom-color: transparent;
        }
      }
    }

    .yellow {
      left: 6.8em;
      top: 5.7em;
      z-index: 20;

      &:after {
        border-color: #fdb408;
      }

      +.chain {
        z-index: 23;

        &:before, &:after {
          border-right-color: transparent;
        }
      }
    }

    .black {
      left: 13.6em;
      top: 0;
      z-index: 21;

       &:after {
          border-color: #000;
      }
    }

    .green {
      left: 20.4em;
      top: 5.7em;
      z-index: 20;

      &:after {
        border-color: #00a84c;
      }

      +.chain  {
        z-index: 23;

        &:before, &:after {
          border-top-color: transparent;
        }
      }
    }

    .red {
      left: 27.2em;
      top: 0;
      z-index: 10;

      &:after {
        border-color: #f02c49;
      }

      +.chain {
        z-index: 23;

        &:before, &:after {
          border-left-color: transparent;
        }
      }
    }
  }