vbp-colors.theme.css in Varbase Bootstrap Paragraphs 8.7

.paragraph.paragraph--color {
  display: table;
}

.paragraph.paragraph--color > .paragraph__column {
  padding-top: calc(1.325rem + 0.9vw);
  padding-bottom: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  .paragraph.paragraph--color > .paragraph__column {
    padding-top: 2rem;
  }
}

@media (min-width: 1200px) {
  .paragraph.paragraph--color > .paragraph__column {
    padding-bottom: 2rem;
  }
}

.paragraph.paragraph--color + .paragraph > .paragraph__column {
  padding-top: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  .paragraph.paragraph--color + .paragraph > .paragraph__column {
    padding-top: 2rem;
  }
}

.vbp_color_01 {
  color: #fff;
  background-color: #338ec7;
}

.vbp_color_01 a {
  color: #fff;
}

.vbp_color_01 a:hover,
.vbp_color_01 a:focus,
.vbp_color_01 a:active,
.vbp_color_01 a.is-active,
.vbp_color_01 a.active {
  color: #fff;
}

.vbp_color_02 {
  color: #fff;
  background-color: #2c3e50;
}

.vbp_color_02 a {
  color: #fff;
}

.vbp_color_02 a:hover,
.vbp_color_02 a:focus,
.vbp_color_02 a:active,
.vbp_color_02 a.is-active,
.vbp_color_02 a.active {
  color: #fff;
}

.vbp_color_03 {
  color: #fff;
  background-color: #a4a4a4;
}

.vbp_color_03 a {
  color: #fff;
}

.vbp_color_03 a:hover,
.vbp_color_03 a:focus,
.vbp_color_03 a:active,
.vbp_color_03 a.is-active,
.vbp_color_03 a.active {
  color: #fff;
}

.vbp_color_04 {
  color: #000;
  background-color: #d3d3d3;
}

.vbp_color_04 a {
  color: #000;
}

.vbp_color_04 a:hover,
.vbp_color_04 a:focus,
.vbp_color_04 a:active,
.vbp_color_04 a.is-active,
.vbp_color_04 a.active {
  color: #000;
}

.vbp_color_05 {
  color: #fff;
  background-color: #cc3c2d;
}

.vbp_color_05 a {
  color: #fff;
}

.vbp_color_05 a:hover,
.vbp_color_05 a:focus,
.vbp_color_05 a:active,
.vbp_color_05 a.is-active,
.vbp_color_05 a.active {
  color: #fff;
}

#drupal-off-canvas .vbp_color_01 {
  color: #fff;
  background-color: #338ec7;
}

#drupal-off-canvas .vbp_color_01 a {
  color: #fff;
}

#drupal-off-canvas .vbp_color_01 a:hover,
#drupal-off-canvas .vbp_color_01 a:focus,
#drupal-off-canvas .vbp_color_01 a:active,
#drupal-off-canvas .vbp_color_01 a.is-active,
#drupal-off-canvas .vbp_color_01 a.active {
  color: #fff;
}

#drupal-off-canvas .vbp_color_02 {
  color: #fff;
  background-color: #2c3e50;
}

#drupal-off-canvas .vbp_color_02 a {
  color: #fff;
}

#drupal-off-canvas .vbp_color_02 a:hover,
#drupal-off-canvas .vbp_color_02 a:focus,
#drupal-off-canvas .vbp_color_02 a:active,
#drupal-off-canvas .vbp_color_02 a.is-active,
#drupal-off-canvas .vbp_color_02 a.active {
  color: #fff;
}

#drupal-off-canvas .vbp_color_03 {
  color: #fff;
  background-color: #a4a4a4;
}

#drupal-off-canvas .vbp_color_03 a {
  color: #fff;
}

#drupal-off-canvas .vbp_color_03 a:hover,
#drupal-off-canvas .vbp_color_03 a:focus,
#drupal-off-canvas .vbp_color_03 a:active,
#drupal-off-canvas .vbp_color_03 a.is-active,
#drupal-off-canvas .vbp_color_03 a.active {
  color: #fff;
}

#drupal-off-canvas .vbp_color_04 {
  color: #000;
  background-color: #d3d3d3;
}

#drupal-off-canvas .vbp_color_04 a {
  color: #000;
}

#drupal-off-canvas .vbp_color_04 a:hover,
#drupal-off-canvas .vbp_color_04 a:focus,
#drupal-off-canvas .vbp_color_04 a:active,
#drupal-off-canvas .vbp_color_04 a.is-active,
#drupal-off-canvas .vbp_color_04 a.active {
  color: #000;
}

#drupal-off-canvas .vbp_color_05 {
  color: #fff;
  background-color: #cc3c2d;
}

#drupal-off-canvas .vbp_color_05 a {
  color: #fff;
}

#drupal-off-canvas .vbp_color_05 a:hover,
#drupal-off-canvas .vbp_color_05 a:focus,
#drupal-off-canvas .vbp_color_05 a:active,
#drupal-off-canvas .vbp_color_05 a.is-active,
#drupal-off-canvas .vbp_color_05 a.active {
  color: #fff;
}