:root {
  /* Font Families */

  --font-primary: "mundial";
  --font-secondary: "Satoshi";

  /* Font sizes */

  /* Headings */
  --heading: 88px;
  --heading-h1: 64px;
  --heading-h2: 56px;
  --heading-h3: 46px;
  --heading-h4: 42px;
  --heading-h5: 32px;
  --heading-h6: 24px;

  --heading-mobile: 54px;
  --heading-mobile-h1: 44px;
  --heading-mobile-h2: 38px;
  --heading-mobile-h3: 32px;
  --heading-mobile-h4: 25px;
  --heading-mobile-h5: 20px;
  --heading-mobile-h6: 18px;

  --mobile-heading-h1: 48px;

  /* Subheadings */
  --subheading-mobile-h1: 28px;
  --subheading-mobile-h2: 26px;
  --subheading-mobile-h3: 23px;

  --body-xxl: 19px;
  --body-xl: 18px;

  /* Paragraphs */

  --body-p-mobile-md: 21px;

  --body-p-xl: 17px;
  --body-p-lg: 16px;
  --body-p-md: 15px;
  --body-p-sm: 14px;
  --body-p-xs: 13px;

  /* Captions */
  --caption-lg: 12px;
  --caption-md: 11px;
  --caption-sm: 10px;

  /* Colors */
  --color-pure-white: #ffffff;
  --color-white: #EEECE6;
  --color-white-200: #FCFCFC;
  --color-white-300: #DEDDD6;
  --color-white-400: #E7E6DE;
  --color-white-500: #F0EFE9;
  --color-white-600: #FBFAF6;
  --color-white-700: #E2E1D8;
  --color-white-800: #E3E1D6;
  --color-black: #0b0b0b;
  --color-black-100: #01080F;
  --color-black-200: #1F1F1F;
  --color-black-300: #010101;
  --color-black-400: #1B1B1B;
  --color-black-500: #3E3E3E;

  --color-greyish: #d1d1d1;
  --color-greyish-2: #b2b2b2;

  --color-grey-100: #f9f9f9;
  --color-grey-200: #f6f6f6;
  --color-grey-300: #fcf8f8;
  --color-grey-400: #ededed;
  --color-grey-500: #ebebeb;
  --color-grey-600: #ebebeb;
  --color-grey-700: #e6e6e6;
  --color-grey-800: #D9D9D9;
  --color-grey-900: #787B80;
  --color-grey-1000: #383838;

  --color-light-grey-100: #F1F0ED;

  --color-grey-dark: #787A7D;

  --color-light-teal-50: #e6eef0;
  --color-light-teal-100: #e2eaec;
  --color-light-teal-200: #d9e6e9;
  --color-light-teal-300: #c9dfe6;
  --color-light-teal-400: #c8d6da;
  --color-light-teal-500: #b7d3dc;
  --color-light-teal-600: #b5ced5;
  --color-light-teal-700: #a6c7d1;
  --color-light-teal-800: #97bbc6;
  --color-light-teal-900: #8ab3c0;
  --color-light-teal-1000: #78a9b8;

  --color-teal-100: #2d7f99;
  --color-teal-200: #236b81;
  --color-teal-300: #1f6378;
  --color-teal-400: #005d7b;
  --color-teal-500: #004d66;
  --color-teal-600: #014156;

  --color-dark-teal-100: #82a0aa;
  --color-dark-teal-200: #638693;
  --color-dark-teal-300: #2f4f59;
  --color-dark-teal-400: #1b3b45;
  --color-dark-teal-500: #10303a;
  --color-dark-teal-600: #082630;

  --color-green-100: #e8f8f2;
  --color-green-200: #caddd7;
  --color-green-300: #417263;
  --color-green-400: #1d614d;
  --color-green-500: #113732;

  --color-red-100: #7a0000;
  --color-red-200: #D92D21;
  --color-red-300: #FDF4F4;
  --color-blue-100: #D5DEF5;

  --color-yellow-grey-100: #9F9987;

  --color-beige-100: #B8B3A3;
  --color-beige-light:  #EEECE5;

  --color-yellow-100: #f5c444;
  --color-yellow-200: #FDD26D;
  --color-yellow-300: #FFD87D;

  --color-yellow-hover-1: #ffc125;
  --color-yellow-hover-2: #FFBA1A;

  --color-yellow-border: #F5C444;

  /* Line heights */
  --lh-067: 0.67;
  --lh-071: 0.71;
  --lh-077: 0.77;
  --lh-0875: 0.875;
  --lh-09: 0.9;
  --lh-0975: 0.975;
  --lh-normal: 1;
  --lh-105: 1.05;
  --lh-110: 1.1;
  --lh-115: 1.15;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;

  --transition-slow: 0.5s ease all;
}

