@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
/*
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
*/

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
:root {
  color-scheme: light;
  
  
  /* Site header */
  --token-ui-header-color:                      rgb(245,245,245);
  --token-ui-header-background:                 rgb(13,43,73);
  
  /* Sections */
  --token-ui-section-gap:                       3.2rem;
  @media screen and (min-width: 48em) {
  --token-ui-section-gap:                       4.8rem;
  }
  
  /* Navigation */
  --token-ui-navigation-background:             rgb(13,43,73); 

/*  --token-ui-navigation-background:             rgb(13, 43, 73);*/ 

  
  /* Text */
  --token-ui-text:                              rgb(27,38,46);
  --token-ui-text-highlight:                    rgb(17,39,74);
  --token-ui-text-highlight-indicator:          rgb(13, 43, 73);

  
  /* Icon */
  --token-ui-icon-color:                        rgb(13, 43, 73);
  
  /* Link */
  --token-ui-link-border-link:                  rgb(17,39,74);
  --token-ui-link-border-hover:                 rgba(27,38,46,.25);
  
  /* List */
  --token-ui-list-divider:                      rgb(245,245,245); /*rgb(231,232,233);*/
  
  /* Tabs */
  --token-ui-tabs-container-background:        rgb(13,43,73);
  --token-ui-tabs-tab-background-link:       rgb(231,232,233);
  --token-ui-tabs-tab-background-hover:       rgb(231,232,233);
  --token-ui-tabs-tab-color-active:             rgb(255,255,255);
  --token-ui-tabs-tab-background-active:        rgb(13,43,73);
  
  /* Tooltip */
  --token-ui-tooltip-background:                rgb(13,43,73);
  --token-ui-tooltip-color:                     rgb(255,255,255);
  
  /* Scale */
  --token-ui-scale-background:                  rgb(245, 245, 245);
  --token-ui-scale-color:                       rgb(13,43,73);
  
  /* Button */
  --token-ui-button-default-border:             rgb(245,245,245);
  --token-ui-button-default-color-link:         rgb(245,245,245);
  --token-ui-button-default-background-link:    rgb(13,43,73);
  --token-ui-button-default-color-hover:        rgb(13,43,73);
  --token-ui-button-default-background-hover:   rgb(237,237,237);
  --token-ui-button-default-color-active:       rgb(13,43,73);
  --token-ui-button-default-background-active:  rgb(245,245,245);

  --token-ui-button-primary-border:             rgb(245,245,245);
  --token-ui-button-primary-color-link:         rgb(245,245,245);
  --token-ui-button-primary-background-link:    rgb(13,43,73);
  --token-ui-button-primary-color-hover:        rgb(13,43,73);
  --token-ui-button-primary-background-hover:   rgb(237,237,237);
  --token-ui-button-primary-color-active:       rgb(13,43,73);
  --token-ui-button-primary-background-active:  rgb(245,245,245);
  
  --token-ui-button-secondary-border:           rgb(231,232,233);
  --token-ui-button-secondary-color-link:       rgb(13,43,73);
  --token-ui-button-secondary-background-link:  rgb(245,245,245);
  --token-ui-button-secondary-color-hover:      rgb(13,43,73);
  --token-ui-button-secondary-background-hover: rgb(237,237,237);
  --token-ui-button-secondary-color-active:     rgb(13,43,73);
  --token-ui-button-secondary-background-active:rgb(245,245,245);
  
  --token-ui-button-tertiary-border:            rgb(231,232,233);
  --token-ui-button-tertiary-color-link:        rgb(255,255,255);
  --token-ui-button-tertiary-background-link:   transparent; 
  --token-ui-button-tertiary-color-hover:       rgb(255,255,255); /* icoon bleef wit bij hover */
  --token-ui-button-tertiary-color-hover:       rgb(13,43,73);
  --token-ui-button-tertiary-background-hover:  rgba(245,245,245,.25);
  --token-ui-button-tertiary-color-active:      rgb(255,255,255); /* icoon bleef wit bij active */
  --token-ui-button-tertiary-color-active:      rgb(13,43,73);
  --token-ui-button-tertiary-background-active: rgba(245,245,245,.5);
  
  --token-ui-button-quaternary-border:            rgb(13,43,73);
  --token-ui-button-quaternary-color-link:        rgb(13,43,73);
  --token-ui-button-quaternary-background-link:   transparent;
  --token-ui-button-quaternary-color-hover:       rgb(13,43,73);
  --token-ui-button-quaternary-background-hover:  rgba(245,245,245,.25);
  --token-ui-button-quaternary-color-active:      rgb(13,43,73);
  --token-ui-button-quaternary-background-active: rgba(245,245,245,.5);
  
  /* Badge */
  --token-ui-badge-color:                       rgb(13,43,73);
  --token-ui-badge-background:                  rgb(245,245,245);
  --token-ui-badge-dark-color:                       rgb(245,245,245);
  --token-ui-badge-dark-background:                  rgb(13,43,73);
  
  /* Profile */
  --token-ui-profile-background:                  #004183;
  --token-ui-profile-fill:                        #C0002A;
  --token-ui-profile-donut-width:                 2rem;
  --token-ui-profile-border:                      rgb(231, 232, 233);
  
  /* Plant */
  --token-ui-plant-border:                      rgb(231, 232, 233);
  
  /* Tag */
  --token-ui-tag-color:                       rgb(13,43,73);
  --token-ui-tag-background:                  rgb(245,245,245);
  --token-ui-tag-border:                        rgb(13,43,73);

  /* Pagination */
  --token-ui-pagination-border:                 rgb(245,245,245);
  --token-ui-pagination-background:             rgb(245,245,245);
  --token-ui-pagination-color:                  rgb(13,43,73);
  
  /* Map */ 
  --token-ui-map-outline:                       rgb(13,43,73);
  
  /* Card */ 
  --token-ui-card-background:                   rgb(245,245,245);
  --token-ui-card-border:                       rgb(231,232,233);
  --token-ui-card-background-hover:             rgb(237,237,237);
  --token-ui-card-background-active:            rgb(245,245,245); 
  
  /* Blogcard */
  --token-ui-blogcard-border:                   rgb(231,232,233);
  
  /* Linkblock */
  --token-ui-linkblock-background:              rgb(255,255,255);
  --token-ui-linkblock-border:                  rgb(231,232,233); 
  
  /* Tutorial */
  --token-ui-tutorial-counter-background:       rgb(13,43,73);
  --token-ui-tutorial-counter-color:            rgb(245,245,245);
  
  
  /* Map */
  --token-ui-map-background:                    rgb(13,43,73);
  
  /* Slider */
  --token-ui-slider-background:                 rgb(245,245,245);
  --token-ui-slider-background-hover:           rgb(237,237,237);
  --token-ui-slider-dot-background:             rgb(13,43,73);
  
  /* Box */
  --token-ui-box-blocks-background:             rgb(245,245,245);
  --token-ui-box-blocks-border:                 rgb(231,232,233);
  
  /* Listblock */
  --token-ui-listblock-background:              rgb(245,245,245);
  --token-ui-listblock-counter-color:           rgb(235,235,235);
  --token-ui-listblock-counter-background:      rgb(235,235,235);
  --token-ui-listblock-horizontal-border:       rgb(231,232,233);
  
  /* Hr */
  --token-ui-editable-hr:                       rgb(27,38,46);
  
  /* Table */
  --token-ui-editable-table-border:             rgb(231,232,233);
  --token-ui-editable-table-header-background:  rgb(13,43,73);
  --token-ui-editable-table-header-color:       rgb(255,255,255);
  
  /* Cookiebanner */
  --token-ui-cookiebanner-background:           rgb(255,255,255);
  --token-ui-cookiebanner-border:               rgb(231,232,233); 
  --token-ui-cookiebanner-header-background:    rgb(231,232,233);
  
  /* History */
  --token-ui-history-background:                rgb(237,237,237);
  
  /* Calendar */
  --token-ui-calendar-border:                   rgb(181,183,177);
  --token-ui-calendar-timestamp:                rgb(17,39,74);
  --token-ui-calendar-today:                    rgb(17,39,74);
  --token-ui-calendar-event-header-background:  rgb(232,232,232);
  
  /* Photo */
  --token-ui-photo-copyright-text:              rgb(133,138,142);
  --token-ui-photo-copyright-background:        rgba(255,255,255,.75);

  /* Video */
  --token-ui-video-controls:                    rgb(255,255,255);
  --token-ui-video-bar:                         rgba(255,255,255,.2);
  --token-ui-video-bar-progress:                rgba(255,255,255,.5);
  --token-ui-video-bar-active:                  rgb(255,255,255);
  --token-ui-video-background:                  rgb(245,245,245);
  
  
  /* Footer */
  --token-ui-footer-background:                 rgb(13,43,73);
  --token-ui-footer-doormat-background:         rgb(13,43,73);
  --token-ui-footer-utility-background:         rgb(6,25,44);
  --token-ui-footer-color:                      rgb(245,245,245);
  --token-ui-footer-link-border-link:           rgba(245,245,245,.4);
  --token-ui-footer-link-border-hover:          rgba(245,245,245,.8);
  
  /* Form */ 
  --token-ui-form-background:                   rgb(245,245,245);
  --token-ui-form-input-required-color:         #C0002A;
  
  /* Form > Text */
  --token-ui-form-input-background-default:     #ffffff;
  --token-ui-form-input-border-default:         #8c8c8c;
  
  --token-ui-form-input-background-hover:       #ffffff;
  --token-ui-form-input-border-hover:           #0d2b49;
  
  --token-ui-form-input-background-focus:       #ffffff;
  --token-ui-form-input-border-focus:           #0d2b49;
  --token-ui-form-input-outline-focus:          #3a8fe6;
  
  --token-ui-form-input-border-warning:         #DB640E;
  
  /* Form > Select */
  --token-ui-form-select-background-default:    #ffffff;
  --token-ui-form-select-border-default:        #8c8c8c;
  --token-ui-form-select-arrow-color:           #0D2B49;
  
  --token-ui-form-select-background-filled:     #ffffff;
  --token-ui-form-select-border-filled:         #8c8c8c;  

  --token-ui-form-select-background-hover:      #ffffff;
  --token-ui-form-select-border-hover:          #0d2b49;
  
  --token-ui-form-select-background-focus:      #f7f7f7;
  --token-ui-form-select-border-focus:          #8c8c8c;
  --token-ui-form-select-outline-focus:         #3a8fe6;
  
  --token-ui-form-select-border-warning:        #DB640E;
   
  /* Form > Checkbox */
  --token-ui-form-checkbox-background-default:  #ffffff;
  --token-ui-form-checkbox-border-default:      #8c8c8c;
  
  --token-ui-form-checkbox-background-checked:  #0d2b49;
  --token-ui-form-checkbox-border-checked:      #0d2b49;  
  --token-ui-form-radio-dot-background-checked: #ffffff;  

  --token-ui-form-checkbox-background-hover:    #f7f7f7;
  --token-ui-form-checkbox-border-hover:        #8c8c8c;
  
  --token-ui-form-checkbox-background-focus:    #f7f7f7;
  --token-ui-form-checkbox-border-focus:        #8c8c8c;
  --token-ui-form-checkbox-outline-focus:       #3a8fe6;

/*  --token-ui-form-checkbox-border-warning:      #DB640E;  */
  
  /* Form > Radio */
  --token-ui-form-radio-background-default:     #ffffff;
  --token-ui-form-radio-border-default:         #8c8c8c;
  
  --token-ui-form-radio-background-checked:     #0d2b49;
  --token-ui-form-radio-border-checked:         #0d2b49;  
  --token-ui-form-radio-dot-background-checked: #ffffff;  

  --token-ui-form-radio-background-hover:       #f7f7f7;
  --token-ui-form-radio-border-hover:           #8c8c8c;
  
  --token-ui-form-radio-background-focus:       #f7f7f7;
  --token-ui-form-radio-border-focus:           #8c8c8c;
  --token-ui-form-radio-outline-focus:          #3a8fe6;
  
  /* Form > Multi-container */
  --token-ui-form-multicontainer-border-default:#8c8c8c;  

/*  --token-ui-form-radio-border-warning:         #DB640E;  */


  --token-ui-form-messages-warning-color:       #A64404;
  --token-ui-form-messages-error-color:         #C0002A;
  
/*  --token-ui-form-input-border-default:         rgb(140,140,140);   */
  
  /* Notification */
  --token-ui-notification-warning-background:   #fcf2e5;
  --token-ui-notification-warning-border:       #dd7b00;
  --token-ui-notification-info-background:      #fcf2e5;
  --token-ui-notification-info-border:          #dd7b00;
  
  /* ------------------------------------------------------------ */
  /* To recycle                                                   */
  /* ------------------------------------------------------------ */
  
  /* Brand */
  --token-color-brand-120:            #131A35; /* not in colors */
  --token-color-brand-100:            rgb(13,43,73);
  --token-color-brand-100-hover:      rgb(17,39,74, 0.6);

  /* Accent */
  --token-color-accent-100:           #36a067;
  --token-color-accent-100-hover:     #32935f;
  
  /* Blacks */
  --token-color-neutral-100:          #1b262e;
  --token-color-neutral-80:           #555d63;
  --token-color-neutral-50:           #858a8e;
  --token-color-neutral-25:           #c2c5c7;
  --token-color-neutral-25-hover:     #b2b5b7;
  --token-color-neutral-10:           #e7e8e9;
  --token-color-neutral-10-hover:     #dedfe0;
  --token-color-neutral-04:           #fafafa;
  --token-color-neutral-04-hover:     #f0f0f0;
  --token-color-neutral-00-20:           rgba(255,255,255,.2);
  --token-color-neutral-00:           rgb(255,255,255);
  --token-color-neutral-00-hover:     #f5f5f5;
  
  /* Positive */
  --token-color-positive-120:         #1E7006;
  --token-color-positive-100:         #3fa60c;
  --token-color-positive-100-hover:   #3a990b;
  --token-color-positive-80:          #65b83d;
  --token-color-positive-50:          #9fd285;
  --token-color-positive-25:          #cfe9c2;
  --token-color-positive-10:          #e6f0e5;
  --token-color-positive-10-hover:    #dfeddc;
  --token-color-positive-04:          #f7fbf5;
  
  /* Negative */
  --token-color-negative-120:         #8f0835;
  --token-color-negative-100:         #b30a43;
  --token-color-negative-100-hover:   #a5093e;
  --token-color-negative-80:          #c23b69;
  --token-color-negative-50:          #d984a1;
  --token-color-negative-25:          #ecc2d0;
  --token-color-negative-10:          #f6e6ec;
  --token-color-negative-10-hover:    #f3dde5;
  --token-color-negative-04:          #fcf5f7;
  --token-color-negative-04-hover:    #f9ebf0;
  
  /* Warning */
  --token-color-warning-150:          #804700;
  --token-color-warning-120:          #ad6000;
  --token-color-warning-120-hover:    #9f5800;
  --token-color-warning-100:          #dd7b00;
  --token-color-warning-100-hover:    #cf7300;
  --token-color-warning-80:           #e49533;
  --token-color-warning-50:           #eebd80;
  --token-color-warning-25:           #f6debf;
  --token-color-warning-10:           #fcf2e5;
  --token-color-warning-10-hover:     #fbeddc;
  --token-color-warning-04:           #fefaf5;

  /* External brands */
  /* - itsme */
  --token-color-itsme-100:            #ff4612;
  --token-color-itsme-100-hover:      #e63f10;
}
:root {

  --token-font-family-primary:    "Source Sans 3", sans-serif;
  --token-font-family-secondary:  "Cormorant Garamond", serif;
  
  --token-h1-font-family:         var(--token-font-family-primary);
  --token-h1-font-weight:         200;
  --token-h1-font-size:           3.5rem; 
  --token-h1-font-height:         1;
  --token-h2-font-family:         var(--token-font-family-primary);
  --token-h2-font-weight:         200;
  --token-h2-font-size:           2.5rem;
  --token-h2-font-height:         130%;
  --token-h3-font-family:         var(--token-font-family-primary);
  --token-h3-font-weight:         200;
  --token-h3-font-size:           1.5rem;
  --token-h3-font-height:         130%;
  --token-h4-font-family:         var(--token-font-family-primary);
  --token-h4-font-weight:         200;
  --token-h4-font-size:           1.5rem;
  --token-h4-font-height:         130%;
  --token-h5-font-family:         var(--token-font-family-primary);
  --token-h5-font-weight:         200;
  --token-h5-font-size:           1.125rem;
  --token-h5-font-height:         140%;
  --token-h6-font-family:         var(--token-font-family-primary);
  --token-h6-font-weight:         200;
  --token-h6-font-size:           1rem;
  --token-h6-font-height:         140%;
  
  --token-size-xs:                25em;
  --token-size-sm:                35em;
  --token-size-md:                48em;
  --token-size-lg:                60em;
  --token-size-xl:                80em;
  --token-size-xxl:               90em;
  --token-size-huge:              105em;
  --token-size-max:               120em;
  
  --token-site-header-height:     8rem;
  
}
::-moz-selection { /* Code for Firefox */
  color: var(--token-color-neutral-00);
  background: var(--token-color-brand-100);
}
::selection {
  color: var(--token-color-neutral-00);
  background: var(--token-color-brand-100);
}

