@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);
  
  
  
  /* 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);
  
  /* 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);
}

/* --------------------------------------------------
 * 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);
}

@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.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.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) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 2rem;
  grid-auto-flow: dense;
}

.grid .grid:not(.grid--masonry):not(.grid--jobs) {
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
}


.grid.grid--jobs {
  grid-template-columns: 1fr;
}

.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--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 {
    grid-template-columns: 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-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-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);
  }
  .grid.grid--jobs {
    grid-template-columns: 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;   
}
.contentgrid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 48em) {
  .md\:contentgrid--2 {
    grid-template-columns: 1fr 1fr;
  }
  .md\:contentgrid--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 80em) {
  .xl\:contentgrid--2 {
    grid-template-columns: 1fr 1fr;
  }
  .xl\:contentgrid--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .xl\:contentgrid--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.slider {
}


.slider .slick-list {
  margin-left: -2rem; 
  margin-bottom: 2rem;
}
.slider .slick-list .slick-track {
  display: flex; 
  align-items: stretch;
  margin-left: 0;
} 
.slider .slick-list .slick-track .slick-slide {
  margin-left: 2rem; 
}

.slick-slide {
  opacity: 0;
  transition: all 250ms linear;
}
.slick-slide.slick-active {
  opacity: 1; 
}


.slider__nav {
  aspect-ratio: 1/1;
  width: 4rem;
  background: var(--token-ui-slider-background);
  border-radius: 2rem;
  position: absolute;
  bottom: 0%;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 250ms linear;
  cursor: pointer;
}
.slider__nav.slick-disabled {
  display: none !important; 
}

.slider__nav:hover {
  background-color: var(--token-ui-slider-background-hover); 
}

.slider__nav.slider__nav--next {
  right: 0;
  transform: translate(0%,-50%);
}

.slider__nav.slider__nav--prev {
  left: 0;
  transform: translate(0%,-50%); 
}
@media screen and (min-width: 48em) {
  .slider__nav {
    bottom: 50%; 
  }
  .slider__nav.slider__nav--next {
    transform: translate(50%,-50%);
  }

  .slider__nav.slider__nav--prev {
    transform: translate(-50%,-50%); 
  }
}

.slider__nav::before {
  content: '';
  display: inline-flex;
  aspect-ratio: 1/1;
  min-width: 1.6rem;
  -webkit-mask: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/arrow-left.svg) no-repeat;
  mask: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/arrow-left.svg) no-repeat;
  background: var(--token-ui-icon-color);  
}

.slider__nav.slider__nav--next::before {
  -webkit-mask: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/arrow-right.svg) no-repeat;
  mask: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/arrow-right.svg) no-repeat; 
}

.slider__dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 1rem;
  background: var(--token-ui-slider-background);
  padding: .5rem;
  border-radius: .8rem;
  line-height: .8rem;
}

.slider__dots > li {
  
}

.slider__dots > li > button {
  display: inline-block;
  height: .8rem;
  width: .8rem;
  padding: 0;
  border: .1rem solid var(--token-ui-slider-dot-background);
  line-height: .8rem;
  text-indent: -9999rem;
  transition: width 250ms ease;
  border-radius: .4rem;
  cursor: pointer;
}

.slider__dots > li.slick-active > button {
  width: 2rem; 
}
.banner {
  
}

.banner--float {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.banner__content {}
.banner__content--float {

}

@media screen and (min-width: 48em) {
  .banner--float {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .banner--float .container:first-child {
    margin-top: -2rem;
  }
  .banner--float .container:not(:first-child) {
    margin-top: -4rem;
  }
  .banner--float .container:last-child {
    margin-bottom: -2rem; 
  }
  .banner--float .banner__content {
    margin-block-start: 6rem;
    margin-block-end: 6rem;
  }
  @keyframes banner-media-reveal {
    from {
      transform: translateY(12rem);
    }
    to {
      transform: translateY(0rem);
    }
  }
  @supports (animation-timeline: view()) {
    .banner--float .banner__media {
      view-timeline-name: --banner-media-reveal;
      view-timeline-axis: block;
      animation: cubic-bezier(.06,.975,.195,.985) banner-media-reveal both;
      animation-timeline: --banner-media-reveal;
      animation-range: entry 0% cover 25%;
    }
  }
  
}

@media screen and (min-width: 80em) {
  .banner--float {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }

  
  .banner--float .container:first-child {
    margin-top: -10rem;
  }
  .banner--float .container:not(:first-child) {
    margin-top: -12rem;
  }
  .banner--float .container:last-child {
    margin-bottom: -10rem;
  }
  .banner--float .banner__content {
    margin-block-start: 14rem;
    margin-block-end: 14rem;
  }
  @keyframes banner-media-reveal {
    from {
      transform: translateY(12rem);
    }
    to {
      transform: translateY(0rem);      
    }
  }
  
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .8rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--token-color-neutral-00);
  cursor: pointer;
}

.hamburger__label {
  font-weight: 300;
}

.hamburger__inner {
  position: relative;
  height: .1rem;
  width: 2rem;
  background: var(--token-color-neutral-00);
  transition: background 250ms 0ms ease;
}
.hamburger.is-open .hamburger__inner {
  background: transparent;
}


.hamburger__inner:before,
.hamburger__inner:after {
  position: absolute;
  height: .1rem;
  width: 100%;
  content: '';
  display: block;
  background: var(--token-color-neutral-00);
  transition: top 250ms 250ms ease, transform 250ms 0ms ease;
}

.hamburger__inner:before {
  top: -.5rem; 
}
.hamburger__inner:after {
  top: .5rem; 
}
.hamburger:hover .hamburger__inner:before {
  top: -.6rem; 
}
.hamburger:hover .hamburger__inner:after {
  top: .6rem; 
}

.hamburger.is-open .hamburger__inner:before,
.hamburger.is-open .hamburger__inner:after {
  transition: top 250ms 0ms ease, transform 250ms 250ms ease; 
  top: 0;
}

.hamburger.is-open .hamburger__inner:before {
  transform: rotate(45deg); 
}
.hamburger.is-open .hamburger__inner:after {
  transform: rotate(-45deg); 
}
  
.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;
}

.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(.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(.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__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--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);
}
.badge {
  display: inline-flex;
  text-transform: uppercase;
  color: var(--token-ui-badge-color);
  background: var(--token-ui-badge-background);
  padding: .9rem 1.2rem .8rem;
  font-size: 1.2rem;
  border-radius: 2.8rem;
  font-variation-settings: "wght" 600;
  line-height: 1.2rem;
}

.badge--dark {
  color: var(--token-ui-badge-dark-color);
  background: var(--token-ui-badge-dark-background);
}
.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;
}
.safecontact {
  filter: blur(.4rem);
}
.safecontact--ready {
  filter: blur(0); 
  transition: filter 250ms ease;
} 

.box {
  padding: 2rem;
  border-radius: .8rem; 
  width: auto;
/*  background: var(--theme-background, var(--token-color-neutral-10));*/
/*  background: #f3f0ed;
  background: #f5f2f0;*/
/*  border-width: .1rem;
  border-style: solid;
  border-color: #e3e5de;*/
}

@media screen and (min-width: 48em) {  
  .box {
    margin: 0 -2rem;
  }
}

.editable .box * {
  color: inherit; 
}
.editable.box {
  /* width: calc(100% - 4rem); /* To check */
}
.box--inline {
  margin: 0; 
}
/* Got used too much
.box--inline-vertical {
  margin-top: 0;
  margin-bottom: 0;
}
*/

.box--filled {
  background: rgb(236,224,212);
  background: var(--theme-background, #e3e5de);
  color: var(--theme-color, var(--token-color-neutral-100));
}

.box--filled-blocks {
  background: var(--token-ui-box-blocks-background);
  border: .1rem solid var(--token-ui-box-blocks-border);
}

.box--filled-dark {
  background:  rgb(17,39,74);
  color: #FFF; 
}

.box--bigpadding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.box .box__content {
  height: 100%;
/*  height: calc(100% + 4rem);*/
}

/* Negative margings */
.box .box__content--m-t {
  margin-top: -2rem; 
}
.box .box__content--m-b {
  margin-bottom: -2rem; 
}
.box .box__content--m-l {
  margin-left: -2rem; 
}
.box .box__content--m-r {
  margin-right: -2rem; 
}
.box .box__content--h-1x {
  height: calc(100% + 2rem);
}
.box .box__content--h-2x {
  height: calc(100% + 4rem);
}

@media screen and (min-width: 48em) {
  .box .box__content--m-t {
    margin-top: 0; 
  }
  .box .box__content--m-b {
    margin-bottom: 0; 
  }
  .box .box__content--m-l {
    margin-left: 0; 
  }
  .box .box__content--m-r {
    margin-right: 0; 
  }
  .box .md\:box__content--m-t {
    margin-top: -2rem;
  }
  .box .md\:box__content--m-b {
    margin-bottom: -2rem; 
  }
  .box .md\:box__content--m-l {
    margin-left: -2rem; 
  }
  .box .md\:box__content--m-r {
    margin-right: -2rem; 
  }
  .box .md\:box__content--h-1x {
    height: calc(100% + 2rem);
  }
  .box .md\:box__content--h-2x {
    height: calc(100% + 4rem);
  }
  
  .box .md\:box__content--p-v {
    padding-top: 2rem; 
    padding-bottom: 2rem;
  }
}
@media screen and (min-width: 80em) {
  .box .md\:box__content--p-v {
    padding-top: 0; 
    padding-bottom: 0;
  }
  .box .xl\:box__content--p-v {
    padding-top: 2rem; 
    padding-bottom: 2rem;
  }
}
.device {
  overflow: hidden;
  width: 100%;
}
.device--teaser {
  aspect-ratio: 100/150;
}

.device__container {
  position: relative;
  box-sizing: border-box;
}

.device__inner {
  
}


.device--iphone .device__container {
  padding: 4.0% 4.4%;
  aspect-ratio: 432/886;
  overflow: hidden;
}

.device--iphone .device__inner {
  border-radius: 5%; 
}

.device--iphone .device__container:after {
  content: '';
  display: block;
  background-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/device/iphone-15pro-bluetitanium.png);
  background-position: top left;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.device__inner {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: #000;
}

.device__iphone-header {
  position: relative;
  container-type: inline-size;
}
.device__iphone-header img {
  width: 100%; 
}

.device__iphone-header .device__iphone-header-time {
  position: absolute;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  top: 11%;
  left: 11%;
  right: 75%;
  text-align: center;
  user-select: none;
}
@container (max-width: 250px) {
  .device__iphone-header .device__iphone-header-time {
    font-size: 1.1rem;
  }
}
@container (max-width: 200px) {
  .device__iphone-header .device__iphone-header-time {
    font-size: .9rem;
  }
}
@container (max-width: 175px) {
  .device__iphone-header .device__iphone-header-time {
    font-size: .8rem;
  }
}
@container (max-width: 150px) {
  .device__iphone-header .device__iphone-header-time {
    font-size: .7rem;
  }
}
.list {
  display: flex;
  gap: 2rem;
/*  margin: -2rem;  */
}

.list--vertical {
  flex-direction: column; 
  gap: 2rem;
}

.list--vertical > li:not(:last-child) {
  position: relative;
}


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

.list--autogrid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); 
}

