/**
 
Table of Contents
===================================================================================
#Variables
#Alternate Sections
#Inverted Sections
#Selection Highlight Color
#Color Classes - for use in WP backend - Enfold





/* ================================================================================ */
/* #Variables
/* ================================================================================ */
:root {
  /* Color Values
  -------------------------------------------------------- */
  --color-primary-h: 185;
  --color-primary-s: 46%;
  --color-primary--xx-light: hsl(var(--color-primary-h), var(--color-primary-s), 93%);
  --color-primary--x-light: hsl(var(--color-primary-h), var(--color-primary-s), 83%);
  --color-primary--light: hsl(var(--color-primary-h), var(--color-primary-s), 73%);
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), 61%);
  --color-primary--dark: hsl(var(--color-primary-h), var(--color-primary-s), 51%);
  --color-primary--x-dark: hsl(var(--color-primary-h), var(--color-primary-s), 20%);
  --color-primary--xx-dark: hsl(var(--color-primary-h), var(--color-primary-s), 15%);

  --color-secondary-h: 240;
  --color-secondary-s: 11%;
  --color-secondary--xx-light: hsl(var(--color-secondary-h), var(--color-secondary-s), 90%);
  --color-secondary--x-light: hsl(var(--color-secondary-h), var(--color-secondary-s), 60%);
  --color-secondary--light: hsl(var(--color-secondary-h), var(--color-secondary-s), 46%);
  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), 23%);
  --color-secondary--dark: hsl(var(--color-secondary-h), var(--color-secondary-s), 40%);
  --color-secondary--x-dark: hsl(var(--color-secondary-h), var(--color-secondary-s), 30%);
  --color-secondary--xx-dark: hsl(var(--color-secondary-h), var(--color-secondary-s), 23%);


  --color-neutral--xx-light: #f1f1f1;
  --color-neutral--x-light: #e1e1e1;
  --color-neutral--light: #b3b3b3;
  --color-neutral: #888;
  --color-neutral--dark: #333;
  --color-neutral--x-dark: #222;
  --color-neutral--xx-dark: #111;




  /* Text
  -------------------------------------------------------- */
  --color-text: var(--color-neutral--dark);
  --color-text-link: var(--color-text);
  --color-text-link--hover: var(--color-primary);


  /* Backgrounds
  -------------------------------------------------------- */
  --enfold-main-color-bg: #fff;
  --enfold-main-color-color: var(--color-text);
  --enfold-main-color-primary: var(--color-primary);

  /* Alternate Sections */
  --enfold-alternate-color-bg: var(--color-secondary--xx-light);
  --enfold-alternate-color-color: var(--color-text);
  --enfold-alternate-color-heading: var(--color-primary--x-dark);


  /* Enfold Theme Specific
  -------------------------------------------------------- */
  --enfold-header-color-primary: var(--color-primary);
  --enfold-header-color-button-border: var(--color-primary);
}




/* ================================================================================ */
/* #Alternate Sections - Primary Color Background
/* ================================================================================ */
#main .section--alternate-color-primary { background-color: var(--color-primary--x-light); }




/* ================================================================================ */
/* #Inverted Sections
/* ================================================================================ */

/* Primary (Inverted)
----------------------------------------------------------------------------------- */
#main .inverted-color--primary { background-color: var(--color-primary--xx-dark); }

#main .inverted-color--primary :where(h2, h3) { color: #fff; }

#main .inverted-color--primary :where(p, th, td, li),
#main .inverted-color--primary a,
#main .inverted-color--primary strong { color: var(--color-primary--light); }

#top #main .inverted-color--primary a:hover,
#top #main .inverted-color--primary a:active,
#top #main .inverted-color--primary a:focus { color: var(--color-primary--x-light); }


/* Secondary (Inverted)
----------------------------------------------------------------------------------- */
#main .inverted-color--secondary { background-color: var(--color-secondary--xx-dark); }

#main .inverted-color--secondary :where(h2, h3) { color: #fff; }

#main .inverted-color--secondary :where(p, th, td, li),
#main .inverted-color--secondary a,
#main .inverted-color--secondary strong { color: var(--color-secondary--light); }

