#background-banner-blck {
  display: table;
  width: 100vw;
  height: var(--background-banner-height);
  position: absolute;
  overflow: hidden;
  z-index: -2;
  top: 0px;
  left: 0px;
  right: 0px;
}

#b-b-layout {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  margin-top: calc(var(--background-banner-height) / 1);
}

.b-b-circle {
  transform: rotate(9.4deg);
}

.b-b-circle-color {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: var(--background-banner-radius);
  height: var(--background-banner-radius);
  left: calc(50% - var(--background-banner-radius-half));
  top: calc(50% - var(--background-banner-radius-half));
  clip: rect(0, var(--background-banner-radius), var(--background-banner-radius), var(--background-banner-radius-half));
}

.b-b-circle-color:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: var(--background-banner-radius);
  height: var(--background-banner-radius);
  left: calc(50% - var(--background-banner-radius-half));
  top: calc(50% - var(--background-banner-radius-half));
  clip: rect(0, var(--background-banner-radius-half), var(--background-banner-radius), 0);
  transform: rotate(45deg);
}

.b-b-circle-color,
.b-b-circle-color:nth-child(n+11):after {
  clip: rect(0, var(--background-banner-radius), var(--background-banner-radius), var(--background-banner-radius-half));
}

.b-b-circle-color:after,
.b-b-circle-color:nth-child(n+11) {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: var(--background-banner-radius);
  height: var(--background-banner-radius);
  left: calc(50% - var(--background-banner-radius-half));
  top: calc(50% - var(--background-banner-radius-half));
  clip: rect(0, var(--background-banner-radius-half), var(--background-banner-radius), 0);
}

.b-b-circle-color:nth-child(1):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 1));
  z-index: 19;
}

.b-b-circle-color:nth-child(2):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 2));
  z-index: 18;
}

.b-b-circle-color:nth-child(3):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 3));
  z-index: 17;
}

.b-b-circle-color:nth-child(4):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 4));
  z-index: 16;
}

.b-b-circle-color:nth-child(5):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 5));
  z-index: 15;
}

.b-b-circle-color:nth-child(6):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 6));
  z-index: 14;
}

.b-b-circle-color:nth-child(7):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 7));
  z-index: 13;
}

.b-b-circle-color:nth-child(8):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 8));
  z-index: 12;
}

.b-b-circle-color:nth-child(9):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 9));
  z-index: 11;
}

.b-b-circle-color:nth-child(10):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 10));
  z-index: 10;
}

.b-b-circle-color:nth-child(11):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 10));
}

.b-b-circle-color:nth-child(12):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 11));
}

.b-b-circle-color:nth-child(13):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 12));
}

.b-b-circle-color:nth-child(14):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 13));
}

.b-b-circle-color:nth-child(15):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 14));
}

.b-b-circle-color:nth-child(16):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 15));
}

.b-b-circle-color:nth-child(17):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 16));
}

.b-b-circle-color:nth-child(18):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 17));
}

.b-b-circle-color:nth-child(19):after {
  transform: rotate(calc(var(--background-banner-color-rotate) * 18));
}

.b-b-circle-color:nth-child(2):after,
.b-b-circle-color:nth-child(4):after,
.b-b-circle-color:nth-child(15):after,
.b-b-circle-color:nth-child(17):after,
.b-b-circle-color:nth-child(19):after {
  background-color: var(--background-banner-color);
}

.b-b-circle-color:nth-child(1):after,
.b-b-circle-color:nth-child(3):after,
.b-b-circle-color:nth-child(5):after,
.b-b-circle-color:nth-child(6):after,
.b-b-circle-color:nth-child(7):after,
.b-b-circle-color:nth-child(8):after,
.b-b-circle-color:nth-child(9):after,
.b-b-circle-color:nth-child(10):after,
.b-b-circle-color:nth-child(11):after,
.b-b-circle-color:nth-child(12):after,
.b-b-circle-color:nth-child(13):after,
.b-b-circle-color:nth-child(14):after,
.b-b-circle-color:nth-child(16):after,
.b-b-circle-color:nth-child(18):after {
  background-color: var(--background-color);
}