@media screen and (min-width: 48em) {
  .list--grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 80em) {
  .list--grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 48em) {
  .list--horizontal {
    display: inline-flex;
    gap: .8rem;
    flex-wrap: wrap;
  }
  .align--center .list--horizontal {
    justify-content: center; 
  }
}
.list--divided {
}

.list--divided.list--vertical > li:not(:last-child):after {
  display: block;
  bottom: -1rem; 
  width: 100%;
  position: absolute;
  content: '';
  height: 1px;
  background: var(--token-ui-list-divider);
}

.list--legend {
}
.list--legend.list--horizontal {
  gap: 2rem; 
  flex-wrap: wrap;
  row-gap: 0rem;
}

.list--legend > li {
  display: flex;
  flex-direction: row;
  align-items: center;
  /*padding-left: 1.5rem;*/
}

.list--legend > li::before {
  content: '';
  display: inline-block;
  border-radius: 50%;
  height: 1rem;
  aspect-ratio: 1;
  background: var(--legend-color, red);
  margin-right: .5rem;
}
address ul {
  display: flex;
  flex-direction: column;
}

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

.address__item {

}

.address__item--map {
  margin-bottom: 1rem;
}

.address__item--action {
  margin-top: 1rem;
}
.blogcard {
  text-decoration: none;
  color: inherit;
  display: block;
  container: blogcard / inline-size;
  position: relative;
  margin: .1rem;
/*  padding: 2rem;  */
/*  border-radius: .8rem;*/
/*  border: .1rem solid var(--token-ui-blogcard-border); */
}

.blogcard__media {
  margin: -.1rem -.1rem 1rem; 
}



/*
.blogcard::after {
  position: absolute;
  content: '';
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: all 200ms ease;
  background: var(--token-ui-card-background);
  border-radius: .8rem;
  margin: -1rem;
  transform: scale(1);
}
.blogcard:hover:after {
  opacity: 1; 
  transform: scale(1.025);
}
*/
/*
.blogcard__media {
  position: relative; 
}
.blogcard--has-video .blogcard__media:after {
  content: '';
  display: block;
  width: 4rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #EEE;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




.blogcard__taglist {
  display: none;
}
*/
.blogcard__container {
  display: flex;
  flex-direction: column; 
  gap: 0rem;
}



.blogcard__media {
  
}

.blogcard__media .media {
  height: auto;
  margin-bottom: 1rem;
}

.blogcard__main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blogcard__title {
  
}

.blogcard__meta {
  display: flex;
  flex-direction: column;
  
  gap: 1rem;
}

.blogcard__date {
  display: none; 
}

.blogcard__content {
   
}


@container blogcard (min-width: 512px) {
  .blogcard__container {
    flex-direction: row; 
    gap: 2rem;
  }
  .blogcard__media {
    width: 20rem; 
    min-width: 20rem;
  }
  .blogcard__main {
    padding: 0;
  } 
  .blogcard__meta { 
    flex-direction: row; 
    align-items: center;
  }
}



/*
.blogcard {

  container-type: inline-size;
  
}

.blogcard > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  } 



@container (min-width: 100ch) {
  .blogcard > div {
    flex-direction: row;
  } 
  .blogcard div h3 {
    background: red; 
  }
}
*/
.calendar {
   
}

.calendar__container {
  /*
  margin: 0 -2rem 4rem;
  background: var(--token-ui-calendar-background); 
  border-radius: .4rem;
  padding: 2rem;
  */
}

.calendar:last-child { 
  margin-bottom: 0;
}

.calendar__header {
  margin-bottom: 2rem;
}

.calendar__month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .1rem;
  overflow: hidden;

}

@media screen and (max-width: 1400px) {
  .calendar__month {
    display: flex;
    flex-direction: column; 
  }
}

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .1rem;
  border-bottom: 1px solid var(--token-ui-calendar-border);
  padding: 0 0 .5rem;

  border-radius: .2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  
}t
.calendar__weekdays > div {
  padding: 0 1rem; 
}

@media screen and (max-width: 1400px) {
  .calendar__weekdays {
    display: none; 
  }
}

.calendar__day {
  position: relative;
  padding: 1rem;
}

.calendar__day:before,
.calendar__day:after {
  content: '';
  position: absolute;
  background: var(--token-ui-calendar-border); 
  z-index: 1; 
}
.calendar__day:after {
  inline-size: 100vw;
  block-size: .1rem;
  inset-inline-start: 0; 
  inset-block-start: -.1rem; 
}
.calendar__day:before {
  inline-size: .1rem;
  block-size: 500vh;
  inset-block-start: -50rem;
  inset-inline-start: -.1rem; 
}

.calendar__day:first-of-type {
  grid-column: var(--dayofweek); 
}

.calendar__day--has-events {
  
}

.calendar__day--today {
  background: var(--token-ui-calendar-today);
}
.calendar__day--today .calendar__timestamp {
  color: #FFF;  
}

@media screen and (max-width: 1400px) {
  .calendar__day {
    display: none; 
    border-width: 0 0 0 .25rem;
/*    padding: 1rem 0 1rem 1rem;*/
    margin: 0;
    border-radius: .2rem;
  }
  .calendar__day:not(.calendar__day--today) {
    padding: 1rem 0;    
  }
  .calendar__day--has-events:not(.calendar__day--history) {
    display: block;
  }
}

.calendar__day--history * {
  opacity: .4;
}

.calendar__timestamp {
  display: block;
/*  margin-bottom: 1rem;*/
  font-size: 2rem; 
  line-height: 1;
  font-weight: 300;
  color: var(--token-ui-calendar-timestamp);
/*  color: rgb(var(--color-brand-100));*/
  text-transform: lowercase;
}
.calendar__day--has-events .calendar__timestamp {
  margin-bottom: 1rem;
}

.calendar__timestamp span {
  display: none; 
}

@media screen and (max-width: 1400px) {
  .calendar__timestamp {

  }
  .calendar__timestamp span {
    display: inline; 
  }
}


.calendar__event {
  border-radius: .2rem;
  background: #FFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 1.4rem;
  border: 1px solid var(--token-ui-calendar-border);
  gap: 1rem;
  padding: 1rem;
}
.calendar__event:not(:last-child) {
  margin-bottom: 1rem;
}

.calendar__event--status-unavailable {
  opacity: .5;
}
 
.calendar__event-header {
  font-variation-settings: "wght" 500;  

  display: flex;
  flex-direction: row;
  justify-content: space-between;
/*  background: var(--token-ui-calendar-event-header-background);*/
}
  .calendar__event-time {
    
  }
  .calendar__event-capacity {
    flex-grow: 1;
    text-align: right;    
  }
  .calendar__event-location {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .calendar--events .calendar__event-location {
     
    align-items: flex-start;
  }
@media screen and (max-width: 1400px) {
  .calendar__event-location {
    flex-direction: row; 
    gap: .5rem;
  }
}
.calendar__event-body {
  font-variation-settings: "wght" 500;
}
.calendar__event-footer {
  border-top: 1px solid var(--token-ui-calendar-border);
  padding: 1rem 0 0;
}
/* tijdelijk */
.calendar__event-link {
  color: inherit;
}
.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);
  }
}
.stacker {
  list-style: none;
}

@supports (animation-timeline: view()) {
  @media screen and (min-width: 48em) {
    .stacker__item {
      position: sticky;
      top: 2rem;
    } 
  }
}

@media screen and (min-width: 48em) {
  .stacker__item {
    top: calc(var(--token-site-header-height) + 2rem);
  }
  
}


.stacker__item:nth-child(1) { --index: 1; }
.stacker__item:nth-child(2) { --index: 2; }
.stacker__item:nth-child(3) { --index: 3; }
.stacker__item:nth-child(4) { --index: 4; }
.stacker__item:nth-child(5) { --index: 5; }
.stacker__item:nth-child(6) { --index: 6; }
.stacker__item:nth-child(7) { --index: 7; }
.stacker__item:nth-child(8) { --index: 8; }
.stacker__item:nth-child(9) { --index: 9; }
.stacker__item:nth-child(10) { --index: 10; }
.stacker__item:nth-child(11) { --index: 11; }
.stacker__item:nth-child(12) { --index: 12; }
.stacker__item:nth-child(13) { --index: 13; }
.stacker__item:nth-child(14) { --index: 14; }
.stacker__item:nth-child(15) { --index: 15; }
.stacker__item:nth-child(16) { --index: 16; }
.stacker__item:nth-child(17) { --index: 17; }
.stacker__item:nth-child(18) { --index: 18; }
.stacker__item:nth-child(19) { --index: 19; }
.stacker__item:nth-child(20) { --index: 20; }
.stacker__item:nth-child(21) { --index: 21; }
.stacker__item:nth-child(22) { --index: 22; }
.stacker__item:nth-child(23) { --index: 23; }
.stacker__item:nth-child(24) { --index: 24; }
.stacker__item:nth-child(25) { --index: 25; }
.stacker__item:nth-child(26) { --index: 26; }
.stacker__item:nth-child(27) { --index: 27; }
.stacker__item:nth-child(28) { --index: 28; }
.stacker__item:nth-child(29) { --index: 29; }
.stacker__item:nth-child(30) { --index: 30; }

