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

:root {
  --rem-font-size: 62.5%;
  --body-font-family: "FG Pro", "Helvetica", sans-serif;
  --heading-font-family: "FG Pro", "Helvetica", sans-serif;
  --body-font-size: 1.5rem;
  --heading-base-font-size: var(--body-font-size);

  /* ## Theme Color Palette - START ## */
  --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-text-color: #fff;

  --title-color: #111314;
  --text-color: #686868;
  --text-light-color: #8f8f8f;
  /* ## Theme Color Palette - END ## */

  --menu-link-color: var(--title-color);
  --menu-link-color-hover: var(--highlight-color);
  --menu-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 0v2h20V0H0zm0 6v2h20V6H0zm0 6v2h20v-2H0z'/%3E%3C/svg%3E");
  --menu-toggle-icon-active: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 .925L13.075 0 7 6.075.925 0 0 .925 6.075 7 0 13.075.925 14 7 7.925 13.075 14l.925-.925L7.925 7 14 .925z' fill='%23fff'/%3E%3C/svg%3E");
  --menu-loading-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'%3E%3Cpath d='M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='1.2s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/svg%3E");
  --menu-search-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' style='enable-background:new 0 0 23 23' xml:space='preserve'%3E%3Cpath d='M15.8 14.8 20 19m-1.9-9.6c0 4.3-3.5 7.7-7.7 7.7-4.3 0-7.7-3.5-7.7-7.7 0-4.3 3.5-7.7 7.7-7.7 4.2-.1 7.7 3.4 7.7 7.7z' style='fill:none;stroke:%23020000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round'/%3E%3C/svg%3E");
  --menu-toggle-animation-speed: .2s;
  --menu-toggle-icon-size: 2.3rem;

  --dark-bg-color-alt: linear-gradient(135deg, #1e1060 0%, #0f2669 100%);
  --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-family: var(--heading-font-family);
  --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);
  --btn-box-shadow: none;
  --btn-box-shadow-hover: 0 .2rem .4rem rgba(0, 0, 0, 0.1);
  --btn-df-line-height: 1.3;
  --btn-stroked-line-height: 1.2;
  --btn-border-width: 1px;
  --btn-transition: none;

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

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

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

  --dark-btn-bg-color: var(--dark-bg-color);
  --dark-btn-bg-color-hover: var(--dark-bg-color);
  --dark-btn-text-color: var(--dark-bg-text-color);

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

  --orange-btn-bg-color: var(--orange-bg-color);
  --orange-btn-bg-color-hover: var(--orange-bg-color-hover);
  --orange-btn-text-color: var(--orange-bg-text-color);

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

  --df-outline-style: 2px solid #000;

  --table-background-color: var(--light-bg-color);
  --table-border-color: #eee;
  --table-border-radius: var(--df-border-radius);

  --form-control-bg-color: #fafafa;
  --form-control-bg-color-hover: var(--light-bg-color);
  --form-control-placeholder-color: var(--text-light-color);
  --form-control-text-color: var(--text-color);
  --form-control-text-color-hover: var(--text-color);
  --form-control-border-color: #fafafa;
  --form-control-border-color-hover: var(--light-bg-color);
  --form-control-box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.08);
  --form-control-box-shadow-hover: 0 0 0 0.1rem rgba(0, 0, 0, 0.08);
  --form-control-padding: 1.1rem 2rem .9rem;
  --form-control-height: 5rem;
  --form-control-font-size: 1.6rem;

  --box-box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.03);
  --box-border: 1px solid #eee;

  --mobile-nav-bar-height: 5.2rem;

  --df-column-gap: 1.5rem;
  --df-column-gap-bottom: var(--df-column-gap);
  --current-column-gap: var(--df-column-gap);
  --current-column-gap-bottom: var(--df-column-gap);
  --double-column-gap: calc(var(--df-column-gap) * 2);

  --df-border-radius: .2rem;
  --btn-border-radius: var(--df-border-radius);
  --thumbnail-border-radius: var(--df-border-radius);

  --df-padding-unit: 3rem;
  --df-margin-unit: 3rem;
  --hf-padding-unit: calc(var(--df-padding-unit) / 2);
  --hf-margin-unit: calc(var(--df-margin-unit) / 2);
  --double-padding-unit: calc(var(--df-padding-unit) * 2);
  --double-margin-unit: calc(var(--df-margin-unit) * 2);
  --triple-padding-unit: calc(var(--df-padding-unit) * 3);
  --triple-margin-unit: calc(var(--df-margin-unit) * 3);

  --df-margin: calc(var(--df-margin-unit) * 2);
  --df-padding: calc(var(--df-padding-unit) * 2);

  --smaller-collumn-width: 94.4rem;

  /* Deprecated */
  --box-box-border: var(--box-border);
  --light-text-color: var(--text-light-color);
  --green-btn-bg-text-color: var(--green-btn-text-color);
  --blue-btn-bg-text-color: var(--blue-btn-text-color);
  --yellow-btn-bg-text-color: var(--yellow-btn-text-color);
  --orange-btn-bg-text-color: var(--orange-btn-text-color);
  --dark-blue-btn-bg-text-color: var(--dark-blue-btn-text-color);
  --gray-btn-bg-text-color: var(--gray-btn-text-color);

  --sidebar-text-transform: var(--sidebar-title-text-transform);
  --sidebar-font-weight: var(--sidebar-title-font-weight);
  --sidebar-font-size: var(--sidebar-title-font-size);
}


@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;

    --body-font-size: 1.6rem;
    --heading-base-font-size: calc(var(--body-font-size) * .8);
  }
}

/* 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 {
  color: var(--title-color) !important;
}

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