@charset "UTF-8";
/**
 * Reset Without Commentary Explanations To Keep It Lite
 * ================================================== */
/**
 * Disable Animation
 */
/**
 * Disable animation depends on Browser or Operation System configuration
 */
/**
 * Accessability. Black and White Mode
 */
/**
 * Accessability. Inverse Mode
 */
/**
 * Meter reset
 */
html {
  -webkit-text-size-adjust: 100%;
}
html:focus-within {
  scroll-behavior: smooth;
}

@viewport {
  width: device-width;
}
[role=button] {
  cursor: pointer;
}

body {
  text-size-adjust: 100%;
  position: relative;
  width: 100%;
  min-height: 100vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

*,
::after,
::before {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(:root) {
  cursor: default;
  line-height: 1.5;
  overflow-wrap: break-word;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

:focus {
  outline: 0;
}

main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

:where(nav li)::before {
  content: "​";
  float: left;
}

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

:where(b, strong) {
  font-weight: bolder;
}

blockquote,
q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

input:required,
input {
  box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

:where([type="search" i]) {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

:where(details > summary:first-of-type) {
  display: list-item;
}

:where([aria-busy="true" i]) {
  cursor: progress;
}

:where([aria-controls]) {
  cursor: pointer;
}

:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}

:where([aria-hidden="false" i][hidden]) {
  display: initial;
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

:where(iframe, img, input, video, select, textarea) {
  height: auto;
  max-width: 100%;
}

:where(button, input, select, textarea) {
  background-color: transparent;
  border: 1px solid WindowFrame;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0.25em 0.375em;
}

:where(select) {
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center/1em;
  border-radius: 0;
  padding-right: 1em;
}

:where(select[multiple]) {
  background-image: none;
}

:where([type="color" i], [type="range" i]) {
  border-width: 0;
  padding: 0;
}

textarea {
  margin: 0;
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:focus {
  outline: none;
}

audio,
canvas,
video {
  display: inline-block;
  max-width: 100%;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

a:active,
a:hover {
  outline: none;
}

img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

:where(iframe) {
  border-style: none;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

picture {
  display: inline-block;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
  border: 0;
  background: transparent;
}

a,
area,
button,
[role=button],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

[disabled] {
  pointer-events: none;
}

input[type=checkbox],
input[type=radio] {
  padding: 0;
  box-sizing: border-box;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  border: 0;
  background: transparent;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

hr {
  box-sizing: content-box;
  overflow: visible;
  color: inherit;
  background: #000;
  border: 0;
  height: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
  page-break-after: always;
  width: 100%;
}

:where(pre) {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
  overflow: auto;
  /* 3 */
}

a {
  background-color: transparent;
}

:where(abbr[title]) {
  cursor: help;
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

:where(code, pre, kbd, samp) {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

:where(small) {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -5px;
}

sup {
  top: -5px;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: 0;
  padding: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
  outline: 0;
}

legend {
  color: inherit;
  white-space: normal;
  display: block;
  border: 0;
  max-width: 100%;
  width: 100%;
}

:where(fieldset) {
  min-width: 0;
  border: 1px solid #a0a0a0;
}

body:not(:-moz-handler-blocked) fieldset {
  display: block;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

template {
  display: none;
}

/**
 * SYSTEM UI FONT
 */
/**
 * Add the correct system-ui font-family in Firefox.
 */
@font-face {
  font-family: system-ui;
  src: local(".AppleSystemUIFont"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("HelveticaNeue");
}
@font-face {
  font-family: system-ui;
  font-style: italic;
  src: local(".AppleSystemUIFont"), local("Segoe UI Italic"), local("Ubuntu-Italic"), local("Roboto-Italic"), local("HelveticaNeue-Italic");
}
@font-face {
  font-family: system-ui;
  font-weight: bold;
  src: local(".AppleSystemUIFont"), local("Segoe UI Bold"), local("Ubuntu-Bold"), local("Roboto-Bold"), local("HelveticaNeue-Bold");
}
@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: bold;
  src: local(".AppleSystemUIFont"), local("Segoe UI Bold Italic"), local("Ubuntu-BoldItalic"), local("Roboto-BoldItalic"), local("HelveticaNeue-BoldItalic");
}
/**
 * UI MONOSPACE FONT
 */
/**
 * Add the correct system-ui font-family in Chrome, Edge, and Firefox.
 */
@font-face {
  font-family: ui-monospace;
  src: local(".AppleSystemUIFontMonospaced-Regular"), local("Segoe UI Mono"), local("UbuntuMono"), local("Roboto-Mono"), local("Menlo");
}
@font-face {
  font-family: ui-monospace;
  font-style: italic;
  src: local(".AppleSystemUIFontMonospaced-RegularItalic"), local("Segoe UI Mono Italic"), local("UbuntuMono-Italic"), local("Roboto-Mono-Italic"), local("Menlo-Italic");
}
@font-face {
  font-family: ui-monospace;
  font-weight: bold;
  src: local(".AppleSystemUIFontMonospaced-Bold"), local("Segoe UI Mono Bold"), local("UbuntuMono-Bold"), local("Roboto-Mono-Bold"), local("Menlo-Bold");
}
@font-face {
  font-family: ui-monospace;
  font-style: italic;
  font-weight: bold;
  src: local(".AppleSystemUIFontMonospaced-BoldItalic"), local("Segoe UI Mono Bold Italic"), local("UbuntuMono-BoldItalic"), local("Roboto-Mono-BoldItalic"), local("Menlo-BoldItalic");
}
/* Basic color-variables */
/*
* Basic color shades based on basic colors and their respective maps
 */
/* get an inclusive basic colors shades map */
/*  serato adapted color system inspired by apple watch os color system  */
/* color variables && serato color system */
/*! sanitize.css (font family stuff only) v13.0.0 | CC0-1.0 License | https://github.com/csstools/sanitize.css */
/**
 * Serato Typography
 */
/**
 * Use the default user interface font in all browsers (opinionated).
 */
html {
  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/**
 * Use the default monospace user interface font in all browsers (opinionated).
 */
code,
kbd,
samp,
pre {
  font-family: ui-monospace, "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html,
body {
  font-weight: 400;
}

html {
  font-size: 100%;
}

body {
  color: #212529;
  font-size: 1rem;
  line-height: 1.3;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

h1,
h2,
h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

html,
button,
input,
select,
textarea {
  color: #212529;
}

a {
  color: #212529;
  text-decoration: none;
}
a:visited {
  color: #212529;
  text-decoration: none;
  outline: 0;
}
a:focus, a:active, a:hover {
  color: #212529;
  text-decoration: underline;
  outline: 0;
}

i,
em {
  font-style: italic;
}

b,
strong {
  font-weight: 700;
}

input:focus {
  outline: none;
}

[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

.br {
  display: block;
}

/*
* Beta Hacks & Experiments ( these are proposed for the next version and still in beta and can change over next realease!)
*/
/**
 * Hack from Kevin Powell to automatically add top spacing to all children of any parent, cause usually nobody ever wants them attached
 */
* + * {
  margin-top: 1.5rem;
}

* > * {
  margin-top: 0;
}

/**
 * Always hide an element with the `hidden` HTML attribute (from PureCSS).
 */
[hidden] {
  display: none !important;
}

/**
 * Natural flow and rythm in articles by default
 */
article > * + * {
  margin-top: 1.5rem;
}

/**
* Hide the horizontal overflow on body by default
 body {
   overflow-x: hidden;
 }
*/
/**
 * Customized scrollbar // get a better one!
 */
html::-webkit-scrollbar {
  width: 12px;
  height: 6px;
  background-color: #eff1f5;
}

html::-webkit-scrollbar-track {
  border-radius: 0.25rem;
  background-color: transparent;
}

html::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  height: 6px;
  background-color: #9ca3af;
  border: 2px solid #eff1f5;
}
html::-webkit-scrollbar-thumb:hover {
  background-color: #bbc5d4;
}

/**
 * customized on page text selection colors
 */
::selection {
  background-color: #adb5bd;
}

/* Serato Base */
/*! serato-css v1.0.0 | MIT License | https://github.com/Hussseinkizz/serato-css */
/*! scss-reset v1.2.2 | MIT License | https://github.com/andreymatin/scss-reset */
/*! sanitize.css v13.0.0 | CC0-1.0 License | https://github.com/csstools/sanitize.css */
/*! css-reset-and-normalize-sass (flavor only) v0.1.2 | MIT License | https://github.com/webdesignberlin/css-reset-and-normalize-sass */
/* Serato Functions */
.center-with-margin {
  margin: 0px auto;
}

.center-with-grid {
  display: grid;
  place-items: center;
}

.center-with-flex {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}

.is-overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* A mega hover state color & background color generator mixin */
/* Media Queries */
/* Serato Utilities */
.container {
  display: block;
  width: 100%;
  max-width: 1170px;
  padding: 0.5rem 1rem;
  margin: 0px auto;
}
.container-fluid {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem 0px;
}

.grid-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.grid-column-1 {
  flex: 0 0 8.3333333333%;
}

.grid-column-2 {
  flex: 0 0 16.6666666667%;
}

.grid-column-3 {
  flex: 0 0 25%;
}

.grid-column-4 {
  flex: 0 0 33.3333333333%;
}

.grid-column-5 {
  flex: 0 0 41.6666666667%;
}

.grid-column-6 {
  flex: 0 0 50%;
}

.grid-column-7 {
  flex: 0 0 58.3333333333%;
}

.grid-column-8 {
  flex: 0 0 66.6666666667%;
}

.grid-column-9 {
  flex: 0 0 75%;
}

.grid-column-10 {
  flex: 0 0 83.3333333333%;
}

.grid-column-11 {
  flex: 0 0 91.6666666667%;
}

.grid-column-12 {
  flex: 0 0 100%;
}

@media only screen and (min-width: 576px) {
  .grid-column-1-on-small {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-small {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-small {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-small {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-small {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-small {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-small {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-small {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-small {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-small {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-small {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-small {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .grid-column-1-on-medium {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-medium {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-medium {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-medium {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-medium {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-medium {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-medium {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-medium {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-medium {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-medium {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-medium {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-medium {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (min-width: 992px) {
  .grid-column-1-on-large {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-large {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-large {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-large {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-large {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-large {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-large {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-large {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-large {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-large {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-large {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-large {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .grid-column-1-on-xlarge {
    width: 8.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-2-on-xlarge {
    width: 16.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-3-on-xlarge {
    width: 25%;
    padding: 0.5rem 1rem;
  }

  .grid-column-4-on-xlarge {
    width: 33.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-5-on-xlarge {
    width: 41.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-6-on-xlarge {
    width: 50%;
    padding: 0.5rem 1rem;
  }

  .grid-column-7-on-xlarge {
    width: 58.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-8-on-xlarge {
    width: 66.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-9-on-xlarge {
    width: 75%;
    padding: 0.5rem 1rem;
  }

  .grid-column-10-on-xlarge {
    width: 83.3333333333%;
    padding: 0.5rem 1rem;
  }

  .grid-column-11-on-xlarge {
    width: 91.6666666667%;
    padding: 0.5rem 1rem;
  }

  .grid-column-12-on-xlarge {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}
@media only screen and (max-width: 322px) {
  .grid-column-on-1 {
    width: 8.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-2 {
    width: 16.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-3 {
    width: 25%;
    padding: 0px 1rem;
  }

  .grid-column-on-4 {
    width: 33.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-5 {
    width: 41.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-6 {
    width: 50%;
    padding: 0px 1rem;
  }

  .grid-column-on-7 {
    width: 58.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-8 {
    width: 66.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-9 {
    width: 75%;
    padding: 0px 1rem;
  }

  .grid-column-on-10 {
    width: 83.3333333333%;
    padding: 0px 1rem;
  }

  .grid-column-on-11 {
    width: 91.6666666667%;
    padding: 0px 1rem;
  }

  .grid-column-on-12 {
    width: 100%;
    padding: 0px 1rem;
  }
}
.flex, .flex-column-reverse, .flex-column, .flex-row-reverse, .flex-row, .flex-all-center {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 100%;
}

.flex-all-center {
  justify-content: center;
  align-items: center;
}

.flex-row {
  flex-direction: row !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-flex-start {
  justify-content: flex-start !important;
}

.justify-content-flex-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.justify-content-start {
  justify-content: start !important;
}

.justify-content-end {
  justify-content: end !important;
}

.justify-content-left {
  justify-content: left !important;
}

.justify-content-right {
  justify-content: right !important;
}

.align-content-flex-start {
  align-content: flex-start !important;
}

.align-content-flex-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-evenly {
  align-content: space-evenly !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-content-start {
  align-content: start !important;
}

.align-content-end {
  align-content: end !important;
}

.align-content-baseline {
  align-content: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-items-flex-start {
  align-items: flex-start !important;
}

.align-items-flex-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-start {
  align-items: start !important;
}

.align-items-end {
  align-items: end !important;
}

.align-items-self-start {
  align-items: self-start !important;
}

.align-items-self-end {
  align-items: self-end !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-flex-start {
  align-self: flex-start !important;
}

.align-self-flex-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.grow-0 {
  flex-grow: 0 !important;
}

.grow-1 {
  flex-grow: 1 !important;
}

.grow-2 {
  flex-grow: 2 !important;
}

.grow-3 {
  flex-grow: 3 !important;
}

.grow-4 {
  flex-grow: 4 !important;
}

.grow-5 {
  flex-grow: 5 !important;
}

.shrink-0 {
  flex-shrink: 0 !important;
}

.shrink-1 {
  flex-shrink: 1 !important;
}

.shrink-2 {
  flex-shrink: 2 !important;
}

.shrink-3 {
  flex-shrink: 3 !important;
}

.shrink-4 {
  flex-shrink: 4 !important;
}

.shrink-5 {
  flex-shrink: 5 !important;
}

.flex-gap-0 {
  gap: 0 !important;
}

.flex-gap-x {
  gap: 0.25rem !important;
}

.flex-gap-1 {
  gap: 0.5rem !important;
}

.flex-gap-2 {
  gap: 1.5rem !important;
}

.flex-gap-3 {
  gap: 2rem !important;
}

.flex-gap-4 {
  gap: 2.5rem !important;
}

.flex-gap-5 {
  gap: 3rem !important;
}

.flex-gap-6 {
  gap: 4rem !important;
}

.margin-none {
  margin: 0 !important;
}

.padding-none {
  padding: 0 !important;
}

.margin-0 {
  margin: 0 !important;
}

.margin-top-0 {
  margin-top: 0 !important;
}

.margin-right-0 {
  margin-right: 0 !important;
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-left-0 {
  margin-left: 0 !important;
}

.margin-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.margin-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.margin-1 {
  margin: 0.25rem !important;
}

.margin-top-1 {
  margin-top: 0.25rem !important;
}

.margin-right-1 {
  margin-right: 0.25rem !important;
}

.margin-bottom-1 {
  margin-bottom: 0.25rem !important;
}

.margin-left-1 {
  margin-left: 0.25rem !important;
}

.margin-x-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.margin-y-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.margin-2 {
  margin: 0.5rem !important;
}

.margin-top-2 {
  margin-top: 0.5rem !important;
}

.margin-right-2 {
  margin-right: 0.5rem !important;
}

.margin-bottom-2 {
  margin-bottom: 0.5rem !important;
}

.margin-left-2 {
  margin-left: 0.5rem !important;
}

.margin-x-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.margin-y-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.margin-3 {
  margin: 0.75rem !important;
}

.margin-top-3 {
  margin-top: 0.75rem !important;
}

.margin-right-3 {
  margin-right: 0.75rem !important;
}

.margin-bottom-3 {
  margin-bottom: 0.75rem !important;
}

.margin-left-3 {
  margin-left: 0.75rem !important;
}

.margin-x-3 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.margin-y-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.margin-4 {
  margin: 1rem !important;
}

.margin-top-4 {
  margin-top: 1rem !important;
}

.margin-right-4 {
  margin-right: 1rem !important;
}

.margin-bottom-4 {
  margin-bottom: 1rem !important;
}

.margin-left-4 {
  margin-left: 1rem !important;
}

.margin-x-4 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.margin-y-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.margin-5 {
  margin: 1.5rem !important;
}

.margin-top-5 {
  margin-top: 1.5rem !important;
}

.margin-right-5 {
  margin-right: 1.5rem !important;
}

.margin-bottom-5 {
  margin-bottom: 1.5rem !important;
}

.margin-left-5 {
  margin-left: 1.5rem !important;
}

.margin-x-5 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.margin-y-5 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.margin-6 {
  margin: 3rem !important;
}

.margin-top-6 {
  margin-top: 3rem !important;
}

.margin-right-6 {
  margin-right: 3rem !important;
}

.margin-bottom-6 {
  margin-bottom: 3rem !important;
}

.margin-left-6 {
  margin-left: 3rem !important;
}

.margin-x-6 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.margin-y-6 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.margin-7 {
  margin: 4rem !important;
}

.margin-top-7 {
  margin-top: 4rem !important;
}

.margin-right-7 {
  margin-right: 4rem !important;
}

.margin-bottom-7 {
  margin-bottom: 4rem !important;
}

.margin-left-7 {
  margin-left: 4rem !important;
}

.margin-x-7 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

.margin-y-7 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.margin-8 {
  margin: 5rem !important;
}

.margin-top-8 {
  margin-top: 5rem !important;
}

.margin-right-8 {
  margin-right: 5rem !important;
}

.margin-bottom-8 {
  margin-bottom: 5rem !important;
}

.margin-left-8 {
  margin-left: 5rem !important;
}

.margin-x-8 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}

.margin-y-8 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.margin-9 {
  margin: 6rem !important;
}

.margin-top-9 {
  margin-top: 6rem !important;
}

.margin-right-9 {
  margin-right: 6rem !important;
}

.margin-bottom-9 {
  margin-bottom: 6rem !important;
}

.margin-left-9 {
  margin-left: 6rem !important;
}

.margin-x-9 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}

.margin-y-9 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.margin-auto {
  margin: auto !important;
}

.margin-top-auto {
  margin-top: auto !important;
}

.margin-right-auto {
  margin-right: auto !important;
}

.margin-bottom-auto {
  margin-bottom: auto !important;
}

.margin-left-auto {
  margin-left: auto !important;
}

.margin-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.margin-y-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.padding-0 {
  padding: 0 !important;
}

.padding-top-0 {
  padding-top: 0 !important;
}

.padding-right-0 {
  padding-right: 0 !important;
}

.padding-bottom-0 {
  padding-bottom: 0 !important;
}

.padding-left-0 {
  padding-left: 0 !important;
}

.padding-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.padding-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.padding-1 {
  padding: 0.25rem !important;
}

.padding-top-1 {
  padding-top: 0.25rem !important;
}

.padding-right-1 {
  padding-right: 0.25rem !important;
}

.padding-bottom-1 {
  padding-bottom: 0.25rem !important;
}

.padding-left-1 {
  padding-left: 0.25rem !important;
}

.padding-x-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.padding-y-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.padding-2 {
  padding: 0.5rem !important;
}

.padding-top-2 {
  padding-top: 0.5rem !important;
}

.padding-right-2 {
  padding-right: 0.5rem !important;
}

.padding-bottom-2 {
  padding-bottom: 0.5rem !important;
}

.padding-left-2 {
  padding-left: 0.5rem !important;
}

.padding-x-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.padding-y-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.padding-3 {
  padding: 0.75rem !important;
}

.padding-top-3 {
  padding-top: 0.75rem !important;
}

.padding-right-3 {
  padding-right: 0.75rem !important;
}

.padding-bottom-3 {
  padding-bottom: 0.75rem !important;
}

.padding-left-3 {
  padding-left: 0.75rem !important;
}

.padding-x-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.padding-y-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.padding-4 {
  padding: 1rem !important;
}

.padding-top-4 {
  padding-top: 1rem !important;
}

.padding-right-4 {
  padding-right: 1rem !important;
}

.padding-bottom-4 {
  padding-bottom: 1rem !important;
}

.padding-left-4 {
  padding-left: 1rem !important;
}

.padding-x-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.padding-y-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.padding-5 {
  padding: 1.5rem !important;
}

.padding-top-5 {
  padding-top: 1.5rem !important;
}

.padding-right-5 {
  padding-right: 1.5rem !important;
}

.padding-bottom-5 {
  padding-bottom: 1.5rem !important;
}

.padding-left-5 {
  padding-left: 1.5rem !important;
}

.padding-x-5 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.padding-y-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.padding-6 {
  padding: 3rem !important;
}

.padding-top-6 {
  padding-top: 3rem !important;
}

.padding-right-6 {
  padding-right: 3rem !important;
}

.padding-bottom-6 {
  padding-bottom: 3rem !important;
}

.padding-left-6 {
  padding-left: 3rem !important;
}

.padding-x-6 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.padding-y-6 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.padding-7 {
  padding: 4rem !important;
}

.padding-top-7 {
  padding-top: 4rem !important;
}

.padding-right-7 {
  padding-right: 4rem !important;
}

.padding-bottom-7 {
  padding-bottom: 4rem !important;
}

.padding-left-7 {
  padding-left: 4rem !important;
}

.padding-x-7 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.padding-y-7 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.padding-8 {
  padding: 5rem !important;
}

.padding-top-8 {
  padding-top: 5rem !important;
}

.padding-right-8 {
  padding-right: 5rem !important;
}

.padding-bottom-8 {
  padding-bottom: 5rem !important;
}

.padding-left-8 {
  padding-left: 5rem !important;
}

.padding-x-8 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.padding-y-8 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.padding-9 {
  padding: 6rem !important;
}

.padding-top-9 {
  padding-top: 6rem !important;
}

.padding-right-9 {
  padding-right: 6rem !important;
}

.padding-bottom-9 {
  padding-bottom: 6rem !important;
}

.padding-left-9 {
  padding-left: 6rem !important;
}

.padding-x-9 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.padding-y-9 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.padding-auto {
  padding: auto !important;
}

.padding-top-auto {
  padding-top: auto !important;
}

.padding-right-auto {
  padding-right: auto !important;
}

.padding-bottom-auto {
  padding-bottom: auto !important;
}

.padding-left-auto {
  padding-left: auto !important;
}

.padding-x-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.padding-y-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.responsive-margin-left-small {
  margin-left: 1.5vw !important;
}

.responsive-margin-right-small {
  margin-right: 1.5vw !important;
}

.responsive-margin-x-small {
  margin-left: 1.5vw !important;
  margin-right: 1.5vw !important;
}

.responsive-margin-left-normal {
  margin-left: 2.5vw !important;
}

.responsive-margin-right-normal {
  margin-right: 2.5vw !important;
}

.responsive-margin-x-normal {
  margin-left: 2.5vw !important;
  margin-right: 2.5vw !important;
}

.responsive-margin-left-medium {
  margin-left: 6.5vw !important;
}

.responsive-margin-right-medium {
  margin-right: 6.5vw !important;
}

.responsive-margin-x-medium {
  margin-left: 6.5vw !important;
  margin-right: 6.5vw !important;
}

.responsive-margin-left-large {
  margin-left: 10vw !important;
}

.responsive-margin-right-large {
  margin-right: 10vw !important;
}

.responsive-margin-x-large {
  margin-left: 10vw !important;
  margin-right: 10vw !important;
}

.responsive-padding-left-small {
  padding-left: 1.5vw !important;
}

.responsive-padding-right-small {
  padding-right: 1.5vw !important;
}

.responsive-padding-x-small {
  padding-left: 1.5vw !important;
  padding-right: 1.5vw !important;
}

.responsive-padding-left-normal {
  padding-left: 2.5vw !important;
}

.responsive-padding-right-normal {
  padding-right: 2.5vw !important;
}

.responsive-padding-x-normal {
  padding-left: 2.5vw !important;
  padding-right: 2.5vw !important;
}

.responsive-padding-left-medium {
  padding-left: 6.5vw !important;
}

.responsive-padding-right-medium {
  padding-right: 6.5vw !important;
}

.responsive-padding-x-medium {
  padding-left: 6.5vw !important;
  padding-right: 6.5vw !important;
}

.responsive-padding-left-large {
  padding-left: 10vw !important;
}

.responsive-padding-right-large {
  padding-right: 10vw !important;
}

.responsive-padding-x-large {
  padding-left: 10vw !important;
  padding-right: 10vw !important;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-sticky {
  position: sticky;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.fixed-to-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-to-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.display-block {
  display: block !important;
}

.display-flex {
  display: flex !important;
}

.display-inline {
  display: inline !important;
}

.display-inline-block {
  display: inline-block !important;
}

.display-inline-flex {
  display: inline-flex !important;
}

.font-thin {
  font-weight: 100 !important;
}

.font-lighter {
  font-weight: 200 !important;
}

.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-bolder {
  font-weight: 800 !important;
}

.font-extra-bold {
  font-weight: 900 !important;
}

.text-align-center {
  text-align: center !important;
}

.text-align-justify {
  text-align: justify !important;
}

.text-align-left {
  text-align: left !important;
}

.text-align-right {
  text-align: right !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.font-italic {
  font-style: italic !important;
}

.text-underlined {
  text-decoration: underline !important;
}

.font-heading {
  font-size: 3.5rem;
  font-weight: bold;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.font-subheading {
  font-size: 2.5rem;
  font-weight: medium;
  font-weight: 600;
  text-transform: capitalize;
}

.font-small {
  font-size: 0.75rem;
  font-weight: small;
  font-weight: 300;
  text-transform: lowercase;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reset-text {
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  font-weight: 400;
  line-height: inherit;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
}

.font-size-normal {
  font-size: 1rem !important;
}

.font-size-small {
  font-size: 0.875rem !important;
}

.font-size-large {
  font-size: 1.25rem !important;
}

.font-size-1 {
  font-size: 1rem !important;
}

.font-size-2 {
  font-size: 2.25rem !important;
}

.font-size-3 {
  font-size: 3.5rem !important;
}

.font-size-4 {
  font-size: 4.75rem !important;
}

.font-size-5 {
  font-size: 5rem !important;
}

.font-size-6 {
  font-size: 5.5rem !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-decoration-double {
  text-decoration: double !important;
}

.text-decoration-dotted {
  text-decoration: dotted !important;
}

.text-decoration-dashed {
  text-decoration: dashed !important;
}

.text-decoration-overline {
  text-decoration: overline !important;
}

/* Built-in animations here, for internal use only thus mixins and not extendable classes, for other animation purposes see animations from plugins!!! */
.underline-from-center, .link {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.underline-from-center:before, .link:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: currentColor;
  height: 2px;
  transition-property: left, right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.underline-from-center:focus:before, .link:focus:before, .underline-from-center:active:before, .link:active:before {
  left: 0;
  right: 0;
}

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.shadow-none {
  box-shadow: none !important;
}

.is-clickable {
  cursor: pointer !important;
  pointer-events: all !important;
}

.overflow {
  overflow: hidden !important;
}

.border-radius-none {
  border-radius: 0 !important;
}

.border-radius-small {
  border-radius: 0.2rem !important;
}

.border-radius-normal {
  border-radius: 0.25rem !important;
}

.border-radius-large {
  border-radius: 0.3rem !important;
}

.border-radius-round {
  border-radius: 50rem !important;
}

.border-radius-circle {
  border-radius: 50% !important;
}

.border-radius-top-small {
  border-top-left-radius: 0.2rem !important;
  border-top-right-radius: 0.2rem !important;
}

.border-radius-top-normal {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.border-radius-top-large {
  border-top-left-radius: 0.3rem !important;
  border-top-right-radius: 0.3rem !important;
}

.border-radius-top-round {
  border-top-left-radius: 50rem !important;
  border-top-right-radius: 50rem !important;
}

.border-radius-top-circle {
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
}

.border-radius-bottom-small {
  border-bottom-left-radius: 0.2rem !important;
  border-bottom-right-radius: 0.2rem !important;
}

.border-radius-bottom-normal {
  border-bottom-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.border-radius-bottom-large {
  border-bottom-left-radius: 0.3rem !important;
  border-bottom-right-radius: 0.3rem !important;
}

.border-radius-bottom-round {
  border-bottom-left-radius: 50rem !important;
  border-bottom-right-radius: 50rem !important;
}

.border-radius-bottom-circle {
  border-bottom-left-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

.border-radius-top-left-small {
  border-top-left-radius: 0.2rem !important;
}

.border-radius-top-left-normal {
  border-top-left-radius: 0.25rem !important;
}

.border-radius-top-left-large {
  border-top-left-radius: 0.3rem !important;
}

.border-radius-top-left-round {
  border-top-left-radius: 50rem !important;
}

.border-radius-top-left-circle {
  border-top-left-radius: 50% !important;
}

.border-radius-top-right-small {
  border-top-right-radius: 0.2rem !important;
}

.border-radius-top-right-normal {
  border-top-right-radius: 0.25rem !important;
}

.border-radius-top-right-large {
  border-top-right-radius: 0.3rem !important;
}

.border-radius-top-right-round {
  border-top-right-radius: 50rem !important;
}

.border-radius-top-right-circle {
  border-top-right-radius: 50% !important;
}

.border-radius-bottom-left-small {
  border-bottom-left-radius: 0.2rem !important;
}

.border-radius-bottom-left-normal {
  border-bottom-left-radius: 0.25rem !important;
}

.border-radius-bottom-left-large {
  border-bottom-left-radius: 0.3rem !important;
}

.border-radius-bottom-left-round {
  border-bottom-left-radius: 50rem !important;
}

.border-radius-bottom-left-circle {
  border-bottom-left-radius: 50% !important;
}

.border-radius-bottom-right-small {
  border-bottom-right-radius: 0.2rem !important;
}

.border-radius-bottom-right-normal {
  border-bottom-right-radius: 0.25rem !important;
}

.border-radius-bottom-right-large {
  border-bottom-right-radius: 0.3rem !important;
}

.border-radius-bottom-right-round {
  border-bottom-right-radius: 50rem !important;
}

.border-radius-bottom-right-circle {
  border-bottom-right-radius: 50% !important;
}

img,
picture,
video {
  aspect-ratio: auto;
  max-width: 100%;
  height: auto;
}

.width-auto {
  width: auto !important;
}

.width-none {
  width: 0 !important;
}

.width-content {
  width: fit-content !important;
}

.width-small {
  width: 15% !important;
}

.width-normal {
  width: 25% !important;
}

.width-medium {
  width: 50% !important;
}

.width-full {
  max-width: 100% !important;
}

.width-viewport {
  max-width: 100vw !important;
}

.height-auto {
  height: auto !important;
}

.height-none {
  height: 0 !important;
}

.height-content {
  height: fit-content !important;
}

.height-small {
  height: 15% !important;
}

.height-normal {
  height: 25% !important;
}

.height-medium {
  height: 50% !important;
}

.height-full {
  min-height: 100% !important;
}

.height-viewport {
  min-height: 100vh !important;
}

.aspect-ratio-auto {
  aspect-ratio: auto !important;
}

.aspect-ratio-1x1 {
  aspect-ratio: 100% !important;
}

.aspect-ratio-4x3 {
  aspect-ratio: 75% !important;
}

.aspect-ratio-16x9 {
  aspect-ratio: 56.25% !important;
}

.aspect-ratio-21x9 {
  aspect-ratio: 42.8571428571% !important;
}

.object-fit-none {
  object-fit: none !important;
}

.object-fit-cover {
  object-fit: cover !important;
}

.object-fit-contain {
  object-fit: contain !important;
}

.object-fit-fill {
  object-fit: fill !important;
}

.object-fit-scale-down {
  object-fit: scale-down !important;
}

.opacity-none {
  opacity: 0 !important;
}

.opacity-none-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 0 !important;
}

.opacity-low {
  opacity: 0.5 !important;
}

.opacity-low-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 0.5 !important;
}

.opacity-medium {
  opacity: 0.6 !important;
}

.opacity-medium-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 0.6 !important;
}

.opacity-normal {
  opacity: 1 !important;
}

.opacity-normal-on-hover:hover {
  transition: opacity 0.15s linear;
  opacity: 1 !important;
}

.transition-normal {
  transition: all 0.2s ease-in-out !important;
}

.transition-colors {
  transition: color 0.2s ease-in-out !important;
}

.transition-linear {
  transition: all 0.2s linear !important;
}

.transition-smooth {
  transition: all 0.3s ease !important;
}

.transition-opacity {
  transition: opacity 0.15s linear !important;
}

.transition-height {
  transition: height 0.35s ease !important;
}

.transition-width {
  transition: width 0.35s ease !important;
}

.list--hoverable > * {
  color: indigo;
  list-style-type: circle;
  width: fit-content;
  will-change: auto;
}
.list--hoverable > *:hover {
  transition: margin 0.35s ease;
  margin-bottom: 1rem;
}
.list--hoverable > *:hover, .list--hoverable > *:active, .list--hoverable > *:focus {
  color: #7700cf;
}

.list li:not(:last-child) {
  margin-bottom: 0.25rem !important;
}

.list-style-auto {
  list-style-type: auto !important;
}

.list-style-none {
  list-style-type: none !important;
}

.list-style-circle {
  list-style-type: circle !important;
}

.list-style-square {
  list-style-type: square !important;
}

.list-style-disc {
  list-style-type: disc !important;
}

.list-style-decimal {
  list-style-type: decimal !important;
}

.list-style-disclosure-open {
  list-style-type: disclosure-open !important;
}

.list-style-disclosure-closed {
  list-style-type: disclosure-closed !important;
}

.box-shadow-small {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.box-shadow-normal {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.box-shadow-large {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.box-shadow-inset {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075) !important;
}

/* Border Helpers */
.border {
  border: 1px solid #e9ecef;
}

.border-width-1 {
  border-width: 1px !important;
}

.border-width-2 {
  border-width: 2px !important;
}

.border-width-3 {
  border-width: 3px !important;
}

.border-width-4 {
  border-width: 4px !important;
}

.border-width-5 {
  border-width: 5px !important;
}

.border-color-gray {
  border-color: #adb5bd !important;
}

.border-color-gray-100 {
  border-color: #f8f9fa !important;
}

.border-color-gray-200 {
  border-color: #e9ecef !important;
}

.border-color-gray-300 {
  border-color: #dee2e6 !important;
}

.border-color-gray-400 {
  border-color: #ced4da !important;
}

.border-color-gray-500 {
  border-color: #adb5bd !important;
}

.border-color-gray-600 {
  border-color: #6c757d !important;
}

.border-color-gray-700 {
  border-color: #495057 !important;
}

.border-color-gray-800 {
  border-color: #343a40 !important;
}

.border-color-gray-900 {
  border-color: #212529 !important;
}

.border-color-blue-100 {
  border-color: #cfe2ff !important;
}

.border-color-blue-200 {
  border-color: #9ec5fe !important;
}

.border-color-blue-300 {
  border-color: #6ea8fe !important;
}

.border-color-blue-400 {
  border-color: #3d8bfd !important;
}

.border-color-blue-500 {
  border-color: #0d6efd !important;
}

.border-color-blue-600 {
  border-color: #0a58ca !important;
}

.border-color-blue-700 {
  border-color: #084298 !important;
}

.border-color-blue-800 {
  border-color: #052c65 !important;
}

.border-color-blue-900 {
  border-color: #031633 !important;
}

.border-color-indigo-100 {
  border-color: #e0cffc !important;
}

.border-color-indigo-200 {
  border-color: #c29ffa !important;
}

.border-color-indigo-300 {
  border-color: #a370f7 !important;
}

.border-color-indigo-400 {
  border-color: #8540f5 !important;
}

.border-color-indigo-500 {
  border-color: #6610f2 !important;
}

.border-color-indigo-600 {
  border-color: #520dc2 !important;
}

.border-color-indigo-700 {
  border-color: #3d0a91 !important;
}

.border-color-indigo-800 {
  border-color: #290661 !important;
}

.border-color-indigo-900 {
  border-color: #140330 !important;
}

.border-color-purple-100 {
  border-color: #e2d9f3 !important;
}

.border-color-purple-200 {
  border-color: #c5b3e6 !important;
}

.border-color-purple-300 {
  border-color: #a98eda !important;
}

.border-color-purple-400 {
  border-color: #8c68cd !important;
}

.border-color-purple-500 {
  border-color: #6f42c1 !important;
}

.border-color-purple-600 {
  border-color: #59359a !important;
}

.border-color-purple-700 {
  border-color: #432874 !important;
}

.border-color-purple-800 {
  border-color: #2c1a4d !important;
}

.border-color-purple-900 {
  border-color: #160d27 !important;
}

.border-color-pink-100 {
  border-color: #f7d6e6 !important;
}

.border-color-pink-200 {
  border-color: #efadce !important;
}

.border-color-pink-300 {
  border-color: #e685b5 !important;
}

.border-color-pink-400 {
  border-color: #de5c9d !important;
}

.border-color-pink-500 {
  border-color: #d63384 !important;
}

.border-color-pink-600 {
  border-color: #ab296a !important;
}

.border-color-pink-700 {
  border-color: #801f4f !important;
}

.border-color-pink-800 {
  border-color: #561435 !important;
}

.border-color-pink-900 {
  border-color: #2b0a1a !important;
}

.border-color-red-100 {
  border-color: #f8d7da !important;
}

.border-color-red-200 {
  border-color: #f1aeb5 !important;
}

.border-color-red-300 {
  border-color: #ea868f !important;
}

.border-color-red-400 {
  border-color: #e35d6a !important;
}

.border-color-red-500 {
  border-color: #dc3545 !important;
}

.border-color-red-600 {
  border-color: #b02a37 !important;
}

.border-color-red-700 {
  border-color: #842029 !important;
}

.border-color-red-800 {
  border-color: #58151c !important;
}

.border-color-red-900 {
  border-color: #2c0b0e !important;
}

.border-color-orange-100 {
  border-color: #ffe5d0 !important;
}

.border-color-orange-200 {
  border-color: #fecba1 !important;
}

.border-color-orange-300 {
  border-color: #feb272 !important;
}

.border-color-orange-400 {
  border-color: #fd9843 !important;
}

.border-color-orange-500 {
  border-color: #fd7e14 !important;
}

.border-color-orange-600 {
  border-color: #ca6510 !important;
}

.border-color-orange-700 {
  border-color: #984c0c !important;
}

.border-color-orange-800 {
  border-color: #653208 !important;
}

.border-color-orange-900 {
  border-color: #331904 !important;
}

.border-color-yellow-100 {
  border-color: #fff3cd !important;
}

.border-color-yellow-200 {
  border-color: #ffe69c !important;
}

.border-color-yellow-300 {
  border-color: #ffda6a !important;
}

.border-color-yellow-400 {
  border-color: #ffcd39 !important;
}

.border-color-yellow-500 {
  border-color: #ffc107 !important;
}

.border-color-yellow-600 {
  border-color: #cc9a06 !important;
}

.border-color-yellow-700 {
  border-color: #997404 !important;
}

.border-color-yellow-800 {
  border-color: #664d03 !important;
}

.border-color-yellow-900 {
  border-color: #332701 !important;
}

.border-color-green-100 {
  border-color: #d1e7dd !important;
}

.border-color-green-200 {
  border-color: #a3cfbb !important;
}

.border-color-green-300 {
  border-color: #75b798 !important;
}

.border-color-green-400 {
  border-color: #479f76 !important;
}

.border-color-green-500 {
  border-color: #198754 !important;
}

.border-color-green-600 {
  border-color: #146c43 !important;
}

.border-color-green-700 {
  border-color: #0f5132 !important;
}

.border-color-green-800 {
  border-color: #0a3622 !important;
}

.border-color-green-900 {
  border-color: #051b11 !important;
}

.border-color-teal-100 {
  border-color: #d2f4ea !important;
}

.border-color-teal-200 {
  border-color: #a6e9d5 !important;
}

.border-color-teal-300 {
  border-color: #79dfc1 !important;
}

.border-color-teal-400 {
  border-color: #4dd4ac !important;
}

.border-color-teal-500 {
  border-color: #20c997 !important;
}

.border-color-teal-600 {
  border-color: #1aa179 !important;
}

.border-color-teal-700 {
  border-color: #13795b !important;
}

.border-color-teal-800 {
  border-color: #0d503c !important;
}

.border-color-teal-900 {
  border-color: #06281e !important;
}

.border-color-cyan-100 {
  border-color: #cff4fc !important;
}

.border-color-cyan-200 {
  border-color: #9eeaf9 !important;
}

.border-color-cyan-300 {
  border-color: #6edff6 !important;
}

.border-color-cyan-400 {
  border-color: #3dd5f3 !important;
}

.border-color-cyan-500 {
  border-color: #0dcaf0 !important;
}

.border-color-cyan-600 {
  border-color: #0aa2c0 !important;
}

.border-color-cyan-700 {
  border-color: #087990 !important;
}

.border-color-cyan-800 {
  border-color: #055160 !important;
}

.border-color-cyan-900 {
  border-color: #032830 !important;
}

.border-color-red {
  border-color: #df1125 !important;
}

.border-color-neon-pink {
  border-color: #fb212f !important;
}

.border-color-electric-pink {
  border-color: #fc3644 !important;
}

.border-color-hibiscus {
  border-color: #fb0049 !important;
}

.border-color-pink {
  border-color: #fd4154 !important;
}

.border-color-pink-citrus {
  border-color: #ea383a !important;
}

.border-color-dragon-fruit {
  border-color: #f12e6d !important;
}

.border-color-pomagranate {
  border-color: #d80e4f !important;
}

.border-color-camellia {
  border-color: #bf3138 !important;
}

.border-color-red-rose {
  border-color: #ab1438 !important;
}

.border-color-plum {
  border-color: #81323d !important;
}

.border-color-orange {
  border-color: #fc4e12 !important;
}

.border-color-clementine {
  border-color: #fd513b !important;
}

.border-color-apricot {
  border-color: #fc5c42 !important;
}

.border-color-papaya {
  border-color: #fd7036 !important;
}

.border-color-kumquat {
  border-color: #fd7441 !important;
}

.border-color-light-orange {
  border-color: #fd820b !important;
}

.border-color-peach {
  border-color: #e0694e !important;
}

.border-color-flamingo {
  border-color: #ca6f59 !important;
}

.border-color-rose-gold {
  border-color: #e99475 !important;
}

.border-color-pink-sand {
  border-color: #feb69c !important;
}

.border-color-light-pink {
  border-color: #f19f9d !important;
}

.border-color-vintage-rose {
  border-color: #f29c98 !important;
}

.border-color-grapefruit {
  border-color: #fda27e !important;
}

.border-color-cream {
  border-color: #ffe0ab !important;
}

.border-color-mellow-yellow {
  border-color: #f7f6af !important;
}

.border-color-canary-yellow {
  border-color: #ffda3a !important;
}

.border-color-pollen {
  border-color: #fecb4d !important;
}

.border-color-yellow {
  border-color: #e8c511 !important;
}

.border-color-flash-light {
  border-color: #faed0b !important;
}

.border-color-lemon-cream {
  border-color: #ffeb6d !important;
}

.border-color-flash {
  border-color: #dff81e !important;
}

.border-color-green {
  border-color: #80e220 !important;
}

.border-color-spearmint {
  border-color: #77ea7e !important;
}

.border-color-mint {
  border-color: #a2ec8e !important;
}

.border-color-beryl {
  border-color: #d0f2b1 !important;
}

.border-color-sea-foam {
  border-color: #cff1d6 !important;
}

.border-color-turquoise {
  border-color: #91cec2 !important;
}

.border-color-blue {
  border-color: #1ea5fc !important;
}

.border-color-light-blue {
  border-color: #5ebad9 !important;
}

.border-color-cerulian {
  border-color: #87b9e7 !important;
}

.border-color-surf-blue {
  border-color: #1871ac !important;
}

.border-color-pacific-green {
  border-color: #0f6d8e !important;
}

.border-color-blue-cobalt {
  border-color: #3a6b8e !important;
}

.border-color-dark-teal {
  border-color: #2c6184 !important;
}

.border-color-blue-horizon {
  border-color: #1e538f !important;
}

.border-color-denim-blue {
  border-color: #4b709a !important;
}

.border-color-linen-blue {
  border-color: #455785 !important;
}

.border-color-alaskan-blue {
  border-color: #525c73 !important;
}

.border-color-deep-navy {
  border-color: #3a4565 !important;
}

.border-color-midnight-blue {
  border-color: #383b65 !important;
}

.border-color-purple {
  border-color: #8962f8 !important;
}

.border-color-ultra-violet {
  border-color: #5f41b2 !important;
}

.border-color-lilac {
  border-color: #a990dd !important;
}

.border-color-ocean-blue {
  border-color: #6273bd !important;
}

.border-color-delft-blue {
  border-color: #4662b2 !important;
}

.border-color-indigo {
  border-color: #474e95 !important;
}

.border-color-lavender-gray {
  border-color: #757397 !important;
}

.border-color-lavender {
  border-color: #a58998 !important;
}

.border-color-cocoa {
  border-color: #8b7d7d !important;
}

.border-color-storm-gray {
  border-color: #578887 !important;
}

.border-color-cactus {
  border-color: #5b7971 !important;
}

.border-color-pine-green {
  border-color: #4e6c54 !important;
}

.border-color-cyprus-green {
  border-color: #cda986 !important;
}

.border-color-northern-blue {
  border-color: #638a8d !important;
}

.border-color-azure {
  border-color: #788991 !important;
}

.border-color-mist-blue {
  border-color: #a7ab99 !important;
}

.border-color-dark-olive {
  border-color: #7c7a66 !important;
}

.border-color-khaki {
  border-color: #7a6e49 !important;
}

.border-color-soft-white {
  border-color: #d8c9af !important;
}

.border-color-antique-white {
  border-color: #cda986 !important;
}

.border-color-yellow-gold {
  border-color: #cc996d !important;
}

.border-color-gold {
  border-color: #b08053 !important;
}

.border-color-camel {
  border-color: #a97d4f !important;
}

.border-color-walnut {
  border-color: #a17455 !important;
}

.border-color-stone {
  border-color: #a28872 !important;
}

.border-color-pebble {
  border-color: #9f8d7e !important;
}

.border-color-coastal-gray {
  border-color: #715d50 !important;
}

a.link {
  color: indigo;
  width: fit-content;
}

a.link-default {
  color: indigo;
  width: fit-content;
}

a.link--no-underline {
  color: indigo;
  width: fit-content;
}

.link {
  font-style: italic;
  text-underline-offset: 5px;
}
.link:hover, .link:active, .link:focus {
  transition: color 0.2s ease-in-out;
  color: #7700cf;
}

.link-default {
  font-style: italic;
  text-underline-offset: 5px;
}

.link--no-underline {
  font-style: italic;
}
.link--no-underline:hover, .link--no-underline:active, .link--no-underline:focus {
  transition: color 0.2s ease-in-out;
  color: #7700cf;
  text-decoration: none !important;
}

.selection-disabled {
  pointer-events: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
               supported by Chrome and Opera */
}

/* Serato Helpers */
/* famous brand colors for stuff like social media icon colors, generated with color manager vscode extension by Roy Action */
/* serato color gradients */
.serato-gradient-on-background {
  background: linear-gradient(to right, indigo, purple);
}
.serato-gradient-on-background-to-top {
  background: linear-gradient(to top, indigo, purple);
}
.serato-gradient-on-background-to-right {
  background: linear-gradient(to right, indigo, purple);
}
.serato-gradient-on-background-to-bottom {
  background: linear-gradient(to bottom, indigo, purple);
}
.serato-gradient-on-background-to-left {
  background: linear-gradient(to left, indigo, purple);
}
.serato-gradient-on-background-radial {
  background: radial-gradient(ellipse at center, indigo 0%, purple 100%);
}

.serato-gradient-on-text {
  background: linear-gradient(to right, indigo, purple);
  background-clip: text;
  user-select: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.serato-gradient-on-text-radial {
  background: radial-gradient(ellipse at center, indigo 0%, purple 100%);
  user-select: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.css-tricks-gradient-on-background {
  background: linear-gradient(to right, #ff8a00, #da1b60);
}
.css-tricks-gradient-on-background-to-top {
  background: linear-gradient(to top, #ff8a00, #da1b60);
}
.css-tricks-gradient-on-background-to-right {
  background: linear-gradient(to right, #ff8a00, #da1b60);
}
.css-tricks-gradient-on-background-to-bottom {
  background: linear-gradient(to bottom, #ff8a00, #da1b60);
}
.css-tricks-gradient-on-background-to-left {
  background: linear-gradient(to left, #ff8a00, #da1b60);
}
.css-tricks-gradient-on-background-radial {
  background: radial-gradient(ellipse at center, #ff8a00 0%, #da1b60 100%);
}

.css-tricks-gradient-on-text {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  background-clip: text;
  user-select: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.css-tricks-gradient-on-text-radial {
  background: radial-gradient(ellipse at center, #ff8a00 0%, #da1b60 100%);
  user-select: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.serato-gradient-on-border {
  border: 2px solid;
  border-image: linear-gradient(to right, indigo, purple) 3;
  margin: 0.5rem;
}

.serato-gradient-on-border-top {
  border-top: 2px solid;
  border-image: linear-gradient(to right, indigo, purple) 3;
  margin-top: 0.5rem;
}

.serato-gradient-on-border-right {
  border-right: 2px solid;
  border-image: linear-gradient(to right, indigo, purple) 3;
  margin-right: 0.5rem;
}

.serato-gradient-on-border-bottom {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, indigo, purple) 3;
  margin-bottom: 0.5rem;
}

.serato-gradient-on-border-left {
  border-left: 2px solid;
  border-image: linear-gradient(to right, indigo, purple) 3;
  margin-left: 0.5rem;
}

.css-tricks-gradient-on-border {
  border: 2px solid;
  border-image: linear-gradient(to right, #ff8a00, #da1b60) 3;
  margin: 0.5rem;
}

.css-tricks-gradient-on-border-top {
  border-top: 2px solid;
  border-image: linear-gradient(to right, #ff8a00, #da1b60) 3;
  margin-top: 0.5rem;
}

.css-tricks-gradient-on-border-right {
  border-right: 2px solid;
  border-image: linear-gradient(to right, #ff8a00, #da1b60) 3;
  margin-right: 0.5rem;
}

.css-tricks-gradient-on-border-bottom {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #ff8a00, #da1b60) 3;
  margin-bottom: 0.5rem;
}

.css-tricks-gradient-on-border-left {
  border-left: 2px solid;
  border-image: linear-gradient(to right, #ff8a00, #da1b60) 3;
  margin-left: 0.5rem;
}

/* ~~~~~~~~
Generate color classes & respective hoverable classes
~~~~~~~ */
.color-primary {
  color: indigo;
}

.background-primary {
  background: indigo;
}

.color-primary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: indigo !important;
}

.background-primary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: indigo !important;
}

.color-primary--hoverable {
  color: indigo !important;
}
.color-primary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6800b5 !important;
}

.background-primary--hoverable {
  background-color: indigo !important;
}
.background-primary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6800b5 !important;
}

.background-glass-primary {
  background: rgba(75, 0, 130, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.background-glass-primary--hoverable {
  background: rgba(75, 0, 130, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.background-glass-primary--hoverable:hover {
  transition: all 0.3s ease;
  background: rgba(75, 0, 130, 0.35);
}

.color-glass-primary {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(75, 0, 130, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-glass-primary--hoverable {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(75, 0, 130, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-glass-primary--hoverable:hover {
  transition: all 0.3s ease;
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(75, 0, 130, 0.35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-secondary {
  color: purple;
}

.background-secondary {
  background: purple;
}

.color-secondary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: purple !important;
}

.background-secondary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: purple !important;
}

.color-secondary--hoverable {
  color: purple !important;
}
.color-secondary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b300b3 !important;
}

.background-secondary--hoverable {
  background-color: purple !important;
}
.background-secondary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b300b3 !important;
}

.background-glass-secondary {
  background: rgba(128, 0, 128, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.background-glass-secondary--hoverable {
  background: rgba(128, 0, 128, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.background-glass-secondary--hoverable:hover {
  transition: all 0.3s ease;
  background: rgba(128, 0, 128, 0.35);
}

.color-glass-secondary {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(128, 0, 128, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-glass-secondary--hoverable {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(128, 0, 128, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-glass-secondary--hoverable:hover {
  transition: all 0.3s ease;
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(128, 0, 128, 0.35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-success {
  color: #198754;
}

.background-success {
  background: #198754;
}

.color-success-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #198754 !important;
}

.background-success-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #198754 !important;
}

.color-success--hoverable {
  color: #198754 !important;
}
.color-success--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #21b26f !important;
}

.background-success--hoverable {
  background-color: #198754 !important;
}
.background-success--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #21b26f !important;
}

.background-glass-success {
  background: rgba(25, 135, 84, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.background-glass-success--hoverable {
  background: rgba(25, 135, 84, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.background-glass-success--hoverable:hover {
  transition: all 0.3s ease;
  background: rgba(25, 135, 84, 0.35);
}

.color-glass-success {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(25, 135, 84, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-glass-success--hoverable {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(25, 135, 84, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-glass-success--hoverable:hover {
  transition: all 0.3s ease;
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(25, 135, 84, 0.35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-info {
  color: #0dcaf0;
}

.background-info {
  background: #0dcaf0;
}

.color-info-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0dcaf0 !important;
}

.background-info-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0dcaf0 !important;
}

.color-info--hoverable {
  color: #0dcaf0 !important;
}
.color-info--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #3cd5f4 !important;
}

.background-info--hoverable {
  background-color: #0dcaf0 !important;
}
.background-info--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3cd5f4 !important;
}

.background-glass-info {
  background: rgba(13, 202, 240, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.background-glass-info--hoverable {
  background: rgba(13, 202, 240, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.background-glass-info--hoverable:hover {
  transition: all 0.3s ease;
  background: rgba(13, 202, 240, 0.35);
}

.color-glass-info {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(13, 202, 240, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-glass-info--hoverable {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(13, 202, 240, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-glass-info--hoverable:hover {
  transition: all 0.3s ease;
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(13, 202, 240, 0.35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-warning {
  color: #ffc107;
}

.background-warning {
  background: #ffc107;
}

.color-warning-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffc107 !important;
}

.background-warning-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffc107 !important;
}

.color-warning--hoverable {
  color: #ffc107 !important;
}
.color-warning--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d39e00 !important;
}

.background-warning--hoverable {
  background-color: #ffc107 !important;
}
.background-warning--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d39e00 !important;
}

.background-glass-warning {
  background: rgba(255, 193, 7, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.background-glass-warning--hoverable {
  background: rgba(255, 193, 7, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.background-glass-warning--hoverable:hover {
  transition: all 0.3s ease;
  background: rgba(255, 193, 7, 0.35);
}

.color-glass-warning {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(255, 193, 7, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-glass-warning--hoverable {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(255, 193, 7, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-glass-warning--hoverable:hover {
  transition: all 0.3s ease;
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(255, 193, 7, 0.35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-danger {
  color: #dc3545;
}

.background-danger {
  background: #dc3545;
}

.color-danger-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #dc3545 !important;
}

.background-danger-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dc3545 !important;
}

.color-danger--hoverable {
  color: #dc3545 !important;
}
.color-danger--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #bd2130 !important;
}

.background-danger--hoverable {
  background-color: #dc3545 !important;
}
.background-danger--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #bd2130 !important;
}

.background-glass-danger {
  background: rgba(220, 53, 69, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.background-glass-danger--hoverable {
  background: rgba(220, 53, 69, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.background-glass-danger--hoverable:hover {
  transition: all 0.3s ease;
  background: rgba(220, 53, 69, 0.35);
}

.color-glass-danger {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(220, 53, 69, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-glass-danger--hoverable {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(220, 53, 69, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-glass-danger--hoverable:hover {
  transition: all 0.3s ease;
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(220, 53, 69, 0.35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-dark {
  color: #212529;
}

.background-dark {
  background: #212529;
}

.color-dark-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #212529 !important;
}

.background-dark-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #212529 !important;
}

.color-dark--hoverable {
  color: #212529 !important;
}
.color-dark--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #383f45 !important;
}

.background-dark--hoverable {
  background-color: #212529 !important;
}
.background-dark--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #383f45 !important;
}

.background-glass-dark {
  background: rgba(33, 37, 41, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.background-glass-dark--hoverable {
  background: rgba(33, 37, 41, 0.2);
  backdrop-filter: blur(40px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.background-glass-dark--hoverable:hover {
  transition: all 0.3s ease;
  background: rgba(33, 37, 41, 0.35);
}

.color-glass-dark {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(33, 37, 41, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-glass-dark--hoverable {
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(33, 37, 41, 0.2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color-glass-dark--hoverable:hover {
  transition: all 0.3s ease;
  color: transparent;
  user-select: none;
  background-clip: text;
  backdrop-filter: blur(40px);
  background: rgba(33, 37, 41, 0.35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-white {
  color: #ffffff !important;
}

.background-white {
  background: #ffffff !important;
}

.color-black {
  color: #000 !important;
}

.background-black {
  background: #000 !important;
}

.color-gray {
  color: #adb5bd !important;
}

.background-gray {
  background: #adb5bd !important;
}

.color-gray-100 {
  color: #f8f9fa;
}

.background-gray-100 {
  background: #f8f9fa;
}

.color-gray-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f8f9fa !important;
}

.background-gray-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f8f9fa !important;
}

.color-gray-100--hoverable {
  color: #f8f9fa !important;
}
.color-gray-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #dae0e5 !important;
}

.background-gray-100--hoverable {
  background-color: #f8f9fa !important;
}
.background-gray-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dae0e5 !important;
}

.color-gray-200 {
  color: #e9ecef;
}

.background-gray-200 {
  background: #e9ecef;
}

.color-gray-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e9ecef !important;
}

.background-gray-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e9ecef !important;
}

.color-gray-200--hoverable {
  color: #e9ecef !important;
}
.color-gray-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #cbd3da !important;
}

.background-gray-200--hoverable {
  background-color: #e9ecef !important;
}
.background-gray-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cbd3da !important;
}

.color-gray-300 {
  color: #dee2e6;
}

.background-gray-300 {
  background: #dee2e6;
}

.color-gray-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #dee2e6 !important;
}

.background-gray-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dee2e6 !important;
}

.color-gray-300--hoverable {
  color: #dee2e6 !important;
}
.color-gray-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #c1c9d0 !important;
}

.background-gray-300--hoverable {
  background-color: #dee2e6 !important;
}
.background-gray-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c1c9d0 !important;
}

.color-gray-400 {
  color: #ced4da;
}

.background-gray-400 {
  background: #ced4da;
}

.color-gray-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ced4da !important;
}

.background-gray-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ced4da !important;
}

.color-gray-400--hoverable {
  color: #ced4da !important;
}
.color-gray-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b1bbc4 !important;
}

.background-gray-400--hoverable {
  background-color: #ced4da !important;
}
.background-gray-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b1bbc4 !important;
}

.color-gray-500 {
  color: #adb5bd;
}

.background-gray-500 {
  background: #adb5bd;
}

.color-gray-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #adb5bd !important;
}

.background-gray-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #adb5bd !important;
}

.color-gray-500--hoverable {
  color: #adb5bd !important;
}
.color-gray-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #919ca6 !important;
}

.background-gray-500--hoverable {
  background-color: #adb5bd !important;
}
.background-gray-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #919ca6 !important;
}

.color-gray-600 {
  color: #6c757d;
}

.background-gray-600 {
  background: #6c757d;
}

.color-gray-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #6c757d !important;
}

.background-gray-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6c757d !important;
}

.color-gray-600--hoverable {
  color: #6c757d !important;
}
.color-gray-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #868e96 !important;
}

.background-gray-600--hoverable {
  background-color: #6c757d !important;
}
.background-gray-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #868e96 !important;
}

.color-gray-700 {
  color: #495057;
}

.background-gray-700 {
  background: #495057;
}

.color-gray-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #495057 !important;
}

.background-gray-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #495057 !important;
}

.color-gray-700--hoverable {
  color: #495057 !important;
}
.color-gray-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #606a73 !important;
}

.background-gray-700--hoverable {
  background-color: #495057 !important;
}
.background-gray-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #606a73 !important;
}

.color-gray-800 {
  color: #343a40;
}

.background-gray-800 {
  background: #343a40;
}

.color-gray-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #343a40 !important;
}

.background-gray-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #343a40 !important;
}

.color-gray-800--hoverable {
  color: #343a40 !important;
}
.color-gray-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #4b545c !important;
}

.background-gray-800--hoverable {
  background-color: #343a40 !important;
}
.background-gray-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4b545c !important;
}

.color-gray-900 {
  color: #212529;
}

.background-gray-900 {
  background: #212529;
}

.color-gray-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #212529 !important;
}

.background-gray-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #212529 !important;
}

.color-gray-900--hoverable {
  color: #212529 !important;
}
.color-gray-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #383f45 !important;
}

.background-gray-900--hoverable {
  background-color: #212529 !important;
}
.background-gray-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #383f45 !important;
}

/* generate other color shades from basic colors eg. cyan-100 */
.color-blue-100 {
  color: #cfe2ff;
}

.background-blue-100 {
  background: #cfe2ff;
}

.color-blue-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #cfe2ff !important;
}

.background-blue-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cfe2ff !important;
}

.color-blue-100--hoverable {
  color: #cfe2ff !important;
}
.color-blue-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #9cc3ff !important;
}

.background-blue-100--hoverable {
  background-color: #cfe2ff !important;
}
.background-blue-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #9cc3ff !important;
}

.color-blue-200 {
  color: #9ec5fe;
}

.background-blue-200 {
  background: #9ec5fe;
}

.color-blue-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #9ec5fe !important;
}

.background-blue-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #9ec5fe !important;
}

.color-blue-200--hoverable {
  color: #9ec5fe !important;
}
.color-blue-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6ca7fd !important;
}

.background-blue-200--hoverable {
  background-color: #9ec5fe !important;
}
.background-blue-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6ca7fd !important;
}

.color-blue-300 {
  color: #6ea8fe;
}

.background-blue-300 {
  background: #6ea8fe;
}

.color-blue-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #6ea8fe !important;
}

.background-blue-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6ea8fe !important;
}

.color-blue-300--hoverable {
  color: #6ea8fe !important;
}
.color-blue-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #3b8afe !important;
}

.background-blue-300--hoverable {
  background-color: #6ea8fe !important;
}
.background-blue-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3b8afe !important;
}

.color-blue-400 {
  color: #3d8bfd;
}

.background-blue-400 {
  background: #3d8bfd;
}

.color-blue-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #3d8bfd !important;
}

.background-blue-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3d8bfd !important;
}

.color-blue-400--hoverable {
  color: #3d8bfd !important;
}
.color-blue-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0b6dfc !important;
}

.background-blue-400--hoverable {
  background-color: #3d8bfd !important;
}
.background-blue-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0b6dfc !important;
}

.color-blue-500 {
  color: #0d6efd;
}

.background-blue-500 {
  background: #0d6efd;
}

.color-blue-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0d6efd !important;
}

.background-blue-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0d6efd !important;
}

.color-blue-500--hoverable {
  color: #0d6efd !important;
}
.color-blue-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0257d5 !important;
}

.background-blue-500--hoverable {
  background-color: #0d6efd !important;
}
.background-blue-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0257d5 !important;
}

.color-blue-600 {
  color: #0a58ca;
}

.background-blue-600 {
  background: #0a58ca;
}

.color-blue-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0a58ca !important;
}

.background-blue-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0a58ca !important;
}

.color-blue-600--hoverable {
  color: #0a58ca !important;
}
.color-blue-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #146ff3 !important;
}

.background-blue-600--hoverable {
  background-color: #0a58ca !important;
}
.background-blue-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #146ff3 !important;
}

.color-blue-700 {
  color: #084298;
}

.background-blue-700 {
  background: #084298;
}

.color-blue-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #084298 !important;
}

.background-blue-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #084298 !important;
}

.color-blue-700--hoverable {
  color: #084298 !important;
}
.color-blue-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0b57c8 !important;
}

.background-blue-700--hoverable {
  background-color: #084298 !important;
}
.background-blue-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0b57c8 !important;
}

.color-blue-800 {
  color: #052c65;
}

.background-blue-800 {
  background: #052c65;
}

.color-blue-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #052c65 !important;
}

.background-blue-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #052c65 !important;
}

.color-blue-800--hoverable {
  color: #052c65 !important;
}
.color-blue-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #074196 !important;
}

.background-blue-800--hoverable {
  background-color: #052c65 !important;
}
.background-blue-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #074196 !important;
}

.color-blue-900 {
  color: #031633;
}

.background-blue-900 {
  background: #031633;
}

.color-blue-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #031633 !important;
}

.background-blue-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #031633 !important;
}

.color-blue-900--hoverable {
  color: #031633 !important;
}
.color-blue-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #062b63 !important;
}

.background-blue-900--hoverable {
  background-color: #031633 !important;
}
.background-blue-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #062b63 !important;
}

.color-indigo-100 {
  color: #e0cffc;
}

.background-indigo-100 {
  background: #e0cffc;
}

.color-indigo-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e0cffc !important;
}

.background-indigo-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e0cffc !important;
}

.color-indigo-100--hoverable {
  color: #e0cffc !important;
}
.color-indigo-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #c19ff9 !important;
}

.background-indigo-100--hoverable {
  background-color: #e0cffc !important;
}
.background-indigo-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c19ff9 !important;
}

.color-indigo-200 {
  color: #c29ffa;
}

.background-indigo-200 {
  background: #c29ffa;
}

.color-indigo-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #c29ffa !important;
}

.background-indigo-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c29ffa !important;
}

.color-indigo-200--hoverable {
  color: #c29ffa !important;
}
.color-indigo-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a36ff7 !important;
}

.background-indigo-200--hoverable {
  background-color: #c29ffa !important;
}
.background-indigo-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a36ff7 !important;
}

.color-indigo-300 {
  color: #a370f7;
}

.background-indigo-300 {
  background: #a370f7;
}

.color-indigo-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a370f7 !important;
}

.background-indigo-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a370f7 !important;
}

.color-indigo-300--hoverable {
  color: #a370f7 !important;
}
.color-indigo-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8440f4 !important;
}

.background-indigo-300--hoverable {
  background-color: #a370f7 !important;
}
.background-indigo-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8440f4 !important;
}

.color-indigo-400 {
  color: #8540f5;
}

.background-indigo-400 {
  background: #8540f5;
}

.color-indigo-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #8540f5 !important;
}

.background-indigo-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8540f5 !important;
}

.color-indigo-400--hoverable {
  color: #8540f5 !important;
}
.color-indigo-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6610f2 !important;
}

.background-indigo-400--hoverable {
  background-color: #8540f5 !important;
}
.background-indigo-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6610f2 !important;
}

.color-indigo-500 {
  color: #6610f2;
}

.background-indigo-500 {
  background: #6610f2;
}

.color-indigo-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #6610f2 !important;
}

.background-indigo-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6610f2 !important;
}

.color-indigo-500--hoverable {
  color: #6610f2 !important;
}
.color-indigo-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #510bc4 !important;
}

.background-indigo-500--hoverable {
  background-color: #6610f2 !important;
}
.background-indigo-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #510bc4 !important;
}

.color-indigo-600 {
  color: #520dc2;
}

.background-indigo-600 {
  background: #520dc2;
}

.color-indigo-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #520dc2 !important;
}

.background-indigo-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #520dc2 !important;
}

.color-indigo-600--hoverable {
  color: #520dc2 !important;
}
.color-indigo-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6713ef !important;
}

.background-indigo-600--hoverable {
  background-color: #520dc2 !important;
}
.background-indigo-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6713ef !important;
}

.color-indigo-700 {
  color: #3d0a91;
}

.background-indigo-700 {
  background: #3d0a91;
}

.color-indigo-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #3d0a91 !important;
}

.background-indigo-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3d0a91 !important;
}

.color-indigo-700--hoverable {
  color: #3d0a91 !important;
}
.color-indigo-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #510dc1 !important;
}

.background-indigo-700--hoverable {
  background-color: #3d0a91 !important;
}
.background-indigo-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #510dc1 !important;
}

.color-indigo-800 {
  color: #290661;
}

.background-indigo-800 {
  background: #290661;
}

.color-indigo-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #290661 !important;
}

.background-indigo-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #290661 !important;
}

.color-indigo-800--hoverable {
  color: #290661 !important;
}
.color-indigo-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #3d0991 !important;
}

.background-indigo-800--hoverable {
  background-color: #290661 !important;
}
.background-indigo-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3d0991 !important;
}

.color-indigo-900 {
  color: #140330;
}

.background-indigo-900 {
  background: #140330;
}

.color-indigo-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #140330 !important;
}

.background-indigo-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #140330 !important;
}

.color-indigo-900--hoverable {
  color: #140330 !important;
}
.color-indigo-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #280660 !important;
}

.background-indigo-900--hoverable {
  background-color: #140330 !important;
}
.background-indigo-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #280660 !important;
}

.color-purple-100 {
  color: #e2d9f3;
}

.background-purple-100 {
  background: #e2d9f3;
}

.color-purple-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e2d9f3 !important;
}

.background-purple-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e2d9f3 !important;
}

.color-purple-100--hoverable {
  color: #e2d9f3 !important;
}
.color-purple-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #c4b2e7 !important;
}

.background-purple-100--hoverable {
  background-color: #e2d9f3 !important;
}
.background-purple-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c4b2e7 !important;
}

.color-purple-200 {
  color: #c5b3e6;
}

.background-purple-200 {
  background: #c5b3e6;
}

.color-purple-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #c5b3e6 !important;
}

.background-purple-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c5b3e6 !important;
}

.color-purple-200--hoverable {
  color: #c5b3e6 !important;
}
.color-purple-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a88dd9 !important;
}

.background-purple-200--hoverable {
  background-color: #c5b3e6 !important;
}
.background-purple-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a88dd9 !important;
}

.color-purple-300 {
  color: #a98eda;
}

.background-purple-300 {
  background: #a98eda;
}

.color-purple-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a98eda !important;
}

.background-purple-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a98eda !important;
}

.color-purple-300--hoverable {
  color: #a98eda !important;
}
.color-purple-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8c68cd !important;
}

.background-purple-300--hoverable {
  background-color: #a98eda !important;
}
.background-purple-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8c68cd !important;
}

.color-purple-400 {
  color: #8c68cd;
}

.background-purple-400 {
  background: #8c68cd;
}

.color-purple-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #8c68cd !important;
}

.background-purple-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8c68cd !important;
}

.color-purple-400--hoverable {
  color: #8c68cd !important;
}
.color-purple-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6f42c0 !important;
}

.background-purple-400--hoverable {
  background-color: #8c68cd !important;
}
.background-purple-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6f42c0 !important;
}

.color-purple-500 {
  color: #6f42c1;
}

.background-purple-500 {
  background: #6f42c1;
}

.color-purple-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #6f42c1 !important;
}

.background-purple-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6f42c1 !important;
}

.color-purple-500--hoverable {
  color: #6f42c1 !important;
}
.color-purple-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #59339d !important;
}

.background-purple-500--hoverable {
  background-color: #6f42c1 !important;
}
.background-purple-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #59339d !important;
}

.color-purple-600 {
  color: #59359a;
}

.background-purple-600 {
  background: #59359a;
}

.color-purple-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #59359a !important;
}

.background-purple-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #59359a !important;
}

.color-purple-600--hoverable {
  color: #59359a !important;
}
.color-purple-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6f44be !important;
}

.background-purple-600--hoverable {
  background-color: #59359a !important;
}
.background-purple-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6f44be !important;
}

.color-purple-700 {
  color: #432874;
}

.background-purple-700 {
  background: #432874;
}

.color-purple-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #432874 !important;
}