@supports (animation-timeline: view()) {
  @media screen and (min-width: 48em) {
  @keyframes scale {
	  to {
      filter: blur(calc(2px * var(--reverse-index)));
    opacity: calc(0.05 * var(--reverse-index));
			transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index))));        
		}
	}

  .stacker {
	  view-timeline-name: --stacker-scroll;
  }

  .stacker__item {
    --index0: calc(var(--index) - 1); /* 0-based index */
		--reverse-index: calc(var(--stacker-length) - var(--index0)); /* reverse index */
		--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
        
		--start-range: calc(var(--index0) / var(--stacker-length) * 100%);
		--end-range: calc((var(--index)) / var(--stacker-length) * 100%);

		animation: linear scale forwards;
		animation-timeline: --stacker-scroll;
		animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
	
    }
  }
}
.listblock {
  counter-reset: listblockCounter;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}

.listblock__item { 
  counter-increment: listblockCounter;
  display: grid;
  position: relative;
}

.listblock--horizontal {
  
} 

@media screen and (min-width: 48em) {
  .listblock--horizontal {
    flex-direction: row; 
  }
}

.listblock--boxed .listblock__item {
  grid-template-columns: 4rem auto;
}

.listblock--circle .listblock__item {
  grid-template-columns: 5rem auto;
}

.listblock__item .listblock__indicator {
  content: ''; 
  color: var(--theme-color, var(--token-ui-listblock-counter-color));
}

.listblock__content {
  z-index: 1;
}

.listblock--circle .listblock__indicator { 
  background-color: var(--theme-background, var(--token-ui-listblock-counter-background));
  aspect-ratio: 1;
  width: 3rem;
  border-radius: 1.5rem;
  margin-top: -.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "wght" 400;
}



.listblock--boxed .listblock__indicator {
  font-size: 6rem;
  font-variation-settings: "wght" 600;
  text-align: left;
}
.listblock--boxed  .listblock__content {
  padding: 2rem;
  background: var(--token-ui-listblock-background);
  border-radius: .8rem;
  width: calc(100% - 4rem);
}


.listblock--horizontal {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr;
  border: .1rem solid var(--token-ui-listblock-horizontal-border);
  border-radius: .8rem;
}
.listblock--horizontal .listblock__item {
  padding: 2rem;
  gap: 2rem;
}
.listblock--horizontal .listblock__item:not(:last-child) {
  border: .1rem solid var(--token-ui-listblock-horizontal-border);
  border-width: 0 0 .1rem 0;
}

@media screen and (min-width: 48em) { 
  .listblock--boxed .listblock__item {
    grid-template-columns: 8rem auto;
  }
  .listblock--boxed .listblock__indicator {
    width: 8rem;
    font-size: 14rem;
    line-height: 1; 
  }
  .listblock--horizontal {
    grid-template-columns: 1fr;
  }
  .listblock--horizontal:has(.listblock__item:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
  .listblock--horizontal:has(.listblock__item:nth-child(3)) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .listblock--horizontal .listblock__item {
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: subgrid;
  }
  .listblock--horizontal .listblock__item:not(:last-child) {
    border-width: 0 .1rem 0 0;
  }
}

.listblock--type-1 .listblock__indicator::before {
  content: counter(listblockCounter, decimal);
}

.listblock--type-A .listblock__indicator::before {
  content: counter(listblockCounter, upper-latin);
}

.listblock--type-a .listblock__indicator::before {
  content: counter(listblockCounter, lower-latin);
}

.listblock--type-checkmark .listblock__indicator::after {
  -webkit-mask: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/check.svg) no-repeat;
  mask:  url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/check.svg) no-repeat;
  background: var(--theme-color, var(--token-ui-listblock-counter-color)); 
  content: block;
  aspect-ratio: 1;
  content: '';
  width: 1.6rem;
}


@supports (animation-timeline: view()) {
  @keyframes listblock-reveal {
    from {
      opacity: .25;
      transform: translateX(4rem);
    }
    to {
      opacity: 1;
      transform: translateX(0rem);      
    }
  }
  .listblock__indicator {
	  view-timeline-name: --listblock-reveal;
    view-timeline-axis: block;
    animation: ease listblock-reveal both;
    animation-timeline: --listblock-reveal;
    animation-range: entry 0% cover 25%;
  }
}






/*


.listblock--circle .listblock__item::before {
  background: var(--token-ui-listblock-counter);
  aspect-ratio: 1/1;
  width: 3rem;
  border-radius: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -.5rem;
  content: '';
}

.listblock--type-1 .listblock__item::before,
.listblock--type-A .listblock__item::before,
.listblock--type-a .listblock__item::before {
  font-size: 14rem;
  line-height: 1;
  font-variation-settings: "wght" 600;
  text-align: left;
  width: 8rem;
  color: var(--theme-background, var(--token-ui-listblock-counter));
}



.listblock--type-checkmark .listblock__item::before {
  background: var(--theme-background, var(--token-ui-listblock-counter)) url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/check.svg) no-repeat center center;
}


*/
.linkblock__container {
   
}

.linkblock__container--high {
  margin-top: -8rem; 
}

.linkblock__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.linkblock__grid--divided {
  grid-gap: 2rem; 
} 

@media screen and (min-width: 48em) {
  .linkblock__grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  }
  /*
  .linkblock__grid--divided { margin-left: -2rem; margin-right: -2rem; }
  */
}

.linkblock__grid:not(.linkblock__grid--divided),
.linkblock__grid--divided .linkblock__item {
  background: var(--token-ui-linkblock-background);
  border: .1rem solid var(--token-ui-linkblock-border); 
  border-radius: .8rem;
  padding: 2rem;
}

#main > span > div:has(.section.hero) + div:has(.section.linkblock) .section {
  margin-top: -8rem; 
  position: relative;
  z-index: 1;
}

#main > span > div:has(.section.hero) + div:has(.section.linkblock) .section .linkblock__grid:not(.linkblock__grid--divided) {
  border: none; 
}

.linkblock__item {
  color: inherit;
  text-decoration: none;
}

.linkblock__title {
  display: flex;
  flex-direction: row;
  font-variation-settings: "wght" 500, "slnt" 0;
}

.linkblock__content {
  
}

.linkblock__picture {
  margin: -2rem -2rem 0;
}

/*
.linkblock__item {
  text-decoration: none;
  
  padding: 2rem;
  border-radius: .8rem;
  border: .1rem solid #ededed;
  background: #f7f7f7;
  
  display: grid;
  grid-gap: 1rem;
}

@media screen and (min-width: 48em) {
  .linkblock__item {
    grid-template-rows: subgrid;
    grid-row: 1/3; 
  }
  .linkblock__grid:has(.linkblock__item .linkblock__picture) .linkblock__item {
    grid-row: 1/4;
  }
}

.linkblock__grid:has(.linkblock__item .linkblock__picture) .linkblock__picture {
  order: 1; 
}
.linkblock__grid:has(.linkblock__item .linkblock__picture) .linkblock__title {
  order: 2; 
}
.linkblock__grid:has(.linkblock__item .linkblock__picture) .linkblock__content {
  order: 3; 
}

.linkblock__item:hover {
  background: #ededed;
}


*/
.map {
  border-radius: .8rem;
  overflow: hidden;
  min-height: 20rem;
  background: var(--token-ui-map-background);
  position: relative;
  height: var(--height, auto);
  min-height: var(--minheight, auto);
  aspect-ratio: var(--aspect, auto);
}

.map .map__container {
  height: 100%;
  width: 100%;
}

.gm-style iframe + div { 
  border-color: var(--token-ui-map-outline) !important; 
  border-width: .1rem !important;
  border-radius: .8rem;
}

.form {
  background: var(--token-ui-form-background);
  padding: 2rem;
  border-radius: .8rem;
  min-height: 25dvh;
}
/* --------------------- DEFAULT --------------------- */
.form form > fieldset,
.form form > .form-columns-0,
.form form > .form-columns-1,
.form form > .form-columns-2,  
.form form .hs-dependent-field {
  display: flex;
  flex-direction: column;
  max-width: unset;
  gap: 2rem;
}

@media screen and (min-width: 48em) {
  .form form > fieldset,
  .form form > .form-columns-0,
  .form form > .form-columns-1,
  .form form > .form-columns-2 { 
    flex-direction: row;
  }
}

.form form > fieldset:not(:last-child),
.form form > div:not(:last-child):not(.hs_submit) {
  margin-bottom: 1rem;
}
.form form > fieldset:has(div[style*="display:\ none"]) {
  margin-bottom: 0; 
}

/* --------------------- RICHTEXT --------------------- */
.hs-richtext {
}
.hs-richtext h2 {
  color: var(--token-ui-text-highlight);
 
}
/* --------------------- RICHTEXT (not first) --------------------- */
.form form > fieldset:has(.hs-richtext):not(:first-child) {
  margin-top: 4rem;
}
/* --------------------- RECAPTCHA --------------------- */
.form form > .hs_recaptcha {
  filter: grayscale(1);
}
/* --------------------- SUBMIT --------------------- */
.form form > .hs_submit {
  margin-top: 2rem; 
}




.form form > fieldset > div {
  flex-grow: 1;
  width: auto !important;
  display: flex;
  flex-direction: column;
}

.hs-form-required {
  visibility: hidden;
    position: relative;
}
.hs-form-required::after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--token-ui-form-input-required-color);
}
html[lang='nl'] .hs-form-required::after {
  content: '(Vereist)'; 
}
html[lang='fr'] .hs-form-required::after {
  content: '(Obligatoire)'; 
}
html[lang='en'] .hs-form-required::after {
  content: '(Required)'; 
}






.hs-form-field {
  
}

.hs-form-field label {
  font-size: 1.4rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: .8rem;
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
}


.legal-consent-container .hs-form-booleancheckbox-display > span {
  margin-left: 0 !important; 
}
.legal-consent-container .hs-form-booleancheckbox-display > span:has(.hs-form-required) .hs-form-required {
  margin-left: .8rem;
}




.hs-form-field .input {
  margin-right: 0 !important;
}


