/*
  De waardes in dit bestand hoef je niet te wijzigen, tenzij anders is afgesproken.
*/

/* Base */
:root {

  /* gray-color-variables */
  --bs-light: / 0.85;
  --bs-darken: * 0.85;

  --bs-white: #fff;
  --bs-white-rgb: 255, 255, 255;
  --bs-white-hsl: hsl(0, 0%, calc(100% var(--bs-darken)));

  --bs-gray-100: #f8f9fa;
  --bs-gray-100-rgb: 243, 244, 245;
  --bs-gray-100-hsl: hsl(210, 9%, calc(96% var(--bs-darken)));

  --bs-gray-200: #e9ecef;
  --bs-gray-200-rgb: 229, 232, 235;
  --bs-gray-200-hsl: hsl(210, 13%, calc(91% var(--bs-darken)));

  --bs-gray-300: #dee2e6;
  --bs-gray-300-rgb: 217, 220, 224;
  --bs-gray-300-hsl: hsl(210, 11%, calc(86% var(--bs-darken)));

  --bs-gray-400: #ced4da;
  --bs-gray-400-rgb: 198, 203, 209;
  --bs-gray-400-hsl: hsl(210, 11%, calc(80% var(--bs-darken)));

  --bs-gray-500: #adb5bd;
  --bs-gray-500-rgb: 173, 181, 189;
  --bs-gray-500-hsl: hsl(210, 11%, calc(71% var(--bs-darken)));

  --bs-gray-600: #6c757d;
  --bs-gray-600-rgb: 108, 117, 125;
  --bs-gray-600-hsl: hsl(208, 7%, calc(46% var(--bs-darken)));

  --bs-gray-700: #495057;
  --bs-gray-700-rgb: 73, 80, 87;
  --bs-gray-700-hsl: hsl(210, 9%, calc(31% var(--bs-darken)));

  --bs-gray-800: #343a40;
  --bs-gray-800-rgb: 52, 58, 64;
  --bs-gray-800-hsl: hsl(210, 10%, calc(23% var(--bs-darken)));

  --bs-gray-900: #212529;
  --bs-gray-900-rgb: 33, 37, 41;
  --bs-gray-900-hsl: hsl(210, 11%, calc(15% var(--bs-darken)));

  --bs-black: #000;
  --bs-black-rgb: 0, 0, 0;
  --bs-black-hsl: hsl(0, 0%, calc(0% * 0.85));

}


/* Heading */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--headings-font-family) !important;
  font-weight: var(--headings-font-weight) !important;
  line-height: var(--headings-line-height) !important;
}

@media only screen and (min-width: 1200px) {
  .display-1 {
    font-size: var(--display-1-font-size);
  }

  .display-2 {
    font-size: var(--display-2-font-size);
  }

  .display-3 {
    font-size: var(--display-3-font-size);
  }

  .display-4 {
    font-size: var(--display-4-font-size);
  }

  .display-5 {
    font-size: var(--display-5-font-size);
  }

  .display-6 {
    font-size: var(--display-6-font-size);
  }

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

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

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

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

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

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

.subheading {
  font-weight: var(--headings-font-weight);
  text-transform: uppercase;
  letter-spacing: 0.25rem;
}


/* Link */
a {
  text-decoration: none;
  transition: var(--bs-transition);
}

/* Boostrap */
.container, .container-fluid,
.row {
  --bs-gutter-x: 1.875rem;
}

.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.gx-3 {
  --bs-gutter-x: 0.9375rem;
}

.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.gx-5 {
  --bs-gutter-x: 3rem;
}

.text-gray-100 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-100-rgb),var(--bs-text-opacity))!important;
}

.text-gray-200 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-200-rgb),var(--bs-text-opacity))!important;
}

.text-gray-300 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-300-rgb),var(--bs-text-opacity))!important;
}

.text-gray-400 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-400-rgb),var(--bs-text-opacity))!important;
}

.text-gray-500 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-500-rgb),var(--bs-text-opacity))!important;
}

