:root {
  font-size: 16px;
  scroll-behavior: auto;

  --text-mini: 0.625rem; /* 10px */
  --text-body: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */

  --color-white: #ffffff;
  --color-black: #000000;
  --color-darkText: #232020;
  --color-lightText: #636363;
  --color-lightOnDark: #e3e3e3;
  --color-accent: #936037;
  --color-sale: #973e24;

  --width-max: 1440px;
  --width-page: 1120px;
  --width-section: 800px;

  --spacing-unit: 8px;
  --spacing-xs: calc(0.5 * var(--spacing-unit)); /* 4px */
  --spacing-sm: calc(0.75 * var(--spacing-unit)); /* 6px */
  --spacing-base: var(--spacing-unit); /* 8px */
  --spacing-md: calc(1.5 * var(--spacing-unit)); /* 12px */
  --spacing-md-double: calc(3 * var(--spacing-unit)); /* 24px */
  --spacing-lg: calc(2 * var(--spacing-unit)); /* 16px */
  --spacing-lg-double: calc(4 * var(--spacing-unit)); /* 32px */
  --spacing-xl: calc(3 * var(--spacing-unit)); /* 24px */
  --spacing-4: calc(4 * var(--spacing-unit)); /* 32px */
  --spacing-5: calc(5 * var(--spacing-unit)); /* 40px */
  --spacing-6: calc(6 * var(--spacing-unit)); /* 48px */
  --spacing-8: calc(8 * var(--spacing-unit)); /* 64px */
  --spacing-menu-like: var(--spacing-lg);

  --header-height: 44px;
  --header-banner-height: 24px;

  --container-side-space: var(--spacing-lg);
}

@media screen and (min-width: 768px) {
  :root {
    --container-side-space: var(--spacing-xl);
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --spacing-menu-like: var(--spacing-4);
    --container-side-space: var(--spacing-4);
  }
}


/* Lato Regular 400 */
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-regular.woff2") format("woff2"),
  url("/fonts/lato-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lato Regular 700 */
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-700.woff2") format("woff2"),
  url("/fonts/lato-700.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* AvenirNext (preinstalled on user's device) */
@font-face {
  font-family: "AvenirNext";
  src: local("AvenirNext-Medium"), local("Avenir Next - Medium"),
  local("Avenir Next Medium"), local("Avenir Next");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* AvenirNext Demibold (preinstalled on user's device) */
@font-face {
  font-family: "AvenirNext";
  src: local("AvenirNext-DemiBold"), local("Avenir Next - DemiBold"),
  local("Avenir Next DemiBold");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  box-sizing: border-box;
}

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

body,
input,
textarea {
  font-family: "AvenirNext", Avenir, -apple-system, Lato, Arial,
  "Helvetica Neue", Helvetica, Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05px;
  word-spacing: -0.7px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
::placeholder {
  font-family: "AvenirNext", Avenir, -apple-system, Lato, Arial,
  "Helvetica Neue", Helvetica, Roboto, sans-serif;
  font-size: inherit;
  color: inherit;
  background: transparent;
  outline: none;
}

input[type="text"],
input[type="email"],
textarea {
  -webkit-border-radius: 0px;
  border-radius: 0;
}

button {
  display: inline-block;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

a {
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
  font-weight: 400;
}

h1 {
  font-size: var(--text-lg);
}

h2,
blockquote {
  font-size: var(--text-md);
}

p {
  font-size: var(--text-body);
}

h3,
.start-page h2,
.start-page a {
  font-size: var(--text-sm);
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sr-only {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
  Styling specific components
*/

/* main */
.has-hero main {
  margin-top: calc(-1 * var(--header-height)) !important;
}

/*
  Styling Utilities
*/
@media (max-width: 767px) {
  .above-sm {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .below-sm {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .above-md {
    display: none !important;
  }
}

@media (min-width: 960px) {
  .below-md {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .above-lg {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .below-lg {
    display: none !important;
  }
}

/*
  Styling third party components
*/
#chat-button {
  z-index: 99;
}


/**
 * Flattered forms
 */

input.form-element,
textarea.form-element,
select.form-element {
  appearance: none;
  text-overflow: ellipsis;

  width: 100%;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-black);
  line-height: 2.5;
  background: none;
  border: none;
  outline: none;
  border-bottom: 1px solid var(--color-black);
  padding: 0;
}

input.form-element::placeholder {
  opacity: 1;
  color: var(--color-darkText);
}

textarea.form-element {
  border: 1px solid var(--color-black);
  padding: 0 var(--spacing-md);
  resize: vertical;
}

.form-block + .form-block {
  margin-top: var(--spacing-xl);
}