.hs-submit .actions .hs-button {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}
@media screen and (min-width: 48em) {
  .hs-submit .actions .hs-button {
    width: auto;
    text-align: left;
  }
}


/* --------------------- INPUT, SELECT --------------------- */

.hs-form-field .input input[type='text'],
.hs-form-field .input input[type='tel'],
.hs-form-field .input input[type='email'],
.hs-form-field .input textarea {
  font-size: 1.6rem;
  width: 100% !important;
  box-sizing: border-box;
  padding: 1rem !important;
  border-radius: .4rem;
  border: .1rem solid var(--token-ui-form-input-border-default);
  outline-offset: 0rem;
  transition: all 150ms ease;
}
.hs-form-field .input textarea {
  min-height: 10rem;
  line-height: 150%;
}
.hs-form-field .input input[type='text']:hover,
.hs-form-field .input input[type='tel']:hover,
.hs-form-field .input input[type='email']:hover,
.hs-form-field .input textarea:hover {
  border-color: var(--token-ui-form-input-border-hover);
}
.hs-form-field .input input[type='text']:focus,
.hs-form-field .input input[type='tel']:focus,
.hs-form-field .input input[type='email']:focus,
.hs-form-field .input textarea:focus {
  outline: .2rem solid var(--token-ui-form-input-outline-focus);
  outline-offset: .1rem;
} 
.hs-form-field .input input[type='text'].error,
.hs-form-field .input input[type='tel'].error,
.hs-form-field .input input[type='email'].error,
.hs-form-field .input input[type='text'].invalid,
.hs-form-field .input input[type='tel'].invalid,
.hs-form-field .input input[type='email'].invalid { 
  border-color: var(--token-ui-form-input-border-warning);
}
.hs-form-field .hs-error-msgs {
  
}
/* --------------------- INPUT > ZIP --------------------- */
.hs-form-field.hs_zip .input input[type='text'] {
  width: 25% !important; 
}

/* --------------------- SELECT --------------------- */
.hs-form-field .input select {
  -webkit-appearance: none;
  cursor: pointer;    
  font-size: 1.6rem;
  width: 100% !important;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: .4rem;
  background-color: var(--token-ui-form-select-background-default);
  border: .1rem solid var(--token-ui-form-select-border-default);
  transition: all 150ms ease;
}

.hs-form-field .input:has(select) {
  position: relative;
}
.hs-form-field .input:has(select):after {
  position: absolute;
  width: .6rem;
  height: .6rem;
  border: .1rem solid var(--token-ui-form-select-arrow-color);
  content: "";
  top: 50%;
  right: 1.6rem;
  transform: rotate(45deg) translate(-50%,-50%);
  border-width: 0 .1rem .1rem 0;
  border-bottom-right-radius: .1rem;
}
.hs-form-field .input:has(select:active):after {
  border-width: .1rem 0 0 .1rem;
  border-top-left-radius: .1rem;
}

.hs-form-field .input select:hover {
  background-color: var(--token-ui-form-select-background-hover);
  border: .1rem solid var(--token-ui-form-select-border-hover);
}
.hs-form-field .input select:focus {
  background-color: var(--token-ui-form-select-background-focus);
  border-color: var(--token-ui-form-select-border-focus);
  outline: .2rem solid var(--token-ui-form-select-outline-focus);
  outline-offset: .1rem;  
}
.hs-form-field .input select.error,
.hs-form-field .input select.invalid {
  border-color: var(--token-ui-form-select-border-warning);
}
.hs-form-field .input select:valid {
  background-color: var(--token-ui-form-select-background-filled);
  border-color: var(--token-ui-form-select-border-filled);
}

/* --------------------- CHECKBOX --------------------- */
.hs-form-field .input input[type='checkbox'] {
  appearance: none;
  cursor: pointer;
  width: 1.6rem !important;
  height: 1.6rem;
  display: inline-flex;
  border-radius: .4rem;
  flex-shrink: 0;
  background-color: var(--token-ui-form-checkbox-background-default);
  border: .1rem solid var(--token-ui-form-checkbox-border-default);
  justify-content: center;
  align-items: center;
  transition: all 150ms ease;
}
.hs-form-field .input input[type='checkbox']:hover {
  border-color: var(--token-ui-form-checkbox-border-hover);
  background-color: var(--token-ui-form-checkbox-background-hover); 
}
.hs-form-field .input input[type='checkbox']:focus {
  border-color: var(--token-ui-form-checkbox-border-focus);
  background-color: var(--token-ui-form-checkbox-background-focus); 
  outline: .2rem solid var(--token-ui-form-checkbox-outline-focus);
  outline-offset: .1rem;  
}
.hs-form-field .input input[type='checkbox']:checked {
  border-color: var(--token-ui-form-checkbox-border-checked);
  background-color: var(--token-ui-form-checkbox-background-checked); 
}
.hs-form-field .input input[type='checkbox']:checked::after {
  content: '';
  display: inline-flex;
  aspect-ratio: 1/1;
  min-width: 1.2rem;
  -webkit-mask: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/check.svg) no-repeat;
  mask: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/check.svg) no-repeat;
  mask-size: 1.2rem 1.2rem;
  background: var(--token-ui-form-radio-dot-background-checked); 
}

/* --------------------- RADIO --------------------- */
.hs-form-field .input input[type='radio'] {
  appearance: none;
  cursor: pointer;
  width: 1.6rem !important;
  height: 1.6rem;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--token-ui-form-radio-background-default);
  border: .1rem solid var(--token-ui-form-radio-border-default);
  justify-content: center;
  align-items: center;
  transition: all 150ms ease;
}
.hs-form-field .input input[type='radio']:hover {
  border-color: var(--token-ui-form-radio-border-hover);
  background-color: var(--token-ui-form-radio-background-hover);  
}
.hs-form-field .input input[type='radio']:focus {
  border-color: var(--token-ui-form-radio-border-focus);
  background-color: var(--token-ui-form-radio-background-focus); 
  outline: .2rem solid var(--token-ui-form-radio-outline-focus);
  outline-offset: .1rem;  
}
.hs-form-field .input input[type='radio']:checked {
  border-color: var(--token-ui-form-radio-border-checked); 
  background-color: var(--token-ui-form-radio-background-checked); 
}
.hs-form-field .input input[type='radio']:checked::after {
  display:block;
  content: '';
  width: .8rem;
  height: .8rem;
  border-radius: .4rem;
  background: var(--token-ui-form-radio-dot-background-checked);
}

/* --------------------- MULTI-CONTAINER --------------------- */


.hs-form-field .multi-container {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: .1rem solid var(--token-ui-form-multicontainer-border-default);
  grid-template-columns: 1fr;
  border-radius: .4rem;
}
@media screen and (min-width: 48em) {
  .hs-form-field .multi-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 80em) {
  .hs-form-field .multi-container:has(>li:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
  .hs-form-field .multi-container:has(>li:nth-child(3)) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hs-form-field .multi-container:has(>li:nth-child(4)) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .hs-form-field .multi-container:has(>li:nth-child(5)),
  .hs-form-field .multi-container:has(>li:nth-child(6)) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hs-form-field .multi-container:has(>li:nth-child(7)),
  .hs-form-field .multi-container:has(>li:nth-child(8)) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


/* --------------------- MULTI-CONTAINER for OFFICE SELECTOR --------------------- */
.hs-form-field.hs_afpraak_relatiebeheerder___kantoor .multi-container li:last-child {
  border-top: .1rem solid var(--token-ui-form-multicontainer-border-default);
  grid-column: 1/1;
  padding-top: 1rem;
}
@media screen and (min-width: 48em) {
  .hs-form-field.hs_afpraak_relatiebeheerder___kantoor .multi-container li:last-child {
    grid-column: 1/4;
  }
}
@media screen and (min-width: 80em) {
  .hs-form-field.hs_afpraak_relatiebeheerder___kantoor .multi-container li:last-child {
    grid-column: 1/5;
  }
}

/* --------------------- ERROR MESSAGES --------------------- */
.hs-error-msgs,
.hs_error_rollup .hs-error-msgs {
  margin: .8rem 0 0;
  font-size: 1.4rem;
  color: var(--token-ui-form-messages-warning-color);
}
.hs-fieldtype-booleancheckbox .hs-error-msgs {
  margin-left: 2.4rem;
}

.hs-error-msgs > li > .hs-error-msg,
.hs_error_rollup .hs-error-msgs > li > label {
  background: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/form-warning.svg) left center no-repeat;
  padding-left: 2rem;
}



.legal-consent-container .hs-error-msgs label {
  color: var(--token-ui-form-messages-warning-color) !important;
}




/*

input[type="checkbox"] {
  height: 1.6rem;
  width: 1.6rem;
  border: .1rem solid var(--token-ui-form-input-border-default);
}

input[type="checkbox"][disabled="disabled"] {
  background: red; 
}
*/
.card {
  border-radius: .4rem;
  overflow: hidden;
  
  border: .1rem solid var(--token-ui-card-border); 
  background: var(--token-ui-card-background);
  
  position: relative;
  display: block;
}

.card--address {
  padding: 2rem;
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.2);
  border: 0;
  color: #FFF;
} 

.card--sidebar {
  padding: 2rem; 
}



.card--person {
  padding: 2rem;
  display: flex;
  /*background: transparent;*/
  text-align: center;
  flex-direction: column;
  gap: 1rem;
}

.card--person > div {
  display: flex;
  flex-direction: column;
}

.card--link {
  padding: 2rem; 
  color: inherit;
  text-decoration: none;
}

.card--job {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-start;
}

.card--has-image {
  padding: 0; 
}

.card--office {
  padding: 2rem;
}

.card--office.card--active {
  border: 1px solid red;
}

.card--sticky {
  transition: top 500ms ease, bottom 500ms ease;
}

.card--sticky-top {
  position: sticky;
  top: calc(var(--token-site-header-height) + 2rem);
}

.js-scroll--down  .card.card--sticky-top {
  top: 2rem; 
}
.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__container iframe {
  height: 100%;
  width: 100%;
}
.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--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%)
    }
}
.video {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  justify-content: center;
  max-height: calc(100vh - var(--token-site-header-height));
}

.video__container {
  aspect-ratio: var(--video-aspect, 1920/1080);
  position: relative;
}