/*
:target
*/

/* --------------------------------------------------
 * FONTS
 * -------------------------------------------------- */
/*
 * Source Sans Pro
 * Cormorant Garamond
 * Times
 * */

@font-face {
  font-display: swap; /* Change swap to block if it flickers */
  font-family: "Source Sans 3";
  font-style: normal;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/SourceSans3-VariableFont_wght.ttf");
} 

@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 300;
  font-style: normal;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-Light.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 300;
  font-style: italic;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-LightItalic.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 400;
  font-style: normal;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-Regular.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 400;
  font-style: italic;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-Italic.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 500;
  font-style: normal;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-Medium.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 500;
  font-style: italic;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-MediumItalic.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 600;
  font-style: normal;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-SemiBold.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 600;
  font-style: italic;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-SemiBoldItalic.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 700;
  font-style: normal;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-Bold.ttf");
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 700;
  font-style: italic;
  src: url("//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/shared/fonts/CormorantGaramond-BoldItalic.ttf");
}

/* --------------------------------------------------
 * COLORS
 * -------------------------------------------------- */
:root {
  --cookie-banner-background-color: #fff;

  /* Accept button */
  --cookie-accept-background-color: #23085a;
  --cookie-accept-background-hover-color: #16043b;
  --cookie-accept-font-size: 16px;

  /* Reject button */
  --cookie-reject-background-color: #23085a;
  --cookie-reject-background-hover-color: #23085a;
  --cookie-reject-font-size: 16px;

  /* Cookie settings button */
  --cookie-settings-color: #23085a;
  --cookie-settings-hover-color: #23085a;
  --cookie-settings-background-color: transparent;
  --cookie-settings-background-hover-color: #eee;
  --cookie-settings-border-color: #23085a;
  --cookie-settings-border-width: 2px;
  --cookie-settings-font-size: 16px;

  /* Banner title */
  --cookie-title-color: #23085a;
  --cookie-title-font-size: 32px;

  /* Banner body text */
  --cookie-description-color: #54565a;
  --cookie-description-font-size: 18px;
}