h1,
.h1 {
  font-family: var(--font-primary);
  font-size: var(--heading-h1);
}

h2,
.h2 {
  font-family: var(--font-primary);
  font-size: var(--heading-h2);
}

h3,
.h3 {
  font-family: var(--font-primary);
  font-size: var(--heading-h3);
}

h4,
.h4 {
  font-family: var(--font-primary);
  font-size: var(--heading-h4);
}

h5,
.h5 {
  font-family: var(--font-primary);
  font-size: var(--heading-h5);
}

h6,
.h6 {
  font-family: var(--font-primary);
  font-size: var(--heading-h6);
}

.text-body-xl {
  font-family: var(--font-secondary);
  font-size: var(--body-p-xl);
}

.text-body-lg {
  font-family: var(--font-secondary);
  font-size: var(--body-p-lg);
}

.text-body-md {
  font-family: var(--font-secondary);
  font-size: var(--body-p-md);
}

.text-body-sm {
  font-family: var(--font-secondary);
  font-size: var(--body-p-sm);
}

.product-label-new {
  background-color: var(--color-green-500);
  font-size: var(--caption-md);
  font-weight: 300;
  line-height: var(--lh-140);
  letter-spacing: 1px;
  border-radius: 2px;
}

.product-label-bestseller {
  background-color: var(--color-teal-500);
  color: var(--color-white);
  font-size: var(--caption-md);
  font-weight: 300;
  line-height: var(--lh-140);
  letter-spacing: 1px;
  border-radius: 2px;
}

.product-label-price-increase {
  background-color: var(--color-teal-100);
  color: var(--color-white);
  font-size: var(--caption-md);
  font-weight: 300;
  line-height: var(--lh-140);
  letter-spacing: 1px;
  border-radius: 2px;
}

.product-label-discount {
  background-color: var(--color-red-100);
  color: var(--color-white);
  font-size: var(--caption-md);
  font-weight: 300;
  line-height: var(--lh-140);
  letter-spacing: 1px;
  border-radius: 2px;
}

.product-label-discount {
  background-color: var(--color-white);
  color: var(--color-green-500);
  font-size: var(--caption-md);
  font-weight: 300;
  line-height: var(--lh-140);
  letter-spacing: 1px;
  border-radius: 2px;
}

.product-label-discount > span {
  color: var(--color-red-100);
}

.page-width {
  width: 100%;
  padding: 0 50px;
}

.download-product:hover .download-product-button,
.button.contact-form-button:hover,
#submit-button:hover,
.next-step-button.button.button--primary.button--arrow.primary:hover,
.product-title-image .button.card__quote:hover,
.card-option__buttons .button.card__quote:hover,
.image-with-text__buttons .button:hover {
  background: var( --color-yellow-hover-2);
  border-color: var( --color-yellow-hover-2);
}

.multicolumn-card__info .button.button--tertiary:hover,
.product-title-image .button.card__explore:hover,
.image-with-text__grid.image-with-text__grid--image_last.image-with-text__grid--top .image-with-text__right .image-with-text__buttons .button:hover,
.card-option__buttons .button.card__explore:hover,
.header_download__button .button.h6:hover {
  background: var(--color-white-600);
}

.image-with-text__grid.image-with-text__grid--text_last.image-with-text__grid--top .image-with-text__right .image-with-text__buttons .button:hover,
.hero__outer.hero__outer--horizontal.hero__outer--subtle .hero__buttons .button.button--tertiary:hover,
.card-option__buttons .button.card__explore:hover,
.previous-step-button.button.button--primary.button--arrow:hover,
.next-step-button.button.button--primary.button--arrow:hover,
.multirow-card__info .button.button--tertiary:hover,
.image-with-text__grid.image-with-text__grid--image_last.image-with-text__grid--top .image-with-text__right .image-with-text__buttons .button:hover {
  background: var(--color-white-500);
}

@media screen and (min-width: 1200px) {
  .container, .container-fluid, .container-xxl, .shopify-policy__container-xxl, .container-xl, .shopify-policy__container-xl, .container-lg, .shopify-policy__container-lg, .container-md, .shopify-policy__container-md, .container-sm, .shopify-policy__container-sm, .shopify-policy__container {
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media (max-width: 989px) {
  .shopify-policy__title h1,
  .shopify-policy__body .rte h2,
  .shopify-policy__body .rte h3 {
    line-height: var(--lh-normal);
    font-size: var(--heading-mobile-h3);
    margin: 20px 0;
  }
}

@media (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media (min-width: 990px) {
  .large-hide {
    display: none !important;
  }
}