<style type=“text/css”>

/* background-color */
.background-color-vibrant{ background-color: {{ rgbVibrant }} !important; }
.background-color-light-vibrant{ background-color: {{ rgbLightVibrant }} !important; }
.background-color-dark-vibrant{ background-color: {{ rgbDarkVibrant }} !important; }
.background-color-muted{ background-color: {{ rgbMuted }} !important; }
.background-color-light-muted{ background-color: {{ rgbLightMuted }} !important; }
.background-color-dark-muted{ background-color: {{ rgbDarkMuted }} !important; }
/* background-color :hover */
.hover-background-color-vibrant:hover{ background-color: {{ rgbVibrant }} !important; }
.hover-background-color-light-vibrant:hover{ background-color: {{ rgbLightVibrant }} !important; }
.hover-background-color-dark-vibrant:hover{ background-color: {{ rgbDarkVibrant }} !important; }
.hover-background-color-muted:hover{ background-color: {{ rgbMuted }} !important; }
.hover-background-color-light-muted:hover{ background-color: {{ rgbLightMuted }} !important; }
.hover-background-color-dark-muted:hover{ background-color: {{ rgbDarkMuted }} !important; }
/* color */
.color-vibrant{ color: {{ rgbVibrant }} !important; }
.color-light-vibrant{ color: {{ rgbLightVibrant }} !important; }
.color-dark-vibrant{ color: {{ rgbDarkVibrant }} !important; }
.color-muted{ color: {{ rgbMuted }} !important; }
.color-light-muted{ color: {{ rgbLightMuted }} !important; }
.color-dark-muted{ color: {{ rgbDarkMuted }} !important; }
/* color :hover */
.hover-color-vibrant:hover{ color: {{ rgbVibrant }} !important; }
.hover-color-light-vibrant:hover{ color: {{ rgbLightVibrant }} !important; }
.hover-color-dark-vibrant:hover{ color: {{ rgbDarkVibrant }} !important; }
.hover-color-muted:hover{ color: {{ rgbMuted }} !important; }
.hover-color-light-muted:hover{ color: {{ rgbLightMuted }} !important; }
.hover-color-dark-muted:hover{ color: {{ rgbDarkMuted }} !important; }

</style>