/*
 *   --token-ui-button-default-border:             rgb(245,245,245);
  --token-ui-button-default-color-link:         rgb(245,245,245);
  --token-ui-button-default-background-link:    rgb(13,43,73);
  --token-ui-button-default-color-hover:        rgb(13,43,73);
  --token-ui-button-default-background-hover:   rgb(237,237,237);
  --token-ui-button-default-color-active:       rgb(13,43,73);
  --token-ui-button-default-background-active:  rgb(245,245,245);
 * */

.onetrust-pc-dark-filter {
   
}

#onetrust-banner-sdk.ot-close-btn-link {
  padding-top: 0 !important; 
}

#onetrust-consent-sdk #onetrust-banner-sdk *:focus, 
#onetrust-consent-sdk #onetrust-banner-sdk:focus {
  outline-width: 0 !important; 
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy {
  font-size: 1.6rem !important; 
}
#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler):not(.ot-close-icon):not(#filter-btn-handler):not(.ot-remove-objection-handler):not(.ot-obj-leg-btn-handler):not([aria-expanded]):not(.ot-link-btn), 
#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-active-leg-btn,
#ot-sdk-btn.ot-sdk-show-settings, 
#ot-sdk-btn.optanon-show-settings {
  border: .1rem solid var(--token-ui-button-default-border) !important; 
  color: var(--token-ui-button-default-color-link) !important;
  background: var(--token-ui-button-default-background-link) !important;
  font-size: inherit !important;
  text-decoration: none;
  padding: .6rem 1.2rem !important;
  border-radius: .4rem; 
  align-items: center;
  column-gap: .8rem;
  transition: all 150ms 0ms cubic-bezier(0.5, 0, 0, 1);
  font-variation-settings: "wght" 400;
}

/* --------------------------------------------------
 * ANIMATIONS
 * -------------------------------------------------- */

/* --------------------------------------------------
 * GENERAL
 * -------------------------------------------------- */
:root {
  color-scheme: only light;

} 




@view-transition {
  navigation: auto;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  background: var(--token-color-brand-100);  
}

body {
  font-family: var(--token-font-family-primary);
  background: var(--token-color-brand-100);
  font-size: 1.8rem;
  line-height: 1.5;
  font-variation-settings: "wght" 300, "slnt" 0;
  overflow: visible; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--token-ui-text);
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga","kern";
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

html:has(body.js-scroll--disabled),
body.js-scroll--disabled {
  /*overflow: hidden;*/
/*  height: 100dvh;*/
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;

}



img {
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

b,
strong {
  font-variation-settings: "wght" 500, "slnt" 0;
}

a {
  transition: all 200ms ease;
}

main,
main > #hs_cos_wrapper_post_body {
  background: var(--token-color-neutral-00); 
  flex-grow: 1; 
}
/*main,*/
main > span,
main > #hs_cos_wrapper_post_body,
main.main--office-detail,
main.main--office-detail > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--token-ui-section-gap);
}
main > span > div:has(section.section--empty) {
  display: none; 
}
main > span:last-child:not(:has(section.section--filled)),
main > section:last-child:not(.section--frontdoor),
main:has(> .bar) > span {
  margin-bottom: var(--token-ui-section-gap);
}
main:has(span > div section.section--jobs) span {
  margin-bottom: 0; 
}
main.main--office-detail {
  gap: 3.2rem;
}
main:has(.frontdoor) {
  display: flex;
  flex-direction: column;
  justify-content: center; 
}
/*
main.main--office-detail > div + span,
main.main--office-detail > span + section,
main.main--office-detail > section + span {
  margin-top: 3.2rem; 
}
*/

main:not(.main--office-detail) > span > div:first-child > .section:not(.hero):not(.page-header) {
  margin-top: var(--token-ui-section-gap);
}


@media screen and (min-width: 48em) {
/*  main,*/
  /*
  main > span,
  main > #hs_cos_wrapper_post_body,
  main.main--office-detail,
  main.main--office-detail > div:first-child {
    gap: 4.8rem;
  }
  */
  /*
  main > span:last-child:not(:has(section.section--filled)),
  main > section:last-child:not(.section--frontdoor),
  main:has(> .bar) > span {
    margin-bottom: 4.8rem;
  }
  */
  /*
  main.main--office-detail > div + span,
  main.main--office-detail > span + section,
  main.main--office-detail > section + span {
    margin-top: 4.8rem;
  }
  */
  /*
  main:not(.main--office-detail) > span > div:first-child > .section:not(.hero):not(.page-header) {
    margin-top: 4.8rem;
  }
  */
}

.hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal; 
}

.text--nowrap {
  white-space: nowrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: pretty; /* balance */
}

h1,
h2,
h3,
h4,
h5, 
h6 {
  line-height: 120%;
}

h1:not(.frontdoor__welcome),
h2 {
  font-family: var(--token-font-family-secondary); 
}

h1 {
  font-weight: 700;
  font-size: 3.6rem;
}
h1 i {
  font-style: italic;
  font-weight: 300;
}
h2 {
  font-weight: 500;
  font-size: 3.2rem;
} 
h3 {
  font-weight: 600; 
  font-size: 2.4rem;
}


blockquote p {
  font-family: var(--token-font-family-secondary);
  font-size: 3.2rem;
  font-weight: 500;
}