.background-purple-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #432874 !important;
}

.color-purple-700--hoverable {
  color: #432874 !important;
}
.color-purple-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #59359a !important;
}

.background-purple-700--hoverable {
  background-color: #432874 !important;
}
.background-purple-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #59359a !important;
}

.color-purple-800 {
  color: #2c1a4d;
}

.background-purple-800 {
  background: #2c1a4d;
}

.color-purple-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #2c1a4d !important;
}

.background-purple-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #2c1a4d !important;
}

.color-purple-800--hoverable {
  color: #2c1a4d !important;
}
.color-purple-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #422773 !important;
}

.background-purple-800--hoverable {
  background-color: #2c1a4d !important;
}
.background-purple-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #422773 !important;
}

.color-purple-900 {
  color: #160d27;
}

.background-purple-900 {
  background: #160d27;
}

.color-purple-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #160d27 !important;
}

.background-purple-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #160d27 !important;
}

.color-purple-900--hoverable {
  color: #160d27 !important;
}
.color-purple-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #2c1a4d !important;
}

.background-purple-900--hoverable {
  background-color: #160d27 !important;
}
.background-purple-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #2c1a4d !important;
}

.color-pink-100 {
  color: #f7d6e6;
}

.background-pink-100 {
  background: #f7d6e6;
}