#top #main .inverted-color--secondary a:hover,
#top #main .inverted-color--secondary a:active,
#top #main .inverted-color--secondary a:focus { color: var(--color-secondary--x-light); }




/* ================================================================================ */
/* #Selection Highlight Color
/* ================================================================================ */

::selection {
  background: var(--color-primary--x-light); /* WebKit/Blink Browsers */
  color: var(--color-primary--x-dark);
}

::-moz-selection {
  background: var(--color-primary--x-light); /* Gecko Browsers */
  color: var(--color-primary--x-dark);
}




/* ================================================================================ */
/* #Color Classes - for use in WP backend - Enfold
/* ================================================================================ */
/* Typography */
.color-primary :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-primary); }
.color-primary--light :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-primary--light); }
.color-primary--x-light :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-primary--x-light); }
.color-primary--xx-light :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-primary--xx-light); }
.color-primary--dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-primary--dark); }
.color-primary--x-dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-primary--x-dark); }
.color-primary--xx-dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-primary--xx-dark); }

.color-secondary :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-secondary); }
.color-secondary--light :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-secondary--light); }
.color-secondary--x-light :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-secondary--x-light); }
.color-secondary--xx-light :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-secondary--xx-light); }
.color-secondary--dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-secondary--dark); }
.color-secondary--x-dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-secondary--x-dark); }
.color-secondary--xx-dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li) { color: var(--color-secondary--xx-dark); }

.color-neutral :where(h1, h2, h3, h4, h5, h6, p, th, td, li)  { color: var(--color-neutral); }
.color-neutral--light :where(h1, h2, h3, h4, h5, h6, p, th, td, li)  { color: var(--color-neutral--light); }
.color-neutral--x-light :where(h1, h2, h3, h4, h5, h6, p, th, td, li)  { color: var(--color-neutral--x-light); }
.color-neutral--xx-light :where(h1, h2, h3, h4, h5, h6, p, th, td, li)  { color: var(--color-neutral--xx-light); }
.color-neutral--dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li)  { color: var(--color-neutral--dark); }
.color-neutral--x-dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li)  { color: var(--color-neutral--x-dark); }
.color-neutral--xx-dark :where(h1, h2, h3, h4, h5, h6, p, th, td, li)  { color: var(--color-neutral--xx-dark); }


/* Backgrounds */
.bg-color-primary { background-color: var(--color-primary); }
.bg-color-primary--light { background-color: var(--color-primary--light); }
.bg-color-primary--x-light { background-color: var(--color-primary--x-light); }
.bg-color-primary--xx-light { background-color: var(--color-primary--xx-light); }
.bg-color-primary--dark { background-color: var(--color-primary--dark); }
.bg-color-primary--x-dark { background-color: var(--color-primary--x-dark); }
.bg-color-primary--xx-dark { background-color: var(--color-primary--xx-dark); }

.bg-color-secondary { background-color: var(--color-secondary); }
.bg-color-secondary--light { background-color: var(--color-secondary--light); }
.bg-color-secondary--x-light { background-color: var(--color-secondary--x-light); }
.bg-color-secondary--xx-light { background-color: var(--color-secondary--xx-light); }
.bg-color-secondary--dark { background-color: var(--color-secondary--dark); }
.bg-color-secondary--x-dark { background-color: var(--color-secondary--x-dark); }
.bg-color-secondary--xx-dark { background-color: var(--color-secondary--xx-dark); }

.bg-color-neutral { background-color: var(--color-neutral); }
.bg-color-neutral--light { background-color: var(--color-neutral--light); }
.bg-color-neutral--x-light { background-color: var(--color-neutral--x-light); }
.bg-color-neutral--xx-light { background-color: var(--color-neutral--xx-light); }
.bg-color-neutral--dark { background-color: var(--color-neutral--dark); }
.bg-color-neutral--x-dark { background-color: var(--color-neutral--x-dark); }
.bg-color-neutral--xx-dark { background-color: var(--color-neutral--xx-dark); }