.bg-white {
  background-color: #FFFFFF !important;
  color: #222222;
}
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6,
.bg-white p,
.bg-white ul,
.bg-white ol {
  color: #222222;
}
.bg-white blockquote::before {
  background-color: #222222;
}

.bg-dark-blue {
  background-color: #141DF0;
}

.bg-blue {
  background-color: #4E3FFB;
}
.bg-blue h1,
.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue h5,
.bg-blue h6,
.bg-blue p,
.bg-blue a,
.bg-blue ul,
.bg-blue ol {
  color: #FFFFFF;
}
.bg-blue blockquote::before {
  background-color: #FFFFFF;
}
.bg-blue .button-arrow-container a::after {
  background: url("../img/icons/icon--arow-right-light-green.svg");
}

.bg-blue-gradient {
  background: linear-gradient(to right, #4E3FFB, #644CFF);
  color: #FFFFFF;
}
.bg-blue-gradient h1,
.bg-blue-gradient h2,
.bg-blue-gradient h3,
.bg-blue-gradient h4,
.bg-blue-gradient h5,
.bg-blue-gradient h6,
.bg-blue-gradient p,
.bg-blue-gradient a,
.bg-blue-gradient ul,
.bg-blue-gradient ol {
  color: #FFFFFF;
}
.bg-blue-gradient blockquote::before {
  background-color: #FFFFFF;
}
.bg-blue-gradient .button-arrow-container a::after {
  background: url("../img/icons/icon--arow-right-light-green.svg");
}

.bg-indigo {
  background-color: #4E3FFB;
}
.bg-indigo .button-arrow-container a::after {
  background: url("../img/icons/icon--arow-right-light-green.svg");
}
.bg-indigo h1,
.bg-indigo h2,
.bg-indigo h3,
.bg-indigo h4,
.bg-indigo h5,
.bg-indigo h6,
.bg-indigo p,
.bg-indigo a,
.bg-indigo ul,
.bg-indigo ol {
  color: #FFFFFF;
}
.bg-indigo blockquote::before {
  background-color: #FFFFFF;
}

.bg-green {
  background-color: #7DF4DC;
  color: #000000;
}

.bg-gray {
  background-color: #f5f5f7;
  color: #222222;
}
.bg-gray h1,
.bg-gray h2,
.bg-gray h3,
.bg-gray h4,
.bg-gray h5,
.bg-gray h6,
.bg-gray p,
.bg-gray ul,
.bg-gray ol {
  color: #222222;
}
.bg-gray blockquote::before {
  background-color: #222222;
}

.bg-light-gray {
  background-color: #f8f8f8;
}

.bg-black {
  background-color: #000000;
}

.bg-dots {
  background-image: radial-gradient(#f1f1f1 13%, transparent 13%);
  background-size: 40px 40px;
  background-position: 13px -12px;
  background-repeat: repeat;
}

.bg-dots--white {
  background-image: radial-gradient(#dfdfdf 13%, transparent 13%);
  background-size: 40px 40px;
  background-position: 13px -12px;
  background-repeat: repeat;
}

.dark-bg-dots {
  background-image: radial-gradient(#5643e4 13%, transparent 13%);
  background-size: 40px 40px;
  background-position: 13px -12px;
  background-repeat: repeat;
}