.color-pink-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f7d6e6 !important;
}

.background-pink-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f7d6e6 !important;
}

.color-pink-100--hoverable {
  color: #f7d6e6 !important;
}
.color-pink-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #efabcc !important;
}

.background-pink-100--hoverable {
  background-color: #f7d6e6 !important;
}
.background-pink-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #efabcc !important;
}

.color-pink-200 {
  color: #efadce;
}

.background-pink-200 {
  background: #efadce;
}

.color-pink-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #efadce !important;
}

.background-pink-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #efadce !important;
}

.color-pink-200--hoverable {
  color: #efadce !important;
}
.color-pink-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #e782b5 !important;
}

.background-pink-200--hoverable {
  background-color: #efadce !important;
}
.background-pink-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e782b5 !important;
}

.color-pink-300 {
  color: #e685b5;
}

.background-pink-300 {
  background: #e685b5;
}

.color-pink-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e685b5 !important;
}

.background-pink-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e685b5 !important;
}

.color-pink-300--hoverable {
  color: #e685b5 !important;
}
.color-pink-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #dd5b9b !important;
}

.background-pink-300--hoverable {
  background-color: #e685b5 !important;
}
.background-pink-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dd5b9b !important;
}

.color-pink-400 {
  color: #de5c9d;
}

.background-pink-400 {
  background: #de5c9d;
}

.color-pink-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #de5c9d !important;
}

.background-pink-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #de5c9d !important;
}

.color-pink-400--hoverable {
  color: #de5c9d !important;
}
.color-pink-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d53284 !important;
}

.background-pink-400--hoverable {
  background-color: #de5c9d !important;
}
.background-pink-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d53284 !important;
}

.color-pink-500 {
  color: #d63384;
}

.background-pink-500 {
  background: #d63384;
}

.color-pink-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #d63384 !important;
}

.background-pink-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d63384 !important;
}

.color-pink-500--hoverable {
  color: #d63384 !important;
}
.color-pink-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b2246b !important;
}

.background-pink-500--hoverable {
  background-color: #d63384 !important;
}
.background-pink-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b2246b !important;
}

.color-pink-600 {
  color: #ab296a;
}

.background-pink-600 {
  background: #ab296a;
}

.color-pink-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ab296a !important;
}

.background-pink-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ab296a !important;
}

.color-pink-600--hoverable {
  color: #ab296a !important;
}
.color-pink-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #cf3884 !important;
}

.background-pink-600--hoverable {
  background-color: #ab296a !important;
}
.background-pink-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cf3884 !important;
}

.color-pink-700 {
  color: #801f4f;
}

.background-pink-700 {
  background: #801f4f;
}

.color-pink-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #801f4f !important;
}

.background-pink-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #801f4f !important;
}

.color-pink-700--hoverable {
  color: #801f4f !important;
}
.color-pink-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a92968 !important;
}

.background-pink-700--hoverable {
  background-color: #801f4f !important;
}
.background-pink-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a92968 !important;
}