@media screen and (min-width: 48em) {
  h1 {
    font-size: 5.6rem; /*4.8*/
  }
}

/*
APP Standaard

h1: 32px > 400
h2: 24px > 500
h3: 18px > 600




 * */

/* 
 * */
/*



*/
/* Text selection
 * */
/*
select::-ms-expand {
  display: none;, 
}

::selection {
  background: rgb(var(--color-brand-100));
  color: rgb(var(--color-neutral-00));
}

::-moz-selection{
  background: rgb(var(--color-brand-100));
  color: rgb(var(--color-neutral-00));
}
*/
.align--left {
  text-align: center; 
}
.align--left .button-group {
  justify-content: left; 
}

.align--center {
  text-align: center; 
}
.align--center .button-group { 
  justify-content: center; 
}

.align--right {
  text-align: right; 
}
.align--right .button-group {
  justify-content: right; 
}



@media screen and (min-width: 48em) {
  .md\:align--left {
    text-align: left;
  }
  .md\:align--left .button-group {
    justify-content: left; 
  }
  .md\:align--center {
    text-align: center; 
  }
  .md\:align--center .button-group {
    justify-content: center; 
  }
  .md\:align--right {
    text-align: right; 
  }
  .md\:align--right .button-group {
    justify-content: right; 
  }
}
  
@media screen and (min-width: 80em) {
  .xl\:align--left {
    text-align: left;
  }
  .xl\:align--left .button-group {
    justify-content: left; 
  }
  .xl\:align--center {
    text-align: center;
  }
  .xl\:align--center .button-group {
    justify-content: center; 
  }
  .xl\:align--right {
    text-align: right;
  }
  .xl\:align--right .button-group {
    justify-content: right; 
  }
}
 
/* --------------------------------------------------
 * COMPONENTS
 * -------------------------------------------------- */
.section {
  display: flex;
  flex-direction: column;
  background: var(--theme-background, inherit);
  color: var(--theme-color, inherit);
}

.section:not(.hero):not(.section--frontdoor) {
  gap: 2rem;
}

.section--empty {
  
}

.section--mb {
  margin-bottom: var(--token-ui-section-gap) 
}

.section.section--has-spacing:not(.hero):not(.section--frontdoor) {
  gap: 3.2rem;
}

@media screen and (max-width: 48em) {
  .section.banner {
    gap: 6rem; 
  }
}

@media screen and (min-width: 48em) {
  .section.section--has-spacing:not(.hero):not(.section--frontdoor) {
    gap: 4.8rem;
  }
}

.section--overflow-hidden {
  overflow: hidden; 
}

body:not(.js-embedded):not(.js-key) .section--is-exclusive {
  /*
   * background: rgba(170, 74, 68,.1);
  padding: 1rem 0;
  border: 1px solid rgba(170, 74, 68,1);
  border-width: 1rem 0;
  */
  position: relative;
  padding: 2rem 0;
  background: rgba(170, 74, 68,.1); 
  background: repeating-linear-gradient(
    45deg,
    rgba(170, 74, 68,.1) 0,
    rgba(170, 74, 68,.1) 1rem,
    white 1rem, 
    white 2rem
  );
}


.section--spacer {
  height: calc(var(--section-height,1) * 1rem);
} 
.section--spacer-in-editor {
  background: repeating-linear-gradient(
    45deg,
    rgba(170, 74, 68,.1) 0,
    rgba(170, 74, 68,.1) 1rem,
    white 1rem, 
    white 2rem
  );
  display: flex;
  place-content: center;
  align-items: center;
}
.section--spacer-in-editor::after {
  content: 'SPACER';
  text-align: center;
  display: inline-block;
  background: #FFF;
  padding: .5rem;
  font-size: 10px;
  line-height: 10px;
  border-radius: .8rem;
  border: .4rem solid rgba(170, 74, 68,.1);
  color: rgba(170, 74, 68,1);
  font-variation-settings: "wght" 600;
}

body:not(.js-embedded):not(.js-key) .section--is-exclusive:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  border-bottom-left-radius: .5rem;
  padding: .8rem 1rem;
  line-height: 100%;
  font-size: 1.4rem;
  content: '🔓 Client only';
}

@media screen and (min-width: 48em) {
  .section .container:has(> div.box):not(:last-child) {
      margin-bottom: 4rem;
  }
}
/* ------------------------------
 *  Containers
 * ------------------------------ */

.container {
  /*position: relative; might break without this */
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - (1.5rem * 2));
  max-width: 136rem;
  transition: width 250ms ease;
}


@media screen and (min-width: 48em) {
  .container {
    width: calc(100% - (8rem * 2));
  }
  
}

@media screen and (min-width: 80em) {
  .container {
    width: calc(100% - (12rem * 2));
  }
  
}

/*
.container {
  position: relative;
  margin-inline: auto;
  margin-right: auto;
  margin-left: auto;
  width: min(100% - (1.5em * 2), var(--token-size-xl));
}
*/
/*
.container--slider {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  /*
  width: 100%; 
  margin-inline: 0;
  margin-right: auto;
  margin-left: auto;
  container-type: inline-size;
  padding: 0 max(1.5rem, (100% - var(--token-size-xl))/2); 
  width: min(100% - (1.5em * 2), var(--token-size-xl));

/*  padding-left: 1.5rem; */
/*  padding: 0 max(1.5rem, (100% - var(--token-size-xl))/2); */
/*  overflow-y: auto;
  
}*/
/*
@media screen and (min-width: 48em) {
  .container {
    width: min(100% - (7.2rem * 2), var(--token-size-xl));
    outline-color: orange;
  }
  .container--slider {
    padding: 0 max(7.2rem, (100% - var(--token-size-xl))/2); 
  }
}
@media screen and (min-width: 80em) {
  .container {
    width: min(100% - (11.2rem * 2), var(--token-size-xl));
    outline-color: green;
  }
  .container--slider {
    padding: 0 max(11.2rem, (100% - var(--token-size-xl))/2); 
  }
}
*/
.grid:not(.grid--masonry):not(.grid--columns) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 2rem;
  grid-auto-flow: dense;
}
.grid.grid--columns {
  display: grid;
  align-content: start;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  width: 100%;
}
.grid .grid:not(.grid--masonry):not(.grid--jobs):not(.grid--columns) {
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
}
.grid__column:has(> .grid) .grid:not(:last-child) {
  margin-bottom: 4rem;
}



.grid--masonry {
  display: grid;
  align-content: start;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  width: 100%;
}

.grid--masonry .grid__column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative; 
}

.grid--columns-1 {
  grid-template-columns: 1fr;
}
.grid--columns-2 {
  grid-template-columns: 1fr 1fr;
}
.grid--columns-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid--columns-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid:empty {
  display: none; 
}

.grid--subgrid {

}

.grid > div {
/*  display: flex;
  flex-direction: column; */
}

.grid--v-center {
  display: flex;
  align-items: center; 
}

.grid--has-divider {
   
}

.grid--has-divider > div {
  position: relative; 
}

.grid--has-divider > div:not(:last-child):after {
  position: absolute;
  right: -1rem;
  top: 0;
  bottom: 0;
  content: '';
  display: block;
  border-right: .1rem solid transparent;
}

.grid__columns--equal {
  grid-template-columns: 1fr;
  display: grid;
  gap: 2rem;
}

@media screen and (min-width: 48em) {
  .grid__columns--equal {
    grid-template-columns: repeat(var(--columns), minmax(0,1fr));
  }
}

/* Order */
.grid__column--order-first {
  order: -9999;
}

.grid__column--order-last {
  order: 9999;
}

/* Column widths */

.grid__column--hidden {
  display: none; 
}

.grid:not(.grid--masonry) > .grid__column {
  grid-column: span var(--cols)/span var(--cols); 
  grid-column-start: var(--start);
}

.grid__column--span-full {
  --cols: 12;
/*  grid-column: 1/-1;*/
}
.grid__column--span-1 {
  --cols: 1;
}
.grid__column--span-2 {
  --cols: 2;
}
.grid__column--span-3 {
  --cols: 3;
}
.grid__column--span-4 {
  --cols: 4;
}
.grid__column--span-5 {
  --cols: 5;
}
.grid__column--span-6 {
  --cols: 6;
}
.grid__column--span-7 {
  --cols: 7;
}
.grid__column--span-8 {
  --cols: 8;
}
.grid__column--span-9 {
  --cols: 9;
}
.grid__column--span-10 {
  --cols: 10;
}
.grid__column--span-11 {
  --cols: 11;
}
.grid__column--span-12 {
  --cols: 12; 
}

