/**
 * 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.
 */
/**
 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: 90rem;
  --cols-xsmall: 12;
  --cols: 24;
  --gutter: 0px;
  --wrapper-xsmall: 20px;
  --wrapper: 60px;
}

/**
 * Colors
 */
:root {
  --primary-color: #E03026;
  --primary-light-color: rgba(224, 48, 38, 0.10);
  --primary-dark-color: #B2261E;
  --secondary-color: #212E54;
  --secondary-light-color: #58678F;
  --secondary-dark-color: #27365F;
  --body-background: var(--white);
  --text-color: var(--secondary-color);
  --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: 0px;
  --body-font-family: host-grotesk, sans-serif;
  --line-height: 1.4;
  --header-font-family: bebas-neue-pro, sans-serif;
  --header-font-family-expanded: bebas-neue-pro-expanded, sans-serif;
  --header-font-family-semi: bebas-neue-pro-semiexpanded, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --header-font-weight: 600;
}

/**
 * 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.125rem;
  --button-border-radius: 10px;
  --button--default-bg-color: var(--white);
  --button--default-color: var(--secondary-color);
  --button--default-hover-bg-color: var(--secondary-color);
  --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: #C72B22;
  --button--primary-hover-color: var(--white);
  --button--secondary-bg-color: var(--secondary-color);
  --button--secondary-color: var(--white);
  --button--secondary-hover-bg-color: #27365F;
  --button--secondary-hover-color: var(--white);
}

/**
 * Styling
 */
:root {
  --border-radius: 1Opx;
  --image-border-radius: --border-radius;
}