@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/media/opensans_n4-c32e4d4eca5273f6d4ee95ddf54b5bbb75fc9b61-ec4cff0445.woff2") format("woff2"),
       url("/media/opensans_n4-5f3406f8d94162b37bfa232b486ac93ee892406d-39644790c8.woff") format("woff");
}

      @font-face {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/media/opensans_n7-a9393be1574ea8606c68f4441806b2711d0d13e4-1dbd6d508f.woff2") format("woff2"),
       url("/media/opensans_n7-7b8af34a6ebf52beb1a4c1d8c73ad6910ec2e553-563efea994.woff") format("woff");
}

      @font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/media/opensans_i4-6f1d45f7a46916cc95c694aab32ecbf7509cbf33-30dd63b5c5.woff2") format("woff2"),
       url("/media/opensans_i4-4efaa52d5a57aa9a57c1556cc2b7465d18839daa-df1d841243.woff") format("woff");
}

      @font-face {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("/media/opensans_i7-916ced2e2ce15f7fcd95d196601a15e7b89ee9a4-1f905d1c25.woff2") format("woff2"),
       url("/media/opensans_i7-99a9cff8c86ea65461de497ade3d515a98f8b32a-a7ace290d9.woff") format("woff");
}

      @font-face {
  font-family: "Abril Fatface";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/media/abrilfatface_n4-002841dd08a4d39b2c2d7fe9d598d4782afb7225-b625712762.woff2") format("woff2"),
       url("/media/abrilfatface_n4-0d8f922831420cd750572c7a70f4c623018424d8-56beebe5c0.woff") format("woff");
}


      :root {
        --font-body-family: "Open Sans", sans-serif;
        --font-body-style: normal;
        --font-body-weight: 400;

        --font-heading-family: "Abril Fatface", serif;
        --font-heading-style: normal;
        --font-heading-weight: 400;

        --font-body-scale: 1.05;
        --font-heading-scale: 1.1904761904761905;

        --color-base-text: 255, 255, 255;
        --color-shadow: 255, 255, 255;
        --color-base-background-1: 34, 35, 33;
        --color-base-background-2: 255, 255, 255;
        --color-base-solid-button-labels: 255, 255, 255;
        --color-base-outline-button-labels: 196, 184, 204;
        --color-base-accent-1: 34, 35, 33;
        --color-base-accent-2: 255, 255, 255;
        --payment-terms-background-color: #222321;

        --gradient-base-background-1: #222321;
        --gradient-base-background-2: #fff;
        --gradient-base-accent-1: #222321;
        --gradient-base-accent-2: #ffffff;

        --media-padding: px;
        --media-border-opacity: 1.0;
        --media-border-width: 2px;
        --media-radius: 0px;
        --media-shadow-opacity: 0.0;
        --media-shadow-horizontal-offset: 0px;
        --media-shadow-vertical-offset: 0px;
        --media-shadow-blur-radius: 0px;

        --page-width: 140rem;
        --page-width-margin: 0rem;

        --card-image-padding: 0.0rem;
        --card-corner-radius: 0.0rem;
        --card-text-alignment: center;
        --card-border-width: 0.0rem;
        --card-border-opacity: 0.0;
        --card-shadow-opacity: 0.1;
        --card-shadow-horizontal-offset: 0.0rem;
        --card-shadow-vertical-offset: 0.0rem;
        --card-shadow-blur-radius: 0.0rem;

        --badge-corner-radius: 4.0rem;

        --popup-border-width: 2px;
        --popup-border-opacity: 1.0;
        --popup-corner-radius: 0px;
        --popup-shadow-opacity: 0.0;
        --popup-shadow-horizontal-offset: 0px;
        --popup-shadow-vertical-offset: 0px;
        --popup-shadow-blur-radius: 0px;

        --drawer-border-width: 2px;
        --drawer-border-opacity: 1.0;
        --drawer-shadow-opacity: 0.0;
        --drawer-shadow-horizontal-offset: 0px;
        --drawer-shadow-vertical-offset: 0px;
        --drawer-shadow-blur-radius: 0px;

        --spacing-sections-desktop: 20px;
        --spacing-sections-mobile: 20px;

        --grid-desktop-vertical-spacing: 24px;
        --grid-desktop-horizontal-spacing: 24px;
        --grid-mobile-vertical-spacing: 12px;
        --grid-mobile-horizontal-spacing: 12px;

        --text-boxes-border-opacity: 1.0;
        --text-boxes-border-width: 2px;
        --text-boxes-radius: 0px;
        --text-boxes-shadow-opacity: 0.0;
        --text-boxes-shadow-horizontal-offset: 0px;
        --text-boxes-shadow-vertical-offset: 0px;
        --text-boxes-shadow-blur-radius: 0px;

        --buttons-radius: 0px;
        --buttons-radius-outset: 0px;
        --buttons-border-width: 1px;
        --buttons-border-opacity: 1.0;
        --buttons-shadow-opacity: 0.0;
        --buttons-shadow-horizontal-offset: 0px;
        --buttons-shadow-vertical-offset: 0px;
        --buttons-shadow-blur-radius: 0px;
        --buttons-border-offset: 0px;

        --inputs-radius: 0px;
        --inputs-border-width: 1px;
        --inputs-border-opacity: 0.55;
        --inputs-shadow-opacity: 0.0;
        --inputs-shadow-horizontal-offset: 0px;
        --inputs-margin-offset: 0px;
        --inputs-shadow-vertical-offset: 0px;
        --inputs-shadow-blur-radius: 0px;
        --inputs-radius-outset: 0px;

        --variant-pills-radius: 40px;
        --variant-pills-border-width: 1px;
        --variant-pills-border-opacity: 0.55;
        --variant-pills-shadow-opacity: 0.0;
        --variant-pills-shadow-horizontal-offset: 0px;
        --variant-pills-shadow-vertical-offset: 0px;
        --variant-pills-shadow-blur-radius: 0px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: 0.06rem;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }