:root {
  // Scale is using this font-size
  --font-size: 0.8em;

  --bg1: #f5f8f7;
  --blue: #3498db;
  --green: #2ecc71;
  --purple: #9b59b6;
  --gold: #f1c40f;
  --red: #e74c3c;
  --orange: #e67e22;
  --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;
  --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022;
}
.fontColor1 {
        color: var(--blue);
      }
.fontColor2 {
        color: var(--green);
      }
.fontColor3 {
        color: var(--purple);
      }
.fontColor4 {
        color: var(--gold);
      }
.fontColor5 {
        color: var(--orange);
      }
main {
  /*padding: 2vw;*/
}

ul.infoGraphic {
  // Resize with Ems
  font-size: var(--font-size);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  li {
    position: relative;
    width: 100%;
    max-width: 14em;
    background: var(--bg1);
    border-radius: 0.5em;
    /*padding: 0.5em;*/
    z-index: 1;
    transition: all 0.2s;
    cursor: pointer;
    
    .numberWrap {
      position: absolute;
    }
    .number {
      font-family: "maven pro", sans-serif;
      font-size: 11em;
      font-weight: 900;
      width: 0.9em;
      text-align: center;
      &.fontColor1 {
        color: var(--blue);
      }
      &.fontColor2 {
        color: var(--green);
      }
      &.fontColor3 {
        color: var(--purple);
      }
      &.fontColor4 {
        color: var(--gold);
      }
      &.fontColor5 {
        color: var(--red);
      }
      &.fontColor6 {
        color: var(--orange);
      }
    }
    .coverWrap {
      transform: rotate(130deg);
      position: absolute;
      width: 18em;
      height: 15em;
      left: -3em;
      opacity:0.92;
      top: -1em;
      .numberCover {
        position: absolute;
        background: var(--bg1);
        width: 18em;
        height: 6em;
        border-radius: 50% 50% 0 0;
        border-bottom: 3px solid #f5f8f7;
        transition: all 0.4s;
        padding:30px;
        &::before {
          position: absolute;
          content: "";
          bottom: 5px;
          left: 4em;
          right: 4em;
          top: 5em;
          box-shadow: 0 0 30px 17px #48668577;
          border-radius: 100px / 10px;
          z-index: -1;
        }
        &::after {
          position: absolute;
          bottom: 0;
          content: "";
          left: -10%;
          width: 120%;
          height: 150%;
          background: radial-gradient(
            at bottom,
            #48668533,
            transparent,
            transparent
          );
          z-index: 1;
        }
      }
    }
    .numberCover:hover{
        border-radius:50%;
    }
    .content {
      margin: 8em 3em 1em 7em;
      position: relative;
    }
  }
}

// I like the curved version too, so I made it a hover for fun.
ul.infoGraphic li:hover .coverWrap .numberCover {
  border-radius: 50%;
}


}

.iconCodepen {
  &:before {
    content: "\f1cb";
  }
}

.iconSocial {
  &:before {
    content: "\f08a";
  }
}

.iconAirplane {
  &:before {
    content: "\f1d9";
  }
}

.iconMap {
  &:before {
    content: "\f278";
  }
}

.iconBulb {
  &:before {
    content: "\f0eb";
  }
}

.iconPeace {
  &:before {
    content: "\f25b";
  }
}


}
@media (max-width: 767px) {
    ul.infoGraphic{
        display: flex;
  flex-direction: column;
    }
}