.grid__column--column-start-1 {
  --start: 1;
}
.grid__column--column-start-2 {
  --start: 2;
}
.grid__column--column-start-3 {
  --start: 2;
}
.grid__column--column-start-4 {
  --start: 4;
}
.grid__column--column-start-5 {
  --start: 5;
}
.grid__column--column-start-6 {
  --start: 6;
}
.grid__column--column-start-7 {
  --start: 7;
}
.grid__column--column-start-8 {
  --start: 8;
}
.grid__column--column-start-9 {
  --start: 9;
}
.grid__column--column-start-10 {
  --start: 10;
}
.grid__column--column-start-11 {
  --start: 11;
}

@media screen and (min-width: 48em) {
  .grid__column--hidden {
    display: unset; 
  }
  .md\:grid__column--span-2 {
    --cols: 2;
  }
  .md\:grid__column--span-3 {
    --cols: 3;
  }
  .md\:grid__column--span-4 {
    --cols: 4;
  }
  .md\:grid__column--span-5 {
    --cols: 5;
  }
  .md\:grid__column--span-6 {
    --cols: 6;
  }
  .md\:grid__column--span-7 {
    --cols: 7;
  }
  .md\:grid__column--span-8 {
    --cols: 8;
  }
  .md\:grid__column--span-9 {
    --cols: 9;
  }
  .md\:grid__column--span-10 {
    --cols: 10;
  }
  .md\:grid__column--span-11 {
    --cols: 11;
  }
  .md\:grid__column--column-start-1 {
    --start: 1;
  }
  .md\:grid__column--column-start-2 {
    --start: 2;
  }
  .md\:grid__column--column-start-3 {
    --start: 3;
  }
  .md\:grid__column--column-start-4 {
    --start: 4;
  }
  .md\:grid__column--column-start-5 {
    --start: 5;
  }
  .md\:grid__column--column-start-6 {
    --start: 6;
  }
  .md\:grid__column--column-start-7 {
    --start: 7;
  }
  .md\:grid__column--column-start-8 {
    --start: 8;
  }
  .md\:grid__column--column-start-9 {
    --start: 9;
  }
  
  .grid--has-divider > div.md\:grid__column--span-4:not(:last-child):after,
  .grid--has-divider > div.xl\:grid__column--span-3:nth-child(odd):not(:last-child):after {
    border-right-color: var(--token-color-neutral-10);
  }
  
  .grid.grid--jobs,
  .md\:grid--columns-2 {
    grid-template-columns: 1fr 1fr;
  }
  .md\:grid--columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .md\:grid--columns-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  

  
  .grid--masonry {
    grid-template-columns: repeat(auto-fit, calc((100% - 6rem) / 4));
  }
  .grid--masonry .grid__column--width-1 {
    grid-column: span 1; 
  }
  .grid--masonry .grid__column--width-2 {
    grid-column: span 2; 
  }
  .grid--masonry .grid__column--width-3 {
    grid-column: span 3; 
  }
  .grid--masonry .grid__column--width-4 {
    grid-column: span 4; 
  }
  .grid--masonry .grid__column--height-1 {
    grid-row: span 1; 
  }
  .grid--masonry .grid__column--height-2 {
    grid-row: span 2; 
  }
}

@media screen and (min-width: 80em) {
  .xl\:grid__column--span-1 {
    --cols: 1;
  }
  .xl\:grid__column--span-2 {
    --cols: 2;
  }
  .xl\:grid__column--span-3 {
    --cols: 3;
  }
  .xl\:grid__column--span-4 {
    --cols: 4;
  }
  .xl\:grid__column--span-5 {
    --cols: 5;
  }
  .xl\:grid__column--span-6 {
    --cols: 6;
  }
  .xl\:grid__column--span-7 {
    --cols: 7;
  }
  .xl\:grid__column--span-8 {
    --cols: 8;
  }
  .xl\:grid__column--span-9 {
    --cols: 9;
  }
  .xl\:grid__column--span-10 {
    --cols: 10;
  }
  .xl\:grid__column--span-11 {
    --cols: 11;
  }
  
  .xl\:grid__column--column-start-1 {
    --start: 1;
  }
  .xl\:grid__column--column-start-2 {
    --start: 2;
  }
  .xl\:grid__column--column-start-3 {
    --start: 3;
  }
  .xl\:grid__column--column-start-4 {
    --start: 4;
  }
  .xl\:grid__column--column-start-5 {
    --start: 5;
  }
  .xl\:grid__column--column-start-6 {
    --start: 6;
  }
  .xl\:grid__column--column-start-7 {
    --start: 7;
  }
  .xl\:grid__column--column-start-8 {
    --start: 8;
  }
  .xl\:grid__column--column-start-9 {
    --start: 9;
  }
  .xl\:grid__column--column-start-10 {
    --start: 10;
  }
  .xl\:grid__column--column-start-11 {
    --start: 11;
  }
  
  .grid--has-divider > div.xl\:grid__column--span-3:not(:last-child):after {
    border-right-color: var(--token-color-neutral-10);
  }

  .xl\:grid--columns-2 {
    grid-template-columns: 1fr 1fr;
  }
  .xl\:grid--columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .xl\:grid--columns-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.grid__column-column-start-2,
.grid__column-column-start-3,
.grid__column-column-start-4,
.grid__column-column-start-5,
.grid__column-column-start-6,
.grid__column-column-start-7,
.md\:grid__column-column-start-2,
.md\:grid__column-column-start-3,
.md\:grid__column-column-start-4,
.md\:grid__column-column-start-5,
.md\:grid__column-column-start-6,
.md\:grid__column-column-start-7,
.md\:grid__column-column-start-8,
.md\:grid__column-column-start-9,
.xl\:grid__column-column-start-2,
.xl\:grid__column-column-start-3,
.xl\:grid__column-column-start-4,
.xl\:grid__column-column-start-5,
.xl\:grid__column-column-start-6,
.xl\:grid__column-column-start-7,
.xl\:grid__column-column-start-8,
.xl\:grid__column-column-start-9,
.xl\:grid__column-column-start-10,
.xl\:grid__column-column-start-11 {
  border: 1px dashed orange;   
}
.icon {
  content: '';
  display: inline-flex;
  aspect-ratio: 1/1;
  min-width: 1.6rem;
}

.icon {
  -webkit-mask: var(--icon) no-repeat;
  mask: var(--icon) no-repeat;
  background: var(--token-ui-icon-color); 
}


.icon--flag { 
  border-radius: .4rem;
  aspect-ratio: 4/3;
  background-position: center;
  background-size: cover;
  background-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/flags/xx.svg); 
}

.icon--flag-be {
  background-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/flags/be.svg); 
}
.icon--flag-lu {
  background-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/flags/lu.svg); 
}
.icon--flag-ch {
  background-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/flags/ch.svg); 
}
.icon--flag-nl {
  background-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/flags/nl.svg); 
}

icon {
  display: inline-flex;  
  aspect-ratio: 1/1;
  min-width: 1.6rem;
}
.editable {
  text-wrap: pretty;
  width: 100%;
}

.editable--intro {
  font-variation-settings: "wght" 400;
  color: var(--token-ui-text-highlight);
  font-size: 1.8rem;
} 
.editable--footnote {
  font-size: 1.2rem;
}

.editable--align-center {
  text-align: center; 
}

.editable--align-right {
  text-align: right; 
}

/*
.editable *:not(li):not(.button):not(:last-child) {
  margin-bottom: 1.6rem; 
}
*/
/*
.editable *:not(:last-child) {
  margin-bottom: 1.6rem; 
}
*/

.editable > *:not(:last-child),
.editable > blockquote *:not(:last-child) {
  margin-bottom: 1.6rem; 
}

.editable a:not(.button) {
  color: inherit; 
}

