.grey {
  background: $grey;
}
.cyan {
  background: $cyan;
}
.green {
  background: $green;
}
.yellow {
  background: $yellow;
}
.orange {
  background: $orange;
}
.red {
  background: $red;
}
.purple {
  background: $purple;
}
.pink {
  background: $pink;
}

.lighten-green {
  background: lighten($green, 17%) !important;
}
.lighten-grey {
  background: lighten($grey, 17%) !important;
}
.lighten-yellow {
  background: lighten($yellow, 17%) !important;
}
.lighten-orange {
  background: lighten($orange, 17%) !important;
}
.lighten-purple {
  background: lighten($purple, 17%) !important;
}
.lighten-cyan {
  background: lighten($cyan, 17%) !important;
}
.lighten-pink {
  background: lighten($pink, 17%) !important;
}
.lighten-red {
  background: lighten($red, 17%) !important;
}

div.background-material {
  position: absolute;
  background: linear-gradient(
    to bottom,
    $primary 0%,
    $primary 200px,
    $primary 200px,
    white 200px,
    white 100%
  );
}