/* Root variables for Stax theme */
.label-control {
  font-size: var(--font-size-base);
}

:root {
  --body-bg-color: hsl(var(--body-bg-h), var(--body-bg-s), var(--body-bg-l));
  --body-bg-contrast-color: hsl(0deg, 0%, 0%);
  --footer-bg-color: hsl(var(--footer-bg-h), var(--footer-bg-s), var(--footer-bg-l));
  --footer-bg-light-color: hsl(var(--footer-bg-h), var(--footer-bg-s), calc(var(--footer-bg-l) + 7%));
  --footer-bg-dark-color: hsl(var(--footer-bg-h), var(--footer-bg-s), calc(var(--footer-bg-l) - 5%));
  --footer-bg-contrast-color: hsl(0deg, 0%, 0%);
  --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 7%));
  --primary-dark-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 5%));
  --primary-contrast-color: hsl(0deg, 0%, 100%);
  --secondary-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
  --secondary-light-color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 7%));
  --secondary-dark-color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 5%));
  --secondary-contrast-color: hsl(0deg, 0%, 100%);
  --featured-color: hsl(var(--featured-h), var(--featured-s), var(--featured-l));
  --featured-light-color: hsl(var(--featured-h), var(--featured-s), calc(var(--featured-l) + 7%));
  --featured-dark-color: hsl(var(--featured-h), var(--featured-s), calc(var(--featured-l) - 5%));
  --featured-contrast-color: hsl(0deg, 0%, 0%);
  --related-color: hsl(var(--related-h), var(--related-s), var(--related-l));
  --related-light-color: hsl(var(--related-h), var(--related-s), calc(var(--related-l) + 7%));
  --related-dark-color: hsl(var(--related-h), var(--related-s), calc(var(--related-l) - 5%));
  --related-contrast-color: hsl(0deg, 0%, 0%);
  --archive-color: hsl(var(--archive-h), var(--archive-s), var(--archive-l));
  --archive-light-color: hsl(var(--archive-h), var(--archive-s), calc(var(--archive-l) + 7%));
  --archive-dark-color: hsl(var(--archive-h), var(--archive-s), calc(var(--archive-l) - 5%));
  --archive-contrast-color: hsl(0deg, 0%, 0%);
  --light-color: hsl(var(--light-h), var(--light-s), var(--light-l));
  --light-light-color: hsl(var(--light-h), var(--light-s), calc(var(--light-l) + 7%));
  --light-dark-color: hsl(var(--light-h), var(--light-s), calc(var(--light-l) - 5%));
  --light-contrast-color: hsl(0deg, 0%, 0%);
  --dark-color: hsl(var(--dark-h), var(--dark-s), var(--dark-l));
  --dark-light-color: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 7%));
  --dark-dark-color: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) - 10%));
  --dark-contrast-color: hsl(0deg, 0%, 100%);
  --facebook-color: hsl(var(--facebook-h), var(--facebook-s), var(--facebook-l));
  --facebook-light-color: hsl(var(--facebook-h), var(--facebook-s), calc(var(--facebook-l) + 7%));
  --facebook-dark-color: hsl(var(--facebook-h), var(--facebook-s), calc(var(--facebook-l) - 5%));
  --facebook-contrast-color: hsl(0deg, 0%, 100%);
  --twitter-color: hsl(var(--twitter-h), var(--twitter-s), var(--twitter-l));
  --twitter-light-color: hsl(var(--twitter-h), var(--twitter-s), calc(var(--twitter-l) + 7%));
  --twitter-dark-color: hsl(var(--twitter-h), var(--twitter-s), calc(var(--twitter-l) - 5%));
  --twitter-contrast-color: hsl(0deg, 0%, 100%);
  --body-bg-h: 0deg;
  --body-bg-s: 0%;
  --body-bg-l: 100%;
  --primary-h: 231.8918918919deg;
  --primary-s: 64.347826087%;
  --primary-l: 54.9019607843%;
  --secondary-h: 0deg;
  --secondary-s: 0%;
  --secondary-l: 45.8823529412%;
  --featured-h: 36deg;
  --featured-s: 33.3333333333%;
  --featured-l: 97.0588235294%;
  --related-h: 36deg;
  --related-s: 33.3333333333%;
  --related-l: 97.0588235294%;
  --archive-h: 36deg;
  --archive-s: 33.3333333333%;
  --archive-l: 97.0588235294%;
  --light-h: 0deg;
  --light-s: 0%;
  --light-l: 96.862745098%;
  --dark-h: 0deg;
  --dark-s: 0%;
  --dark-l: 14.1176470588%;
  --link-h: 231.8918918919deg;
  --link-s: 64.347826087%;
  --link-l: 54.9019607843%;
  --facebook-h: 220.8510638298deg;
  --facebook-s: 44.3396226415%;
  --facebook-l: 41.568627451%;
  --twitter-h: 196.25deg;
  --twitter-s: 100%;
  --twitter-l: 47.0588235294%;
  --border-color: hsl(0deg,0%,93.3333333333%);
  --header-bg-color: #fff;
  --header-bg-contrast: #000000;
  --text-color: hsl(218.1818181818deg,6.8322981366%,31.568627451%);
  --text-meta-color: hsl(220deg,5.7142857143%,58.8235294118%);
  --text-muted-color: hsl(228deg,6.0975609756%,67.8431372549%);
  --heading-color: hsl(0deg,0%,14.1176470588%);
  --link-color: hsl(var(--link-h), var(--link-s), var(--link-l));
  --link-hover: hsl(var(--link-h), var(--link-s), calc(var(--link-l) - 7%));
  --link-visited: hsl(var(--link-h), var(--link-s), calc(var(--link-l) - 7%));
  --btn-primary-color: var(--primary-color);
  --btn-primary-hover: var(--primary-dark-color);
  --btn-primary-contrast: var(--primary-contrast-color);
  --btn-secondary-color: var(--secondary-color);
  --btn-secondary-hover: var(--secondary-dark-color);
  --btn-secondary-contrast: var(--secondary-contrast-color);
  --btn-light-color: var(--light-color);
  --btn-light-hover: var(--light-dark-color);
  --btn-light-contrast: var(--light-contrast-color);
  --btn-dark-color: var(--dark-color);
  --btn-dark-hover: var(--dark-dark-color);
  --btn-dark-contrast: var(--dark-contrast-color);
  --btn-facebook-color: var(--facebook-color);
  --btn-facebook-hover: var(--facebook-dark-color);
  --btn-facebook-contrast: var(--facebook-contrast-color);
  --btn-twitter-color: var(--twitter-color);
  --btn-twitter-hover: var(--twitter-dark-color);
  --btn-twitter-contrast: var(--twitter-contrast-color);
  --font-family: "Mukta", "Lato", "Helvetica Neue", sans-serif;
  --font-size-base: 1rem;
  --font-size-xs: calc(var(--font-size-base) * 0.75);
  --font-size-sm: calc(var(--font-size-base) * 1);
  --font-size-md: calc(var(--font-size-base) * 1.125);
  --font-size-lg: calc(var(--font-size-base) * 1.188);
  --line-height-base: 1;
  --line-height-xs: calc(var(--line-height-base) * 1.5);
  --line-height-sm: calc(var(--line-height-base) * 1.5);
  --line-height-md: calc(var(--line-height-base) * 1.6);
  --line-height-lg: calc(var(--line-height-base) * 1.7);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-bolder: 900;
  --text-transform-base: initial;
  --letter-spacing-base: 0.03em;
  --letter-spacing-lg: 0.15em;
  --heading-font-family: "Heebo", sans-serif;
  --heading-font-weight: var(--font-weight-bold);
  --heading-line-height: 1.2;
  --heading-letter-spacing: var(--letter-spacing-base);
  --quote-font-family: "Noto Serif", "Bitter", serif;
  --hero-font-size-sm: 3rem;
  --hero-font-size-md: calc(var(--hero-font-size-sm) * 1.3);
  --hero-font-size-lg: calc(var(--hero-font-size-sm) * 1.7);
  --hero-font-weight: var(--h1-font-weight);
  --hero-line-height-sm: 1.1;
  --hero-line-height-md: 1.1;
  --hero-line-height-lg: 1.1;
  --hero-letter-spacing: 0;
  --h1-font-size-sm: calc(var(--font-size-base) * 1.875);
  --h1-font-size-md: 2.625rem;
  --h1-font-size-lg: 3rem;
  --h1-line-height-sm: var(--heading-line-height);
  --h1-line-height-md: var(--heading-line-height);
  --h1-line-height-lg: var(--heading-line-height);
  --h1-font-weight: var(--font-weight-bolder);
  --h1-letter-spacing: 0;
  --h2-font-size-sm: calc(var(--font-size-base) * 1.5);
  --h2-font-size-md: 2.125rem;
  --h2-font-size-lg: 2.625rem;
  --h2-line-height-sm: var(--heading-line-height);
  --h2-line-height-md: var(--heading-line-height);
  --h2-line-height-lg: var(--heading-line-height);
  --h2-font-weight: var(--font-weight-bolder);
  --h2-letter-spacing: 0;
  --h3-font-size-sm: calc(var(--font-size-base) * 1.313);
  --h3-font-size-md: 1.75rem;
  --h3-font-size-lg: 2.125rem;
  --h3-line-height-sm: var(--heading-line-height);
  --h3-line-height-md: var(--heading-line-height);
  --h3-line-height-lg: var(--heading-line-height);
  --h3-font-weight: var(--font-weight-bolder);
  --h3-letter-spacing: 0;
  --h4-font-size-sm: calc(var(--font-size-base) * 1.25);
  --h4-font-size-md: 1.5rem;
  --h4-font-size-lg: 1.75rem;
  --h4-line-height-sm: var(--heading-line-height);
  --h4-line-height-md: var(--heading-line-height);
  --h4-line-height-lg: var(--heading-line-height);
  --h4-font-weight: var(--font-weight-bolder);
  --h4-letter-spacing: 0;
  --h5-font-size-sm: calc(var(--font-size-base) * 1.125);
  --h5-font-size-md: 1.25rem;
  --h5-font-size-lg: 1.5rem;
  --h5-line-height-sm: var(--heading-line-height);
  --h5-line-height-md: var(--heading-line-height);
  --h5-line-height-lg: var(--heading-line-height);
  --h5-font-weight: var(--heading-font-weight);
  --h5-letter-spacing: 0;
  --h6-font-size-sm: var(--font-size-base);
  --h6-font-size-md: var(--font-size-base);
  --h6-font-size-lg: var(--font-size-base);
  --h6-line-height-sm: var(--heading-line-height);
  --h6-line-height-md: var(--heading-line-height);
  --h6-line-height-lg: var(--heading-line-height);
  --h6-font-weight: var(--heading-font-weight);
  --h6-letter-spacing: 0;
  --border-radius-sm: calc(var(--has-radius) * 0.11rem);
  --border-radius: calc(var(--has-radius) * var(--border-radius-lg));
  --border-radius-lg: calc(var(--has-radius) * 0.3rem);
  --has-radius: 1;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --breakpoint-xxxl: 1600px;
  --breakpoint-xxxxl: 1900px;
  --container-sm: 540px;
  --container-md: 740px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1400px;
  --container-width: 740px;
  --svq-color-primary: #4256d6;
  --svq-color-red: #F44336;
  --svq-color-pink: #E91E63;
  --svq-color-purple: #9C27B0;
  --svq-color-indigo: #3F51B5;
  --svq-color-blue: #2196F3;
  --svq-color-cyan: #00BCD4;
  --svq-color-teal: #009688;
  --svq-color-green: #4CAF50;
  --svq-color-lime: #CDDC39;
  --svq-color-yellow: #FFEB3B;
  --svq-color-orange: #FF9800;
  --svq-color-brown: #795548;
  --svq-color-black: #000;
  --media-max-height: 800px;
  --gallery-item-space: 1px;
  --grid-gutter-width: 40px;
  --el-spacing: 2rem;
  --transitionDuration: 300ms;
  --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.theme-color-dark {
  --light-color: hsl(0, 0%, var(--light-l)) !important;
  --light-light-color: hsl(0, 0%, calc(var(--light-l) + 7%)) !important;
  --light-dark-color: hsl(0, 0%, calc(var(--light-l) - 5%)) !important;
  --light-contrast-color: hsl(0, 0%, 100%) !important;
  --dark-color: hsl(var(--dark-h), var(--dark-s), var(--dark-l)) !important;
  --dark-light-color: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 7%)) !important;
  --dark-dark-color: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) - 10%)) !important;
  --dark-contrast-color: hsl(0, 0%, 0%) !important;
  --body-bg-l: 10%;
  --footer-bg-l: 10%;
  --light-h: 0;
  --light-s: 0%;
  --light-l: 10%;
  --dark-l: 98%;
  --border-color: hsl(0, 0%, 22%) !important;
  --body-bg-color: hsl(var(--body-bg-h), var(--body-bg-s), var(--body-bg-l)) !important;
  --footer-bg-color: hsl(var(--footer-bg-h), var(--footer-bg-s), var(--footer-bg-l)) !important;
  --body-bg-contrast-color: hsl(0, 0%, 100%) !important;
  --footer-bg-contrast-color: hsl(0, 0%, 100%) !important;
  --text-color: hsla(0, 0%, 100%, 0.5) !important;
  --text-meta-color: hsla(0, 0%, 100%, 0.5) !important;
  --text-muted-color: hsl(0, 0%, 38%) !important;
  --heading-color: hsla(0, 0%, 100%, 0.8) !important;
}

