@import url(https://use.typekit.net/ewh5dfa.css);
/**
 * CSS properties
 *
 Some values have to be changed in the _variables.scss file.
 Use CMD + click on those values.

 It's recommended to disable unused properties as these get,
 in contrary to SASS variables, compiled in the CSS file.
 */
/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
@font-face {
  font-family: "Reckless Neue Light";
  src: url("/themes/custom/elaba/fonts/RecklessNeue-Light.woff2") format("woff2"), url("/themes/custom/elaba/fonts/RecklessNeue-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Reckless Neue Thin";
  src: url("/themes/custom/elaba/fonts/RecklessNeue-Thin.woff2") format("woff2"), url("/themes/custom/elaba/fonts/RecklessNeue-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
 Form
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
/**
 * Colums
 */
:root {
  --row-width: 100rem;
  --cols-xsmall: 12;
  --cols: 24;
  --gutter: 0px;
  --wrapper-xsmall: 20px;
  --wrapper: 40px;
}

/**
 * Colors
 */
:root {
  --primary-color: #353c32;
  --primary-light-color:var(--primary-color);
  --primary-dark-color: var(--primary-color);
  --secondary-color: #f0e8da;
  --body-background: var(--secondary-color);
  --text-color: var(--black);
  --anchor-color: var(--primary-dark-color);
  --hover-color: var(--primary-color);
  --accent-color: var(--primary-color);
  --white: #FFFFFF;
  --smoke-gray: #F2F2F2;
  --light-gray: #F3F3F3;
  --medium-gray: #F9F9F9;
  --silver-gray: #D0D0D0;
  --black: #000000;
  --selection-color: var(--white);
  --selection-background-color: var(--primary-color);
}

/**
 * Text
 */
:root {
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --letter-spacing-body: .36px;
  --body-font-family: neue-haas-grotesk-display, sans-serif;
  --line-height: 1.48;
  --header-font-family: Reckless Neue Light, serif;
  --font-weight-normal: 500;
  --font-weight-bold: 700;
  --header-font-weight: 700;
}

/**
 * Form
 */
:root {
  --font-size-label: 0.75rem;
  --letter-spacing-label: -.11px;
  --font-weight-label: 500;
  --form-item-margin: 15px;
}

/**
 * Animation
 */
:root {
  --transition: ease-out .25s all;
}

/**
 * Navigation
 */
:root {
  --dropdown-menu-min-width: 145px;
  --dropdown-menu-padding: 15px 20px;
}

/**
 * Buttons
 */
:root {
  --button--font-size: 1.0625rem;
  --button-border-radius: var(--border-radius);
  --button-padding-x: 20px;
  --button-padding-y: 12px;
  --button-padding: var(--button-padding-y) var(--button-padding-x);
  --button--default-bg-color: var(--gray);
  --button--default-color: var(--black);
  --button--default-hover-bg-color: var(--black);
  --button--default-hover-color: var(--white);
  --button--default-link-hover-color: var(--primary-color);
  --button--primary-bg-color: var(--primary-color);
  --button--primary-color: var(--white);
  --button--primary-hover-bg-color: var(--black);
  --button--primary-hover-color: var(--white);
  --button--secondary-bg-color: var(--secondary-color);
  --button--secondary-color: var(--white);
  --button--secondary-hover-bg-color: var(--primary-light-color);
  --button--secondary-hover-color: var(--black);
}

/**
 * Styling
 */
:root {
  --border-radius: 8px;
  --image-border-radius: --border-radius;
}