.color-pink-800 {
  color: #561435;
}

.background-pink-800 {
  background: #561435;
}

.color-pink-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #561435 !important;
}

.background-pink-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #561435 !important;
}

.color-pink-800--hoverable {
  color: #561435 !important;
}
.color-pink-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #7f1e4f !important;
}

.background-pink-800--hoverable {
  background-color: #561435 !important;
}
.background-pink-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7f1e4f !important;
}

.color-pink-900 {
  color: #2b0a1a;
}

.background-pink-900 {
  background: #2b0a1a;
}

.color-pink-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #2b0a1a !important;
}

.background-pink-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #2b0a1a !important;
}

.color-pink-900--hoverable {
  color: #2b0a1a !important;
}
.color-pink-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #541433 !important;
}

.background-pink-900--hoverable {
  background-color: #2b0a1a !important;
}
.background-pink-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #541433 !important;
}

.color-red-100 {
  color: #f8d7da;
}

.background-red-100 {
  background: #f8d7da;
}

.color-red-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f8d7da !important;
}

.background-red-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f8d7da !important;
}

.color-red-100--hoverable {
  color: #f8d7da !important;
}
.color-red-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #f0acb2 !important;
}

.background-red-100--hoverable {
  background-color: #f8d7da !important;
}
.background-red-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f0acb2 !important;
}

.color-red-200 {
  color: #f1aeb5;
}

.background-red-200 {
  background: #f1aeb5;
}

.color-red-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f1aeb5 !important;
}

.background-red-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f1aeb5 !important;
}

.color-red-200--hoverable {
  color: #f1aeb5 !important;
}
.color-red-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #e9838d !important;
}

.background-red-200--hoverable {
  background-color: #f1aeb5 !important;
}
.background-red-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e9838d !important;
}

.color-red-300 {
  color: #ea868f;
}

.background-red-300 {
  background: #ea868f;
}

.color-red-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ea868f !important;
}

.background-red-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ea868f !important;
}

.color-red-300--hoverable {
  color: #ea868f !important;
}
.color-red-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #e25b67 !important;
}

.background-red-300--hoverable {
  background-color: #ea868f !important;
}
.background-red-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e25b67 !important;
}

.color-red-400 {
  color: #e35d6a;
}

.background-red-400 {
  background: #e35d6a;
}

.color-red-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e35d6a !important;
}

.background-red-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e35d6a !important;
}

.color-red-400--hoverable {
  color: #e35d6a !important;
}
.color-red-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #db3242 !important;
}

.background-red-400--hoverable {
  background-color: #e35d6a !important;
}
.background-red-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #db3242 !important;
}

.color-red-500 {
  color: #dc3545;
}

.background-red-500 {
  background: #dc3545;
}

.color-red-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #dc3545 !important;
}

.background-red-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dc3545 !important;
}

.color-red-500--hoverable {
  color: #dc3545 !important;
}
.color-red-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #bd2130 !important;
}

.background-red-500--hoverable {
  background-color: #dc3545 !important;
}
.background-red-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #bd2130 !important;
}

.color-red-600 {
  color: #b02a37;
}

.background-red-600 {
  background: #b02a37;
}

.color-red-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #b02a37 !important;
}

.background-red-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b02a37 !important;
}

.color-red-600--hoverable {
  color: #b02a37 !important;
}
.color-red-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d13c4b !important;
}

.background-red-600--hoverable {
  background-color: #b02a37 !important;
}
.background-red-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d13c4b !important;
}

.color-red-700 {
  color: #842029;
}

.background-red-700 {
  background: #842029;
}

.color-red-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #842029 !important;
}

.background-red-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #842029 !important;
}

.color-red-700--hoverable {
  color: #842029 !important;
}
.color-red-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ad2a36 !important;
}

.background-red-700--hoverable {
  background-color: #842029 !important;
}
.background-red-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ad2a36 !important;
}

.color-red-800 {
  color: #58151c;
}

.background-red-800 {
  background: #58151c;
}

.color-red-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #58151c !important;
}

.background-red-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #58151c !important;
}

.color-red-800--hoverable {
  color: #58151c !important;
}
.color-red-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #811f29 !important;
}

.background-red-800--hoverable {
  background-color: #58151c !important;
}
.background-red-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #811f29 !important;
}

.color-red-900 {
  color: #2c0b0e;
}

.background-red-900 {
  background: #2c0b0e;
}

.color-red-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #2c0b0e !important;
}

.background-red-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #2c0b0e !important;
}

.color-red-900--hoverable {
  color: #2c0b0e !important;
}
.color-red-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #55151b !important;
}

.background-red-900--hoverable {
  background-color: #2c0b0e !important;
}
.background-red-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #55151b !important;
}

.color-orange-100 {
  color: #ffe5d0;
}

.background-orange-100 {
  background: #ffe5d0;
}

.color-orange-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffe5d0 !important;
}

.background-orange-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffe5d0 !important;
}

.color-orange-100--hoverable {
  color: #ffe5d0 !important;
}
.color-orange-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffc99d !important;
}

.background-orange-100--hoverable {
  background-color: #ffe5d0 !important;
}
.background-orange-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffc99d !important;
}

.color-orange-200 {
  color: #fecba1;
}

.background-orange-200 {
  background: #fecba1;
}

.color-orange-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fecba1 !important;
}

.background-orange-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fecba1 !important;
}

.color-orange-200--hoverable {
  color: #fecba1 !important;
}
.color-orange-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fdaf6f !important;
}

.background-orange-200--hoverable {
  background-color: #fecba1 !important;
}
.background-orange-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fdaf6f !important;
}

.color-orange-300 {
  color: #feb272;
}

.background-orange-300 {
  background: #feb272;
}

.color-orange-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #feb272 !important;
}

.background-orange-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #feb272 !important;
}

.color-orange-300--hoverable {
  color: #feb272 !important;
}
.color-orange-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fe963f !important;
}

.background-orange-300--hoverable {
  background-color: #feb272 !important;
}
.background-orange-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fe963f !important;
}

.color-orange-400 {
  color: #fd9843;
}

.background-orange-400 {
  background: #fd9843;
}

.color-orange-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fd9843 !important;
}

.background-orange-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd9843 !important;
}

.color-orange-400--hoverable {
  color: #fd9843 !important;
}
.color-orange-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fc7c11 !important;
}

.background-orange-400--hoverable {
  background-color: #fd9843 !important;
}
.background-orange-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc7c11 !important;
}

.color-orange-500 {
  color: #fd7e14;
}

.background-orange-500 {
  background: #fd7e14;
}

.color-orange-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fd7e14 !important;
}

.background-orange-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd7e14 !important;
}

.color-orange-500--hoverable {
  color: #fd7e14 !important;
}
.color-orange-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #dc6502 !important;
}

.background-orange-500--hoverable {
  background-color: #fd7e14 !important;
}
.background-orange-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dc6502 !important;
}

.color-orange-600 {
  color: #ca6510;
}

.background-orange-600 {
  background: #ca6510;
}

.color-orange-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ca6510 !important;
}

.background-orange-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ca6510 !important;
}

.color-orange-600--hoverable {
  color: #ca6510 !important;
}
.color-orange-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ed7e20 !important;
}

.background-orange-600--hoverable {
  background-color: #ca6510 !important;
}
.background-orange-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ed7e20 !important;
}

.color-orange-700 {
  color: #984c0c;
}

.background-orange-700 {
  background: #984c0c;
}

.color-orange-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #984c0c !important;
}

.background-orange-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #984c0c !important;
}

.color-orange-700--hoverable {
  color: #984c0c !important;
}
.color-orange-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #c76410 !important;
}

.background-orange-700--hoverable {
  background-color: #984c0c !important;
}
.background-orange-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c76410 !important;
}

.color-orange-800 {
  color: #653208;
}

.background-orange-800 {
  background: #653208;
}

.color-orange-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #653208 !important;
}

.background-orange-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #653208 !important;
}

.color-orange-800--hoverable {
  color: #653208 !important;
}
.color-orange-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #94490c !important;
}

.background-orange-800--hoverable {
  background-color: #653208 !important;
}
.background-orange-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #94490c !important;
}

.color-orange-900 {
  color: #331904;
}

.background-orange-900 {
  background: #331904;
}

.color-orange-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #331904 !important;
}

.background-orange-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #331904 !important;
}

.color-orange-900--hoverable {
  color: #331904 !important;
}
.color-orange-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #623008 !important;
}

.background-orange-900--hoverable {
  background-color: #331904 !important;
}
.background-orange-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #623008 !important;
}

.color-yellow-100 {
  color: #fff3cd;
}

.background-yellow-100 {
  background: #fff3cd;
}

.color-yellow-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fff3cd !important;
}

.background-yellow-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fff3cd !important;
}

.color-yellow-100--hoverable {
  color: #fff3cd !important;
}
.color-yellow-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffe79a !important;
}

.background-yellow-100--hoverable {
  background-color: #fff3cd !important;
}
.background-yellow-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffe79a !important;
}

.color-yellow-200 {
  color: #ffe69c;
}

.background-yellow-200 {
  background: #ffe69c;
}

.color-yellow-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffe69c !important;
}

.background-yellow-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffe69c !important;
}

.color-yellow-200--hoverable {
  color: #ffe69c !important;
}
.color-yellow-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffd969 !important;
}

.background-yellow-200--hoverable {
  background-color: #ffe69c !important;
}
.background-yellow-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffd969 !important;
}

.color-yellow-300 {
  color: #ffda6a;
}

.background-yellow-300 {
  background: #ffda6a;
}

.color-yellow-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffda6a !important;
}

.background-yellow-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffda6a !important;
}

.color-yellow-300--hoverable {
  color: #ffda6a !important;
}
.color-yellow-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffcd37 !important;
}

.background-yellow-300--hoverable {
  background-color: #ffda6a !important;
}
.background-yellow-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffcd37 !important;
}

.color-yellow-400 {
  color: #ffcd39;
}

.background-yellow-400 {
  background: #ffcd39;
}

.color-yellow-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffcd39 !important;
}

.background-yellow-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffcd39 !important;
}

.color-yellow-400--hoverable {
  color: #ffcd39 !important;
}
.color-yellow-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffc006 !important;
}

.background-yellow-400--hoverable {
  background-color: #ffcd39 !important;
}
.background-yellow-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffc006 !important;
}

.color-yellow-500 {
  color: #ffc107;
}

.background-yellow-500 {
  background: #ffc107;
}

.color-yellow-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffc107 !important;
}

.background-yellow-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffc107 !important;
}

.color-yellow-500--hoverable {
  color: #ffc107 !important;
}
.color-yellow-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d39e00 !important;
}

.background-yellow-500--hoverable {
  background-color: #ffc107 !important;
}
.background-yellow-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d39e00 !important;
}

.color-yellow-600 {
  color: #cc9a06;
}

.background-yellow-600 {
  background: #cc9a06;
}

.color-yellow-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #cc9a06 !important;
}

.background-yellow-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cc9a06 !important;
}

.color-yellow-600--hoverable {
  color: #cc9a06 !important;
}
.color-yellow-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #f8bd0d !important;
}

.background-yellow-600--hoverable {
  background-color: #cc9a06 !important;
}
.background-yellow-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f8bd0d !important;
}

.color-yellow-700 {
  color: #997404;
}

.background-yellow-700 {
  background: #997404;
}

.color-yellow-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #997404 !important;
}

.background-yellow-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #997404 !important;
}

.color-yellow-700--hoverable {
  color: #997404 !important;
}
.color-yellow-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #cb9a05 !important;
}

.background-yellow-700--hoverable {
  background-color: #997404 !important;
}
.background-yellow-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cb9a05 !important;
}

.color-yellow-800 {
  color: #664d03;
}

.background-yellow-800 {
  background: #664d03;
}

.color-yellow-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #664d03 !important;
}

.background-yellow-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #664d03 !important;
}

.color-yellow-800--hoverable {
  color: #664d03 !important;
}
.color-yellow-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #987204 !important;
}

.background-yellow-800--hoverable {
  background-color: #664d03 !important;
}
.background-yellow-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #987204 !important;
}

.color-yellow-900 {
  color: #332701;
}

.background-yellow-900 {
  background: #332701;
}

.color-yellow-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #332701 !important;
}

.background-yellow-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #332701 !important;
}

.color-yellow-900--hoverable {
  color: #332701 !important;
}
.color-yellow-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #654d02 !important;
}

.background-yellow-900--hoverable {
  background-color: #332701 !important;
}
.background-yellow-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #654d02 !important;
}

.color-green-100 {
  color: #d1e7dd;
}

.background-green-100 {
  background: #d1e7dd;
}

.color-green-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #d1e7dd !important;
}

.background-green-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d1e7dd !important;
}

.color-green-100--hoverable {
  color: #d1e7dd !important;
}
.color-green-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #afd6c4 !important;
}

.background-green-100--hoverable {
  background-color: #d1e7dd !important;
}
.background-green-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #afd6c4 !important;
}

.color-green-200 {
  color: #a3cfbb;
}

.background-green-200 {
  background: #a3cfbb;
}

.color-green-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a3cfbb !important;
}

.background-green-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a3cfbb !important;
}

.color-green-200--hoverable {
  color: #a3cfbb !important;
}
.color-green-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #81bea2 !important;
}

.background-green-200--hoverable {
  background-color: #a3cfbb !important;
}
.background-green-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #81bea2 !important;
}

.color-green-300 {
  color: #75b798;
}

.background-green-300 {
  background: #75b798;
}

.color-green-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #75b798 !important;
}

.background-green-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #75b798 !important;
}

.color-green-300--hoverable {
  color: #75b798 !important;
}
.color-green-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #55a47f !important;
}

.background-green-300--hoverable {
  background-color: #75b798 !important;
}
.background-green-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #55a47f !important;
}

.color-green-400 {
  color: #479f76;
}

.background-green-400 {
  background: #479f76;
}

.color-green-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #479f76 !important;
}

.background-green-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #479f76 !important;
}

.color-green-400--hoverable {
  color: #479f76 !important;
}
.color-green-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #61b88f !important;
}

.background-green-400--hoverable {
  background-color: #479f76 !important;
}
.background-green-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #61b88f !important;
}

.color-green-500 {
  color: #198754;
}

.background-green-500 {
  background: #198754;
}

.color-green-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #198754 !important;
}

.background-green-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #198754 !important;
}

.color-green-500--hoverable {
  color: #198754 !important;
}
.color-green-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #21b26f !important;
}

.background-green-500--hoverable {
  background-color: #198754 !important;
}
.background-green-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #21b26f !important;
}

.color-green-600 {
  color: #146c43;
}

.background-green-600 {
  background: #146c43;
}

.color-green-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #146c43 !important;
}

.background-green-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #146c43 !important;
}

.color-green-600--hoverable {
  color: #146c43 !important;
}
.color-green-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #1c975e !important;
}

.background-green-600--hoverable {
  background-color: #146c43 !important;
}
.background-green-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1c975e !important;
}

.color-green-700 {
  color: #0f5132;
}

.background-green-700 {
  background: #0f5132;
}

.color-green-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0f5132 !important;
}

.background-green-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0f5132 !important;
}

.color-green-700--hoverable {
  color: #0f5132 !important;
}
.color-green-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #177c4d !important;
}

.background-green-700--hoverable {
  background-color: #0f5132 !important;
}
.background-green-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #177c4d !important;
}

.color-green-800 {
  color: #0a3622;
}

.background-green-800 {
  background: #0a3622;
}

.color-green-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0a3622 !important;
}

.background-green-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0a3622 !important;
}

.color-green-800--hoverable {
  color: #0a3622 !important;
}
.color-green-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #12613d !important;
}

.background-green-800--hoverable {
  background-color: #0a3622 !important;
}
.background-green-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #12613d !important;
}

.color-green-900 {
  color: #051b11;
}

.background-green-900 {
  background: #051b11;
}

.color-green-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #051b11 !important;
}

.background-green-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #051b11 !important;
}

.color-green-900--hoverable {
  color: #051b11 !important;
}
.color-green-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0d462c !important;
}

.background-green-900--hoverable {
  background-color: #051b11 !important;
}
.background-green-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0d462c !important;
}

.color-teal-100 {
  color: #d2f4ea;
}

.background-teal-100 {
  background: #d2f4ea;
}

.color-teal-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #d2f4ea !important;
}

.background-teal-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d2f4ea !important;
}

.color-teal-100--hoverable {
  color: #d2f4ea !important;
}
.color-teal-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a9ead7 !important;
}

.background-teal-100--hoverable {
  background-color: #d2f4ea !important;
}
.background-teal-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a9ead7 !important;
}

.color-teal-200 {
  color: #a6e9d5;
}

.background-teal-200 {
  background: #a6e9d5;
}

.color-teal-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a6e9d5 !important;
}

.background-teal-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a6e9d5 !important;
}

.color-teal-200--hoverable {
  color: #a6e9d5 !important;
}
.color-teal-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #7ddfc2 !important;
}

.background-teal-200--hoverable {
  background-color: #a6e9d5 !important;
}
.background-teal-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7ddfc2 !important;
}

.color-teal-300 {
  color: #79dfc1;
}

.background-teal-300 {
  background: #79dfc1;
}

.color-teal-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #79dfc1 !important;
}

.background-teal-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #79dfc1 !important;
}

.color-teal-300--hoverable {
  color: #79dfc1 !important;
}
.color-teal-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #50d5ae !important;
}

.background-teal-300--hoverable {
  background-color: #79dfc1 !important;
}
.background-teal-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #50d5ae !important;
}

.color-teal-400 {
  color: #4dd4ac;
}

.background-teal-400 {
  background: #4dd4ac;
}

.color-teal-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #4dd4ac !important;
}

.background-teal-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4dd4ac !important;
}

.color-teal-400--hoverable {
  color: #4dd4ac !important;
}
.color-teal-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #2ec095 !important;
}

.background-teal-400--hoverable {
  background-color: #4dd4ac !important;
}
.background-teal-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #2ec095 !important;
}

.color-teal-500 {
  color: #20c997;
}

.background-teal-500 {
  background: #20c997;
}

.color-teal-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #20c997 !important;
}

.background-teal-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #20c997 !important;
}

.color-teal-500--hoverable {
  color: #20c997 !important;
}
.color-teal-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #3ce0af !important;
}

.background-teal-500--hoverable {
  background-color: #20c997 !important;
}
.background-teal-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3ce0af !important;
}

.color-teal-600 {
  color: #1aa179;
}

.background-teal-600 {
  background: #1aa179;
}

.color-teal-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #1aa179 !important;
}

.background-teal-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1aa179 !important;
}

.color-teal-600--hoverable {
  color: #1aa179 !important;
}
.color-teal-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #21cd9a !important;
}

.background-teal-600--hoverable {
  background-color: #1aa179 !important;
}
.background-teal-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #21cd9a !important;
}

.color-teal-700 {
  color: #13795b;
}

.background-teal-700 {
  background: #13795b;
}

.color-teal-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #13795b !important;
}

.background-teal-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #13795b !important;
}

.color-teal-700--hoverable {
  color: #13795b !important;
}
.color-teal-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #1aa57c !important;
}

.background-teal-700--hoverable {
  background-color: #13795b !important;
}
.background-teal-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1aa57c !important;
}

.color-teal-800 {
  color: #0d503c;
}

.background-teal-800 {
  background: #0d503c;
}

.color-teal-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0d503c !important;
}

.background-teal-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0d503c !important;
}

.color-teal-800--hoverable {
  color: #0d503c !important;
}
.color-teal-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #147c5d !important;
}

.background-teal-800--hoverable {
  background-color: #0d503c !important;
}
.background-teal-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #147c5d !important;
}

.color-teal-900 {
  color: #06281e;
}

.background-teal-900 {
  background: #06281e;
}

.color-teal-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #06281e !important;
}

.background-teal-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #06281e !important;
}

.color-teal-900--hoverable {
  color: #06281e !important;
}
.color-teal-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0d543f !important;
}

.background-teal-900--hoverable {
  background-color: #06281e !important;
}
.background-teal-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0d543f !important;
}

.color-cyan-100 {
  color: #cff4fc;
}

.background-cyan-100 {
  background: #cff4fc;
}

.color-cyan-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #cff4fc !important;
}

.background-cyan-100-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cff4fc !important;
}

.color-cyan-100--hoverable {
  color: #cff4fc !important;
}
.color-cyan-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #9fe9f9 !important;
}

.background-cyan-100--hoverable {
  background-color: #cff4fc !important;
}
.background-cyan-100--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #9fe9f9 !important;
}

.color-cyan-200 {
  color: #9eeaf9;
}

.background-cyan-200 {
  background: #9eeaf9;
}

.color-cyan-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #9eeaf9 !important;
}

.background-cyan-200-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #9eeaf9 !important;
}

.color-cyan-200--hoverable {
  color: #9eeaf9 !important;
}
.color-cyan-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6ee0f6 !important;
}

.background-cyan-200--hoverable {
  background-color: #9eeaf9 !important;
}
.background-cyan-200--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6ee0f6 !important;
}

.color-cyan-300 {
  color: #6edff6;
}

.background-cyan-300 {
  background: #6edff6;
}

.color-cyan-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #6edff6 !important;
}

.background-cyan-300-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6edff6 !important;
}

.color-cyan-300--hoverable {
  color: #6edff6 !important;
}
.color-cyan-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #3ed4f3 !important;
}

.background-cyan-300--hoverable {
  background-color: #6edff6 !important;
}
.background-cyan-300--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3ed4f3 !important;
}

.color-cyan-400 {
  color: #3dd5f3;
}

.background-cyan-400 {
  background: #3dd5f3;
}

.color-cyan-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #3dd5f3 !important;
}

.background-cyan-400-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3dd5f3 !important;
}

.color-cyan-400--hoverable {
  color: #3dd5f3 !important;
}
.color-cyan-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0fc9ee !important;
}

.background-cyan-400--hoverable {
  background-color: #3dd5f3 !important;
}
.background-cyan-400--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0fc9ee !important;
}

.color-cyan-500 {
  color: #0dcaf0;
}

.background-cyan-500 {
  background: #0dcaf0;
}

.color-cyan-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0dcaf0 !important;
}

.background-cyan-500-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0dcaf0 !important;
}

.color-cyan-500--hoverable {
  color: #0dcaf0 !important;
}
.color-cyan-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #3cd5f4 !important;
}

.background-cyan-500--hoverable {
  background-color: #0dcaf0 !important;
}
.background-cyan-500--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3cd5f4 !important;
}

.color-cyan-600 {
  color: #0aa2c0;
}

.background-cyan-600 {
  background: #0aa2c0;
}

.color-cyan-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0aa2c0 !important;
}

.background-cyan-600-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0aa2c0 !important;
}

.color-cyan-600--hoverable {
  color: #0aa2c0 !important;
}
.color-cyan-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0dcbf0 !important;
}

.background-cyan-600--hoverable {
  background-color: #0aa2c0 !important;
}
.background-cyan-600--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0dcbf0 !important;
}

.color-cyan-700 {
  color: #087990;
}

.background-cyan-700 {
  background: #087990;
}

.color-cyan-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #087990 !important;
}

.background-cyan-700-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #087990 !important;
}

.color-cyan-700--hoverable {
  color: #087990 !important;
}
.color-cyan-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0ba2c0 !important;
}

.background-cyan-700--hoverable {
  background-color: #087990 !important;
}
.background-cyan-700--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0ba2c0 !important;
}

.color-cyan-800 {
  color: #055160;
}

.background-cyan-800 {
  background: #055160;
}

.color-cyan-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #055160 !important;
}

.background-cyan-800-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #055160 !important;
}

.color-cyan-800--hoverable {
  color: #055160 !important;
}
.color-cyan-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #087a90 !important;
}

.background-cyan-800--hoverable {
  background-color: #055160 !important;
}
.background-cyan-800--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #087a90 !important;
}

.color-cyan-900 {
  color: #032830;
}

.background-cyan-900 {
  background: #032830;
}

.color-cyan-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #032830 !important;
}

.background-cyan-900-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #032830 !important;
}

.color-cyan-900--hoverable {
  color: #032830 !important;
}
.color-cyan-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #065060 !important;
}

.background-cyan-900--hoverable {
  background-color: #032830 !important;
}
.background-cyan-900--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #065060 !important;
}

.color-red {
  color: #df1125;
}

.background-red {
  background: #df1125;
}

.color-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #df1125 !important;
}

.background-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #df1125 !important;
}

.color-red--hoverable {
  color: #df1125 !important;
}
.color-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ef3446 !important;
}

.background-red--hoverable {
  background-color: #df1125 !important;
}
.background-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ef3446 !important;
}

.color-neon-pink {
  color: #fb212f;
}

.background-neon-pink {
  background: #fb212f;
}

.color-neon-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fb212f !important;
}

.background-neon-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fb212f !important;
}

.color-neon-pink--hoverable {
  color: #fb212f !important;
}
.color-neon-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #e50413 !important;
}

.background-neon-pink--hoverable {
  background-color: #fb212f !important;
}
.background-neon-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e50413 !important;
}

.color-electric-pink {
  color: #fc3644;
}

.background-electric-pink {
  background: #fc3644;
}

.color-electric-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fc3644 !important;
}

.background-electric-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc3644 !important;
}

.color-electric-pink--hoverable {
  color: #fc3644 !important;
}
.color-electric-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fb0415 !important;
}