.video__player {
  position: absolute; 
  object-fit: cover;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.video__player iframe {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all 500ms 500ms ease;
}
.js-editor iframe,
.video--ready iframe,
.video--paused iframe,
.video--playing iframe,
.video-seeking iframe {
  opacity: 1; 
}


.video__player:before {
  position: absolute;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: transparent;
}

.video__poster {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: all 500ms ease;
}
.video--ready .video__poster {
  opacity: 1; 
}

.video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__controls {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  will-change: transform;
}

.video__controls-container {
  position: absolute;
  cursor: none;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 500ms ease;
}
.video--user-hover.video--user-active .video__controls-container {
  cursor: pointer; 
}

.video__controls-container:before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  background: linear-gradient(rgba(0,0,0,0.24), rgba(0,0,0,0.42), rgba(0,0,0,0.56));  
  transition: all 500ms ease;
} 

.video__controls-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 6.4rem;
  aspect-ratio: 1/1;
  margin: -3.2rem 0 0 -3.2rem;
  z-index: 2;
  transition: all 500ms ease;
  transform: translateY(2rem);
  opacity: 0;
}
.video__controls-center-container {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  translate: -50% -50%;
  scale: 1;
  transition: scale 250ms ease;
  
  background-color: var(--token-ui-video-controls);
    
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/pause.svg); 
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/pause.svg); 
}
.video--ready .video__controls-center-container,
.video--paused .video__controls-center-container {
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/play.svg);
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/play.svg);
}
.video--playing .video__controls-center-container {
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/pause.svg); 
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/pause.svg); 
}
.video__controls-container:active .video__controls-center-container {
  scale: .8; 
}
.video__controls-tray {
  z-index: 2;
  user-select: none;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  transition: all 500ms ease;
  transform: translateY(2rem);
  opacity: 0;
}
.video__controls-tray-container {
  margin: 0 auto;
  max-width: 48rem;
  padding: 0 2rem 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.video--ready .video__controls-center,
.video--user-hover .video__controls-center,
.video--user-hover .video__controls-tray {
  transform: translateY(0);
}
.video--ready .video__controls-center,
.video--user-active .video__controls-center,
.video--user-active .video__controls-tray,
.video--user-active .video__controls-container:before {
  opacity: 1;
}

.video__controls * {
  color: #FFF; 
}

.video__fullscreen {
  cursor: pointer;
  height: 1.6rem;
  aspect-ratio: 1/1;
  background-color: var(--token-ui-video-controls);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/expand.svg); 
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/expand.svg); 
}
.video--fullscreen .video__fullscreen {
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/collapse.svg); 
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/collapse.svg); 
}

.js-embedded .video__fullscreen {
/*  display: none;  */
}

.video__volume {
  width: 1.6rem; 
  position: relative;
}
.video__volume-icon {
  cursor: pointer;
  height: 1.6rem;
  aspect-ratio: 1/1;
  background-color: var(--token-ui-video-controls);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/volume-on.svg); 
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/volume-on.svg); 
}
.video__volume-icon[data-video-volume-icon="1"],
.video__volume-icon[data-video-volume-icon="2"],
.video__volume-icon[data-video-volume-icon="3"],
.video__volume-icon[data-video-volume-icon="4"],
.video__volume-icon[data-video-volume-icon="5"],
.video__volume-icon[data-video-volume-icon="6"],
.video__volume-icon[data-video-volume-icon="7"],
.video__volume-icon[data-video-volume-icon="8"],
.video__volume-icon[data-video-volume-icon="9"],
.video__volume-icon[data-video-volume-icon="10"],
.video__volume-icon[data-video-volume-icon="11"],
.video__volume-icon[data-video-volume-icon="12"],
.video__volume-icon[data-video-volume-icon="13"],
.video__volume-icon[data-video-volume-icon="14"],
.video__volume-icon[data-video-volume-icon="15"],
.video__volume-icon[data-video-volume-icon="16"],
.video__volume-icon[data-video-volume-icon="17"],
.video__volume-icon[data-video-volume-icon="18"],
.video__volume-icon[data-video-volume-icon="19"],
.video__volume-icon[data-video-volume-icon="20"],
.video__volume-icon[data-video-volume-icon="21"],
.video__volume-icon[data-video-volume-icon="22"],
.video__volume-icon[data-video-volume-icon="23"],
.video__volume-icon[data-video-volume-icon="24"],
.video__volume-icon[data-video-volume-icon="25"],
.video__volume-icon[data-video-volume-icon="26"],
.video__volume-icon[data-video-volume-icon="27"],
.video__volume-icon[data-video-volume-icon="28"],
.video__volume-icon[data-video-volume-icon="29"],
.video__volume-icon[data-video-volume-icon="30"],
.video__volume-icon[data-video-volume-icon="31"],
.video__volume-icon[data-video-volume-icon="32"],
.video__volume-icon[data-video-volume-icon="33"],
.video__volume-icon[data-video-volume-icon="34"],
.video__volume-icon[data-video-volume-icon="35"],
.video__volume-icon[data-video-volume-icon="36"],
.video__volume-icon[data-video-volume-icon="37"],
.video__volume-icon[data-video-volume-icon="38"],
.video__volume-icon[data-video-volume-icon="39"],
.video__volume-icon[data-video-volume-icon="40"],
.video__volume-icon[data-video-volume-icon="41"],
.video__volume-icon[data-video-volume-icon="42"],
.video__volume-icon[data-video-volume-icon="43"],
.video__volume-icon[data-video-volume-icon="44"],
.video__volume-icon[data-video-volume-icon="45"],
.video__volume-icon[data-video-volume-icon="46"],
.video__volume-icon[data-video-volume-icon="47"],
.video__volume-icon[data-video-volume-icon="48"],
.video__volume-icon[data-video-volume-icon="49"] {
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/volume-half.svg); 
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/volume-half.svg); 
}
.video__volume-icon[data-video-volume-icon="0"] {
  -webkit-mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/volume-off.svg); 
  mask-image: url(//25126500.fs1.hubspotusercontent-eu1.net/hubfs/25126500/raw_assets/public/dot-bank/img/icons/volume-off.svg); 
}

.video__volume-control {
  position: absolute;
  padding-bottom: 1rem;
  bottom: 100%;
  left: 50%;
  translate: -50%;
  height: 0;
  opacity: 0;
  transition: all 500ms ease;
}
.video__volume-container {
  cursor: pointer;
  width: .4rem;
  height: 100%;
  border-radius: .2rem;
  background: var(--token-ui-video-bar);
  margin-bottom: 1rem;
  position: relative;
}

.video--dragging .video__volume-control,
.video__volume:hover .video__volume-control {
  height: 5rem; 
  opacity: 1;
}
.video__volume-container:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1rem;
  right: -1rem;
  content: '';
  display: block; 
}
.video__volume-value {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--token-ui-video-controls);
  border-radius: inherit;
}
.video__volume-value:after {
  content: ''; 
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  height: .4rem;
  aspect-ratio: 1/1;
  background: var(--token-ui-video-bar-active);
  transform: translate(-50%, -50%);
  transition: all 250ms ease;
  border-radius: 50%;
}
.video--dragging .video__volume-value:after,
.video__volume-container:hover .video__volume-value:after {
  height: 1.4rem; 
}

.video__timeline {
  position: relative;
  background: #000;
  height: .4rem;
  width: 100%;
  cursor: pointer;
}
.video__timeline:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1rem;
  top: -1rem;
  content: '';
  display: block;
}

.video__timeline-container {
  border-radius: .2rem;
  width: 100%;
  height: 100%;
  background: var(--token-ui-video-bar);
}

.video__timeline-progress,
.video__timeline-preloaded {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: .2rem;
  background: var(--token-ui-video-bar-active);
  transition: width 50ms ease;
}
.video__timeline-progress:after {
  content: ''; 
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  height: .4rem;
  aspect-ratio: 1/1;
  background: var(--token-ui-video-controls);
  transform: translate(50%, -50%);
  transition: all 250ms ease;
  border-radius: 50%;
}
.video--seeking .video__timeline-progress:after,
.video__timeline:hover .video__timeline-progress:after {
  height: 1.4rem; 
}

.video__timeline-preloaded {
  background: var(--token-ui-video-bar-progress);
  transition: width 500ms ease;
}

.video__cookies {
  display: none; 
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #CCC;
  
  justify-content: center;
  align-items: center;
}

.video__container:has(.video__player iframe[data-cookieblock-src]) .video__player,
.video__container:has(.video__player iframe[data-cookieblock-src]) .video__controls {
  display: none;
}
.video__container:has(.video__player iframe[data-cookieblock-src]) .video__cookies {
  display: flex; 
}
.notification {
  padding: 1rem;
  margin: .8rem;
  border-width: .1rem;
  border-style: solid;
  border-radius: .4rem;
}

.notification--system {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

.notification--hubspot {
  border-style: dashed; 
}

.notification--warning {
  background: var(--token-ui-notification-warning-background);
  border-color: var(--token-ui-notification-warning-border);
}

.notification--info {
  background: var(--token-ui-notification-info-background);
  border-color: var(--token-ui-notification-info-border);
}

.notification--positive {
  background: var(--token-color-positive-10);
  border-color: var(--token-color-positive-100);
}

.notification--negative {
  background: var(--token-color-negative-10);
  border-color: var(--token-color-negative-100);
}
.js-editor {
  
}

/*
 * Optimizing suggestions
 * */

/*
 * Mark the problem
 * */
.js-editor .editable td:has([width]),
.js-editor .editable td:has([style]),
.js-editor .media.media--image picture:has(img[src*=".jpg"]),
.js-editor .media.media--image picture:has(img[alt=""]),
.js-editor .editable > div:not(.button-group):(.card),
.js-editor .editable p + h2,
.js-editor .editable *[style]:not(.icon),
.js-editor .editable span[data-ccp-parastyle],
.js-editor .editable span[data-contrast],
.js-editor .editable.editor--has-font-size,
.js-editor .editable.editor--has-font-family {
  border: .2rem dashed red;
  position: relative;
}


/*
 * Advice how to fix 
 * */
.js-editor .editable td:has([width])::after,
.js-editor .editable td:has([style])::after,
.js-editor .media.media--image picture:has(img[src*=".jpg"])::after,
.js-editor .media.media--image picture:has(img[alt=""])::after,
.js-editor .editable > div:not(.button-group):not(.card)::after,
.js-editor .editable p + h2::after,
.js-editor .editable span[data-ccp-parastyle]::after,
.js-editor .editable span[data-contrast]::after,
.js-editor .editable.editor--has-font-size::after,
.js-editor .editable.editor--has-font-family::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;
}
.js-editor .editable td:has([width])::after {
  content: '⚠️  Fixed widths in table will break on mobile, please remove via the code-editor';
}
.js-editor .editable td:has([style])::after {
  content: '⚠️  Remove all styling from the table to avoid issues on front-end';
}

