.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%);
}