.background-electric-pink--hoverable {
  background-color: #fc3644 !important;
}
.background-electric-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fb0415 !important;
}

.color-hibiscus {
  color: #fb0049;
}

.background-hibiscus {
  background: #fb0049;
}

.color-hibiscus-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fb0049 !important;
}

.background-hibiscus-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fb0049 !important;
}

.color-hibiscus--hoverable {
  color: #fb0049 !important;
}
.color-hibiscus--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ff2f6b !important;
}

.background-hibiscus--hoverable {
  background-color: #fb0049 !important;
}
.background-hibiscus--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ff2f6b !important;
}

.color-pink {
  color: #fd4154;
}

.background-pink {
  background: #fd4154;
}

.color-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fd4154 !important;
}

.background-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd4154 !important;
}

.color-pink--hoverable {
  color: #fd4154 !important;
}
.color-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fc0f27 !important;
}

.background-pink--hoverable {
  background-color: #fd4154 !important;
}
.background-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc0f27 !important;
}

.color-pink-citrus {
  color: #ea383a;
}

.background-pink-citrus {
  background: #ea383a;
}

.color-pink-citrus-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ea383a !important;
}

.background-pink-citrus-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ea383a !important;
}

.color-pink-citrus--hoverable {
  color: #ea383a !important;
}
.color-pink-citrus--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d81719 !important;
}

.background-pink-citrus--hoverable {
  background-color: #ea383a !important;
}
.background-pink-citrus--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d81719 !important;
}

.color-dragon-fruit {
  color: #f12e6d;
}

.background-dragon-fruit {
  background: #f12e6d;
}

.color-dragon-fruit-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f12e6d !important;
}

.background-dragon-fruit-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f12e6d !important;
}

.color-dragon-fruit--hoverable {
  color: #f12e6d !important;
}
.color-dragon-fruit--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #dd0f51 !important;
}

.background-dragon-fruit--hoverable {
  background-color: #f12e6d !important;
}
.background-dragon-fruit--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dd0f51 !important;
}

.color-pomagranate {
  color: #d80e4f;
}

.background-pomagranate {
  background: #d80e4f;
}

.color-pomagranate-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #d80e4f !important;
}

.background-pomagranate-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d80e4f !important;
}

.color-pomagranate--hoverable {
  color: #d80e4f !important;
}
.color-pomagranate--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #f12869 !important;
}

.background-pomagranate--hoverable {
  background-color: #d80e4f !important;
}
.background-pomagranate--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f12869 !important;
}

.color-camellia {
  color: #bf3138;
}

.background-camellia {
  background: #bf3138;
}

.color-camellia-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #bf3138 !important;
}

.background-camellia-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #bf3138 !important;
}

.color-camellia--hoverable {
  color: #bf3138 !important;
}
.color-camellia--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d25157 !important;
}

.background-camellia--hoverable {
  background-color: #bf3138 !important;
}
.background-camellia--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d25157 !important;
}

.color-red-rose {
  color: #ab1438;
}

.background-red-rose {
  background: #ab1438;
}

.color-red-rose-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ab1438 !important;
}

.background-red-rose-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ab1438 !important;
}

.color-red-rose--hoverable {
  color: #ab1438 !important;
}
.color-red-rose--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d91947 !important;
}

.background-red-rose--hoverable {
  background-color: #ab1438 !important;
}
.background-red-rose--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d91947 !important;
}

.color-plum {
  color: #81323d;
}

.background-plum {
  background: #81323d;
}

.color-plum-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #81323d !important;
}

.background-plum-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #81323d !important;
}

.color-plum--hoverable {
  color: #81323d !important;
}
.color-plum--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a6404e !important;
}

.background-plum--hoverable {
  background-color: #81323d !important;
}
.background-plum--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a6404e !important;
}

.color-orange {
  color: #fc4e12;
}

.background-orange {
  background: #fc4e12;
}

.color-orange-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fc4e12 !important;
}

.background-orange-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc4e12 !important;
}

.color-orange--hoverable {
  color: #fc4e12 !important;
}
.color-orange--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d83903 !important;
}

.background-orange--hoverable {
  background-color: #fc4e12 !important;
}
.background-orange--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d83903 !important;
}

.color-clementine {
  color: #fd513b;
}

.background-clementine {
  background: #fd513b;
}

.color-clementine-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fd513b !important;
}

.background-clementine-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd513b !important;
}

.color-clementine--hoverable {
  color: #fd513b !important;
}
.color-clementine--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fc2409 !important;
}

.background-clementine--hoverable {
  background-color: #fd513b !important;
}
.background-clementine--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc2409 !important;
}

.color-apricot {
  color: #fc5c42;
}

.background-apricot {
  background: #fc5c42;
}

.color-apricot-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fc5c42 !important;
}

.background-apricot-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc5c42 !important;
}

.color-apricot--hoverable {
  color: #fc5c42 !important;
}
.color-apricot--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fb3110 !important;
}

.background-apricot--hoverable {
  background-color: #fc5c42 !important;
}
.background-apricot--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fb3110 !important;
}

.color-papaya {
  color: #fd7036;
}

.background-papaya {
  background: #fd7036;
}

.color-papaya-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fd7036 !important;
}

.background-papaya-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd7036 !important;
}

.color-papaya--hoverable {
  color: #fd7036 !important;
}
.color-papaya--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fc4c04 !important;
}

.background-papaya--hoverable {
  background-color: #fd7036 !important;
}
.background-papaya--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc4c04 !important;
}

.color-kumquat {
  color: #fd7441;
}

.background-kumquat {
  background: #fd7441;
}

.color-kumquat-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fd7441 !important;
}

.background-kumquat-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd7441 !important;
}

.color-kumquat--hoverable {
  color: #fd7441 !important;
}
.color-kumquat--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fc4f0f !important;
}

.background-kumquat--hoverable {
  background-color: #fd7441 !important;
}
.background-kumquat--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc4f0f !important;
}

.color-light-orange {
  color: #fd820b;
}

.background-light-orange {
  background: #fd820b;
}

.color-light-orange-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fd820b !important;
}

.background-light-orange-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd820b !important;
}

.color-light-orange--hoverable {
  color: #fd820b !important;
}
.color-light-orange--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d36902 !important;
}

.background-light-orange--hoverable {
  background-color: #fd820b !important;
}
.background-light-orange--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d36902 !important;
}

.color-peach {
  color: #e0694e;
}

.background-peach {
  background: #e0694e;
}

.color-peach-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e0694e !important;
}

.background-peach-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e0694e !important;
}

.color-peach--hoverable {
  color: #e0694e !important;
}
.color-peach--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d64625 !important;
}

.background-peach--hoverable {
  background-color: #e0694e !important;
}
.background-peach--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d64625 !important;
}

.color-flamingo {
  color: #ca6f59;
}

.background-flamingo {
  background: #ca6f59;
}

.color-flamingo-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ca6f59 !important;
}

.background-flamingo-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ca6f59 !important;
}

.color-flamingo--hoverable {
  color: #ca6f59 !important;
}
.color-flamingo--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b6523a !important;
}

.background-flamingo--hoverable {
  background-color: #ca6f59 !important;
}
.background-flamingo--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b6523a !important;
}

.color-rose-gold {
  color: #e99475;
}

.background-rose-gold {
  background: #e99475;
}

.color-rose-gold-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e99475 !important;
}

.background-rose-gold-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e99475 !important;
}

.color-rose-gold--hoverable {
  color: #e99475 !important;
}
.color-rose-gold--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #e27249 !important;
}

.background-rose-gold--hoverable {
  background-color: #e99475 !important;
}
.background-rose-gold--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e27249 !important;
}

.color-pink-sand {
  color: #feb69c;
}

.background-pink-sand {
  background: #feb69c;
}

.color-pink-sand-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #feb69c !important;
}

.background-pink-sand-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #feb69c !important;
}

.color-pink-sand--hoverable {
  color: #feb69c !important;
}
.color-pink-sand--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fd916a !important;
}

.background-pink-sand--hoverable {
  background-color: #feb69c !important;
}
.background-pink-sand--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fd916a !important;
}

.color-light-pink {
  color: #f19f9d;
}

.background-light-pink {
  background: #f19f9d;
}

.color-light-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f19f9d !important;
}

.background-light-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f19f9d !important;
}

.color-light-pink--hoverable {
  color: #f19f9d !important;
}
.color-light-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #eb7370 !important;
}

.background-light-pink--hoverable {
  background-color: #f19f9d !important;
}
.background-light-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #eb7370 !important;
}

.color-vintage-rose {
  color: #f29c98;
}

.background-vintage-rose {
  background: #f29c98;
}

.color-vintage-rose-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f29c98 !important;
}

.background-vintage-rose-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f29c98 !important;
}

.color-vintage-rose--hoverable {
  color: #f29c98 !important;
}
.color-vintage-rose--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ec706b !important;
}

.background-vintage-rose--hoverable {
  background-color: #f29c98 !important;
}
.background-vintage-rose--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ec706b !important;
}

.color-grapefruit {
  color: #fda27e;
}

.background-grapefruit {
  background: #fda27e;
}

.color-grapefruit-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fda27e !important;
}

.background-grapefruit-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fda27e !important;
}

.color-grapefruit--hoverable {
  color: #fda27e !important;
}
.color-grapefruit--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fc7e4c !important;
}

.background-grapefruit--hoverable {
  background-color: #fda27e !important;
}
.background-grapefruit--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fc7e4c !important;
}

.color-cream {
  color: #ffe0ab;
}

.background-cream {
  background: #ffe0ab;
}

.color-cream-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffe0ab !important;
}

.background-cream-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffe0ab !important;
}

.color-cream--hoverable {
  color: #ffe0ab !important;
}
.color-cream--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffcd78 !important;
}

.background-cream--hoverable {
  background-color: #ffe0ab !important;
}
.background-cream--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffcd78 !important;
}

.color-mellow-yellow {
  color: #f7f6af;
}

.background-mellow-yellow {
  background: #f7f6af;
}

.color-mellow-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f7f6af !important;
}

.background-mellow-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f7f6af !important;
}

.color-mellow-yellow--hoverable {
  color: #f7f6af !important;
}
.color-mellow-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #f2f181 !important;
}

.background-mellow-yellow--hoverable {
  background-color: #f7f6af !important;
}
.background-mellow-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f2f181 !important;
}

.color-canary-yellow {
  color: #ffda3a;
}

.background-canary-yellow {
  background: #ffda3a;
}

.color-canary-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffda3a !important;
}

.background-canary-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffda3a !important;
}

.color-canary-yellow--hoverable {
  color: #ffda3a !important;
}
.color-canary-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffd007 !important;
}

.background-canary-yellow--hoverable {
  background-color: #ffda3a !important;
}
.background-canary-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffd007 !important;
}

.color-pollen {
  color: #fecb4d;
}

.background-pollen {
  background: #fecb4d;
}

.color-pollen-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #fecb4d !important;
}

.background-pollen-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fecb4d !important;
}

.color-pollen--hoverable {
  color: #fecb4d !important;
}
.color-pollen--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #febc1a !important;
}

.background-pollen--hoverable {
  background-color: #fecb4d !important;
}
.background-pollen--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #febc1a !important;
}

.color-yellow {
  color: #e8c511;
}

.background-yellow {
  background: #e8c511;
}

.color-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e8c511 !important;
}

.background-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e8c511 !important;
}

.color-yellow--hoverable {
  color: #e8c511 !important;
}
.color-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #f1d33b !important;
}

.background-yellow--hoverable {
  background-color: #e8c511 !important;
}
.background-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f1d33b !important;
}

.color-flash-light {
  color: #faed0b;
}

.background-flash-light {
  background: #faed0b;
}

.color-flash-light-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #faed0b !important;
}

.background-flash-light-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #faed0b !important;
}

.color-flash-light--hoverable {
  color: #faed0b !important;
}
.color-flash-light--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #cec304 !important;
}

.background-flash-light--hoverable {
  background-color: #faed0b !important;
}
.background-flash-light--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cec304 !important;
}

.color-lemon-cream {
  color: #ffeb6d;
}

.background-lemon-cream {
  background: #ffeb6d;
}

.color-lemon-cream-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffeb6d !important;
}

.background-lemon-cream-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffeb6d !important;
}

.color-lemon-cream--hoverable {
  color: #ffeb6d !important;
}
.color-lemon-cream--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffe43a !important;
}

.background-lemon-cream--hoverable {
  background-color: #ffeb6d !important;
}
.background-lemon-cream--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffe43a !important;
}

.color-flash {
  color: #dff81e;
}

.background-flash {
  background: #dff81e;
}

.color-flash-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #dff81e !important;
}

.background-flash-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dff81e !important;
}

.color-flash--hoverable {
  color: #dff81e !important;
}
.color-flash--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #c4dc07 !important;
}

.background-flash--hoverable {
  background-color: #dff81e !important;
}
.background-flash--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c4dc07 !important;
}

.color-green {
  color: #80e220;
}

.background-green {
  background: #80e220;
}

.color-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #80e220 !important;
}

.background-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #80e220 !important;
}

.color-green--hoverable {
  color: #80e220 !important;
}
.color-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #67b718 !important;
}

.background-green--hoverable {
  background-color: #80e220 !important;
}
.background-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #67b718 !important;
}

.color-spearmint {
  color: #77ea7e;
}

.background-spearmint {
  background: #77ea7e;
}

.color-spearmint-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #77ea7e !important;
}

.background-spearmint-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #77ea7e !important;
}

.color-spearmint--hoverable {
  color: #77ea7e !important;
}
.color-spearmint--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #4be354 !important;
}

.background-spearmint--hoverable {
  background-color: #77ea7e !important;
}
.background-spearmint--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4be354 !important;
}

.color-mint {
  color: #a2ec8e;
}

.background-mint {
  background: #a2ec8e;
}

.color-mint-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a2ec8e !important;
}

.background-mint-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a2ec8e !important;
}

.color-mint--hoverable {
  color: #a2ec8e !important;
}
.color-mint--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #7ee562 !important;
}

.background-mint--hoverable {
  background-color: #a2ec8e !important;
}
.background-mint--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7ee562 !important;
}

.color-beryl {
  color: #d0f2b1;
}

.background-beryl {
  background: #d0f2b1;
}

.color-beryl-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #d0f2b1 !important;
}

.background-beryl-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d0f2b1 !important;
}

.color-beryl--hoverable {
  color: #d0f2b1 !important;
}
.color-beryl--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b6eb85 !important;
}

.background-beryl--hoverable {
  background-color: #d0f2b1 !important;
}
.background-beryl--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b6eb85 !important;
}

.color-sea-foam {
  color: #cff1d6;
}

.background-sea-foam {
  background: #cff1d6;
}

.color-sea-foam-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #cff1d6 !important;
}

.background-sea-foam-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cff1d6 !important;
}

.color-sea-foam--hoverable {
  color: #cff1d6 !important;
}
.color-sea-foam--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a8e5b4 !important;
}

.background-sea-foam--hoverable {
  background-color: #cff1d6 !important;
}
.background-sea-foam--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a8e5b4 !important;
}

.color-turquoise {
  color: #91cec2;
}

.background-turquoise {
  background: #91cec2;
}

.color-turquoise-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #91cec2 !important;
}

.background-turquoise-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #91cec2 !important;
}

.color-turquoise--hoverable {
  color: #91cec2 !important;
}
.color-turquoise--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6ebeae !important;
}

.background-turquoise--hoverable {
  background-color: #91cec2 !important;
}
.background-turquoise--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6ebeae !important;
}

.color-blue {
  color: #1ea5fc;
}

.background-blue {
  background: #1ea5fc;
}

.color-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #1ea5fc !important;
}

.background-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1ea5fc !important;
}

.color-blue--hoverable {
  color: #1ea5fc !important;
}
.color-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #038ce4 !important;
}

.background-blue--hoverable {
  background-color: #1ea5fc !important;
}
.background-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #038ce4 !important;
}

.color-light-blue {
  color: #5ebad9;
}

.background-light-blue {
  background: #5ebad9;
}

.color-light-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #5ebad9 !important;
}

.background-light-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #5ebad9 !important;
}

.color-light-blue--hoverable {
  color: #5ebad9 !important;
}
.color-light-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #35a8cf !important;
}

.background-light-blue--hoverable {
  background-color: #5ebad9 !important;
}
.background-light-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #35a8cf !important;
}

.color-cerulian {
  color: #87b9e7;
}

.background-cerulian {
  background: #87b9e7;
}

.color-cerulian-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #87b9e7 !important;
}

.background-cerulian-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #87b9e7 !important;
}

.color-cerulian--hoverable {
  color: #87b9e7 !important;
}
.color-cerulian--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #5da0df !important;
}

.background-cerulian--hoverable {
  background-color: #87b9e7 !important;
}
.background-cerulian--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #5da0df !important;
}

.color-surf-blue {
  color: #1871ac;
}

.background-surf-blue {
  background: #1871ac;
}

.color-surf-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #1871ac !important;
}

.background-surf-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1871ac !important;
}

.color-surf-blue--hoverable {
  color: #1871ac !important;
}
.color-surf-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #1e8ed9 !important;
}

.background-surf-blue--hoverable {
  background-color: #1871ac !important;
}
.background-surf-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1e8ed9 !important;
}

.color-pacific-green {
  color: #0f6d8e;
}

.background-pacific-green {
  background: #0f6d8e;
}

.color-pacific-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0f6d8e !important;
}

.background-pacific-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0f6d8e !important;
}

.color-pacific-green--hoverable {
  color: #0f6d8e !important;
}
.color-pacific-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #1490bc !important;
}

.background-pacific-green--hoverable {
  background-color: #0f6d8e !important;
}
.background-pacific-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1490bc !important;
}

.color-blue-cobalt {
  color: #3a6b8e;
}

.background-blue-cobalt {
  background: #3a6b8e;
}

.color-blue-cobalt-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #3a6b8e !important;
}

.background-blue-cobalt-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3a6b8e !important;
}

.color-blue-cobalt--hoverable {
  color: #3a6b8e !important;
}
.color-blue-cobalt--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #4986b2 !important;
}

.background-blue-cobalt--hoverable {
  background-color: #3a6b8e !important;
}
.background-blue-cobalt--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4986b2 !important;
}

.color-dark-teal {
  color: #2c6184;
}

.background-dark-teal {
  background: #2c6184;
}

.color-dark-teal-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #2c6184 !important;
}

.background-dark-teal-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #2c6184 !important;
}

.color-dark-teal--hoverable {
  color: #2c6184 !important;
}
.color-dark-teal--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #397daa !important;
}

.background-dark-teal--hoverable {
  background-color: #2c6184 !important;
}
.background-dark-teal--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #397daa !important;
}

.color-blue-horizon {
  color: #1e538f;
}

.background-blue-horizon {
  background: #1e538f;
}

.color-blue-horizon-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #1e538f !important;
}

.background-blue-horizon-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1e538f !important;
}

.color-blue-horizon--hoverable {
  color: #1e538f !important;
}
.color-blue-horizon--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #276bb9 !important;
}

.background-blue-horizon--hoverable {
  background-color: #1e538f !important;
}
.background-blue-horizon--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #276bb9 !important;
}

.color-denim-blue {
  color: #4b709a;
}

.background-denim-blue {
  background: #4b709a;
}

.color-denim-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #4b709a !important;
}

.background-denim-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4b709a !important;
}

.color-denim-blue--hoverable {
  color: #4b709a !important;
}
.color-denim-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6489b4 !important;
}

.background-denim-blue--hoverable {
  background-color: #4b709a !important;
}
.background-denim-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6489b4 !important;
}

.color-linen-blue {
  color: #455785;
}

.background-linen-blue {
  background: #455785;
}

.color-linen-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #455785 !important;
}

.background-linen-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #455785 !important;
}

.color-linen-blue--hoverable {
  color: #455785 !important;
}
.color-linen-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #566da7 !important;
}

.background-linen-blue--hoverable {
  background-color: #455785 !important;
}
.background-linen-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #566da7 !important;
}

.color-alaskan-blue {
  color: #525c73;
}

.background-alaskan-blue {
  background: #525c73;
}

.color-alaskan-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #525c73 !important;
}

.background-alaskan-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #525c73 !important;
}

.color-alaskan-blue--hoverable {
  color: #525c73 !important;
}
.color-alaskan-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #677491 !important;
}

.background-alaskan-blue--hoverable {
  background-color: #525c73 !important;
}
.background-alaskan-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #677491 !important;
}

.color-deep-navy {
  color: #3a4565;
}

.background-deep-navy {
  background: #3a4565;
}

.color-deep-navy-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #3a4565 !important;
}

.background-deep-navy-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3a4565 !important;
}

.color-deep-navy--hoverable {
  color: #3a4565 !important;
}
.color-deep-navy--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #4d5b85 !important;
}

.background-deep-navy--hoverable {
  background-color: #3a4565 !important;
}
.background-deep-navy--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4d5b85 !important;
}

.color-midnight-blue {
  color: #383b65;
}

.background-midnight-blue {
  background: #383b65;
}

.color-midnight-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #383b65 !important;
}

.background-midnight-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #383b65 !important;
}

.color-midnight-blue--hoverable {
  color: #383b65 !important;
}
.color-midnight-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #4a4e86 !important;
}

.background-midnight-blue--hoverable {
  background-color: #383b65 !important;
}
.background-midnight-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4a4e86 !important;
}

.color-purple {
  color: #8962f8;
}

.background-purple {
  background: #8962f8;
}

.color-purple-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #8962f8 !important;
}

.background-purple-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8962f8 !important;
}

.color-purple--hoverable {
  color: #8962f8 !important;
}
.color-purple--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6431f6 !important;
}

.background-purple--hoverable {
  background-color: #8962f8 !important;
}
.background-purple--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6431f6 !important;
}

.color-ultra-violet {
  color: #5f41b2;
}

.background-ultra-violet {
  background: #5f41b2;
}

.color-ultra-violet-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #5f41b2 !important;
}

.background-ultra-violet-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #5f41b2 !important;
}

.color-ultra-violet--hoverable {
  color: #5f41b2 !important;
}
.color-ultra-violet--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #7b61c5 !important;
}

.background-ultra-violet--hoverable {
  background-color: #5f41b2 !important;
}
.background-ultra-violet--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7b61c5 !important;
}

.color-lilac {
  color: #a990dd;
}

.background-lilac {
  background: #a990dd;
}

.color-lilac-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a990dd !important;
}

.background-lilac-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a990dd !important;
}

.color-lilac--hoverable {
  color: #a990dd !important;
}
.color-lilac--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8b69d1 !important;
}

.background-lilac--hoverable {
  background-color: #a990dd !important;
}
.background-lilac--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8b69d1 !important;
}

.color-ocean-blue {
  color: #6273bd;
}

.background-ocean-blue {
  background: #6273bd;
}

.color-ocean-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #6273bd !important;
}

.background-ocean-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6273bd !important;
}

.color-ocean-blue--hoverable {
  color: #6273bd !important;
}
.color-ocean-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #4658a6 !important;
}

.background-ocean-blue--hoverable {
  background-color: #6273bd !important;
}
.background-ocean-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4658a6 !important;
}

.color-delft-blue {
  color: #4662b2;
}

.background-delft-blue {
  background: #4662b2;
}

.color-delft-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #4662b2 !important;
}

.background-delft-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4662b2 !important;
}

.color-delft-blue--hoverable {
  color: #4662b2 !important;
}
.color-delft-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #687fc3 !important;
}

.background-delft-blue--hoverable {
  background-color: #4662b2 !important;
}
.background-delft-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #687fc3 !important;
}

.color-indigo {
  color: #474e95;
}

.background-indigo {
  background: #474e95;
}

.color-indigo-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #474e95 !important;
}

.background-indigo-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #474e95 !important;
}

.color-indigo--hoverable {
  color: #474e95 !important;
}
.color-indigo--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #5d65b2 !important;
}

.background-indigo--hoverable {
  background-color: #474e95 !important;
}
.background-indigo--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #5d65b2 !important;
}

.color-lavender-gray {
  color: #757397;
}

.background-lavender-gray {
  background: #757397;
}

.color-lavender-gray-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #757397 !important;
}

.background-lavender-gray-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #757397 !important;
}

.color-lavender-gray--hoverable {
  color: #757397 !important;
}
.color-lavender-gray--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #5d5c7b !important;
}

.background-lavender-gray--hoverable {
  background-color: #757397 !important;
}
.background-lavender-gray--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #5d5c7b !important;
}

.color-lavender {
  color: #a58998;
}

.background-lavender {
  background: #a58998;
}

.color-lavender-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a58998 !important;
}

.background-lavender-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a58998 !important;
}

.color-lavender--hoverable {
  color: #a58998 !important;
}
.color-lavender--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8e6d7f !important;
}

.background-lavender--hoverable {
  background-color: #a58998 !important;
}
.background-lavender--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8e6d7f !important;
}

.color-cocoa {
  color: #8b7d7d;
}

.background-cocoa {
  background: #8b7d7d;
}

.color-cocoa-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #8b7d7d !important;
}

.background-cocoa-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8b7d7d !important;
}

.color-cocoa--hoverable {
  color: #8b7d7d !important;
}
.color-cocoa--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #716464 !important;
}

.background-cocoa--hoverable {
  background-color: #8b7d7d !important;
}
.background-cocoa--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #716464 !important;
}

