/* GENERAL */
html {
  font-size: 13px;
}
p, span, input {
  font-size: 16px;
}
.color-primary {
  color: var(--color-primary);
}
.color-secondary {
  color: var(--color-secondary);
}
.hover-primary:hover {
  color: var(--color-primary);
}
.hover-secondary:hover {
  color: var(--color-secondary);
}
.background-color {
  background-color: var(--color-background);
}
.background-primary {
  background-color: var(--color-primary);
}
.background-secondary {
  background-color: var(--color-secondary);
}
.hover-background-secondary:hover {
  background-color: var(--color-secondary);
}
* {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.text-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight) !important;
}

/* WYSIWYG SECTIONS */
.wysiwyg-content {
  overflow: hidden;
}
.wysiwyg-content a:hover,
.wysiwyg-content a:focus {
  color: var(--color-secondary);
}
.wysiwyg-content * {
  margin-bottom: 1rem;
}
.wysiwyg-content a {
  color: var(--color-primary);
  text-decoration: underline;
}
.wysiwyg-content img {
  max-width: 100%;
  display: block;
  height: auto;
}
.wysiwyg-content.tw-text-white *,
.wysiwyg-content.tw-text-white a {
  color: #ffffff !important;
}

/* BUTTONS */
.button {
  position: relative;
  cursor: pointer !important;
  overflow: hidden;
}
.button.button-primary {
  color: white;
  background-color: var(--color-primary);
}
.button.button-secondary {
  color: white;
  background-color: var(--color-secondary);
}
.button.button-primary-white:hover {
  background-color: var(--color-primary);
}
.button.button-primary-white.button-light:hover {
  background-color: white;
  color: var(--color-primary) !important;
}
.button.button-secondary-white:hover {
  background-color: var(--color-secondary);
}
.button.button-secondary-white.button-light:hover {
  background-color: white;
  color: var(--color-secondary) !important;
}
.button.button-light:after {
  background-color: rgba(0, 0, 0, 0.1);
}
.button > span {
  position: relative;
  z-index: 1;
}
.button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: all;
  transition-duration: 150ms;
}
.button:hover:after {
  opacity: 1;
}