.editable a:not(.button) {
  text-decoration: none;
  background-image: linear-gradient(var(--token-ui-link-border-link),var(--token-ui-link-border-link)), linear-gradient(var(--token-ui-link-border-hover),var(--token-ui-link-border-hover));
  background-size: 100% .1rem, 0 .1rem;
  background-position: 100% 90%, 0% 90%;
  background-repeat: no-repeat;
  transition: background-size 250ms linear;
}

.box--filled .editable a:not(.button) {
  background-image: linear-gradient(var(--theme-color, var(--token-ui-link-border-link)),var(--theme-color, var(--token-ui-link-border-link))), linear-gradient(var(--theme-background, var(--token-ui-link-border-hover)),var(--theme-background, var(--token-ui-link-border-hover)));
}

.editable a:not(.button):hover {
  background-size: 0% .1rem, 100% .1rem;
}

.editable .button ~ .button {
/*  margin-left: 1rem; */
}

.editable h1,
.editable h2,
.editable h3,
.editable h4,
.editable h5,
.editable h6,
.editable b,
.editable strong {
  color: var(--theme-color, var(--token-ui-text-highlight));
}

.editable h1 strong,
.editable h1 b,
.editable h2 strong,
.editable h2 b,
.editable h3 strong,
.editable h3 b,
.editable h4 strong,
.editable h4 b,
.editable h5 strong,
.editable h5 b,
.editable h6 strong,
.editable h6 b {
  font-variation-settings: 'wght' 300;
  font-weight: normal;
}

.editable h1:not(:last-child),
.editable h2:not(:last-child),
.editable h3:not(:last-child),
.editable h4:not(:last-child),
.editable h5:not(:last-child),
.editable h6:not(:last-child) {
  margin-bottom: .8rem;
  margin-top: 0;
}

.editable > p + h1 {
  margin-bottom: 1.6rem !important; 
}

.editable--footnote p {
  margin-bottom: 0 !important; 
}

.editable em,
.editable i {
  font-style: italic;
}

.editable span[style="text-decoration: underline;"],
.editable span[style="text-decoration:underline;"] {
  text-decoration: none !important;
  background-image: linear-gradient(var(--token-ui-text-highlight),var(--token-ui-text-highlight));
  background-size: 100% .1rem, 0 .1rem;
  background-position: 100% 90%, 0% 90%;
  background-repeat: no-repeat;
}

.editable blockquote {
  padding: 3.2rem;
}

.editable blockquote.has--line {
  border-left: 1px solid var(--token-ui-text-highlight);
}

.editable blockquote p {
  display: inline-block;
  font-style: italic;
  max-width: 35ch;
  line-height: 1.25;
  color: var(--token-ui-text-highlight); 
  font-weight: 600;
}

.editable ol:not(.taglist):not(.list--horizontal) {
  counter-reset: editable-counter;
}
.editable ol li,
.editable ul:not(.taglist):not(.scale):not(.list--horizontal):not(.list--plain):not(.list--grid) li {
  position: relative;
  margin-left: 1rem;
}
.editable ol li {
  counter-increment: editable-counter; 
  margin-left: 2.5rem;
}
.editable ul:not(.taglist):not(.scale):not(.list--horizontal):not(.list--plain):not(.list--grid) li:before,
.editable ol li:before {
  content: '•';
  display: block;
  color: var(--theme-color, var(--token-ui-text-highlight)); 
  right: 100%;
  position: absolute;
  width: 1rem;
  text-align:left;
}
.editable ol li:before {
  content: counter(editable-counter) ". "; 
  width: 2.5rem;
}
.editable ul.list--horizontal {
  
}
.editable blockquote footer {
/*  margin-top: 1.6rem;*/
}


.editable dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .8rem;
}

.editable dd {
  margin: 0; /* remove browser default margin */
}

.editable dl.list--vertical {
  grid-template-columns: 1fr;
}

.editable dl.list--vertical dt {
  font-variation-settings: "wght" 500;
}

.editable dl.list--vertical dd:not(:last-child) {
  margin-bottom: .8rem;
}

.editable hr {
  background: var(--token-ui-editable-hr);
  display: block;
  height: .1rem;
  border: 0;
  margin: .8rem 0;
}

.editable__flag {
  display: block;
  height: 6rem;
  width: auto;
  user-select: none;
} 

.editable table {
  border: .1rem solid var(--token-ui-editable-table-border);
  border-radius: .8rem;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  overflow: hidden;
}
.editable table thead {}
.editable table thead tr {}
.editable table thead tr th,
.editable table tbody tr th {
  
}
.editable table tbody {

}
.editable table tbody tr {

}
.editable table thead tr th,
.editable table tbody tr:first-child td:has(strong) {
  background: var(--token-ui-editable-table-header-background); 
}
.editable table thead tr th,
.editable table tbody tr:first-child td:has(strong) strong {
  color: var(--token-ui-editable-table-header-color); 
  font-variation-settings: "wght" 500, "slnt" 0;
  text-align: left;
}