.color-storm-gray {
  color: #578887;
}

.background-storm-gray {
  background: #578887;
}

.color-storm-gray-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #578887 !important;
}

.background-storm-gray-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #578887 !important;
}

.color-storm-gray--hoverable {
  color: #578887 !important;
}
.color-storm-gray--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6fa3a2 !important;
}

.background-storm-gray--hoverable {
  background-color: #578887 !important;
}
.background-storm-gray--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6fa3a2 !important;
}

.color-cactus {
  color: #5b7971;
}

.background-cactus {
  background: #5b7971;
}

.color-cactus-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #5b7971 !important;
}

.background-cactus-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #5b7971 !important;
}

.color-cactus--hoverable {
  color: #5b7971 !important;
}
.color-cactus--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #72958c !important;
}

.background-cactus--hoverable {
  background-color: #5b7971 !important;
}
.background-cactus--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #72958c !important;
}

.color-pine-green {
  color: #4e6c54;
}

.background-pine-green {
  background: #4e6c54;
}

.color-pine-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #4e6c54 !important;
}

.background-pine-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4e6c54 !important;
}

.color-pine-green--hoverable {
  color: #4e6c54 !important;
}
.color-pine-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #638a6b !important;
}

.background-pine-green--hoverable {
  background-color: #4e6c54 !important;
}
.background-pine-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #638a6b !important;
}

.color-cyprus-green {
  color: #cda986;
}

.background-cyprus-green {
  background: #cda986;
}

.color-cyprus-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #cda986 !important;
}

.background-cyprus-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cda986 !important;
}

.color-cyprus-green--hoverable {
  color: #cda986 !important;
}
.color-cyprus-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #be8f62 !important;
}

.background-cyprus-green--hoverable {
  background-color: #cda986 !important;
}
.background-cyprus-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #be8f62 !important;
}

.color-northern-blue {
  color: #638a8d;
}

.background-northern-blue {
  background: #638a8d;
}

.color-northern-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #638a8d !important;
}

.background-northern-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #638a8d !important;
}

.color-northern-blue--hoverable {
  color: #638a8d !important;
}
.color-northern-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #7ea2a5 !important;
}

.background-northern-blue--hoverable {
  background-color: #638a8d !important;
}
.background-northern-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7ea2a5 !important;
}

.color-azure {
  color: #788991;
}

.background-azure {
  background: #788991;
}

.color-azure-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #788991 !important;
}

.background-azure-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #788991 !important;
}

.color-azure--hoverable {
  color: #788991 !important;
}
.color-azure--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #606f76 !important;
}

.background-azure--hoverable {
  background-color: #788991 !important;
}
.background-azure--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #606f76 !important;
}

.color-mist-blue {
  color: #a7ab99;
}

.background-mist-blue {
  background: #a7ab99;
}

.color-mist-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a7ab99 !important;
}

.background-mist-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a7ab99 !important;
}

.color-mist-blue--hoverable {
  color: #a7ab99 !important;
}
.color-mist-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8f947d !important;
}

.background-mist-blue--hoverable {
  background-color: #a7ab99 !important;
}
.background-mist-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8f947d !important;
}

.color-dark-olive {
  color: #7c7a66;
}

.background-dark-olive {
  background: #7c7a66;
}

.color-dark-olive-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #7c7a66 !important;
}

.background-dark-olive-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7c7a66 !important;
}

.color-dark-olive--hoverable {
  color: #7c7a66 !important;
}
.color-dark-olive--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #96947f !important;
}

.background-dark-olive--hoverable {
  background-color: #7c7a66 !important;
}
.background-dark-olive--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #96947f !important;
}

.color-khaki {
  color: #7a6e49;
}

.background-khaki {
  background: #7a6e49;
}

.color-khaki-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #7a6e49 !important;
}

.background-khaki-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7a6e49 !important;
}

.color-khaki--hoverable {
  color: #7a6e49 !important;
}
.color-khaki--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #9a8b5c !important;
}

.background-khaki--hoverable {
  background-color: #7a6e49 !important;
}
.background-khaki--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #9a8b5c !important;
}

.color-soft-white {
  color: #d8c9af;
}

.background-soft-white {
  background: #d8c9af;
}

.color-soft-white-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #d8c9af !important;
}

.background-soft-white-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d8c9af !important;
}

.color-soft-white--hoverable {
  color: #d8c9af !important;
}
.color-soft-white--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #c7b28d !important;
}

.background-soft-white--hoverable {
  background-color: #d8c9af !important;
}
.background-soft-white--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #c7b28d !important;
}

.color-antique-white {
  color: #cda986;
}

.background-antique-white {
  background: #cda986;
}

.color-antique-white-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #cda986 !important;
}

.background-antique-white-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cda986 !important;
}

.color-antique-white--hoverable {
  color: #cda986 !important;
}
.color-antique-white--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #be8f62 !important;
}

.background-antique-white--hoverable {
  background-color: #cda986 !important;
}
.background-antique-white--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #be8f62 !important;
}

.color-yellow-gold {
  color: #cc996d;
}

.background-yellow-gold {
  background: #cc996d;
}

.color-yellow-gold-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #cc996d !important;
}

.background-yellow-gold-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #cc996d !important;
}

.color-yellow-gold--hoverable {
  color: #cc996d !important;
}
.color-yellow-gold--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #bf7f47 !important;
}

.background-yellow-gold--hoverable {
  background-color: #cc996d !important;
}
.background-yellow-gold--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #bf7f47 !important;
}

.color-gold {
  color: #b08053;
}

.background-gold {
  background: #b08053;
}

.color-gold-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #b08053 !important;
}

.background-gold-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b08053 !important;
}

.color-gold--hoverable {
  color: #b08053 !important;
}
.color-gold--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8f6741 !important;
}

.background-gold--hoverable {
  background-color: #b08053 !important;
}
.background-gold--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8f6741 !important;
}

.color-camel {
  color: #a97d4f;
}

.background-camel {
  background: #a97d4f;
}

.color-camel-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a97d4f !important;
}

.background-camel-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a97d4f !important;
}

.color-camel--hoverable {
  color: #a97d4f !important;
}
.color-camel--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #bc966f !important;
}

.background-camel--hoverable {
  background-color: #a97d4f !important;
}
.background-camel--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #bc966f !important;
}

.color-walnut {
  color: #a17455;
}

.background-walnut {
  background: #a17455;
}

.color-walnut-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a17455 !important;
}

.background-walnut-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a17455 !important;
}

.color-walnut--hoverable {
  color: #a17455 !important;
}
.color-walnut--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b58e74 !important;
}

.background-walnut--hoverable {
  background-color: #a17455 !important;
}
.background-walnut--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b58e74 !important;
}

.color-stone {
  color: #a28872;
}

.background-stone {
  background: #a28872;
}

.color-stone-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a28872 !important;
}

.background-stone-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a28872 !important;
}

.color-stone--hoverable {
  color: #a28872 !important;
}
.color-stone--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #886f59 !important;
}

.background-stone--hoverable {
  background-color: #a28872 !important;
}
.background-stone--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #886f59 !important;
}

.color-pebble {
  color: #9f8d7e;
}

.background-pebble {
  background: #9f8d7e;
}

.color-pebble-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #9f8d7e !important;
}

.background-pebble-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #9f8d7e !important;
}

.color-pebble--hoverable {
  color: #9f8d7e !important;
}
.color-pebble--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #867364 !important;
}

.background-pebble--hoverable {
  background-color: #9f8d7e !important;
}
.background-pebble--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #867364 !important;
}

.color-coastal-gray {
  color: #715d50;
}

.background-coastal-gray {
  background: #715d50;
}

.color-coastal-gray-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #715d50 !important;
}

.background-coastal-gray-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #715d50 !important;
}

.color-coastal-gray--hoverable {
  color: #715d50 !important;
}
.color-coastal-gray--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8f7665 !important;
}

.background-coastal-gray--hoverable {
  background-color: #715d50 !important;
}
.background-coastal-gray--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8f7665 !important;
}

.color-android-green {
  color: #a4c639;
}

.background-android-green {
  background: #a4c639;
}

.color-android-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #a4c639 !important;
}

.background-android-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a4c639 !important;
}

.color-android-green--hoverable {
  color: #a4c639 !important;
}
.color-android-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b6d161 !important;
}

.background-android-green--hoverable {
  background-color: #a4c639 !important;
}
.background-android-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b6d161 !important;
}

.color-css-tricks-yellow {
  color: #ff8a00;
}

.background-css-tricks-yellow {
  background: #ff8a00;
}

.color-css-tricks-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ff8a00 !important;
}

.background-css-tricks-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ff8a00 !important;
}

.color-css-tricks-yellow--hoverable {
  color: #ff8a00 !important;
}
.color-css-tricks-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffa133 !important;
}

.background-css-tricks-yellow--hoverable {
  background-color: #ff8a00 !important;
}
.background-css-tricks-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffa133 !important;
}

.color-css-tricks-pink {
  color: #da1b60;
}

.background-css-tricks-pink {
  background: #da1b60;
}

.color-css-tricks-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #da1b60 !important;
}

.background-css-tricks-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #da1b60 !important;
}

.color-css-tricks-pink--hoverable {
  color: #da1b60 !important;
}
.color-css-tricks-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #e7417d !important;
}

.background-css-tricks-pink--hoverable {
  background-color: #da1b60 !important;
}
.background-css-tricks-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e7417d !important;
}

.color-ebay-red {
  color: #e53238;
}

.background-ebay-red {
  background: #e53238;
}

.color-ebay-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e53238 !important;
}

.background-ebay-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e53238 !important;
}

.color-ebay-red--hoverable {
  color: #e53238 !important;
}
.color-ebay-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ca1a20 !important;
}

.background-ebay-red--hoverable {
  background-color: #e53238 !important;
}
.background-ebay-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ca1a20 !important;
}

.color-ebay-blue {
  color: #0064d3;
}

.background-ebay-blue {
  background: #0064d3;
}

.color-ebay-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0064d3 !important;
}

.background-ebay-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0064d3 !important;
}

.color-ebay-blue--hoverable {
  color: #0064d3 !important;
}
.color-ebay-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #077dff !important;
}

.background-ebay-blue--hoverable {
  background-color: #0064d3 !important;
}
.background-ebay-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #077dff !important;
}

.color-ebay-yellow {
  color: #f4ae01;
}

.background-ebay-yellow {
  background: #f4ae01;
}

.color-ebay-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f4ae01 !important;
}

.background-ebay-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f4ae01 !important;
}

.color-ebay-yellow--hoverable {
  color: #f4ae01 !important;
}
.color-ebay-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #fec12a !important;
}

.background-ebay-yellow--hoverable {
  background-color: #f4ae01 !important;
}
.background-ebay-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #fec12a !important;
}

.color-ebay-green {
  color: #88b719;
}

.background-ebay-green {
  background: #88b719;
}

.color-ebay-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #88b719 !important;
}

.background-ebay-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #88b719 !important;
}

.color-ebay-green--hoverable {
  color: #88b719 !important;
}
.color-ebay-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a8e122 !important;
}

.background-ebay-green--hoverable {
  background-color: #88b719 !important;
}
.background-ebay-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a8e122 !important;
}

.color-facebook-blue {
  color: #3b5998;
}

.background-facebook-blue {
  background: #3b5998;
}

.color-facebook-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #3b5998 !important;
}

.background-facebook-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #3b5998 !important;
}

.color-facebook-blue--hoverable {
  color: #3b5998 !important;
}
.color-facebook-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #4c70ba !important;
}

.background-facebook-blue--hoverable {
  background-color: #3b5998 !important;
}
.background-facebook-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4c70ba !important;
}

.color-google-blue {
  color: #4285f4;
}

.background-google-blue {
  background: #4285f4;
}

.color-google-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #4285f4 !important;
}

.background-google-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #4285f4 !important;
}

.color-google-blue--hoverable {
  color: #4285f4 !important;
}
.color-google-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #1266f1 !important;
}

.background-google-blue--hoverable {
  background-color: #4285f4 !important;
}
.background-google-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1266f1 !important;
}

.color-google-red {
  color: #db4437;
}

.background-google-red {
  background: #db4437;
}

.color-google-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #db4437 !important;
}

.background-google-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #db4437 !important;
}

.color-google-red--hoverable {
  color: #db4437 !important;
}
.color-google-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #bd2e22 !important;
}

.background-google-red--hoverable {
  background-color: #db4437 !important;
}
.background-google-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #bd2e22 !important;
}

.color-google-yellow {
  color: #f4b400;
}

.background-google-yellow {
  background: #f4b400;
}

.color-google-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f4b400 !important;
}

.background-google-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f4b400 !important;
}

.color-google-yellow--hoverable {
  color: #f4b400 !important;
}
.color-google-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffc728 !important;
}

.background-google-yellow--hoverable {
  background-color: #f4b400 !important;
}
.background-google-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffc728 !important;
}

.color-google-green {
  color: #0f9d58;
}

.background-google-green {
  background: #0f9d58;
}

.color-google-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0f9d58 !important;
}

.background-google-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0f9d58 !important;
}

.color-google-green--hoverable {
  color: #0f9d58 !important;
}
.color-google-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #13cc72 !important;
}

.background-google-green--hoverable {
  background-color: #0f9d58 !important;
}
.background-google-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #13cc72 !important;
}

.color-google-plus-red {
  color: #d34836;
}

.background-google-plus-red {
  background: #d34836;
}

.color-google-plus-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #d34836 !important;
}

.background-google-plus-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d34836 !important;
}

.color-google-plus-red--hoverable {
  color: #d34836 !important;
}
.color-google-plus-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b03626 !important;
}

.background-google-plus-red--hoverable {
  background-color: #d34836 !important;
}
.background-google-plus-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b03626 !important;
}

.color-hello-kitty-pink {
  color: #b01455;
}

.background-hello-kitty-pink {
  background: #b01455;
}

.color-hello-kitty-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #b01455 !important;
}

.background-hello-kitty-pink-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b01455 !important;
}

.color-hello-kitty-pink--hoverable {
  color: #b01455 !important;
}
.color-hello-kitty-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #de196b !important;
}

.background-hello-kitty-pink--hoverable {
  background-color: #b01455 !important;
}
.background-hello-kitty-pink--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #de196b !important;
}

.color-linkedin-blue {
  color: #0077b5;
}

.background-linkedin-blue {
  background: #0077b5;
}

.color-linkedin-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #0077b5 !important;
}

.background-linkedin-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0077b5 !important;
}

.color-linkedin-blue--hoverable {
  color: #0077b5 !important;
}
.color-linkedin-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0099e8 !important;
}

.background-linkedin-blue--hoverable {
  background-color: #0077b5 !important;
}
.background-linkedin-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0099e8 !important;
}

.color-microsoft-red {
  color: #f25022;
}

.background-microsoft-red {
  background: #f25022;
}

.color-microsoft-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f25022 !important;
}

.background-microsoft-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f25022 !important;
}

.color-microsoft-red--hoverable {
  color: #f25022 !important;
}
.color-microsoft-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d5390d !important;
}

.background-microsoft-red--hoverable {
  background-color: #f25022 !important;
}
.background-microsoft-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d5390d !important;
}

.color-microsoft-green {
  color: #7fba00;
}

.background-microsoft-green {
  background: #7fba00;
}

.color-microsoft-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #7fba00 !important;
}

.background-microsoft-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #7fba00 !important;
}

.color-microsoft-green--hoverable {
  color: #7fba00 !important;
}
.color-microsoft-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #a2ed00 !important;
}

.background-microsoft-green--hoverable {
  background-color: #7fba00 !important;
}
.background-microsoft-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #a2ed00 !important;
}

.color-microsoft-blue {
  color: #00a4ef;
}

.background-microsoft-blue {
  background: #00a4ef;
}

.color-microsoft-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #00a4ef !important;
}

.background-microsoft-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #00a4ef !important;
}

.color-microsoft-blue--hoverable {
  color: #00a4ef !important;
}
.color-microsoft-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #23baff !important;
}

.background-microsoft-blue--hoverable {
  background-color: #00a4ef !important;
}
.background-microsoft-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #23baff !important;
}

.color-microsoft-yellow {
  color: #ffb900;
}

.background-microsoft-yellow {
  background: #ffb900;
}

.color-microsoft-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffb900 !important;
}

.background-microsoft-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffb900 !important;
}

.color-microsoft-yellow--hoverable {
  color: #ffb900 !important;
}
.color-microsoft-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffc733 !important;
}

.background-microsoft-yellow--hoverable {
  background-color: #ffb900 !important;
}
.background-microsoft-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffc733 !important;
}

.color-microsoft-grey {
  color: #737373;
}

.background-microsoft-grey {
  background: #737373;
}

.color-microsoft-grey-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #737373 !important;
}

.background-microsoft-grey-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #737373 !important;
}

.color-microsoft-grey--hoverable {
  color: #737373 !important;
}
.color-microsoft-grey--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #8d8d8d !important;
}

.background-microsoft-grey--hoverable {
  background-color: #737373 !important;
}
.background-microsoft-grey--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #8d8d8d !important;
}

.color-netflix-red {
  color: #e50914;
}

.background-netflix-red {
  background: #e50914;
}

.color-netflix-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e50914 !important;
}

.background-netflix-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e50914 !important;
}

.color-netflix-red--hoverable {
  color: #e50914 !important;
}
.color-netflix-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #f72a35 !important;
}

.background-netflix-red--hoverable {
  background-color: #e50914 !important;
}
.background-netflix-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f72a35 !important;
}

.color-pinterest-red {
  color: #e60023;
}

.background-pinterest-red {
  background: #e60023;
}

.color-pinterest-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #e60023 !important;
}

.background-pinterest-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #e60023 !important;
}

.color-pinterest-red--hoverable {
  color: #e60023 !important;
}
.color-pinterest-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ff1a3d !important;
}

.background-pinterest-red--hoverable {
  background-color: #e60023 !important;
}
.background-pinterest-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ff1a3d !important;
}

.color-quora-red {
  color: #b92b27;
}

.background-quora-red {
  background: #b92b27;
}

.color-quora-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #b92b27 !important;
}

.background-quora-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b92b27 !important;
}

.color-quora-red--hoverable {
  color: #b92b27 !important;
}
.color-quora-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #d6413d !important;
}

.background-quora-red--hoverable {
  background-color: #b92b27 !important;
}
.background-quora-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #d6413d !important;
}

.color-spotify-green {
  color: #1db954;
}

.background-spotify-green {
  background: #1db954;
}

.color-spotify-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #1db954 !important;
}

.background-spotify-green-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1db954 !important;
}

.color-spotify-green--hoverable {
  color: #1db954 !important;
}
.color-spotify-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #2bde6a !important;
}

.background-spotify-green--hoverable {
  background-color: #1db954 !important;
}
.background-spotify-green--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #2bde6a !important;
}

.color-stackoverflow-orange {
  color: #f48024;
}

.background-stackoverflow-orange {
  background: #f48024;
}

.color-stackoverflow-orange-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f48024 !important;
}

.background-stackoverflow-orange-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f48024 !important;
}

.color-stackoverflow-orange--hoverable {
  color: #f48024 !important;
}
.color-stackoverflow-orange--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #da670b !important;
}

.background-stackoverflow-orange--hoverable {
  background-color: #f48024 !important;
}
.background-stackoverflow-orange--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #da670b !important;
}

.color-serato-primary {
  color: indigo;
}

.background-serato-primary {
  background: indigo;
}

.color-serato-primary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: indigo !important;
}

.background-serato-primary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: indigo !important;
}

.color-serato-primary--hoverable {
  color: indigo !important;
}
.color-serato-primary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #6800b5 !important;
}

.background-serato-primary--hoverable {
  background-color: indigo !important;
}
.background-serato-primary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #6800b5 !important;
}

.color-serato-secondary {
  color: purple;
}

.background-serato-secondary {
  background: purple;
}

.color-serato-secondary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: purple !important;
}

.background-serato-secondary-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: purple !important;
}

.color-serato-secondary--hoverable {
  color: purple !important;
}
.color-serato-secondary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #b300b3 !important;
}

.background-serato-secondary--hoverable {
  background-color: purple !important;
}
.background-serato-secondary--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #b300b3 !important;
}

.color-serato-complement {
  color: #f8f9fa;
}

.background-serato-complement {
  background: #f8f9fa;
}

.color-serato-complement-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #f8f9fa !important;
}

.background-serato-complement-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #f8f9fa !important;
}

.color-serato-complement--hoverable {
  color: #f8f9fa !important;
}
.color-serato-complement--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #dae0e5 !important;
}

.background-serato-complement--hoverable {
  background-color: #f8f9fa !important;
}
.background-serato-complement--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #dae0e5 !important;
}

.color-ups-brown {
  color: #330000;
}

.background-ups-brown {
  background: #330000;
}

.color-ups-brown-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #330000 !important;
}

.background-ups-brown-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #330000 !important;
}

.color-ups-brown--hoverable {
  color: #330000 !important;
}
.color-ups-brown--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #660000 !important;
}

.background-ups-brown--hoverable {
  background-color: #330000 !important;
}
.background-ups-brown--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #660000 !important;
}

.color-ups-yellow {
  color: #ffd100;
}

.background-ups-yellow {
  background: #ffd100;
}

.color-ups-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ffd100 !important;
}

.background-ups-yellow-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffd100 !important;
}

.color-ups-yellow--hoverable {
  color: #ffd100 !important;
}
.color-ups-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ffda33 !important;
}

.background-ups-yellow--hoverable {
  background-color: #ffd100 !important;
}
.background-ups-yellow--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ffda33 !important;
}

.color-twitter-blue {
  color: #1da1f2;
}

.background-twitter-blue {
  background: #1da1f2;
}

.color-twitter-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #1da1f2 !important;
}

.background-twitter-blue-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #1da1f2 !important;
}

.color-twitter-blue--hoverable {
  color: #1da1f2 !important;
}
.color-twitter-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #0c85d0 !important;
}

.background-twitter-blue--hoverable {
  background-color: #1da1f2 !important;
}
.background-twitter-blue--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #0c85d0 !important;
}

.color-youtube-red {
  color: #ff0000;
}

.background-youtube-red {
  background: #ff0000;
}

.color-youtube-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  color: #ff0000 !important;
}

.background-youtube-red-on-hover:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ff0000 !important;
}

.color-youtube-red--hoverable {
  color: #ff0000 !important;
}
.color-youtube-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  color: #ff3333 !important;
}

.background-youtube-red--hoverable {
  background-color: #ff0000 !important;
}
.background-youtube-red--hoverable:hover {
  transition: color 0.2s ease-in-out;
  background-color: #ff3333 !important;
}

.serato-theme {
  color: white;
  background-color: indigo;
}