.js-editor .media.media--image picture:has(img[src*=".jpg"])::after {
  content: '⚠️  Consider making it a .webp image';
}
.js-editor .media.media--image picture:has(img[alt=""])::after {
  content: '⚠️  ALT-tag is empty';
}
.js-editor .editable p + h2::after {
  content: '⚠️  Use separate modules for long text';
}
.js-editor .editable > div:not(.button-group):not(.card)::after {
  content: '⚠️  <div> can break the lay-out';
}
.js-editor .editable span[data-ccp-parastyle]::after,
.js-editor .editable span[data-contrast]::after {
  content: '⚠️  Check code for hidden <span>, etc.';
}
.js-editor .editable.editor--has-font-size::after {
  content: '⚠️  Disabled font-resizing. Small text? Use footnote-option';
}
.js-editor .editable.editor--has-font-family::after {
  content: '⚠️  Disabled font-family.';
}

.js-editor .media.media--image picture {
  background: red; 
  background: repeating-linear-gradient(
    45deg,
    red 0,
    red 1rem,
    white 1rem,
    white 2rem
  );
}

.editor {
  padding: 1rem;
  background: var(--token-color-neutral-10);
}

/* --------------------------------------------------
 * COMPONENTS > HEADER
 * -------------------------------------------------- */
/* ------------------------------
 *  Site header
 * ------------------------------ */

.site-header {
  background: var(--token-ui-header-background);
  height: var(--token-site-header-height);
  
  position: sticky;
  top: 0;
  z-index: 8000;
  transition: top 500ms ease;
}

.js-scroll--down .site-header {
  top: calc(var(--token-site-header-height) * -1);
}

.site-header__container {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*
.site-header__navigation,
.site-header__logo,
.site-header__actions {
  display: flex;
  flex-direction: row;
}

.site-header__navigation {
  order: 1;
  width: 50%;
}
.site-header__logo {
  order: 2; 
}
.site-header__actions {
  order: 3;
  width: 50%;
  justify-content: flex-end;
}
*/
/*
@media screen and (min-width: 48em) {
  .site-header__navigation {
    order: 2;
    flex-grow: 1;
  }
  .site-header__logo {
    order: 1; 
  }
  .site-header__actions {
    width: auto;
  }
}
*/
/*
@media screen and (min-width: 80em) {
  .site-header__navigation {
    order: 1;
    flex-grow: 0;
  }
  .site-header__logo {
    order: 2; 
  }
  .site-header__actions {
    width: 50%;
  }
}


.site-header__logo img {
  height: 4rem; 
}
*/
/*
.site-header__left,
.site-header__right {
  display: flex;
  flex-direction: row;
  width: 50%; 
}
.site-header__right {
  justify-content: flex-end;
}

.site-header__inner {
  
}
*/
/* TOPBAR */
.global-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: var(--token-color-neutral-00);
  width: 100%;
  align-items: center;
  color: white; 
}
.global-navigation:has(:not(.global-navigation__menu)) {
  justify-content: center;  
}

