/* #### Theme Colors & Variables #### */

:root {
  --rem-font-size: 62.5%;
  --body-font-family: "F37 Ginger", "Helvetica", sans-serif;
  --heading-font-family: "F37 Ginger", "Helvetica", sans-serif;

  --highlight-color: #5b9f52;
  --highlight-color-hover: #4e8746;
  --highlight-bg-color: var(--highlight-color);
  --highlight-bg-text-color: #fff;

  --highlight-color-alt: #5b9f52;
  --highlight-color-alt-2: #5b9f52;
  --highlight-color-alt-3: #37206b;

  --light-bg-color: #fbfbfb;
  --light-bg-text-color: var(--text-color);
  --light-bg-title-color: var(--highlight-color);

  --dark-bg-color: #252721;
  --dark-bg-color-alt: linear-gradient(135deg, #1e1060 0%, #0f2669 100%);
  --dark-bg-text-color: #fff;

  --featured-post-cover-overlay-bg: linear-gradient(to bottom,
      rgba(74, 102, 60, 0) 0%,
      rgba(74, 102, 60, 0.7) 50%,
      rgba(74, 102, 60, 0.9) 100%);

  --white-bg-color: #fff;
  --yellow-bg-color: #ffd337;
  --light-cyan-bg-color: #d7edff;
  --light-pink-bg-color: #fef1ef;

  --green-bg-color: #eafbe5;
  --green-bg-text-color: #577d4c;

  --yellow-bg-color: #ffa128;
  --yellow-bg-color-hover: #e39024;
  --yellow-bg-text-color: var(--title-color);

  --orange-bg-color: #f28426;
  --orange-bg-color-hover: #eb6b20;
  --orange-bg-text-color: #fff;

  --btn-font-size: 1.8rem;
  --btn-bg-color: var(--highlight-color);
  --btn-text-color: var(--highlight-bg-text-color);
  --btn-bg-color-flat: var(--highlight-color);
  --btn-bg-color-hover: var(--highlight-color-hover);

  --green-btn-bg-color: #577d4c;
  --green-btn-bg-color-hover: #4a6a41;
  --green-btn-bg-text-color: #fff;

  --blue-btn-bg-color: #3fc3df;
  --blue-btn-bg-color-hover: #36a8bf;
  --blue-btn-bg-text-color: #fff;

  --dark-blue-btn-bg-color: #0b64b5;
  --dark-blue-btn-bg-color-hover: #0a5aa6;
  --dark-blue-btn-bg-text-color: #fff;

  --gray-btn-bg-color: #888;
  --gray-btn-bg-color-hover: #1c1c1c;
  --gray-btn-bg-text-color: #fff;

  --title-color: #111314;
  --text-color: #686868;
  --text-light-color: #8f8f8f;
  --light-text-color: var(--text-light-color);

  --df-border-radius: .3rem;
  --df-padding-unit: 3rem;
  --df-margin-unit: 3rem;
}


@media (max-width: 1440px) {
  :root {
    --df-padding-unit: 2.5rem;
    --df-margin-unit: 2.5rem;
  }
}

@media (max-width: 992px) {
  :root {
    --df-padding-unit: 2rem;
    --df-margin-unit: 2rem;
  }
}

/* Color Variable Classes */

.highlight-color,
.has-highlight-color-color {
  color: var(--highlight-color) !important;
}

.highlight-color-alt,
.has-highlight-color-alt-color {
  color: var(--highlight-color-alt) !important;
}

.has-light-bg-color {
  background-color: var(--light-bg-color);
}

.has-white-color-background-color {
  background-color: #fff;
}

.title-color,
.heading-color,
.has-heading-color-color,
.has-title-color-color {
  background-color: var(--title-color) !important;
}

.has-heading-color-background-color,
.has-title-color-background-color {
  background-color: var(--title-color) !important;
}

.text-white {
  color: #fff;
}