.editable table tbody tr:not(:last-child) td {
  border-bottom: .1rem solid var(--token-ui-editable-table-border);
}
.editable table thead tr th,
.editable table tbody tr td {
  padding: .8rem .8rem;
}
@media screen and (max-width: 48em) {
  .editable table:has(tbody tr td[data-th]) {
    border: 0;
  }
  .editable table:has(tbody tr td[data-th]) thead {
    display: none;
  }
  .editable table tbody tr:has(td[data-th]) td {
    display: flex;
    border: .1rem solid var(--token-ui-editable-table-border);
    border-width: .1rem .1rem 0 .1rem;
  }
  
  .editable table tbody tr:has(td[data-th]) td:before {
    content: attr(data-th) " ";
    display: block;
    width: 30%;
    font-variation-settings: "wght" 500, "slnt" 0;
  }
  .editable table tbody tr:has(td[data-th]) td span {
    width: 70%;
  }
  .editable table tbody tr:has(td[data-th]) td:last-child {
    margin-bottom: 2rem; 
    border-bottom: .1rem solid var(--token-ui-editable-table-border);
    border-bottom-left-radius: .8rem;
    border-bottom-right-radius: .8rem;
  }
  .editable table tbody tr:has(td[data-th]):last-child td:last-child {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 48em) {
  .editable table tbody tr:has(td[data-th]):nth-child(2n) td {
    background: #F5F5F5;
  }
}


@media screen and (min-width: 48em) {
  .editable__flag {
    height: 8rem; 
  }
  .editable .editable--highlight {
    position: relative;
  }

  .editable .editable--highlight::after {
    position: absolute;
    margin-right: .5rem;
    content: '';
    display: block;
    inset: 50% 100% 50% auto;
    height: .5rem;
    aspect-ratio: 1;
    background: var(--token-ui-text-highlight-indicator);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: highlight 2000ms 1000ms infinite;
    opacity: 0;
  }
}
  
@keyframes highlight {
  0% {
    opacity: 0; 
  }
  80%,
  90% {
    opacity: 1; 
  }
}




/*
.editable blockquote {
  margin-left: 3.2rem;
}

.editable blockquote p {
  display: inline-block;
  background: var(--token-color-neutral-10);
  padding: 3.2rem;
  font-style: italic;
  max-width: 30ch;
  color: var(--token-ui-text-highlight); 
}

.editable blockquote footer {
  
}
*/
.button-group {
/*  display: inline-flex;  */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}

.button-group--vertical {
  flex-direction: column; 
  align-items: flex-start;
}

.editable--align-center .button-group {
  justify-content: center; 
}
.button,
.hs-button {
  color: inherit;
  text-decoration: none;
  padding: .6rem 1.2rem;
  display: inline-flex;
  border-radius: .4rem; 
  align-items: center;
  column-gap: .8rem;
  transition: all 150ms 0ms cubic-bezier(0.5, 0, 0, 1);
  font-variation-settings: "wght" 400;
  text-wrap: wrap; /* nowrap */
  cursor: pointer;
      justify-content: flex-end;
}
.button .icon {
  transition: background 150ms cubic-bezier(0.5, 0, 0, 1), transform 250ms cubic-bezier(0.5, 0, 0, 1) 150ms;
}

/* 
 * DEFAULT
 * */
.button,
.hs-button {
  color: var(--token-ui-button-default-color-link);
  background: var(--token-ui-button-default-background-link);
  border: .1rem solid var(--token-ui-button-default-border);
}
.button .icon {
  background: var(--token-ui-button-default-color-link);
}
.button:not(.button--disabled):hover,
.hs-button:not(.button--disabled):hover {
  color: var(--token-ui-button-default-color-hover);
  background: var(--token-ui-button-default-background-hover);
}
.button:hover .icon {
  background: var(--token-ui-button-default-color-hover);
}
.button:active,
.hs-button:active {
  color: var(--token-ui-button-default-color-active);
  background: var(--token-ui-button-default-background-active);
}
.button:active .icon {
  background: var(--token-ui-button-default-color-active);
}
/* 
 * PRIMARY
 * */
.button--type-primary,
.hs-button.primary {
  color: var(--token-ui-button-primary-color-link);
  background: var(--token-ui-button-primary-background-link);
  border: .1rem solid var(--token-ui-button-primary-border);
}
.button--type-primary .icon {
  background: var(--token-ui-button-primary-color-link);
}
.button--type-primary:hover,
.hs-button.primary:hover {
  color: var(--token-ui-button-primary-color-hover);
  background: var(--token-ui-button-primary-background-hover);
}
.button--type-primary:hover .icon {
  background: var(--token-ui-button-primary-color-hover);
}
.button--type-primary:active,
.hs-button.primary:active {
  color: var(--token-ui-button-primary-color-active);
  background: var(--token-ui-button-primary-background-active);
}
.button--type-primary:active .icon {
  background: var(--token-ui-button-primary-color-active);
}
/* 
 * SECONDARY
 * */
.button--type-secondary {
  color: var(--token-ui-button-secondary-color-link);
  background: var(--token-ui-button-secondary-background-link);
  border: .1rem solid var(--token-ui-button-secondary-border);
}
.button--type-secondary .icon {
  background: var(--token-ui-button-secondary-color-link);
}
.button--type-secondary:hover {
  color: var(--token-ui-button-secondary-color-hover);
  background: var(--token-ui-button-secondary-background-hover);
}
.button--type-secondary:hover .icon {
  background: var(--token-ui-button-secondary-color-hover);
}
.button--type-secondary:active {
  color: var(--token-ui-button-secondary-color-active);
  background: var(--token-ui-button-secondary-background-active);
}
.button--type-secondary:active .icon {
  background: var(--token-ui-button-secondary-color-active);
}

/* 
 * TERTIARY
 * */
.button--type-tertiary {
  color: var(--token-ui-button-tertiary-color-link);
  background: var(--token-ui-button-tertiary-background-link);
  border: .1rem solid var(--token-ui-button-tertiary-border);
}
.button--type-tertiary .icon {
  background: var(--token-ui-button-tertiary-color-link);
}
.button--type-tertiary:hover {
  color: var(--token-ui-button-tertiary-color-hover);
  background: var(--token-ui-button-tertiary-background-hover);
}
.button--type-tertiary:hover .icon {
  background: var(--token-ui-button-tertiary-color-hover);
}
.button--type-tertiary:active {
  color: var(--token-ui-button-tertiary-color-active);
  background: var(--token-ui-button-tertiary-background-active);
}
.button--type-tertiary:active .icon {
  background: var(--token-ui-button-tertiary-color-active);
}

/* 
 * TERTIARY
 * */
.button--type-quaternary {
  color: var(--token-ui-button-quaternary-color-link);
  background: var(--token-ui-button-quaternary-background-link);
  border: .1rem solid var(--token-ui-button-quaternary-border);
}
.button--type-quaternary .icon {
  background: var(--token-ui-button-quaternary-color-link);
}
.button--type-quaternary:hover {
  color: var(--token-ui-button-quaternary-color-hover);
  background: var(--token-ui-button-quaternary-background-hover);
}
.button--type-quaternary:hover .icon {
  background: var(--token-ui-button-quaternary-color-hover);
}
.button--type-quaternary:active {
  color: var(--token-ui-button-quaternary-color-active);
  background: var(--token-ui-button-quaternary-background-active);
}
.button--type-quaternary:active .icon {
  background: var(--token-ui-button-quaternary-color-active);
}

.button--fullwidth {
  display: block;
  text-align: center;
}

.button--icon-left {
  flex-direction: row-reverse;
}
.button--icon-right {
  flex-direction: row;
}

.button--icon-animated {
   
}
.button--icon-animated .icon {
  transform: translateX(0);
}
.button--icon-animated.button--icon-left:hover .icon {
  transform: translateX(-.5rem);
}
.button--icon-animated.button--icon-right:hover .icon {
  transform: translateX(.5rem);
}


.button .label {
  display: inline-flex;
  gap: .4rem; 
} 

.button--type-small {

}

.button--disabled {
  opacity: .2; 
}

.button.button--mobile-icon .icon {
  display: inline-flex;
}
.button.button--mobile-icon .label,
.button .label .button--mobile-hide{
  display: none;
}

@media screen and (min-width: 48em) {
  .button.button--mobile-icon .icon {
    display: none;
  }
  .button.button--mobile-icon .label,
  .button .label .button--mobile-hide {
    display: inline-flex;
  }
}

.button--languageswitcher:has(.button--languageswitcher-country) {
  flex-direction: column;
  padding: .2rem 0 0 0;
}

.button--languageswitcher:has(.button--languageswitcher-country) .button--languageswitcher-lang {
  padding: 0 1.2rem .2rem; 
}
.button--languageswitcher-country {
  font-variation-settings: "wght" 600;
  font-size: .8rem;
  background: var(--token-ui-button-primary-background-hover);
  width: 100%;
  text-align: center;
  color: var(--token-ui-button-primary-background-link);
}
.stack {
  aspect-ratio: var(--stack-ratio, 1/1);
  position: relative;
}

.stack__item {
  aspect-ratio: var(--stack-ratio);
  bottom: 0;
  box-shadow: 0 .25rem 1rem rgba(45,44,43,.5);
  border-radius: .4rem;
  height: 90%;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  transform-style: preserve-3d;
}
.stack__item:nth-child(1) {
  transform:
      rotate(-6deg)
      translateX(-3rem);
}
.stack__item:nth-child(2) {
  transform:
      rotate(1deg);
}
.stack__item:nth-child(3) {
  transform:
      rotate(6deg)
      translateX(3rem);
}


@supports (animation-timeline: view()) {
  .stack__item {
    animation-timeline: view();
    animation-name: stack-item-02;
    animation-fill-mode: both;
    animation-duration: 1ms 
  }
  .stack__item:nth-child(1) {
    animation-name: stack-item-01;
  }
  .stack__item:nth-child(3) {
    animation-name: stack-item-03;
  }
}
@keyframes stack-item-01 {
  0% {
    transform: 
      rotate(-0deg)
      translateX(-0.5rem);
  }
  60% {
    transform:
      rotate(-5deg)
      translateX(-3rem);
  }
}
@keyframes stack-item-02 {
  0% {
    transform: 
      rotate(0deg);
  }
  60% {
    transform:
      rotate(1deg);
  }
}
@keyframes stack-item-03 {
  0% {
    transform: 
      rotate(0deg)
      translateX(0.5rem);
  }
  60% {
    transform:
      rotate(6deg)
      translateX(3rem);
  }
}
.media {
  width: 100%;
  line-height: 0;
  height: 100%;

  
/*  display: flex; */
}

.media:has( + .editable) {
  height: auto; 
}

.media--fullwidth {
}
.media--header { 
  
/* fixed height instellen + coveren */
} 

.media--align-left {
  justify-content: flex-end;
}
.media--align-right {
  justify-content: flex-start;
}



@media screen and (min-width: 48em) {
  .media--spacer-left picture {
    margin-left: 2.8rem;
  }
  .media--spacer-right picture {
    margin-right: 2.8rem; 
  }
}
.media--video .media__container {
  background: var(--token-ui-video-background);
}
.media--image picture,
.media--video .media__container {
  border-radius: .8rem;
  overflow: hidden;
/*  width: 100%; */
}

.media--video.media--video-legacy,
.media--video.media--video-legacy .media__container {
  max-height: 90vh; 
}
.media--video.media--video-legacy .media__container iframe {
  height: 100%;
  width: 100%;
  max-height: 90vh;
}
.media--video.video--fullscreen .media__container {
  border-radius: 0; 
}

.box .media--image picture {
  border-radius: .8rem;
}

.stack .media--image picture {
  border-radius: .4rem;
}

.media--image.media--is-graph picture {
  border-radius: 0;
}

.media--image.media--header picture,
.media--video.media--header .media__container {
  border-top-left-radius: 0; 
  border-top-right-radius: 0; 
}
.media--image.media--fullwidth picture,
.media--video.media--fullwidth .media__container {
  border-radius: 0;
}


@media screen and (max-width: 48em) {
  .media--flat-l .media picture {
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
  }
  .media--flat-t .media picture {
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
  }
  .media--flat-r .media picture {
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
  }
  .media--flat-b .media picture {
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
  }
}
@media screen and (min-width: 48em) {
  .md\:media--flat-l .media picture {
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
  }
  .md\:media--flat-tl .media picture {
    border-top-left-radius: 0; 
  }

  .md\:media--flat-t .media picture {
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
  }
  .md\:media--flat-r .media picture {
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
  }
  .md\:media--flat-b .media picture {
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
  }
}
@media screen and (min-width: 80em) {
  .xl\:media--flat-l .media picture {
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
  }
  .xl\:media--flat-t .media picture {
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
  }
  .xl\:media--flat-r .media picture {
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
  }
  .xl\:media--flat-b .media picture {
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
  }
}

.media__copyright,
.media__description {
  font-size: 1.2rem;
  line-height: 150%;
  display: block;
}

.media__copyright {
  position: absolute;
  right: 0; 
  bottom: 0;
  border-top-left-radius: .4rem; 
  background: var(--token-ui-photo-copyright-background);
  user-select: none;
  text-align: right;
  padding: .5rem;
  color: var(--token-ui-photo-copyright-text);
}

.media__description {
  text-align: left;
  padding: 1rem 0 0;
}

.media--image picture {
  display: block;
  position: relative;
  aspect-ratio: auto;
  aspect-ratio: var(--aspect);
}

.media--image.media--textcontain picture {
  width: 100%;
}
/*,
.media--image.media--textcontain picture*/
/*.media--image.media--header picture, */
.media--image.media--textcover picture {
  aspect-ratio: unset; 
}
.media--image.media--thumbnail picture {
  aspect-ratio: 4/3; 
}
.media--image.media--thumbnail-75 picture {
  aspect-ratio: 6/3; 
}
.media--image.media--linkblock picture {
  aspect-ratio: 5/2; 
}

.media--image.media--square picture {
  aspect-ratio: 1/1; 
}
.media--image.media--person picture {
  aspect-ratio: 384/245; 
}
.media--image.media--personcircle picture {
  aspect-ratio: 1; 
  border-radius: 50%;
  margin: 0 auto;
  width: 10rem;
}
.media--image.media--linkcard picture {
  aspect-ratio: 2/1; 
  --aspect-ratio: 2/1;
}

.media--image picture img {
  object-fit: cover;
  object-position: center; 
  object-position: 50% var(--position, 0%);
  display: block;
  width: 100%;
  height: 100%;
  
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.media--video {
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;

}

.media--image.media--textcontain picture img {
  object-fit: contain; 
  width: unset;
}
.media--image.media--textcontain.media--spacer-left picture img {
  object-position: 0% var(--position, 0%);
}
.media--image.media--textcontain.media--spacer-right picture img {
  object-position: 100% var(--position, 0%);
}

@media screen and (min-width: 48em) {
  .media--image.media--header {
    height: 40rem; 
  }
  .media--align-left,
  .media--align-right {
    display: flex;
  }
  .media--align-left.media--textcover,
  .media--align-right.media--textcover {
    flex-direction: column;
  }
  .media--image.media--header picture,
  .media--image.media--textcover picture {
    aspect-ratio: unset;    
  }
  .media--image.media--header picture,
  .media--image.media--textcover picture,
  .media--image.media--textcontain picture {
    height: 100%;
  }
  .media--image.media--header picture img,
  .media--image.media--textcover picture img,
  .media--image.media--textcontain picture img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .media--image.media--header picture img,
  .media--image.media--textcover picture img {
    left: 0; 
  }
}

.media__pointer {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  translate: -50% 50%;
}

.media__pointer:before,
.media__pointer:after {
   content: "";
    width: 3rem;
  aspect-ratio: 1;
  border: .1rem solid #FFF;

    border-radius: 50%;
    background: rgba(13, 43, 73,1);
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: animloader14 2s linear infinite;
    animation: animloader14 2s linear infinite;
  translate: -50% -50%;
}
.media__pointer:after {
     animation-delay: 1s; 
}
@keyframes animloader14 {
  0% {
    transform: scale(1);
    opacity: 0;
}
100% {

      transform: scale(0);
    opacity: 1;
} 
}

/*
.media--image picture {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  border-radius: .4rem;
    overflow: hidden;
  background: var(--token-color-neutral-04);
  aspect-ratio: auto;
  aspect-ratio: var(--aspect);
}
.media--minheight picture {
  
}



.media--image picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;


}
*/
/*
.media--image picture::after {
  background: linear-gradient(90deg, 
    transparent 0, 
    var(--token-color-neutral-10) 50%, 
    transparent 100%);
  position: absolute;
  
  
      animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderAnimate;
    animation-timing-function: linear;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  z-index: -1;
}
*/


@keyframes placeholderAnimate {
    0% {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(100%)
    }
}
.languageswitcher {

}

.languageswitcher--active {

}

.languageswitcher--active .languageswitcher__clickarea {
  z-index: 9000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  cursor:
  url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/close.svg) 4 12,
  auto;
}

.languageswitcher__inner {
  right: -100vw;
  max-width: 100vw;
  background: var(--token-color-neutral-04);
  transition: right 500ms;
  position: fixed;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 9001;
  cursor: auto;
  overflow-y: auto;
}

.languageswitcher--active .languageswitcher__inner {
  right: 0; 
}

.languageswitcher__options {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex-grow: 1;
  margin: 1.6rem;
}

.languageswitcher__country {
  order: 1;
  padding: 1.6rem;
  background: var(--token-color-neutral-00);
  border-radius: .8rem;
}

.languageswitcher__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .8rem;
  margin-bottom: .8rem;
  font-family: var(--token-font-family-secondary);
  font-size: 2rem;
}