.serato-theme--hoverable {
  color: white;
  background-color: indigo;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.serato-theme--hoverable:hover {
  transition: all 0.2s ease-in-out;
  background-color: #6800b5;
}

.serato-common-design, .card {
  color: #495057;
  background-color: #f8f9fa;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 2rem 1rem;
  text-align: center;
}

/*! Serato CSS Modified Version Of Hvr CSS,
* Thanks to Ian Lunn For Making Great CSS Hover Animations! 😇 */
/*!
/*! Hover.css v2.3.2 | MIT License | https://github.com/IanLunn/Hover */
/* Basic color-variables */
/*
* Basic color shades based on basic colors and their respective maps
 */
/* get an inclusive basic colors shades map */
/*  serato adapted color system inspired by apple watch os color system  */
/* color variables && serato color system */
/* 2D TRANSITIONS */
/* Grow */
.grow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.grow-on-hover:hover, .grow-on-hover:focus, .grow-on-hover:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */
.shrink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.shrink-on-hover:hover, .shrink-on-hover:focus, .shrink-on-hover:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

/* Pulse */
@-webkit-keyframes on-hover-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes on-hover-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.pulse-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-on-hover:hover, .pulse-on-hover:focus, .pulse-on-hover:active {
  -webkit-animation-name: on-hover-pulse;
  animation-name: on-hover-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Pulse Grow */
@-webkit-keyframes on-hover-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes on-hover-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.pulse-grow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-grow-on-hover:hover, .pulse-grow-on-hover:focus, .pulse-grow-on-hover:active {
  -webkit-animation-name: on-hover-pulse-grow;
  animation-name: on-hover-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Pulse Shrink */
@-webkit-keyframes on-hover-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes on-hover-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.pulse-shrink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-shrink-on-hover:hover, .pulse-shrink-on-hover:focus, .pulse-shrink-on-hover:active {
  -webkit-animation-name: on-hover-pulse-shrink;
  animation-name: on-hover-pulse-shrink;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Push */
@-webkit-keyframes on-hover-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes on-hover-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.push-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push-on-hover:hover, .push-on-hover:focus, .push-on-hover:active {
  -webkit-animation-name: on-hover-push;
  animation-name: on-hover-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Pop */
@-webkit-keyframes on-hover-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes on-hover-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
.pop-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pop-on-hover:hover, .pop-on-hover:focus, .pop-on-hover:active {
  -webkit-animation-name: on-hover-pop;
  animation-name: on-hover-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Bounce In */
.bounce-in-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-in-on-hover:hover, .bounce-in-on-hover:focus, .bounce-in-on-hover:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Bounce Out */
.bounce-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-out-on-hover:hover, .bounce-out-on-hover:focus, .bounce-out-on-hover:active {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Rotate */
.rotate-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.rotate-on-hover:hover, .rotate-on-hover:focus, .rotate-on-hover:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}

/* Grow Rotate */
.grow-rotate-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.grow-rotate-on-hover:hover, .grow-rotate-on-hover:focus, .grow-rotate-on-hover:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

/* Float */
.float-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.float-on-hover:hover, .float-on-hover:focus, .float-on-hover:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

/* Sink */
.sink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sink-on-hover:hover, .sink-on-hover:focus, .sink-on-hover:active {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

/* Bob */
@-webkit-keyframes on-hover-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes on-hover-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes on-hover-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes on-hover-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.bob-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bob-on-hover:hover, .bob-on-hover:focus, .bob-on-hover:active {
  -webkit-animation-name: on-hover-bob-float, on-hover-bob;
  animation-name: on-hover-bob-float, on-hover-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

/* Hang */
@-webkit-keyframes on-hover-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes on-hover-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@-webkit-keyframes on-hover-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes on-hover-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
.hang-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hang-on-hover:hover, .hang-on-hover:focus, .hang-on-hover:active {
  -webkit-animation-name: on-hover-hang-sink, on-hover-hang;
  animation-name: on-hover-hang-sink, on-hover-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

/* Skew */
.skew-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.skew-on-hover:hover, .skew-on-hover:focus, .skew-on-hover:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Skew Forward */
.skew-forward-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.skew-forward-on-hover:hover, .skew-forward-on-hover:focus, .skew-forward-on-hover:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Skew Backward */
.skew-backward-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.skew-backward-on-hover:hover, .skew-backward-on-hover:focus, .skew-backward-on-hover:active {
  -webkit-transform: skew(10deg);
  transform: skew(10deg);
}

/* Wobble Vertical */
@-webkit-keyframes on-hover-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes on-hover-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.wobble-vertical-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical-on-hover:hover, .wobble-vertical-on-hover:focus, .wobble-vertical-on-hover:active {
  -webkit-animation-name: on-hover-wobble-vertical;
  animation-name: on-hover-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes on-hover-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes on-hover-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.wobble-horizontal-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal-on-hover:hover, .wobble-horizontal-on-hover:focus, .wobble-horizontal-on-hover:active {
  -webkit-animation-name: on-hover-wobble-horizontal;
  animation-name: on-hover-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble To Bottom Right */
@-webkit-keyframes on-hover-wobble-to-bottom-right {
  16.65% {
    -webkit-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
  }
  33.3% {
    -webkit-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px);
  }
  49.95% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  66.6% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  83.25% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes on-hover-wobble-to-bottom-right {
  16.65% {
    -webkit-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
  }
  33.3% {
    -webkit-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px);
  }
  49.95% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  66.6% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  83.25% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.wobble-to-bottom-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-bottom-right-on-hover:hover, .wobble-to-bottom-right-on-hover:focus, .wobble-to-bottom-right-on-hover:active {
  -webkit-animation-name: on-hover-wobble-to-bottom-right;
  animation-name: on-hover-wobble-to-bottom-right;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble To Top Right */
@-webkit-keyframes on-hover-wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(8px, -8px);
    transform: translate(8px, -8px);
  }
  33.3% {
    -webkit-transform: translate(-6px, 6px);
    transform: translate(-6px, 6px);
  }
  49.95% {
    -webkit-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
  }
  66.6% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  83.25% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes on-hover-wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(8px, -8px);
    transform: translate(8px, -8px);
  }
  33.3% {
    -webkit-transform: translate(-6px, 6px);
    transform: translate(-6px, 6px);
  }
  49.95% {
    -webkit-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
  }
  66.6% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  83.25% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.wobble-to-top-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-top-right-on-hover:hover, .wobble-to-top-right-on-hover:focus, .wobble-to-top-right-on-hover:active {
  -webkit-animation-name: on-hover-wobble-to-top-right;
  animation-name: on-hover-wobble-to-top-right;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Top */
@-webkit-keyframes on-hover-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes on-hover-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
.wobble-top-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.wobble-top-on-hover:hover, .wobble-top-on-hover:focus, .wobble-top-on-hover:active {
  -webkit-animation-name: on-hover-wobble-top;
  animation-name: on-hover-wobble-top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Bottom */
@-webkit-keyframes on-hover-wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes on-hover-wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
.wobble-bottom-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.wobble-bottom-on-hover:hover, .wobble-bottom-on-hover:focus, .wobble-bottom-on-hover:active {
  -webkit-animation-name: on-hover-wobble-bottom;
  animation-name: on-hover-wobble-bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Skew */
@-webkit-keyframes on-hover-wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes on-hover-wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
.wobble-skew-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-skew-on-hover:hover, .wobble-skew-on-hover:focus, .wobble-skew-on-hover:active {
  -webkit-animation-name: on-hover-wobble-skew;
  animation-name: on-hover-wobble-skew;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Buzz */
@-webkit-keyframes on-hover-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes on-hover-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.buzz-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-on-hover:hover, .buzz-on-hover:focus, .buzz-on-hover:active {
  -webkit-animation-name: on-hover-buzz;
  animation-name: on-hover-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Buzz Out */
@-webkit-keyframes on-hover-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes on-hover-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.buzz-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out-on-hover:hover, .buzz-out-on-hover:focus, .buzz-out-on-hover:active {
  -webkit-animation-name: on-hover-buzz-out;
  animation-name: on-hover-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Forward */
.forward-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.forward-on-hover:hover, .forward-on-hover:focus, .forward-on-hover:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

/* Backward */
.backward-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.backward-on-hover:hover, .backward-on-hover:focus, .backward-on-hover:active {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}

/* BACKGROUND TRANSITIONS */
/* Fade */
.fade-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.fade-on-hover:hover, .fade-on-hover:focus, .fade-on-hover:active {
  background-color: currentColor;
  color: white;
}

/* Back Pulse */
@-webkit-keyframes on-hover-back-pulse {
  50% {
    background-color: rgba(32, 152, 209, 0.75);
  }
}
@keyframes on-hover-back-pulse {
  50% {
    background-color: rgba(32, 152, 209, 0.75);
  }
}
.back-pulse-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.back-pulse-on-hover:hover, .back-pulse-on-hover:focus, .back-pulse-on-hover:active {
  -webkit-animation-name: on-hover-back-pulse;
  animation-name: on-hover-back-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-color: currentColor;
  background-color: #2098d1;
  color: white;
}

/* Sweep To Right */
.sweep-to-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-right-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-right-on-hover:hover, .sweep-to-right-on-hover:focus, .sweep-to-right-on-hover:active {
  color: white;
}
.sweep-to-right-on-hover:hover:before, .sweep-to-right-on-hover:focus:before, .sweep-to-right-on-hover:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sweep To Left */
.sweep-to-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-left-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-left-on-hover:hover, .sweep-to-left-on-hover:focus, .sweep-to-left-on-hover:active {
  color: white;
}
.sweep-to-left-on-hover:hover:before, .sweep-to-left-on-hover:focus:before, .sweep-to-left-on-hover:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sweep To Bottom */
.sweep-to-bottom-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-bottom-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-bottom-on-hover:hover, .sweep-to-bottom-on-hover:focus, .sweep-to-bottom-on-hover:active {
  color: white;
}
.sweep-to-bottom-on-hover:hover:before, .sweep-to-bottom-on-hover:focus:before, .sweep-to-bottom-on-hover:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* Sweep To Top */
.sweep-to-top-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sweep-to-top-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sweep-to-top-on-hover:hover, .sweep-to-top-on-hover:focus, .sweep-to-top-on-hover:active {
  color: white;
}
.sweep-to-top-on-hover:hover:before, .sweep-to-top-on-hover:focus:before, .sweep-to-top-on-hover:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* Bounce To Right */
.bounce-to-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-right-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-right-on-hover:hover, .bounce-to-right-on-hover:focus, .bounce-to-right-on-hover:active {
  color: white;
}
.bounce-to-right-on-hover:hover:before, .bounce-to-right-on-hover:focus:before, .bounce-to-right-on-hover:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Left */
.bounce-to-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-left-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-left-on-hover:hover, .bounce-to-left-on-hover:focus, .bounce-to-left-on-hover:active {
  color: white;
}
.bounce-to-left-on-hover:hover:before, .bounce-to-left-on-hover:focus:before, .bounce-to-left-on-hover:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Bottom */
.bounce-to-bottom-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-bottom-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-bottom-on-hover:hover, .bounce-to-bottom-on-hover:focus, .bounce-to-bottom-on-hover:active {
  color: white;
}
.bounce-to-bottom-on-hover:hover:before, .bounce-to-bottom-on-hover:focus:before, .bounce-to-bottom-on-hover:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Top */
.bounce-to-top-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.bounce-to-top-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bounce-to-top-on-hover:hover, .bounce-to-top-on-hover:focus, .bounce-to-top-on-hover:active {
  color: white;
}
.bounce-to-top-on-hover:hover:before, .bounce-to-top-on-hover:focus:before, .bounce-to-top-on-hover:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Radial Out */
.radial-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  background: indigo;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.radial-out-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.radial-out-on-hover:hover, .radial-out-on-hover:focus, .radial-out-on-hover:active {
  color: white;
}
.radial-out-on-hover:hover:before, .radial-out-on-hover:focus:before, .radial-out-on-hover:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}

/* Radial In */
.radial-in-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  background: currentColor;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.radial-in-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: indigo;
  border-radius: 100%;
  -webkit-transform: scale(2);
  transform: scale(2);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.radial-in-on-hover:hover, .radial-in-on-hover:focus, .radial-in-on-hover:active {
  color: white;
}
.radial-in-on-hover:hover:before, .radial-in-on-hover:focus:before, .radial-in-on-hover:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Rectangle In */
.rectangle-in-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: currentColor;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.rectangle-in-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: indigo;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rectangle-in-on-hover:hover, .rectangle-in-on-hover:focus, .rectangle-in-on-hover:active {
  color: white;
}
.rectangle-in-on-hover:hover:before, .rectangle-in-on-hover:focus:before, .rectangle-in-on-hover:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Rectangle Out */
.rectangle-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: indigo;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.rectangle-out-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.rectangle-out-on-hover:hover, .rectangle-out-on-hover:focus, .rectangle-out-on-hover:active {
  color: white;
}
.rectangle-out-on-hover:hover:before, .rectangle-out-on-hover:focus:before, .rectangle-out-on-hover:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Shutter In Horizontal */
.shutter-in-horizontal-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: currentColor;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-in-horizontal-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: indigo;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-in-horizontal-on-hover:hover, .shutter-in-horizontal-on-hover:focus, .shutter-in-horizontal-on-hover:active {
  color: white;
}
.shutter-in-horizontal-on-hover:hover:before, .shutter-in-horizontal-on-hover:focus:before, .shutter-in-horizontal-on-hover:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

/* Shutter Out Horizontal */
.shutter-out-horizontal-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: indigo;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-out-horizontal-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: currentColor;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-out-horizontal-on-hover:hover, .shutter-out-horizontal-on-hover:focus, .shutter-out-horizontal-on-hover:active {
  color: white;
}
.shutter-out-horizontal-on-hover:hover:before, .shutter-out-horizontal-on-hover:focus:before, .shutter-out-horizontal-on-hover:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Shutter In Vertical */
.shutter-in-vertical-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: currentColor;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-in-vertical-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: indigo;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-in-vertical-on-hover:hover, .shutter-in-vertical-on-hover:focus, .shutter-in-vertical-on-hover:active {
  color: white;
}
.shutter-in-vertical-on-hover:hover:before, .shutter-in-vertical-on-hover:focus:before, .shutter-in-vertical-on-hover:active:before {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

/* Shutter Out Vertical */
.shutter-out-vertical-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: indigo;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.shutter-out-vertical-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: currentColor;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.shutter-out-vertical-on-hover:hover, .shutter-out-vertical-on-hover:focus, .shutter-out-vertical-on-hover:active {
  color: white;
}
.shutter-out-vertical-on-hover:hover:before, .shutter-out-vertical-on-hover:focus:before, .shutter-out-vertical-on-hover:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px indigo, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade-on-hover:hover, .border-fade-on-hover:focus, .border-fade-on-hover:active {
  box-shadow: inset 0 0 0 4px currentColor, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Hollow */
.hollow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  box-shadow: inset 0 0 0 4px indigo, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hollow-on-hover:hover, .hollow-on-hover:focus, .hollow-on-hover:active {
  background: none;
}

/* Trim */
.trim-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.trim-on-hover:before {
  content: "";
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.trim-on-hover:hover:before, .trim-on-hover:focus:before, .trim-on-hover:active:before {
  opacity: 1;
}

/* Ripple Out */
@-webkit-keyframes on-hover-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
@keyframes on-hover-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
.ripple-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.ripple-out-on-hover:before {
  content: "";
  position: absolute;
  border: indigo solid 6px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.ripple-out-on-hover:hover:before, .ripple-out-on-hover:focus:before, .ripple-out-on-hover:active:before {
  -webkit-animation-name: on-hover-ripple-out;
  animation-name: on-hover-ripple-out;
}

/* Ripple In */
@-webkit-keyframes on-hover-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
@keyframes on-hover-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
.ripple-in-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.ripple-in-on-hover:before {
  content: "";
  position: absolute;
  border: indigo solid 4px;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  opacity: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.ripple-in-on-hover:hover:before, .ripple-in-on-hover:focus:before, .ripple-in-on-hover:active:before {
  -webkit-animation-name: on-hover-ripple-in;
  animation-name: on-hover-ripple-in;
}

/* Outline Out */
.outline-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.outline-out-on-hover:before {
  content: "";
  position: absolute;
  border: indigo solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-out-on-hover:hover:before, .outline-out-on-hover:focus:before, .outline-out-on-hover:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

/* Outline In */
.outline-in-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.outline-in-on-hover:before {
  pointer-events: none;
  content: "";
  position: absolute;
  border: indigo solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-in-on-hover:hover:before, .outline-in-on-hover:focus:before, .outline-in-on-hover:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

/* Round Corners */
.round-corners-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
}
.round-corners-on-hover:hover, .round-corners-on-hover:focus, .round-corners-on-hover:active {
  border-radius: 1em;
}

/* Underline From Left */
.underline-from-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.underline-from-left-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: currentColor;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-from-left-on-hover:hover:before, .underline-from-left-on-hover:focus:before, .underline-from-left-on-hover:active:before {
  right: 0;
}

/* Underline From Center */
.underline-from-center-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.underline-from-center-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: currentColor;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-from-center-on-hover:hover:before, .underline-from-center-on-hover:focus:before, .underline-from-center-on-hover:active:before {
  left: 0;
  right: 0;
}

/* Underline From Right */
.underline-from-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.underline-from-right-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  bottom: 0;
  background: currentColor;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-from-right-on-hover:hover:before, .underline-from-right-on-hover:focus:before, .underline-from-right-on-hover:active:before {
  left: 0;
}

/* Overline From Left */
.overline-from-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.overline-from-left-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  top: 0;
  background: currentColor;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-from-left-on-hover:hover:before, .overline-from-left-on-hover:focus:before, .overline-from-left-on-hover:active:before {
  right: 0;
}

/* Overline From Center */
.overline-from-center-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.overline-from-center-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  top: 0;
  background: currentColor;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-from-center-on-hover:hover:before, .overline-from-center-on-hover:focus:before, .overline-from-center-on-hover:active:before {
  left: 0;
  right: 0;
}

/* Overline From Right */
.overline-from-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.overline-from-right-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  top: 0;
  background: currentColor;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-from-right-on-hover:hover:before, .overline-from-right-on-hover:focus:before, .overline-from-right-on-hover:active:before {
  left: 0;
}

/* Reveal */
.reveal-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.reveal-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: currentColor;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.reveal-on-hover:hover:before, .reveal-on-hover:focus:before, .reveal-on-hover:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}

/* Underline Reveal */
.underline-reveal-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.underline-reveal-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline-reveal-on-hover:hover:before, .underline-reveal-on-hover:focus:before, .underline-reveal-on-hover:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Overline Reveal */
.overline-reveal-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.overline-reveal-on-hover:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: currentColor;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.overline-reveal-on-hover:hover:before, .overline-reveal-on-hover:focus:before, .overline-reveal-on-hover:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.glow-on-hover:hover, .glow-on-hover:focus, .glow-on-hover:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Shadow */
.shadow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.shadow-on-hover:hover, .shadow-on-hover:focus, .shadow-on-hover:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

/* Grow Shadow */
.grow-shadow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.grow-shadow-on-hover:hover, .grow-shadow-on-hover:focus, .grow-shadow-on-hover:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Box Shadow Outset */
.box-shadow-outset-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.box-shadow-outset-on-hover:hover, .box-shadow-outset-on-hover:focus, .box-shadow-outset-on-hover:active {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Inset */
.box-shadow-inset-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.box-shadow-inset-on-hover:hover, .box-shadow-inset-on-hover:focus, .box-shadow-inset-on-hover:active {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Float Shadow */
.float-shadow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.float-shadow-on-hover:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.float-shadow-on-hover:hover, .float-shadow-on-hover:focus, .float-shadow-on-hover:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.float-shadow-on-hover:hover:before, .float-shadow-on-hover:focus:before, .float-shadow-on-hover:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* Shadow Radial */
.shadow-radial-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.shadow-radial-on-hover:before, .shadow-radial-on-hover:after {
  pointer-events: none;
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.shadow-radial-on-hover:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial-on-hover:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial-on-hover:hover:before, .shadow-radial-on-hover:focus:before, .shadow-radial-on-hover:active:before, .shadow-radial-on-hover:hover:after, .shadow-radial-on-hover:focus:after, .shadow-radial-on-hover:active:after {
  opacity: 1;
}

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.bubble-top-on-hover:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent indigo transparent;
}
.bubble-top-on-hover:hover:before, .bubble-top-on-hover:focus:before, .bubble-top-on-hover:active:before {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

/* Bubble Right */
.bubble-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.bubble-right-on-hover:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  top: calc(50% - 10px);
  right: 0;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent indigo;
}
.bubble-right-on-hover:hover:before, .bubble-right-on-hover:focus:before, .bubble-right-on-hover:active:before {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

/* Bubble Bottom */
.bubble-bottom-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.bubble-bottom-on-hover:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  bottom: 0;
  border-width: 10px 10px 0 10px;
  border-color: indigo transparent transparent transparent;
}
.bubble-bottom-on-hover:hover:before, .bubble-bottom-on-hover:focus:before, .bubble-bottom-on-hover:active:before {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}

/* Bubble Left */
.bubble-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.bubble-left-on-hover:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  top: calc(50% - 10px);
  left: 0;
  border-width: 10px 10px 10px 0;
  border-color: transparent indigo transparent transparent;
}
.bubble-left-on-hover:hover:before, .bubble-left-on-hover:focus:before, .bubble-left-on-hover:active:before {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}

/* Bubble Float Top */
.bubble-float-top-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-top-on-hover:before {
  position: absolute;
  z-index: -1;
  content: "";
  left: calc(50% - 10px);
  top: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent indigo transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-top-on-hover:hover, .bubble-float-top-on-hover:focus, .bubble-float-top-on-hover:active {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}
.bubble-float-top-on-hover:hover:before, .bubble-float-top-on-hover:focus:before, .bubble-float-top-on-hover:active:before {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

/* Bubble Float Right */
.bubble-float-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-right-on-hover:before {
  position: absolute;
  z-index: -1;
  top: calc(50% - 10px);
  right: 0;
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent indigo;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-right-on-hover:hover, .bubble-float-right-on-hover:focus, .bubble-float-right-on-hover:active {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}
.bubble-float-right-on-hover:hover:before, .bubble-float-right-on-hover:focus:before, .bubble-float-right-on-hover:active:before {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

/* Bubble Float Bottom */
.bubble-float-bottom-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-bottom-on-hover:before {
  position: absolute;
  z-index: -1;
  content: "";
  left: calc(50% - 10px);
  bottom: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: indigo transparent transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-bottom-on-hover:hover, .bubble-float-bottom-on-hover:focus, .bubble-float-bottom-on-hover:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.bubble-float-bottom-on-hover:hover:before, .bubble-float-bottom-on-hover:focus:before, .bubble-float-bottom-on-hover:active:before {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}

/* Bubble Float Left */
.bubble-float-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-left-on-hover:before {
  position: absolute;
  z-index: -1;
  content: "";
  top: calc(50% - 10px);
  left: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent indigo transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.bubble-float-left-on-hover:hover, .bubble-float-left-on-hover:focus, .bubble-float-left-on-hover:active {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}
.bubble-float-left-on-hover:hover:before, .bubble-float-left-on-hover:focus:before, .bubble-float-left-on-hover:active:before {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}

/* ICONS */
/* Icon Back */
.icon-back-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.icon-back-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-back-on-hover:hover .animated-icon, .icon-back-on-hover:focus .animated-icon, .icon-back-on-hover:active .animated-icon {
  -webkit-transform: translateX(-4px);
  transform: translateX(-4px);
}

/* Icon Forward */
.icon-forward-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.icon-forward-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-forward-on-hover:hover .animated-icon, .icon-forward-on-hover:focus .animated-icon, .icon-forward-on-hover:active .animated-icon {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

/* Icon Down */
@-webkit-keyframes on-hover-icon-down {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%, 75% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@keyframes on-hover-icon-down {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%, 75% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
/* Icon Down */
.icon-down-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-down-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-down-on-hover:hover .animated-icon, .icon-down-on-hover:focus .animated-icon, .icon-down-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-down;
  animation-name: on-hover-icon-down;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/* Icon Up */
@-webkit-keyframes on-hover-icon-up {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%, 75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes on-hover-icon-up {
  0%, 50%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%, 75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
/* Icon Up */
.icon-up-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-up-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-up-on-hover:hover .animated-icon, .icon-up-on-hover:focus .animated-icon, .icon-up-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-up;
  animation-name: on-hover-icon-up;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/* Icon Spin */
.icon-spin-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-spin-on-hover .animated-icon {
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.icon-spin-on-hover:hover .animated-icon, .icon-spin-on-hover:focus .animated-icon, .icon-spin-on-hover:active .animated-icon {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Icon Drop */
@-webkit-keyframes on-hover-icon-drop {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  51%, 100% {
    opacity: 1;
  }
}
@keyframes on-hover-icon-drop {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  51%, 100% {
    opacity: 1;
  }
}
/* Icon Drop */
.icon-drop-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-drop-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-drop-on-hover:hover .animated-icon, .icon-drop-on-hover:focus .animated-icon, .icon-drop-on-hover:active .animated-icon {
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-animation-name: on-hover-icon-drop;
  animation-name: on-hover-icon-drop;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Icon Fade */
.icon-fade-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-fade-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color;
  transition-property: color;
}
.icon-fade-on-hover:hover .animated-icon, .icon-fade-on-hover:focus .animated-icon, .icon-fade-on-hover:active .animated-icon {
  color: #0f9e5e;
}

/* Icon Float Away */
@-webkit-keyframes on-hover-icon-float-away {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
    transform: translateY(-1em);
  }
}
@keyframes on-hover-icon-float-away {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-1em);
    transform: translateY(-1em);
  }
}
/* Icon Float Away */
.icon-float-away-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-float-away-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.icon-float-away-on-hover:hover .animated-icon, .icon-float-away-on-hover:focus .animated-icon, .icon-float-away-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-float-away;
  animation-name: on-hover-icon-float-away;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/* Icon Sink Away */
@-webkit-keyframes on-hover-icon-sink-away {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(1em);
    transform: translateY(1em);
  }
}
@keyframes on-hover-icon-sink-away {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(1em);
    transform: translateY(1em);
  }
}
/* Icon Sink Away */
.icon-sink-away-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-sink-away-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.icon-sink-away-on-hover:hover .animated-icon, .icon-sink-away-on-hover:focus .animated-icon, .icon-sink-away-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-sink-away;
  animation-name: on-hover-icon-sink-away;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/* Icon Grow */
.icon-grow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-grow-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-grow-on-hover:hover .animated-icon, .icon-grow-on-hover:focus .animated-icon, .icon-grow-on-hover:active .animated-icon {
  -webkit-transform: scale(1.3) translateZ(0);
  transform: scale(1.3) translateZ(0);
}

/* Icon Shrink */
.icon-shrink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-shrink-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-shrink-on-hover:hover .animated-icon, .icon-shrink-on-hover:focus .animated-icon, .icon-shrink-on-hover:active .animated-icon {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

/* Icon Pulse */
@-webkit-keyframes on-hover-icon-pulse {
  25% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  75% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@keyframes on-hover-icon-pulse {
  25% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  75% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
.icon-pulse-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-pulse-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-pulse-on-hover:hover .animated-icon, .icon-pulse-on-hover:focus .animated-icon, .icon-pulse-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-pulse;
  animation-name: on-hover-icon-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Icon Pulse Grow */
@-webkit-keyframes on-hover-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
@keyframes on-hover-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
.icon-pulse-grow-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-pulse-grow-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-pulse-grow-on-hover:hover .animated-icon, .icon-pulse-grow-on-hover:focus .animated-icon, .icon-pulse-grow-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-pulse-grow;
  animation-name: on-hover-icon-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Icon Pulse Shrink */
@-webkit-keyframes on-hover-icon-pulse-shrink {
  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@keyframes on-hover-icon-pulse-shrink {
  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
.icon-pulse-shrink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.icon-pulse-shrink-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-pulse-shrink-on-hover:hover .animated-icon, .icon-pulse-shrink-on-hover:focus .animated-icon, .icon-pulse-shrink-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-pulse-shrink;
  animation-name: on-hover-icon-pulse-shrink;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Icon Push */
@-webkit-keyframes on-hover-icon-push {
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes on-hover-icon-push {
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.icon-push-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-push-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-push-on-hover:hover .animated-icon, .icon-push-on-hover:focus .animated-icon, .icon-push-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-push;
  animation-name: on-hover-icon-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Icon Pop */
@-webkit-keyframes on-hover-icon-pop {
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
@keyframes on-hover-icon-pop {
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
.icon-pop-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-pop-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-pop-on-hover:hover .animated-icon, .icon-pop-on-hover:focus .animated-icon, .icon-pop-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-pop;
  animation-name: on-hover-icon-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Icon Bounce */
.icon-bounce-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-bounce-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-bounce-on-hover:hover .animated-icon, .icon-bounce-on-hover:focus .animated-icon, .icon-bounce-on-hover:active .animated-icon {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Icon Rotate */
.icon-rotate-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-rotate-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-rotate-on-hover:hover .animated-icon, .icon-rotate-on-hover:focus .animated-icon, .icon-rotate-on-hover:active .animated-icon {
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

/* Icon Grow Rotate */
.icon-grow-rotate-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-grow-rotate-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-grow-rotate-on-hover:hover .animated-icon, .icon-grow-rotate-on-hover:focus .animated-icon, .icon-grow-rotate-on-hover:active .animated-icon {
  -webkit-transform: scale(1.5) rotate(12deg);
  transform: scale(1.5) rotate(12deg);
}

/* Icon Float */
.icon-float-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-float-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-float-on-hover:hover .animated-icon, .icon-float-on-hover:focus .animated-icon, .icon-float-on-hover:active .animated-icon {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}

/* Icon Sink */
.icon-sink-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-sink-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.icon-sink-on-hover:hover .animated-icon, .icon-sink-on-hover:focus .animated-icon, .icon-sink-on-hover:active .animated-icon {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}

/* Icon Bob */
@-webkit-keyframes on-hover-icon-bob {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  50% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes on-hover-icon-bob {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  50% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@-webkit-keyframes on-hover-icon-bob-float {
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes on-hover-icon-bob-float {
  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
.icon-bob-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-bob-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-bob-on-hover:hover .animated-icon, .icon-bob-on-hover:focus .animated-icon, .icon-bob-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-bob-float, on-hover-icon-bob;
  animation-name: on-hover-icon-bob-float, on-hover-icon-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

/* Icon Hang */
@-webkit-keyframes on-hover-icon-hang {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@keyframes on-hover-icon-hang {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-webkit-keyframes on-hover-icon-hang-sink {
  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@keyframes on-hover-icon-hang-sink {
  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
.icon-hang-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-hang-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-hang-on-hover:hover .animated-icon, .icon-hang-on-hover:focus .animated-icon, .icon-hang-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-hang-sink, on-hover-icon-hang;
  animation-name: on-hover-icon-hang-sink, on-hover-icon-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

/* Icon Wobble Horizontal */
@-webkit-keyframes on-hover-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes on-hover-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.icon-wobble-horizontal-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-wobble-horizontal-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-wobble-horizontal-on-hover:hover .animated-icon, .icon-wobble-horizontal-on-hover:focus .animated-icon, .icon-wobble-horizontal-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-wobble-horizontal;
  animation-name: on-hover-icon-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Icon Wobble Vertical */
@-webkit-keyframes on-hover-icon-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  33.3% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes on-hover-icon-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  33.3% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.icon-wobble-vertical-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-wobble-vertical-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-wobble-vertical-on-hover:hover .animated-icon, .icon-wobble-vertical-on-hover:focus .animated-icon, .icon-wobble-vertical-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-wobble-vertical;
  animation-name: on-hover-icon-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Icon Buzz */
@-webkit-keyframes on-hover-icon-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes on-hover-icon-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.icon-buzz-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-buzz-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-buzz-on-hover:hover .animated-icon, .icon-buzz-on-hover:focus .animated-icon, .icon-buzz-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-buzz;
  animation-name: on-hover-icon-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Icon Buzz Out */
@-webkit-keyframes on-hover-icon-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes on-hover-icon-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.icon-buzz-out-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-buzz-out-on-hover .animated-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.icon-buzz-out-on-hover:hover .animated-icon, .icon-buzz-out-on-hover:focus .animated-icon, .icon-buzz-out-on-hover:active .animated-icon {
  -webkit-animation-name: on-hover-icon-buzz-out;
  animation-name: on-hover-icon-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* CURLS */
/* Curl Top Left */
.curl-top-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.curl-top-left-on-hover:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: #f8f9fa;
  /* IE9 */
  background: linear-gradient(135deg, #f8f9fa 45%, #dee2e6 50%, #e9ecef 56%, #f8f9fa 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#ffffff", endColorstr="#000000");
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-left-on-hover:hover:before, .curl-top-left-on-hover:focus:before, .curl-top-left-on-hover:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Top Right */
.curl-top-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.curl-top-right-on-hover:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  background: #f8f9fa;
  /* IE9 */
  background: linear-gradient(225deg, #f8f9fa 45%, #dee2e6 50%, #e9ecef 56%, #f8f9fa 80%);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-right-on-hover:hover:before, .curl-top-right-on-hover:focus:before, .curl-top-right-on-hover:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Right */
.curl-bottom-right-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.curl-bottom-right-on-hover:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  background: #f8f9fa;
  /* IE9 */
  background: linear-gradient(315deg, #f8f9fa 45%, #dee2e6 50%, #e9ecef 56%, #f8f9fa 80%);
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-right-on-hover:hover:before, .curl-bottom-right-on-hover:focus:before, .curl-bottom-right-on-hover:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Left */
.curl-bottom-left-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.curl-bottom-left-on-hover:before {
  pointer-events: none;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  background: #f8f9fa;
  /* IE9 */
  background: linear-gradient(45deg, #f8f9fa 45%, #dee2e6 50%, #e9ecef 56%, #f8f9fa 80%);
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-left-on-hover:hover:before, .curl-bottom-left-on-hover:focus:before, .curl-bottom-left-on-hover:active:before {
  width: 25px;
  height: 25px;
}

/* serato plugins */
@keyframes bounce {
  0%, 10%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 60% {
    transform: translateY(-15px);
  }
}
@keyframes bounce-reverse {
  0%, 10%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 60% {
    transform: translateY(15px);
  }
}
.animation-bounce .is-animating,
.animation-bounce .is-animated-on-hover:hover,
.animation-to-child .is-animated-on-hover:hover > .animation-bounce {
  animation: bounce 2s ease infinite;
}

.animation-bounce .is-animating.is-animating-fast,
.animation-bounce .is-animated-on-hover .is-animating-fast:hover,
.animation-to-child .is-animated-on-hover:hover > .animation-bounce .is-animating-fast {
  animation: bounce 1s ease infinite;
}

.animation-bounce .is-animating .is-animating-slow,
.animation-bounce .is-animated-on-hover .is-animating-slow:hover,
.animation-to-child .is-animated-on-hover:hover > .animation-bounce .is-animating-slow {
  animation: bounce 3s ease infinite;
}

.animation-bounce .is-animated-in-reverse.is-animating,
.animation-bounce .is-animated-in-reverse .is-animated-on-hover:hover,
.animation-to-child .is-animated-on-hover:hover > .animation-bounce .is-animated-in-reverse {
  animation: bounce-reverse 2s ease infinite;
}

.animation-bounce .is-animated-in-reverse .is-animating .is-animating-fast,
.animation-bounce .is-animated-in-reverse .is-animated-on-hover .is-animating-fast:hover,
.animation-to-child .is-animated-on-hover:hover > .animation-bounce .is-animated-in-reverse .is-animating-fast {
  animation: bounce-reverse 1s ease infinite;
}

.animation-bounce .is-animated-in-reverse .is-animating .is-animating-slow,
.animation-bounce .is-animated-in-reverse .is-animated-on-hover .is-animating-slow:hover,
.animation-to-child .is-animated-on-hover:hover > .animation-bounce .is-animated-in-reverse .is-animating-slow {
  animation: bounce-reverse 3s ease infinite;
}

@keyframes burst {
  0% {
    opacity: 0.6;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.animation-burst.is-animating,
.animation-burst.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-burst {
  animation: burst 2s infinite linear;
}

.animation-burst.is-animating.is-animating-fast,
.animation-burst.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-burst.is-animating-fast {
  animation: burst 1s infinite linear;
}

.animation-burst.is-animating.is-animating-slow,
.animation-burst.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-burst.is-animating-slow {
  animation: burst 3s infinite linear;
}

@keyframes falling {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }
  50% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(50%);
    opacity: 0;
  }
}
@keyframes falling-reverse {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  50% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%);
    opacity: 0;
  }
}
.animation-falling.is-animating,
.animation-falling.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-falling {
  animation: falling 2s linear infinite;
}

.animation-falling.is-animating.is-animating-fast,
.animation-falling.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-falling.is-animating-fast {
  animation: falling 1s linear infinite;
}

.animation-falling.is-animating.is-animating-slow,
.animation-falling.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-falling.is-animating-slow {
  animation: falling 3s linear infinite;
}

.animation-falling.is-animated-in-reverse.is-animating,
.animation-falling.is-animated-in-reverse.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-falling.is-animated-in-reverse,
.animation-rising.is-animating,
.animation-rising.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-rising {
  animation: falling-reverse 2s linear infinite;
}

.animation-falling.is-animated-in-reverse.is-animating.is-animating-fast,
.animation-falling.is-animated-in-reverse.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-falling.is-animated-in-reverse.is-animating-fast,
.animation-rising.is-animating.is-animating-fast,
.animation-rising.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-rising.is-animating-fast {
  animation: falling-reverse 1s linear infinite;
}

.animation-falling.is-animated-in-reverse.is-animating.is-animating-slow,
.animation-falling.is-animated-in-reverse.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-falling.is-animated-in-reverse.is-animating-slow,
.animation-rising.is-animating.is-animating-slow,
.animation-rising.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-rising.is-animating-slow {
  animation: falling-reverse 3s linear infinite;
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.animation-flash.is-animating,
.animation-flash.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-flash {
  animation: flash 2s ease infinite;
}

.animation-flash.is-animating.is-animating-fast,
.animation-flash.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-flash.is-animating-fast {
  animation: flash 1s ease infinite;
}

.animation-flash.is-animating.is-animating-slow,
.animation-flash.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-flash.is-animating-slow {
  animation: flash 3s ease infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.animation-float.is-animating,
.animation-float.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-float {
  animation: float 2s linear infinite;
}

.animation-float.is-animating.is-animating-fast,
.animation-float.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-float.is-animating-fast {
  animation: float 1s linear infinite;
}

.animation-float.is-animating.is-animating-slow,
.animation-float.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-float.is-animating-slow {
  animation: float 3s linear infinite;
}

@keyframes horizontal {
  0%, 12%, 24%, 36%, 100% {
    transform: translate(0, 0);
  }
  6%, 18%, 30% {
    transform: translate(5px, 0);
  }
}
@keyframes horizontal-reverse {
  0%, 12%, 24%, 36%, 100% {
    transform: translate(0, 0);
  }
  6%, 18%, 30% {
    transform: translate(-5px, 0);
  }
}
.animation-horizontal.is-animating,
.animation-horizontal.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-horizontal {
  animation: horizontal 2s ease infinite;
}

.animation-horizontal.is-animating.is-animating-fast,
.animation-horizontal.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-horizontal.is-animating-fast {
  animation: horizontal 1s ease infinite;
}

.animation-horizontal.is-animating.is-animating-slow,
.animation-horizontal.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-horizontal.is-animating-slow {
  animation: horizontal 3s ease infinite;
}

.animation-horizontal.is-animating-in-reverse.is-animating,
.animation-horizontal.is-animating-in-reverse.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-horizontal.is-animating-in-reverse {
  animation: horizontal-reverse 2s ease infinite;
}

.animation-horizontal.is-animating-in-reverse.is-animating.is-animating-fast,
.animation-horizontal.is-animating-in-reverse.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-horizontal.is-animating-in-reverse.is-animating-fast {
  animation: horizontal-reverse 1s ease infinite;
}

.animation-horizontal.is-animating-in-reverse.is-animating.is-animating-slow,
.animation-horizontal.is-animating-in-reverse.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-horizontal.is-animating-in-reverse.is-animating-slow {
  animation: horizontal-reverse 3s ease infinite;
}

@keyframes passing {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  50% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}
@keyframes passing-reverse {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  50% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0;
  }
}
.animation-passing.is-animating,
.animation-passing.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-passing {
  animation: passing 2s linear infinite;
}

.animation-passing.is-animating.is-animating-fast,
.animation-passing.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-passing.is-animating-fast {
  animation: passing 1s linear infinite;
}

.animation-passing.is-animating.is-animating-slow,
.animation-passing.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-passing.is-animating-slow {
  animation: passing 3s linear infinite;
}

.animation-passing.is-animating-in-reverse.is-animating,
.animation-passing.is-animating-in-reverse.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-passing.is-animating-in-reverse {
  animation: passing-reverse 2s linear infinite;
}

.animation-passing.is-animating-in-reverse.is-animating.is-animating-fast,
.animation-passing.is-animating-in-reverse.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-passing.reverse.is-animating-fast {
  animation: passing-reverse 1s linear infinite;
}

.animation-passing.is-animating-in-reverse.is-animating.is-animating-slow,
.animation-passing.is-animating-in-reverse.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-passing.is-animating-in-reverse.is-animating-slow {
  animation: passing-reverse 3s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.8);
  }
}
.animation-pulse.is-animating,
.animation-pulse.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-pulse {
  animation: pulse 2s linear infinite;
}

.animation-pulse.is-animating.is-animating-fast,
.animation-pulse.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-pulse.is-animating-fast {
  animation: pulse 1s linear infinite;
}

.animation-pulse.is-animating.is-animating-slow,
.animation-pulse.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-pulse.is-animating-slow {
  animation: pulse 3s linear infinite;
}

@keyframes ring {
  0% {
    transform: rotate(-15deg);
  }
  2% {
    transform: rotate(15deg);
  }
  4%, 12% {
    transform: rotate(-18deg);
  }
  6%, 14% {
    transform: rotate(18deg);
  }
  8% {
    transform: rotate(-22deg);
  }
  10% {
    transform: rotate(22deg);
  }
  16% {
    transform: rotate(-12deg);
  }
  18% {
    transform: rotate(12deg);
  }
  20%, 100% {
    transform: rotate(0deg);
  }
}
.animation-ring.is-animating,
.animation-ring.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-ring {
  animation: ring 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0px;
  transform-origin-z: initial;
}

.animation-ring.is-animating.is-animating-fast,
.animation-ring.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-ring.is-animating-fast {
  animation: ring 1s ease infinite;
}

.animation-ring.is-animating.is-animating-slow,
.animation-ring.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-ring.is-animating-slow {
  animation: ring 3s ease infinite;
}

.animation-shake.is-animating,
.animation-shake.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-shake {
  animation: wrench 2.5s ease infinite;
}

.animation-shake.is-animating.is-animating-fast,
.animation-shake.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-shake.is-animating-fast {
  animation: wrench 1.25s ease infinite;
}

.animation-shake.is-animating.is-animating-slow,
.animation-shake.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-shake.is-animating-slow {
  animation: wrench 3.75s ease infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}
.animation-spin.is-animating,
.animation-spin.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-spin {
  animation: spin 1.5s linear infinite;
}

.animation-spin.is-animating.is-animating-fast,
.animation-spin.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-spin.is-animating-fast {
  animation: spin 0.75s linear infinite;
}

.animation-spin.is-animating.is-animating-slow,
.animation-spin.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-spin.is-animating-slow {
  animation: spin 2.25s linear infinite;
}

.animation-spin.is-animating-in-reverse.is-animating,
.animation-spin.is-animating-in-reverse.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-spin.is-animating-in-reverse {
  animation: spin-reverse 1.5s linear infinite;
}

.animation-spin.is-animating-in-reverse.is-animating.is-animating-fast,
.animation-spin.is-animating-in-reverse.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-spin.is-animating-in-reverse.is-animating-fast {
  animation: spin-reverse 0.75s linear infinite;
}

.animation-spin.is-animating-in-reverse.is-animating.is-animating-slow,
.animation-spin.is-animating-in-reverse.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-spin.is-animating-in-reverse.is-animating-slow {
  animation: spin-reverse 2.25s linear infinite;
}

@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%, 20% {
    transform: scale(0.9) rotate(-8deg);
  }
  30%, 50%, 70% {
    transform: scale(1.3) rotate(8deg);
  }
  40%, 60% {
    transform: scale(1.3) rotate(-8deg);
  }
  80%, 100% {
    transform: scale(1) rotate(0);
  }
}
.animation-tada.is-animating,
.animation-tada.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-tada {
  animation: tada 2s linear infinite;
}

.animation-tada.is-animating.is-animating-fast,
.animation-tada.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-tada.is-animating-fast {
  animation: tada 1s linear infinite;
}

.animation-tada.is-animating.is-animating-slow,
.animation-tada.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-tada.is-animating-slow {
  animation: tada 3s linear infinite;
}

@keyframes vertical {
  0%, 8%, 16% {
    transform: translate(0, -3px);
  }
  4%, 12%, 20% {
    transform: translate(0, 3px);
  }
  22%, 100% {
    transform: translate(0, 0);
  }
}
.animation-vertical.is-animating,
.animation-vertical.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-vertical {
  animation: vertical 2s ease infinite;
}

.animation-vertical.is-animating.is-animating-fast,
.animation-vertical.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-vertical.is-animating-fast {
  animation: vertical 1s ease infinite;
}

.animation-vertical.is-animating.is-animating-slow,
.animation-vertical.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-vertical.is-animating-slow {
  animation: vertical 3s ease infinite;
}

@keyframes wrench {
  0% {
    transform: rotate(-12deg);
  }
  8% {
    transform: rotate(12deg);
  }
  10%, 28%, 30%, 48%, 50%, 68% {
    transform: rotate(24deg);
  }
  18%, 20%, 38%, 40%, 58%, 60% {
    transform: rotate(-24deg);
  }
  75%, 100% {
    transform: rotate(0deg);
  }
}
.animation-wrench.is-animating,
.animation-wrench.is-animated-on-hover:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-wrench {
  animation: wrench 2.5s ease infinite;
  transform-origin-x: 90%;
  transform-origin-y: 35%;
  transform-origin-z: initial;
}

.animation-wrench.is-animating.is-animating-fast,
.animation-wrench.is-animated-on-hover.is-animating-fast:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-wrench.is-animating-fast {
  animation: wrench 1.25s ease infinite;
}

.animation-wrench.is-animating.is-animating-slow,
.animation-wrench.is-animated-on-hover.is-animating-slow:hover,
.animation-to-child.is-animated-on-hover:hover > .animation-wrench.is-animating-slow {
  animation: wrench 3.75s ease infinite;
}

/*! Serato CSS Modified Version Of Font Awesome Animation CSS,
* Thanks to Lin For Making Great CSS Animations! 😇 */
/*!
/*! Font awesome animations.css | MIT License | https://github.com/l-lin/font-awesome-animation */
/* serato animations */
.button, .button-dark, .button-danger, .button-warning, .button-info, .button-success, .button-secondary, .button-primary {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  font-size: 1rem;
  border-radius: 0.25rem;
  text-transform: capitalize;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background-color: #e9ecef;
  color: #212529;
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.button:hover, .button-dark:hover, .button-danger:hover, .button-warning:hover, .button-info:hover, .button-success:hover, .button-secondary:hover, .button-primary:hover {
  transition: all 0.2s ease-in-out;
  background-color: #cbd3da;
}
.button:focus, .button-dark:focus, .button-danger:focus, .button-warning:focus, .button-info:focus, .button-success:focus, .button-secondary:focus, .button-primary:focus, .button:active, .button-dark:active, .button-danger:active, .button-warning:active, .button-info:active, .button-success:active, .button-secondary:active, .button-primary:active {
  -webkit-animation-name: on-hover-push;
  animation-name: on-hover-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.iconic-button, .iconic-button--no-background {
  display: grid;
  place-items: center;
  width: fit-content;
  height: fit-content;
  padding: 0px 8px;
  border-radius: 50%;
  font-size: 2.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background-color: #e9ecef;
  color: #212529;
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.iconic-button:hover, .iconic-button--no-background:hover {
  transition: all 0.2s ease-in-out;
  color: #cbd3da;
}
.iconic-button:focus, .iconic-button--no-background:focus, .iconic-button:active, .iconic-button--no-background:active {
  -webkit-animation-name: on-hover-push;
  animation-name: on-hover-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.iconic-button--no-background {
  background: transparent;
}

.button-primary {
  background-color: indigo;
  color: white;
}
.button-primary:hover {
  color: white;
  background-color: #6800b5;
}

.button-secondary {
  background-color: purple;
  color: white;
}
.button-secondary:hover {
  color: white;
  background-color: #b300b3;
}

.button-success {
  background-color: #198754;
  color: white;
}
.button-success:hover {
  color: white;
  background-color: #21b26f;
}

.button-info {
  background-color: #0dcaf0;
  color: white;
}
.button-info:hover {
  color: white;
  background-color: #3cd5f4;
}

.button-warning {
  background-color: #ffc107;
  color: white;
}
.button-warning:hover {
  color: white;
  background-color: #ffce3a;
}

.button-danger {
  background-color: #dc3545;
  color: white;
}
.button-danger:hover {
  color: white;
  background-color: #e4606d;
}

.button-dark {
  background-color: #212529;
  color: white;
}
.button-dark:hover {
  color: white;
  background-color: #383f45;
}

.card {
  width: 300px;
}

/* Serato Components */
/* Serato Layouts */
.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.page-layout-standard {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: fixed;
}
.page-layout-standard > header.page-header {
  display: flex;
  flex: 1;
  flex-direction: row;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  color: #f8f9fa;
  background: indigo;
}
.page-layout-standard > header.page-header > nav.navbar {
  display: flex;
  flex: 1;
  gap: 1.5rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.5rem;
}
.page-layout-standard > header.page-header > nav.navbar > .navbar-start,
.page-layout-standard > header.page-header > nav.navbar .navbar-end {
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.page-layout-standard > header.page-header > nav.navbar > .navbar-start > .navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
}
.page-layout-standard > header.page-header > nav.navbar > .navbar-start > .navbar-brand > a.navbar-link {
  font-style: normal !important;
  color: currentColor;
}
.page-layout-standard > header.page-header > nav.navbar > .navbar-start > .navbar-brand > a.navbar-link:hover {
  text-decoration: none !important;
}
.page-layout-standard > main.page-content {
  display: grid;
  width: 100%;
  height: 100vh;
}
@media (min-width: 576px) {
  .page-layout-standard > main.page-content {
    grid-template-columns: minmax(150px, 25%) auto;
  }
}
.page-layout-standard > main.page-content > aside.sidebar {
  display: flex;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-right: 1px solid #e9ecef;
  display: none;
}
@media (min-width: 576px) {
  .page-layout-standard > main.page-content > aside.sidebar {
    display: flex;
  }
}
.page-layout-standard > main.page-content > section.main-section {
  display: flex;
  gap: 2.5rem;
  padding: 4rem 6.5vw;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  /**
  * Customized scrollbar // get a better one!
  */
}
.page-layout-standard > main.page-content > section.main-section::-webkit-scrollbar {
  width: 12px;
  height: 6px;
  background-color: #eff1f5;
}
.page-layout-standard > main.page-content > section.main-section::-webkit-scrollbar-track {
  border-radius: 0.25rem;
  background-color: transparent;
}
.page-layout-standard > main.page-content > section.main-section::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  height: 6px;
  background-color: #9ca3af;
  border: 2px solid #eff1f5;
}
.page-layout-standard > main.page-content > section.main-section::-webkit-scrollbar-thumb:hover {
  background-color: #bbc5d4;
}
.page-layout-standard > main.page-content > section.main-section > h1.page-title {
  font-size: 3.5rem;
  font-weight: bold;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.page-layout-holy-grail {
  display: grid;
  grid-template: auto 1fr auto/auto 1fr auto;
}
.page-layout-holy-grail > header.page-header {
  grid-column: 1/4;
}
.page-layout-holy-grail > aside.sidebar-left {
  grid-column: 1/2;
}
.page-layout-holy-grail > main.page-content {
  grid-column: 2/3;
}
.page-layout-holy-grail > aside.sidebar-right {
  grid-column: 3/4;
}
.page-layout-holy-grail > footer.page-footer {
  grid-column: 1/4;
}

.parent {
  display: grid;
  gap: 1rem;
  place-items: center;
  grid-template-columns: repeat auto-fit, minmax(150px, 1fr);
}

.text {
  font-size: clamp(1.5rem, 10vw, 3rem);
}

.aspect-ratio .rectangle-horizontal {
  aspect-ratio: 16/9;
}
.aspect-ratio .square {
  aspect-ratio: 1/1;
}
.aspect-ratio .rectangle-verticle {
  aspect-ratio: 1/2;
}

/*! serato-css v1.0.0 | MIT License | https://github.com/Hussseinkizz/serato-css */
/*# sourceMappingURL=serato.css.map */