.text-gray-600 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-600-rgb),var(--bs-text-opacity))!important;
}

.text-gray-700 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-700-rgb),var(--bs-text-opacity))!important;
}

.text-gray-800 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-800-rgb),var(--bs-text-opacity))!important;
}

.text-gray-900 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-900-rgb),var(--bs-text-opacity))!important;
}

.text-tertiary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-tertiary-rgb),var(--bs-text-opacity))!important;
}

.text-quaternary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-quaternary-rgb),var(--bs-text-opacity))!important;
}

.bg-gray-100 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-100-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-200 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-200-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-300 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-300-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-400 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-400-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-500 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-500-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-600 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-600-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-700 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-700-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-800 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-800-rgb),var(--bs-bg-opacity))!important;
}

.bg-gray-900 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-900-rgb),var(--bs-bg-opacity))!important;
}

.bg-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-rgb),var(--bs-bg-opacity))!important;
}

.bg-quaternary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-quaternary-rgb),var(--bs-bg-opacity))!important;
}


/* Buttons */

/* btn-variables */
.btn-white {
  --bs-btn-color: var(--bs-quaternary);
  --bs-btn-bg: var(--bs-white);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-quaternary);
  --bs-btn-hover-bg: var(--bs-white-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-white-hsl);
  --bs-btn-active-color: var(--bs-quaternary);
  --bs-btn-active-bg: var(--bs-white-hsl);
  --bs-btn-active-border-color: var(--bs-white-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-quaternary);
  --bs-btn-disabled-bg: var(--bs-white-hsl);
  --bs-btn-disabled-border-color: var(--bs-white-hsl);
}

.btn-outline-white {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-quaternary);
  --bs-btn-hover-bg: var(--bs-white-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-white-hsl);
  --bs-btn-active-color: var(--bs-quaternary);
  --bs-btn-active-bg: var(--bs-white-hsl);
  --bs-btn-active-border-color: var(--bs-white-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-quaternary);
  --bs-btn-disabled-bg: var(--bs-white-hsl);
  --bs-btn-disabled-border-color: var(--bs-white-hsl);
}

.btn-dark {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-black-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-black-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-black-hsl);
  --bs-btn-active-border-color: var(--bs-black-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-black-hsl);
  --bs-btn-disabled-border-color: var(--bs-black-hsl);
}

.btn-outline-dark {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-black-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-black-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-black-hsl);
  --bs-btn-active-border-color: var(--bs-black-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-black-hsl);
  --bs-btn-disabled-border-color: var(--bs-black-hsl);
}

.btn-primary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-primary-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-primary-hsl);
  --bs-btn-active-border-color: var(--bs-primary-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-primary-hsl);
  --bs-btn-disabled-border-color: var(--bs-primary-hsl);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-primary-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-primary-hsl);
  --bs-btn-active-border-color: var(--bs-primary-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-primary-hsl);
  --bs-btn-disabled-border-color: var(--bs-primary-hsl);
}

.btn-secondary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-secondary-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-secondary-hsl);
  --bs-btn-active-border-color: var(--bs-secondary-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-secondary-hsl);
  --bs-btn-disabled-border-color: var(--bs-secondary-hsl);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-secondary-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-secondary-hsl);
  --bs-btn-active-border-color: var(--bs-secondary-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-secondary-hsl);
  --bs-btn-disabled-border-color: var(--bs-secondary-hsl);
}

.btn-tertiary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-tertiary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-tertiary-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-tertiary-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-tertiary-hsl);
  --bs-btn-active-border-color: var(--bs-tertiary-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-tertiary-hsl);
  --bs-btn-disabled-border-color: var(--bs-tertiary-hsl);
}

.btn-outline-tertiary {
  --bs-btn-color: var(--bs-tertiary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-tertiary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-tertiary-hsl);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-tertiary-hsl);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-tertiary-hsl);
  --bs-btn-active-border-color: var(--bs-tertiary-hsl);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-tertiary-hsl);
  --bs-btn-disabled-border-color: var(--bs-tertiary-hsl);
}