.theme-color-light {
  --body-bg-color: hsl(var(--body-bg-h), var(--body-bg-s), var(--body-bg-l)) !important;
  --body-bg-contrast-color: hsl(0, 0%, 0%) !important;
  --light-color: hsl(var(--light-h), var(--light-s), var(--light-l)) !important;
  --light-light-color: hsl(var(--light-h), var(--light-s), calc(var(--light-l) + 7%)) !important;
  --light-dark-color: hsl(var(--light-h), var(--light-s), calc(var(--light-l) - 5%)) !important;
  --light-contrast-color: hsl(0, 0%, 0%) !important;
  --dark-color: hsl(var(--dark-h), var(--dark-s), var(--dark-l)) !important;
  --dark-light-color: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) + 7%)) !important;
  --dark-dark-color: hsl(var(--dark-h), var(--dark-s), calc(var(--dark-l) - 10%)) !important;
  --dark-contrast-color: hsl(0, 0%, 100%) !important;
  --body-bg-l: 100%;
  --light-l: 97%;
  --dark-l: 14%;
  --border-color: hsl(0, 0%, 93%) !important;
  --text-color: hsl(218, 7%, 32%) !important;
  --text-meta-color: hsl(220, 6%, 59%) !important;
  --text-muted-color: hsl(228, 6%, 68%) !important;
  --heading-color: hsl(0, 0%, 14%) !important;
}