.global-navigation__hamburger,
.global-navigation__actions {
  width: 50%;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.global-navigation__brand {

}
.global-navigation__brand img {
  height: calc(var(--token-site-header-height) - 4rem); 
}
.global-navigation__actions {
  justify-content: flex-end;
}
/* MAINNAV */
.global-navigation__menu {
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: var(--token-site-header-height);
  background: var(--token-ui-navigation-background);
  height: calc(100dvh - var(--token-site-header-height));
  border-top: .1rem solid var(--token-color-neutral-00-20);
  display: none;
}
.global-navigation__menu.is-open {
  display: block; 
}
.global-navigation__menu-container {
  height: 100%;
}
.global-navigation__main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* SUBNAV */
.global-navigation__sub {
  position: absolute;
  top: 0;
  background: var(--token-ui-navigation-background);
  left: 0;
  width: 100vw;
  transform: translateX(100%);
  height: calc(100dvh - var(--token-site-header-height));
  opacity: 0;
  transition: opacity .5s ease-in-out, transform .5s ease;
  z-index: 1;
/*  transition: opacity .5s ease-in-out, transform .5s cubic-bezier(.06,.975,.195,.985),-webkit-transform .5s cubic-bezier(.06,.975,.195,.985);*/
}
.global-navigation__sub.is-open {
  transform: translateX(0); 
  opacity: 1;
}

.global-navigation__main-header,
.global-navigation__sub-header {
  height: 4rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.global-navigation__spotlight {
  display: none; 
}
.global-navigation__main-list {
  height: 100%; 
}
.global-navigation__main-list,
.global-navigation__sub-list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin: .8rem 0;
}


.global-navigation__sub-list a {
  color: var(--token-color-neutral-00);
}
.global-navigation__sub-list > li {
  border-radius: .4rem;
/*  background: rgba(255,255,255,.1);*/
/*  padding: .8rem;*/
/*  transition: all 500ms ease;*/
  opacity: 0;
  transition: opacity 250ms ease;
}

.global-navigation__sub.is-open .global-navigation__sub-list > li,
.global-navigation__main-list > li:hover .global-navigation__sub-list > li {
  opacity: 1;
}
.global-navigation__sub-list > li:nth-child(1) {
  transition-delay: 200ms;
}
.global-navigation__sub-list > li:nth-child(2) {
  transition-delay: 250ms;
}
.global-navigation__sub-list > li:nth-child(3) {
  transition-delay: 300ms;
}
.global-navigation__sub-list > li:nth-child(4) {
  transition-delay: 350ms;
}
.global-navigation__sub-list > li:nth-child(5) {
  transition-delay: 400ms;
}
.global-navigation__sub-list > li:nth-child(6) {
  transition-delay: 450ms;
}


.global-navigation__main-list > li > a,
.global-navigation__main-list > li > div> span {
  text-decoration: none; 
  cursor: pointer;
  color: var(--token-color-neutral-00);
}
/*
.global-navigation__sub-list > li > a {
  display: block;
  text-decoration: none;
}
*/
.global-navigation__sub-list > li > ul {
  display: block;
  display: flex;
  flex-direction: column;
}

.global-navigation__main-list > li > a,
.global-navigation__main-list > li > div,
.global-navigation__sub-list > li > a,
.global-navigation__sub-list > li > ul > li > a {
  text-decoration: none;
  display: block;
/*  padding: .8rem;*/
}
.global-navigation__sub-list > li > a,
.global-navigation__sub-list > li > ul > li > a {
 padding: .6rem .8rem;
}
.global-navigation__main-list > li > a > span,
.global-navigation__main-list > li > div > span,
.global-navigation__sub-list > li > a > span,
.global-navigation__sub-list > li > ul > li > a > span {
  position: relative;
}
.global-navigation__sub-list > li > a > span {
  font-variation-settings: "wght" 500,"slnt" 0;
}
.global-navigation__main-list > li > a > span:after,
.global-navigation__main-list > li > div > span:after,
.global-navigation__sub-list > li > a > span:after,
.global-navigation__sub-list > li > ul > li > a > span:after {
  bottom: 0;
  left: 0;
  right: 100%;
  content: '';
  display: block;
  height: .1rem;
  background: var(--token-color-neutral-00);
  opacity: 0;
  transition: all 250ms ease;
  position: absolute;
}
.global-navigation__main-list > li > a:hover > span:after,
.global-navigation__main-list > li:hover > div > span:after,
.global-navigation__sub-list > li > a:hover > span:after,
.global-navigation__sub-list > li > ul > li > a:hover > span:after {
  opacity: .8;
  right: 0;
}

.global-navigation__language.global-navigation__language--mobile {
  border-top: .1rem solid var(--token-color-neutral-00-20);
  padding: 2rem 0;
}
.global-navigation__language--desktop {
  display: block; /* none */
}

.global-navigation__spotlight-picture {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.global-navigation__spotlight-link {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  left: 1rem;
}
.global-navigation__spotlight-link > .button {
  background: rgba(255,255,255,.8);
}

.global-navigation__actions--login {
  display: none;
}

@media screen and (min-width: 48em) {
  .global-navigation__actions--login {
    display: flex;
  } 
}
@media screen and (min-width: 80em) {
  .global-navigation {
    position: relative;
  }
  .global-navigation__hamburger,
  .global-navigation__language--mobile {
    display: none; 
  }
  .global-navigation__language--desktop {
    display: block; 
  }
  .global-navigation__menu {
    left: unset;
    position: unset;
    transform: unset;
    top: unset;
    justify-content: flex-start;
    width: 50%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    background: unset;
    height: auto;
    border-top: 0;
  }
  .global-navigation__menu-container,
  .global-navigation__sub-container {
    width: unset; 
    margin: unset;
  }
  .global-navigation__main-list {
    flex-direction: row; 
    gap: 1.6rem;
  }
  .global-navigation__sub-list {
    flex-direction: row; 
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 0;
    align-items: flex-start;
  }
  .global-navigation__sub-list > li {
/*    width: calc(50% - 1.2rem); */
    width: 100%;
  }

  
  .global-navigation__sub {
    background: none; 
    transform: none;
    height: auto;
    width: 30%;
    position: absolute;
    left: 0;
    top: unset;
    pointer-events: none;
    transform: translateX(0) translateY(-2rem);
    opacity: 0;
    transition: opacity .1s ease-in-out,transform .5s cubic-bezier(0,.59,.23,1),-webkit-transform .5s cubic-bezier(0,.59,.23,1);
    padding-top: 4rem;
    
    box-shadow: 0px 32px 64px 0px rgba(0,0,0,.1);

  }
  .global-navigation__sub:has(.global-navigation__spotlight) {
    width: 60%; 
  }
  
  .global-navigation__main-list > li:hover .global-navigation__sub {
    pointer-events: all; 
    transform: translateY(0); 
    opacity: 1;
  }
  .global-navigation__sub-container {
    border: 1px solid rgba(255,255,255,.1);
    background: var(--token-color-brand-100);
    border-radius: .8rem;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  .global-navigation__main-header,
  .global-navigation__sub-header {
    display: none;
    visibility: hidden;
  }
  .global-navigation__sub-menu {
    padding: 1.6rem; 
    flex-grow: 1;
  }
  .global-navigation__spotlight {
    display: block;
    background: var(--token-color-neutral-00);
    aspect-ratio: 1/1;
    min-width: 30%;
    position: relative;
  }
  
  /* WIT */
  .global-navigation__sub-container {
    background: var(--token-color-neutral-04);
  }
  .global-navigation__sub-list > li > a > span,
  .global-navigation__sub-list > li > ul > li > a > span {
    color: var(--token-color-neutral-100);
  }
  .global-navigation__sub-list > li > a > span:after,
  .global-navigation__sub-list > li > ul > li > a > span:after {
    background: var(--token-ui-navigation-background);
  }
  

   
}
.global-notification {
  background: #f5f5f5;
  font-size: 1.4rem;
  padding: 1.6rem 0;
}

/* --------------------------------------------------
 * COMPONENTS > FOOTER
 * -------------------------------------------------- */
/* ------------------------------
 *  Site footer
 * ------------------------------ */

.site-footer {
  background: var(--token-ui-footer-background); 
  color: var(--token-color-neutral-00);
}

.site-footer a {
  color: var(--token-ui-footer-color); 
}

.site-footer-doormat {
  padding: 4rem 0;
  background: var(--token-ui-footer-doormat-background);  
}
.site-footer-doormat__container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.site-footer-doormat__navigation {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;  
}
.site-footer-doormat__office {
  grid-template-columns: 1fr; 
}

@media screen and (min-width: 48em) {
  .site-footer-doormat__container {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer-doormat__navigation {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer-doormat__navigation {
    
  }
}

.site-footer-bottom {
  padding: 2rem 0;
  background: var(--token-ui-footer-utility-background);  
  font-size: 1.2rem;
}

.site-footer-bottom__container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  gap: 2rem;
}

.site-footer-bottom__copyright {
  
}

.site-footer-bottom__utility {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex-wrap: wrap;
}

@media screen and (min-width: 80em) {
  .site-footer-bottom__container {
    flex-direction: row;
  }
}
@media screen and (min-width: 48em) {
  .site-footer-bottom__utility {
    flex-direction: row;
    gap: 1rem;
  }
}

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

.site-footer-doormat__navigation a:hover,
.site-footer-doormat__navigation a:active,
.site-footer-bottom__utility a:hover,
.site-footer-bottom__utility a:active {
  background-size: 0% .1rem, 100% .1rem; 
}

.site-footer-doormat__navigation span {
  font-variation-settings: "wght" 500, "slnt" 0;
  margin-bottom: .5rem;
}

/* --------------------------------------------------
 * COMPONENTS > MAIN
 * -------------------------------------------------- */
.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__content {
  color: var(--token-color-neutral-00);
  background-color: var(--token-color-brand-100);
  padding-top: 3.6rem;
  padding-bottom: 3.6rem;
}

@media screen and (min-width: 48em) {
  .hero {
    max-height: calc(70vh - var(--token-site-header-height)); 
    position: relative;
    aspect-ratio: var(--hero-aspect-ratio);
  }
  .hero__content {
    color: var(--token-color-neutral-00);
    position: relative;
    z-index: 2;
    background-color: transparent;
    padding-top: 2rem;
    padding-bottom: 2rem;
  } 

  .hero__background,
  .hero__background-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

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

.hero__text {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  align-items: flex-start;
  text-wrap: balance;
}
/*
.hero__text h1 {
  font-size: 5.6rem;
  line-height: 1;
}
*/

.hero__text .badge {
  margin-bottom: -1rem; 
}

/* Image */

@media screen and (min-width: 48em) {
  .hero__flag { 
    height: 8rem; 
  }

  .hero__background-overlay {
    mix-blend-mode: multiply;
    z-index: 1;
  }

  .hero__background-overlay--left {
    background: linear-gradient(90deg, rgba(0,0,0,0.35) 35%, transparent 75%);   
  }

  .hero__background-overlay--right {
    background: linear-gradient(-90deg, rgba(0,0,0,0.35) 35%, transparent 75%);
  }

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

/* Video */

/* Color */
.services {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 48em) {
  .services:has(>*:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  .services:has(>*:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  .services:has(>*:nth-child(4):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 80em) {
  .services:has(>*:nth-child(2):last-child),
  .services:has(>*:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  .services:has(>*:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*

.services:has(>div:nth-child(3):last-child) {
  
}

.linkblocks {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
} 

*/





@media screen and (min-width: 48em) {
  .services__grid {
    margin: 0 -2rem; 
}
}

.services__grid {
  
} 

.service {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding: 2rem;
  margin: 0rem;
  /*height: 100%;*/
    border-radius: .8rem;
}



.service:hover {
  background: var(--token-color-neutral-00-hover);

  transform: scale(1.025);
}


/*
.service__title {
  font-family: var(--token-font-family-secondary);
  font-size: 2.4rem;
}*/
.service__description {
  
}

/*
 *   <a href="" class="service">
    <div class="service__tag">
      
    </div>
    <h2 class="service__title">
      
    </h2>
    <div class="service__description">
      
    </div>
  </a>
 * 
 * */


.services {
   
}
.services__inner {

}

.services__item {
  
}

.services__link {
  
}
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.6rem;
}

.masonry__item--portrait {
  grid-row: span 3; 
}

/*
.masonry {
  column-count: 1;
  column-gap: 1.6rem;
  margin-top: -1.6rem;
}
 
.masonry > div {
  break-inside:avoid; 
}
.masonry > *:not(:first-child) {
  margin-top: 1.6rem;
}
 
@media screen and (min-width: 48em) {  
  .masonry { 
    column-count: 2;
  }
}
@media screen and (min-width: 80em) {
  .masonry {
    column-count: 3;  
  }
}
*/
.taglist {
  display: inline-flex;
  gap: .4rem;
  font-size: 1.2rem;
  font-variation-settings: "wght" 600;
  flex-wrap: wrap;
} 
.taglist--blogfilter {
   font-size: initial;
}

.taglist > li:not(:last-child)::after {
}

.taglist:not(:has(li)) {
  display: none; 
}

.taglist > li > a {
  
}
.taglist > li {
  display: inline-flex;
  align-items: center; 
}
.taglist > li:not(.taglist__pre):not(:has(a)) {
  padding: .4rem .8rem;
  color: var(--token-ui-tag-color);
  background: var(--token-ui-tag-background);
  border-radius: .4rem;
/*  
  color: var(--token-ui-tag-color);
  border: .1rem solid var(--token-ui-tag-border);
  padding: .4rem .6rem;
  border-radius: .8rem;*/
}

.taglist > li:has(a) a {
  padding: .4rem .8rem;
  color: var(--token-ui-tag-color);
  background: var(--token-ui-tag-background);
  border-radius: .4rem;
  text-decoration: none;
}
.taglist > li:has(a) a:hover {
  color: var(--token-ui-tag-background);
  background: var(--token-ui-tag-color);
}



.taglist > li.taglist__pre {
  padding: .4rem 0; 
}
.taglist > li.taglist__author {
  display: flex;
  gap: .6rem;
  padding-left: 0 !important;
}
.taglist > li.taglist__author .taglist__author-avatar {
  position: relative;
  width: 3.6rem;
  height: 100%;
}
.taglist > li.taglist__author .taglist__author-avatar .media {
  position: absolute;
  transform: translateY(-50%);
}
.taglist > li.taglist__author .taglist__author-avatar .media picture {
  border: .2rem solid  var(--token-ui-tag-background);
}
.taglist > li.taglist__author i {
  font-variation-settings: "wght" 300; 
}

/*.taglist {
  display: inline-flex; 
  gap: .8rem;
  align-items: center;
}

.taglist > li > ul {
  display: inline-flex;  
}
.taglist > li > ul> li > a {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--token-color-neutral-10);
  background: var(--token-color-neutral-10);
  border-radius: .4rem;
  padding: .2rem .4rem;
  display: inline-block;
}

.taglist > li > ul > li > a:hover {
  background: var(--token-color-brand-100); 
  color: var(--token-color-neutral-00);
}*/
.news-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  /*padding: 2rem;*/
  margin: 0rem;
  transition: all 200ms ease;
  border-radius: .8rem;
}

.news-card:hover {
  background: var(--token-color-neutral-00-hover);
}

.news-card__media {
  aspect-ratio: 3/2;
}
.news-card__meta {
  display: flex;
  flex-direction: row;
  gap: .5rem;
}

.news-card__meta li {
  display: inline-flex;
}
.news-card__meta li:not(:last-child):after {
  content: '•';
  color: var(--token-color-neutral-50);
  margin-left: .5rem;
}

.news-card__title {
  font-family: var(--token-font-family-secondary);
  font-size: 2.4rem;
}

.news-card__content {
  
}

/* Manual overwrite */
.news-card__content span {
  color: inherit !important; 
}
/*
@container (min-width: 800px) {
  .news-card {
    flex-direction: row;
  }
}
*/

/*
.service__tag {
  display: inline-flex;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: var(--token-color-brand-100);
  background: var(--token-color-neutral-10);
  padding: .6rem .8rem;
  font-variation-settings: "wght" 600;
  border-radius: .4rem;
}
.service__title {
  font-family: var(--token-font-family-secondary);
  font-size: 2.4rem;
}
.service__description {
  
}*/
@property --profile-graph-percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.profile {
  margin-top: 4rem;
  border: 1px solid var(--token-ui-profile-border);
  display: grid; 
  border-radius: .8rem;
  padding: 2rem;
  text-align: center;
  
  grid-template-columns: subgrid;
}

.profile__graph {
  order: -1;
  width: 8rem;
  aspect-ratio: 1;
  margin: -6rem auto 1rem;
  position: relative;
  background: #FFF;
}

.profile__graph::after {
  content:"";
  position:absolute;
  border-radius:50%;
  inset: 0;
  background: conic-gradient( var(--token-ui-profile-fill) calc(var(--profile-graph-percentage)*1%),var(--token-ui-profile-background) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--token-ui-profile-donut-width)),#000 calc(100% - var(--token-ui-profile-donut-width)));
  mask:radial-gradient(farthest-side,#0000 calc(99% - var(--token-ui-profile-donut-width)),#000 calc(100% - var(--token-ui-profile-donut-width)));
  animation: p linear;
	animation-fill-mode: none;
	animation-timeline: view();
	animation-iteration-count: 1;
  animation-range: entry 0% entry 200%;
}

@keyframes p {
  from{--profile-graph-percentage:0}
}

.profile__percentage {
  font-size: 2.4rem;
}
.history {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.history__item {
  background: var(--token-ui-history-background);
  border-radius: .8rem;
  display: grid;
  grid-template-columns: 1fr;
}

.history__item:not(:has(.history__media)) {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 48em) {
  .history__item {
    min-height: 14rem;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 80em) {
  .history__item {
    grid-template-columns: 40% 60%;
  }
}

.history__content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.history__media {
  min-height: 20rem;
}
.plant {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--token-ui-plant-border);
  border-radius: .8rem;
}

.plant--has-picture {
  order: -1; 
}

.plant__info {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 48em) {
  .plant {
    padding: 2rem;
    gap: 2rem;
    grid-template-columns: 1fr;
  }
  .plant--has-picture {
    grid-template-columns: 10rem 1fr;     
  }
  .plant__info {
    padding: 0; 
  }
}

.plant__specifications {
  display: flex;
  flex-direction: row;
  gap: .8rem;
}

.plant__specifications > li {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: .4rem;
}
.plant-list {
  display: grid;
  gap: 2rem;
  
  grid-template-columns: 1fr;
}
@media screen and (min-width: 48em) {
  .plant-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 80em) {
  .plant-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.profile-list {
  display: grid;
  gap: 2rem;
  
  grid-template-columns: 1fr;
}
@media screen and (min-width: 48em) {
  .profile-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 80em) {
  .profile-list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.bar {
  display: block;
}

.bar--sticky {
  position: sticky;
  z-index: 1;
}

.bar--sticky-bottom {
  bottom: 0; 
}

.bar__content {
  background: #0d2b49;
  padding: 1.5rem;
  margin: 0 -1.5rem;
}


@media screen and (min-width: 48em) {
  .bar__content {
    padding: 2rem;
    margin: 0 -2rem;
    border-top-left-radius: .8rem;
    border-top-right-radius: .8rem;
    backdrop-filter: blur(.4rem);
    background: #0d2b49;
    
  }
}
.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);
}
.backdrop {
  position: fixed;
  transition: background-color 500ms, backdrop-filter 500ms;
}

.backdrop--active {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8000; 
  
  backdrop-filter: blur(0);
  background-color: transparent;
  opacity: .5;
}

.backdrop--cover {
/*  backdrop-filter: blur(.4rem); */
  background: var(--token-color-brand-100);
}
.blog-header {
   
}


.page-header__media,

.article-header__media,
.blog-header__media {
  border-bottom-left-radius: .8rem;
  border-bottom-right-radius: .8rem;
  overflow: hidden; 
}
.page-header__media picture,

.blog-header__media picture {
  border-radius: unset; 
}

.page-header__media--has-overlay {
  position: relative; 
}
.page-header__media-overlay {
  position: absolute;
  top: 2rem;
  right: 2rem;
  bottom: 2rem;
  width: 30rem;
  /*
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  */
}


.page-header__content,
.article-header__content,
.blog-header__content {
  position: relative;
  background: white;
  border-top-left-radius: .8rem;
  border-top-right-radius: .8rem;
  margin: 0;
  padding: 0;
  transition: margin 250ms ease;
}

.main--office-detail .page-header {
  margin-top: 2rem;
}
.main--office-detail .page-header > .container:first-child {
  display: none; 
}

@media screen and (min-width: 48em) {
  .main--office-detail .page-header {
    margin-top: 0; 
  }
  .main--office-detail .page-header > .container:first-child {
    display: block; 
  }
  .page-header__media,
  .article-header__media,
  .blog-header__media {
    min-height: 6rem; 
    margin-left: -2rem;
    margin-right: -2rem;
  }
  .page-header__content,
  .article-header__content,
  .blog-header__content {
    margin: -6rem -2rem 0;
    padding: 2rem 2rem 0;
  }
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.pagination__item.pagination__item--previous,
.pagination__item.pagination__item--next {
  flex-grow: 1;
  display: flex;
}

.pagination__item.pagination__item--next {
  justify-content: flex-end; 
}

.pagination__item a, 
.pagination__item b {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--token-ui-pagination-border);
  padding: 1rem;
  aspect-ratio: 1;
  text-decoration: none;
  border-radius: 50%;
  color: var(--token-ui-pagination-color);
  height: 1.6rem;
    justify-content: center;
}
.pagination__item a:hover,
.pagination__item b {
  background: var(--token-ui-pagination-background); 
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
.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;

  }
}
.tabs {
  
}

.tabs__header {
  display: flex;
  flex-direction: row;
  gap: .8rem;
}

.tabs__link {
  padding: .6rem 1.2rem;
  border-top-right-radius: .4rem;
  border-top-left-radius: .4rem;
  cursor: pointer;
  background: var(--token-ui-tabs-tab-background-link);
}

.tabs__link:hover {
  background: var(--token-ui-tabs-tab-background-hover);
}

.tabs__link--active {
  color: var(--token-ui-tabs-tab-color-active);
  background: var(--token-ui-tabs-tab-background-active);
}

.tabs__container {
  border-radius: .4rem;
  border-top-left-radius: 0;
  background: var(--token-ui-tabs-container-background);
  padding: 1.6rem;
}

.tabs__content {
  display: none;
}

.tabs__content--active {
  display: block;
}
.tutorial {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  

}

.tutorial--app {
  
}

.tutorial--online {
  
}

.tutorial__step {
  display: grid;
  gap: .8rem;
  grid-template-columns: 3rem 40% auto;
  padding-top: .3rem;
  background: #FFF;
  border-radius: .2rem;
  padding: 1.9rem 1.6rem 1.6rem;
}
.tutorial--online .tutorial__step {
  grid-template-columns: 3rem 40%;
}

.tutorial__counter {

}
.tutorial__counter span {
  aspect-ratio: 1;
  width: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variation-settings: "wght" 400;
  border-radius: 1.5rem;
  color: var(--token-ui-tutorial-counter-color);
  background-color: var(--token-ui-tutorial-counter-background);
  margin-top: -.3rem;
}

.tutorial__content {
  
}

.tutorial__picture {
  
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
} 


/* --------------------------------------------------
 * COMPONENTS > PAGE SPECIFIC
 * -------------------------------------------------- */
@media screen and (min-width: 48em) {
  .office-detail__address {
    margin-top: -11.5rem;
  }
}

.office-list {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 48em) {
  .office-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 80em) {
  .office-list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.office-cta {
  
}

.office-cta__office {
  display: none; 
}

.office-cta__office.office-cta__office--active {
  display: block; 
}
.office-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: .8rem;
  background-color: var(--token-ui-card-background);
  border: .1rem solid var(--token-ui-card-border);
  color: inherit;
  transition: 250ms ease all;
}
.office-card:hover, 
.office-card.card--active {
  background-color: var(--token-ui-card-background-hover); 
}
.office-card:active {
  background-color: var(--token-ui-card-background-active);  
} 
 
.office-card__media {
  margin: -.1rem -.1rem 0;
  position: relative;
}
.office-card__media .office-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(.2rem);
  overflow: hidden;
  border-radius: .8rem;
  background: rgba(13,43,73,.5);
  color: rgb(255,255,255);
  font-variation-settings: "wght" 400;
  font-size: 2rem;
  padding: 2rem;
  text-align: center;
  text-wrap: balance;
  cursor: progress;
}

.office-card__info {
  padding: 2rem; 
  width: auto;
}
.instagram-card {
  position: relative; 
}

.instagram-card__links {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.survey {
  border: 1px solid #ececec;
  min-height: calc(100vh - var(--token-site-header-height) - (var(--token-ui-section-gap)*2));
  border-radius: 1.6rem;
}

.survey__side {
  background: #f7f7f7;
  padding: 1.6rem; 
  border-top-left-radius: 1.6rem;
  border-top-right-radius: 1.6rem;
}

.survey__side-container {
  position: sticky;
  top: calc(var(--token-site-header-height) + var(--token-ui-section-gap));
}

.survey__main {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 48em) {
  .survey {
    display: grid;
    grid-template-columns: 20rem auto;
  }
  .survey__side {
    border-top-right-radius: unset;
    border-bottom-left-radius: 1.6rem;
  }
} 


.survey__header,
.survey__subsection-header,
.survey__footer {
  padding: 1.6rem;
  border: .1rem solid #ececec;
  border-width: 0 0 .1rem 0;
}

.survey__footer {
  border-width: .1rem 0 0 0; 
}

.survey__question {
  padding: 1.6rem;
}


.survey__section {
  display: none;
  height: 100%;
}

.survey__subsection-header {
  position: sticky;
  top: 0rem;
  background: #FFF;
}


.survey__section--active {
  display: block; 
}

.survey__progress {
  position: relative;
  border: 1px solid #0d2b49;
  overflow: hidden;
  height: 1.2rem;
  border-radius: .4rem;
}
.survey__progress:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  height: 100%;
  background: #0d2b49;
  transition: width 1250ms 250ms ease;
  width: var(--progress);
}

.survey__navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}




body[data-platform="macos"] .platform:not(.platform--macos),
body[data-platform="ios"] .platform:not(.platform--ios),
body[data-platform="linux"] .platform:not(.platform--linux),
body[data-platform="other"] .platform:not(.platform--other),
body[data-platform="windows"] .platform:not(.platform--windows),
body[data-platform="android"] .platform:not(.platform--android) {
  display: none;
}