:root {
  --color-bg: #FFF !important;
  --color-bg-2: #edf8fb !important;
  --color-1: #00bbf8 !important;
  --color-2: #32a6d1 !important;
  --color-grey: #8a8b8b !important;
  --color-black: #000 !important;

}

.color-var-bg {
  color: var(--color-bg);
}

.color-var-1 {
  color: var(--color-1);
}

.color-var-2 {
  color: var(--color-2);
}

.color-var-grey {
  color: var(--color-grey);
}

.color-var-black {
  color: var(--color-black);
}


.bgcolor-var-bg {
  background-color: var(--color-bg);
}

.bgcolor-var-1 {
  background-color: var(--color-1);
  color: #FFF;
  transition: all .4s;

  &:hover {
    background-color: var(--color-2);
    color: #FFF;

  }
}

.bgcolor-var-bg-2 {
  background-color: var(--color-bg-2);
  color: #FFF;
  transition: all .4s;

  &:hover {
    background-color: var(--color-bg-2);
    color: #FFF;

  }
}

.bgcolor-var-2 {
  background-color: var(--color-2);
  color: #FFF;
}

.bgcolor-var-grey {
  background-color: var(--color-grey);
}

.bgcolor-var-black {
  background-color: var(--color-black);
}

/*
    var(--color-bg)
    var(--color-bg-2)
    var(--color-1)
    var(--color-2)
    var(--color-grey)
    var(--color-black)
 */