/* infographic styles for all designs */
.infographic-comp {
  padding: 20px 20px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: center;
  border-radius: 10px;
}
.infographic-number.dollar::before {
  content: "\0024";
}
.infographic-number.percent::after {
  content: "\0025";
}
.infographic-number.minus::before {
  content: "\002D;";
}
.infographic-number.plus::after {
  content: "\002B";
}
a.infoglink {
  color: #000;
  text-decoration: none;
}
.infographic-comp > .infographic-headline {
  font-size: 21px;
  font-family: "Roboto", arial, sans-serif;
  font-weight: 700;
  line-height: 25px;
}
.infographic-comp > .countwrap {
  font-size: 45px;
  font-weight: 800;
  font-family: "Roboto", arial, sans-serif;
}
.infographic-comp > .infographic-desc {
  margin-top: 5px;
}
.infographic-comp.design1.middlepos,
.infographic-comp.design2.middlepos,
.infographic-comp.design3.middlepos,
.infographic-comp.design4.middlepos,
.infographic-comp.design5.middlepos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* ---------design1----------- */
.infographic-comp.design1 > .countwrap {
  /*color:#ffc423;*/
  color: var(--primary-color);
  text-shadow: none;
}
.infographic-comp.design1 > .infographic-media i {
  color: var(--primary-alt);
}
/* ---------design3  Black----------- */
.infographic-comp.design3 {
  background-color: black;
}

.infographic-comp.design3 > .countwrap {
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
.infographic-comp.design3 > .infographic-headline,
.infographic-comp.design3 > .infographic-desc {
  color: white;
}
.infographic-comp.design3 > .infographic-media i {
  color: #7ac142;
}
/* ---------design4 Dark Blue----------- */
.infographic-comp.design4 {
  background-color: var(--primary-color);
}

.infographic-comp.design4 > .countwrap {
  color: #ffffff;
/*   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); */
}
.infographic-comp.design4 > .infographic-headline,
.infographic-comp.design4 > .infographic-desc,
.infographic-comp.design4 > .infographic-media i {
  color: #ffffff;
}
.infographic-comp.design4 a { color: var(--white);} infographic-comp.design4 a:hover,  infographic-comp.design4 a:focus {color: var(--white);}
/* ---------design2----------- */
.infographic-comp.design2 {
  box-shadow: rgb(0 0 0 / 5%) 0px 6px 24px 0px, rgb(0 0 0 / 8%) 0px 0px 0px 1px;
}
.infographic-comp.design2 > .countwrap {
  color: var(--primary-color);
  text-shadow: none;
}
.infographic-comp.design2 > .infographic-media i {
  color: var(--primary-alt);
}
@media (max-width: 991px) {
  .infographic-comp > .infographic-headline {
    font-size: 20px;
  }

  .infographic-comp > .countwrap {
    font-size: 40px;
  }

  .infographic-comp > .fa-5x {
    font-size: 4em;
  }
}