.languageswitcher__country--current {
  order: 0;
}

.languageswitcher__languages {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: .8rem;
} 

.languageswitcher__language,
.languageswitcher__languages:hover .languageswitcher__language--current {
  padding: .4rem .8rem;
  border-radius: .4rem;
  text-decoration: none;
  background: transparent;
  border: .1rem solid var(--token-color-neutral-10);
  color: var(--token-color-neutral-100);
} 
.languageswitcher__language--current,
.languageswitcher__languages:hover .languageswitcher__language--current:hover,
.languageswitcher__language:hover {
  background: var(--token-color-neutral-10);
}

/* --------------------------------------------------
 * COMPONENTS > MAIN
 * -------------------------------------------------- */
.frontdoor {
  height: 100%; 
}

.frontdoor__content {
  
}

.frontdoor__content .languageswitcher__options {
  margin: 0; 
}

.frontdoor__background {

}

.frontdoor__background-image {
  object-fit: cover;
  height: 100%;
  width: 100%;
}



.frontdoor__welcome {
  position: relative;
  height: 3.6rem;
  margin-bottom: 2rem;
  text-shadow:0 0 2rem rgba(0,0,0,.35);
}

.frontdoor__welcome > span {
  text-wrap: nowrap;
  position: absolute;
  opacity: 0;
  animation: 15s ease 0s infinite welcome__fade;
}

.frontdoor__welcome > span:nth-child(1) {
  animation-delay: 0s;
}
.frontdoor__welcome > span:nth-child(2) {
  animation-delay: 5s;
}
.frontdoor__welcome > span:nth-child(3) {
  animation-delay: 10s;
}

@keyframes welcome__fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; }
}

@media screen and (min-width: 48em) {
  .frontdoor {
    position: relative; 
    flex-grow: 1;
    display: flex;
    justify-content: center;
  }
  .frontdoor__content {
    position: relative;
    z-index: 2; 
  }
  .frontdoor__background,
  .frontdoor__background-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-grow: 1;
  }
  .frontdoor__welcome {
    height: 5.6rem; 
      color: #FFF;
  margin-bottom: 4rem;

  }
}