@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); /* Theme base styles */ /* Generic */ *, *:before, *:after { box-sizing: border-box; } /*! 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; } /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ :root { --color-primary: #4188bc; --color-secondary: #f6bf60; --color-tertiary: #d9e7f2; --color-dark-blue: #0d283c; --color-green: #41bc5c; --wp--preset--color--primary: #4188bc; --wp--preset--color--secondary: #f6bf60; --wp--preset--color--tertiary: #d9e7f2; --wp--preset--color--dark-blue: #0d283c; --wp--preset--color--green: #41bc5c; } html { -webkit-text-size-adjust: 100%; line-height: 1.15 } body { margin: 0 } main { display: block } h1, h2, h3, h4, h5, h6 { font-weight: 800; } .blog-post__body h1,.blog-post__body h2,.blog-post__body h3,.blog-post__body h4,.blog-post__body h5,.blog-post__body h6{ font-weight: 800; } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace,monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b,strong { font-weight: bolder } code,kbd,samp { font-family: monospace,monospace; font-size: 1em } small { font-size: 80% } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } img { border-style: none } button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button,input { overflow: visible } button,select { text-transform: none } [type=button],[type=reset],[type=submit],button { -webkit-appearance: button } [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner { border-style: none; padding: 0 } [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type=checkbox],[type=radio] { box-sizing: border-box; padding: 0 } [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } [hidden],template { display: none } html { scroll-behavior: smooth } body { background: #fff; color: var(--color-dark-blue); font-family: Raleway,sans-serif; font-size: 1rem; font-weight: 300; overflow-x: hidden } @media screen and (min-width: 768px) { body { font-size:1.25rem } } img { display: block; height: auto; max-width: 100% } figure { margin: 0 } *,:after,:before { -webkit-box-sizing: border-box; box-sizing: border-box } .css-grid { grid-gap: 30px; display: grid; grid-template-columns: repeat(1,1fr) } .css-grid__col { overflow: hidden } .css-grid--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center } @media screen and (min-width: 768px) { .css-grid--one { grid-template-columns:repeat(1,1fr) } .css-grid--two { grid-template-columns: repeat(2,1fr) } .css-grid--three { grid-template-columns: repeat(3,1fr) } .css-grid--four { grid-template-columns: repeat(2,1fr) } } @media screen and (min-width: 1210px) { .css-grid--four { grid-template-columns:repeat(4,1fr) } } .list { list-style: none } .list,.list__item { margin: 0; padding: 0 } .list__link { display: block; text-decoration: none } .list--inline { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex } .list--inline .list__item:not(:last-of-type) { margin-right: 1.25em } .logo__link { display: block } .logo__visual { display: block; max-width: 165px; -webkit-transition: max-width .3s; transition: max-width .3s } @media screen and (min-width: 1210px) { .logo__visual { max-width:185px } } @media screen and (min-width: 1320px) { .logo__visual { max-width:285px } } /* SVG Diamond Background - Uitgebreide versie voor HubSpot */ .dnd-section[style*="background-color: #0d283c"], .dnd-section[style*="background-color:#0d283c"], .dnd-section[style*="background-color: rgb(13, 40, 60)"], .dnd-section[style*="background-color:rgb(13, 40, 60)"], section[style*="background-color: #0d283c"], section[style*="background-color:#0d283c"], section[style*="background-color: rgb(13, 40, 60)"], section[style*="background-color:rgb(13, 40, 60)"], .solution-section, .factory-video-section, .featured-project-section { position: relative !important; overflow: hidden !important; } .dnd-section[style*="background-color: #0d283c"]::after, .dnd-section[style*="background-color:#0d283c"]::after, .dnd-section[style*="background-color: rgb(13, 40, 60)"]::after, .dnd-section[style*="background-color:rgb(13, 40, 60)"]::after, section[style*="background-color: #0d283c"]::after, section[style*="background-color:#0d283c"]::after, section[style*="background-color: rgb(13, 40, 60)"]::after, section[style*="background-color:rgb(13, 40, 60)"]::after, .solution-section::after, .factory-video-section::after, .featured-project-section::after { content: ''; position: absolute; right: -5%; bottom: 0; width: 50%; height: 100%; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right bottom; background-size: contain; opacity: 0.15; pointer-events: none; z-index: 0; } .dnd-section[style*="background-color: #0d283c"] .row-fluid, .dnd-section[style*="background-color:#0d283c"] .row-fluid, .dnd-section[style*="background-color: rgb(13, 40, 60)"] .row-fluid, .dnd-section[style*="background-color:rgb(13, 40, 60)"] .row-fluid, section[style*="background-color: #0d283c"] .container, section[style*="background-color:#0d283c"] .container, section[style*="background-color: rgb(13, 40, 60)"] .container, section[style*="background-color:rgb(13, 40, 60)"] .container, .solution-section .container, .factory-video-section .container, .featured-project-section .container { position: relative; z-index: 1; } @media (max-width: 768px) { .dnd-section[style*="background-color: #0d283c"]::after, .dnd-section[style*="background-color:#0d283c"]::after, .dnd-section[style*="background-color: rgb(13, 40, 60)"]::after, .dnd-section[style*="background-color:rgb(13, 40, 60)"]::after, section[style*="background-color: #0d283c"]::after, section[style*="background-color:#0d283c"]::after, section[style*="background-color: rgb(13, 40, 60)"]::after, section[style*="background-color:rgb(13, 40, 60)"]::after, .solution-section::after, .factory-video-section::after, .featured-project-section::after { right: -10%; width: 60%; } } /* Objects */ /* Responsive grid */ .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.127659574%; *margin-left: 2.0744680846382977%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 99.99999998999999%; *width: 99.94680850063828%; } .row-fluid .span11 { width: 91.489361693%; *width: 91.4361702036383%; } .row-fluid .span10 { width: 82.97872339599999%; *width: 82.92553190663828%; } .row-fluid .span9 { width: 74.468085099%; *width: 74.4148936096383%; } .row-fluid .span8 { width: 65.95744680199999%; *width: 65.90425531263828%; } .row-fluid .span7 { width: 57.446808505%; *width: 57.3936170156383%; } .row-fluid .span6 { width: 48.93617020799999%; *width: 48.88297871863829%; } .row-fluid .span5 { width: 40.425531911%; *width: 40.3723404216383%; } .row-fluid .span4 { width: 31.914893614%; *width: 31.8617021246383%; } .row-fluid .span3 { width: 23.404255317%; *width: 23.3510638276383%; } .row-fluid .span2 { width: 14.89361702%; *width: 14.8404255306383%; } .row-fluid .span1 { width: 6.382978723%; *width: 6.329787233638298%; } .container-fluid { *zoom: 1; } .container-fluid:before, .container-fluid:after { display: table; content: ""; } .container-fluid:after { clear: both; } @media (max-width: 767px) { .row-fluid { width: 100%; } .row-fluid [class*="span"] { display: block; float: none; width: auto; margin-left: 0; } } @media (min-width: 768px) and (max-width: 1139px) { .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.762430939%; *margin-left: 2.709239449638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 99.999999993%; *width: 99.9468085036383%; } .row-fluid .span11 { width: 91.436464082%; *width: 91.38327259263829%; } .row-fluid .span10 { width: 82.87292817100001%; *width: 82.8197366816383%; } .row-fluid .span9 { width: 74.30939226%; *width: 74.25620077063829%; } .row-fluid .span8 { width: 65.74585634900001%; *width: 65.6926648596383%; } .row-fluid .span7 { width: 57.182320438000005%; *width: 57.129128948638304%; } .row-fluid .span6 { width: 48.618784527%; *width: 48.5655930376383%; } .row-fluid .span5 { width: 40.055248616%; *width: 40.0020571266383%; } .row-fluid .span4 { width: 31.491712705%; *width: 31.4385212156383%; } .row-fluid .span3 { width: 22.928176794%; *width: 22.874985304638297%; } .row-fluid .span2 { width: 14.364640883%; *width: 14.311449393638298%; } .row-fluid .span1 { width: 5.801104972%; *width: 5.747913482638298%; } } @media (min-width: 1280px) { .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.564102564%; *margin-left: 2.510911074638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 100%; *width: 99.94680851063829%; } .row-fluid .span11 { width: 91.45299145300001%; *width: 91.3997999636383%; } .row-fluid .span10 { width: 82.905982906%; *width: 82.8527914166383%; } .row-fluid .span9 { width: 74.358974359%; *width: 74.30578286963829%; } .row-fluid .span8 { width: 65.81196581200001%; *width: 65.7587743226383%; } .row-fluid .span7 { width: 57.264957265%; *width: 57.2117657756383%; } .row-fluid .span6 { width: 48.717948718%; *width: 48.6647572286383%; } .row-fluid .span5 { width: 40.170940171000005%; *width: 40.117748681638304%; } .row-fluid .span4 { width: 31.623931624%; *width: 31.5707401346383%; } .row-fluid .span3 { width: 23.076923077%; *width: 23.0237315876383%; } .row-fluid .span2 { width: 14.529914530000001%; *width: 14.4767230406383%; } .row-fluid .span1 { width: 5.982905983%; *width: 5.929714493638298%; } } /* Clearfix */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /* Visibilty Classes */ .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } .hidden { display: none; visibility: hidden; } /* Responsive Visibilty Classes */ .visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } @media (max-width: 767px) { .visible-phone { display: inherit !important; } .hidden-phone { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1139px) { .visible-tablet { display: inherit !important; } .hidden-tablet { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; } } /* Content wrappers for blog post and system templates */ .content-wrapper { padding: 0 20px; margin: 0 auto; } /* Drag and drop layout styles */ .dnd-section > .row-fluid { margin: 0 auto; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /* Elements */ body { line-height: 1.4; overflow-wrap: break-word; } html[lang^='ja'] body, html[lang^='zh'] body, html[lang^='ko'] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Paragraphs */ p { margin: 0 0 1.4rem; font-size: 1rem; } /* Anchors */ a { cursor: pointer; } /* Headings */ h1, h2, h3, h4, h5, h6 { margin: 0 0 1.4rem; } /* Lists */ ul, ol { padding-left: 1rem; margin: 0 0 1.4rem; } ul li, ol li { margin: 0.7rem; } ul ul, ol ul, ul ol, ol ol { margin: 1.4rem 0; } .no-list { padding: 0; margin: 0; list-style: none; } .no-list li { margin: 0; } /* Code blocks */ pre { overflow: auto; } code { vertical-align: bottom; } /* Blockquotes */ blockquote { padding-left: 1rem; border-left: 10px solid; margin: 0 0 1.4rem; } /* Horizontal rules */ hr { border: 0 none; border-bottom: 1px solid; } /* Subscripts and superscripts */ sup, sub { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Image alt text */ img { font-size: 1rem; word-break: normal; } /* Primary button */ button, .button, .hs-button { position: relative; display: inline-flex; align-items: center; cursor: pointer; text-align: center; transition: color 0.15s linear; white-space: normal; } .hs-button-modify--full-width { width: 100%; justify-content: center; text-align: center; } /* Simple button */ .button.button--simple { position: relative; padding: 0; border: none; border-radius: 0; background-color: transparent; } .button.button--simple:hover, .button.button--simple:focus { border: none; background-color: transparent; } /* Disabled button */ button:disabled, .button:disabled, .hs-button:disabled { border-color: #f1f1f1; background-color: #f1f1f1; pointer-events: none; } button:disabled, .button:disabled, .button.button--secondary:disabled, .button.button--simple:disabled { color: #d0d0d0; } /* No button */ .no-button, .no-button:hover, .no-button:focus, .no-button:active { padding: 0; border: none; border-radius: 0; margin-bottom: 0; background: none; color: initial; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; text-decoration: none; transition: none; } /* Tooltip styles for copy to clipboard */ .hs-tooltip { position: absolute; bottom: calc(100% + 7px); left: 50%; display: none; height: auto; width: auto; padding: 5px 10px; border-radius: 3px; background-color: #494a52; color: #fff; font-size: 14px; font-weight: 400; opacity: 0.8; transform: translateX(-50%); } .hs-tooltip:after { position: absolute; top: 100%; left: 50%; height: 0; width: 0; border-top: 5px solid #494a52; border-right: 5px solid transparent; border-left: 5px solid transparent; content: ''; transform: translateX(-50%); } .hs-tooltip__failure, .hs-tooltip__success { display: none; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; } .hs-visible { display: block; } /* Button icons */ .button .button__icon svg { display: block; height: 1.25rem; margin-right: 1rem; fill: inherit; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .button .button__icon svg { width: 1.25rem; } } .button--icon-right .button__icon { order: 1; } .button--icon-right .button__icon svg { margin-right: 0; margin-left: 1rem; } /* Form title */ .form-title { margin: 0; } .form-title ~ div > form { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } /* Labels */ form label { display: block; margin-bottom: 0.35rem; } .hsfc-Form, .hsfc-FormWrapper { --hsf-module__vertical-spacing: 0.35rem; } /* Form fields */ form .hs-form-field { margin-bottom: 1.4rem; } .hsfc-Form, .hsfc-FormWrapper { --hsf-row__vertical-spacing: 1.4rem; } .form-columns-1 .hs-fieldtype-intl-phone, form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='file'], form input[type='search'], form select, form textarea { display: inline-block; width: 100% !important; /* stylelint-disable-line declaration-no-important */ } form fieldset { max-width: 100% !important; /* stylelint-disable-line declaration-no-important */ } /* Form fields - checkbox/radio */ form .inputs-list { padding: 0; margin: 0; list-style: none; } form .inputs-list > li { display: block; margin: 0.7rem 0; } form .inputs-list input, form .inputs-list span { vertical-align: middle; } form input[type='checkbox'], form input[type='radio'] { margin-right: 0.35rem; cursor: pointer; } /* Form fields - date picker */ form .hs-dateinput { position: relative; } form .hs-dateinput:before { position: absolute; top: 50%; content: '\01F4C5'; transform: translateY(-50%); } form .is-selected .pika-button { border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */ box-shadow: none !important; /* stylelint-disable-line declaration-no-important */ } form .fn-date-picker .pika-button:hover, form .fn-date-picker .pika-button:focus { border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */ } /* Form fields - file picker */ form input[type='file'] { padding: initial; border: initial; background-color: transparent; } /* Headings and text */ form .hs-richtext, form .hs-richtext p { margin: 0 0 1.4rem; font-size: 0.8rem; } form .hs-richtext img { height: auto; max-width: 100% !important; /* stylelint-disable-line declaration-no-important */ } /* GDPR */ form .legal-consent-container .hs-form-booleancheckbox-display > span { margin-left: 1rem !important; /* stylelint-disable-line declaration-no-important */ } /* Validation */ form .hs-form-required { color: #ef6b51; } form .hs-input.error { border-color: #ef6b51; } form .hs-error-msg, form .hs-error-msgs { margin-top: 0.35rem; color: #ef6b51; } .hsfc-Form, .hsfc-FormWrapper { --hsf-global-error__color: #ef6b51; --hsf-field-label-requiredindicator__color: var(--hsf-global-error__color); --hsf-erroralert__color: var(--hsf-global-error__color); } /* Submit button */ form input[type='submit'], form .hs-button { display: inline-block; width: 100%; cursor: pointer; text-align: center; transition: all 0.15s linear; white-space: normal !important; /* stylelint-disable-line declaration-no-important */ } /* Captcha */ .grecaptcha-badge { margin: 0 auto; } /* Icon wrapper */ .icon { display: inline-flex; border-radius: 50%; } .icon--square .icon { border-radius: 0; } /* Icon */ .icon svg { vertical-align: middle; } /* Table */ table { border-collapse: collapse; margin-bottom: 1.4rem; overflow-wrap: break-word; } /* Table cells */ th, td { padding: 0.7rem; vertical-align: top; } /* Table header */ thead th, thead td { vertical-align: bottom; } /* Components */ /* Navigation skipper */ .header__skip { position: absolute; top: -1000px; left: -1000px; overflow: hidden; height: 1px; width: 1px; text-align: left; } .header__skip:hover, .header__skip:focus, .header__skip:active { z-index: 2; top: 0; left: 0; overflow: visible; height: auto; width: auto; } /* Card */ .card { border: 0; } .card--dark, .card--light { padding: 1.4rem; } /* Blog listing */ .blog-listing { display: flex; flex-wrap: wrap; justify-content: space-between; } .blog-listing--3-col, .blog-listing--4-col { justify-content: flex-start; } /* Section heading */ .blog-listing__heading { width: 100%; text-align: center; } /* Article */ .blog-listing__post { display: flex; width: 100%; padding: 0; margin-bottom: 2.8rem; flex-direction: column; } .blog-listing__post-inner-wrapper { display: flex; height: 100%; background-color: rgba(255, 255, 255, 0.4); } /* Featured image */ .blog-listing__post-image-wrapper { display: flex; } .blog-listing__post-image { height: auto; width: 100%; } /* Content */ .blog-listing__post-content { display: flex; padding: 0.7rem 0 0; flex-direction: column; flex-grow: 1; } .card--dark .blog-listing__post-content, .card--light .blog-listing__post-content { padding: 1.4rem; } /* Heading */ .blog-listing__header { margin-bottom: 1.05rem; } /* Tags */ .blog-listing__post-tags { margin-bottom: 0.7rem; } .blog-listing__post-tag, .blog-listing__post-tag:hover, .blog-listing__post-tag:focus, .blog-listing__post-tag:active { text-decoration: none; } /* Title */ .blog-listing__post-title { margin-bottom: 0.7rem; } /* Author */ .blog-listing__post-author { display: flex; margin-bottom: 0.7rem; align-items: center; } .blog-listing__post-author-image { height: auto; width: 50px; margin-right: 0.7rem; } .blog-listing__post-author-name, .blog-listing__post-author-name:hover, .blog-listing__post-author-name:focus, .blog-listing__post-author-name:active { text-decoration: none; } /* Date */ .blog-listing__post-timestamp { display: block; margin-bottom: 0.35rem; } /* Button */ .blog-listing__post-button-wrapper { margin-top: auto; } /* Blog listing - basic grid */ .blog-listing--card .blog-listing__post { flex-direction: column; } .blog-listing--2-col .blog-listing__post { width: calc(50% - 1rem); } .blog-listing--3-col .blog-listing__post { width: calc(33.3% - 1rem); } .blog-listing--4-col .blog-listing__post { width: calc(25% - 1rem); } .blog-listing--3-col .blog-listing__post:nth-of-type(3n + 1), .blog-listing--3-col .blog-listing__post:nth-of-type(3n + 2) { margin-right: 1.5rem; } .blog-listing--4-col .blog-listing__post:nth-of-type(4n + 1), .blog-listing--4-col .blog-listing__post:nth-of-type(4n + 2), .blog-listing--4-col .blog-listing__post:nth-of-type(4n + 3) { margin-right: 1.333rem; } @media (max-width: 767px) { .blog-listing .blog-listing__post { width: 100%; margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */ } } .blog-listing--card .blog-listing__post-image-wrapper { height: 200px; } .blog-listing--card .blog-listing__post-image { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .blog-listing--card .blog-listing__post-image-wrapper, .blog-listing--card .blog-listing__post-image { height: auto; } } /* Blog listing - side by side */ /* stylelint-disable no-descending-specificity */ .blog-listing--list .blog-listing__post { display: flex; } /* stylelint-enable no-descending-specificity */ .blog-listing--list .blog-listing__post-image-wrapper { width: 100%; } .blog-listing--list .blog-listing__post-image { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .blog-listing--list .blog-listing__post-image-wrapper, .blog-listing--list .blog-listing__post-image { height: auto; } } @media (min-width: 768px) { .blog-post-listing__post--list { flex-direction: row; } .blog-listing__post-content--list { order: 1; } .blog-post-listing__post-image-wrapper--list { order: 1; } .blog-post-listing__post-image-wrapper--right { order: 2; } .blog-listing--list .blog-listing__post-image-wrapper { width: 25%; } .blog-listing--list .blog-post-listing__post-image-wrapper--left { margin-right: 1.4rem; } .blog-listing--list .blog-post-listing__post-image-wrapper--right { margin-left: 1.4rem; } } /* Logo */ .widget-type-logo:not(.hs-lp-header-logo) img { height: auto; max-width: 100%; margin-bottom: 1.4rem; } /* Menu and simple menu */ .hs-menu-wrapper ul { display: flex; padding-left: 0; margin: 0; flex-wrap: wrap; justify-content: space-around; list-style: none; } .hs-menu-wrapper li { margin: 0; } @media (max-width: 767px) { .hs-menu-wrapper li { margin-bottom: 1.4rem; text-align: center; } } /* Horizontal menu */ .hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper { flex-direction: column; } @media (max-width: 767px) { .hs-menu-wrapper.hs-menu-flow-horizontal ul { flex-direction: column; } } /* Vertical menu */ .hs-menu-wrapper.hs-menu-flow-vertical ul { flex-direction: column; } /* Flyouts */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul { display: inline-flex; } @media (max-width: 767px) { .hs-menu-wrapper.hs-menu-flow-vertical ul { display: flex; } } .hs-menu-wrapper.flyouts .hs-item-has-children { position: relative; } .hs-menu-wrapper.flyouts .hs-menu-children-wrapper { position: absolute; left: -9999px; opacity: 0; } .hs-menu-wrapper.flyouts .hs-menu-children-wrapper a { display: block; white-space: nowrap; } /* prettier-ignore */ .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper { top: 100%; left: 0; opacity: 1; } /* prettier-ignore */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper { top: 0; left: 100%; opacity: 1; } @media (max-width: 767px) { /* prettier-ignore */ .hs-menu-wrapper.flyouts .hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper { position: relative; top: auto; left: 0; opacity: 1; } } /* Rich text */ .widget-type-rich_text img { height: auto; max-width: 100%; } /* If the default module language switcher is used, keep growth margins from messing it up */ .lang_switcher_class .lang_list_class li { margin: initial; } /* Utilities */ /* For content that needs to be visually hidden but stay visible for screenreaders */ /* stylelint-disable declaration-no-important */ .show-for-sr { position: absolute !important; overflow: hidden !important; height: 1px !important; width: 1px !important; padding: 0 !important; border: 0 !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } @media (max-width: 767px) { .show-for-sr--mobile { position: absolute !important; overflow: hidden !important; height: 1px !important; width: 1px !important; padding: 0 !important; border: 0 !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } } /* stylelint-enable declaration-no-important */ /*extra fes*/ .hs-menu-item a, .header__menu-link, .header__button-col a { text-decoration: none; } .blog-listing__post-content.blog-listing__post-content--card{ background-color: #fff; } .hs-blog-listing #hs_cos_wrapper_dnd_area-module-2 .blog-listing__post-title-link, .hs-blog-listing #hs_cos_wrapper_dnd_area-module-2 .blog-listing__post-tag, .blog-listing__post-tag, .blog-listing__post-title-link { font-weight: 600; text-decoration: none; } .blog-listing__header .blog-listing__post-tag{ color: var(--color-secondary); } .hs-blog-listing h1, .blog-post h1{ position: relative; padding-bottom: 35.3031px; } .blog-post h1{ text-align: center; } .hs-blog-listing h1::before, .blog-post h1::before{ background-image: url(https://144523864.fs1.hubspotusercontent-eu1.net/hubfs/144523864/streepje.svg); background-position: 0; background-repeat: no-repeat; background-size: contain; bottom: 0; content: ""; display: inline-block; height: 10px; left: 0; position: absolute; width: 120px; } .blog-post h1::before{ left: 50%; transform: translateX(-50%); } @media screen and (min-width: 768px) { .hs-blog-listing h1:before, .blog-post h1::before { height: 20px; } } .blog-listing__post-content{ -webkit-box-flex: 1; display: block; -ms-flex: 1; flex: 1; overflow: hidden; padding: 1em 2.65em 1em 1em; position: relative; width: 100%; z-index: 1; } @media screen and (min-width: 1320px) { .blog-listing__post-content { padding: 1.45em 2.45em 1.45em 1.45em; } } @media screen and (min-width: 1320px) { .blog-listing__post-content { padding: 1.45em 3.45em 1.45em 1.45em; } } .blog-listing__post-content:before{ background: var(--color-secondary); height: 180px; right: -35%; -webkit-transform: translateY(-50%) rotate(45deg) scale(1); -ms-transform: translateY(-50%) rotate(45deg) scale(1); transform: translateY(-50%) rotate(45deg) scale(1); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s; width: 180px; } .blog-listing__post-content:after,.blog-listing__post-content:before { content: ""; display: inline-block; position: absolute; top: 50%; z-index: -1 } .blog-listing__post-content:after { background-image: url(https://144523864.fs1.hubspotusercontent-eu1.net/hubfs/144523864/Pijl%20wit.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; height: 18px; right: 5%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 24px } .blog-listing__post-content--card .blog-listing__header{ margin-bottom: 0; } .blog-post-listing__post--card:hover .blog-listing__post-content:before{ -webkit-transform: translateY(-50%) rotate(45deg) scale(1.35); -ms-transform: translateY(-50%) rotate(45deg) scale(1.35); transform: translateY(-50%) rotate(45deg) scale(1.35); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_post_filter .block{ display: flex; gap: 1.25rem; align-items: center; } .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_post_filter .block h3{ margin: 0; font-family: Raleway, sans-serif; font-size: 18.4px; font-weight: 600; line-height: 21.16px; } .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_post_filter .block ul{ display: flex; list-style: none; padding-left: 0; margin: 0; gap: 0.45rem; flex-wrap: wrap; } .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_post_filter .block ul li{ margin: 0; background: #fff; border: 2px solid var(--color-tertiary); border-radius: 0; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; display: inline-block; outline: none; padding: 10px 20px; -webkit-transition: color .3s, background .3s, border-color .3s; transition: color .3s, background .3s, border-color .3s; } .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_post_filter .block ul li a{ font-family: Raleway, sans-serif; font-weight: 600; text-decoration: none; color: var(--color-dark-blue); } @media screen and (min-width: 1320px){ .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_post_filter .block ul{ gap: 0.85rem; } } @media screen and (min-width: 992px) { .dnd_area-row-0-background-image{ height: 365px; } } .cell_17175112023043-vertical-alignment{ position: relative; } #hs_cos_wrapper_widget_1728391699836 .button--small{ background: #fff; bottom: -30px; display: inline-block; height: 60px; left: 20px; position: absolute; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 60px; border: none; } @media screen and (min-width: 992px) { #hs_cos_wrapper_widget_1728391699836 .button--small{ bottom: -60px; } } @media screen and (min-width: 1320px) { #hs_cos_wrapper_widget_1728391699836 .button--small { bottom:-70px; height: 80px; width: 80px } } #hs_cos_wrapper_widget_1728391699836 .button--small::before { background-image: url(https://144523864.fs1.hubspotusercontent-eu1.net/hubfs/144523864/8bc35565ecfd40454b95.svg); background-position:center 24px; background-repeat: no-repeat; background-size: 10px; bottom: 0; content: ""; display: inline-block; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } /* searchbar */ .hs-search-field--open .hs-search-field__suggestions{ z-index: 1; } @media screen and (min-width: 1320px) { #hs_cos_wrapper_widget_1728391699836 .button--small::before { background-size: 15px } } .blog-post__body p, .blog-post__body li, .blog-post__timestamp, .blog-post__author-name{ color: var(--color-dark-blue); font-family: Raleway,sans-serif; font-weight: 300; line-height: 28px; } @media screen and (min-width: 768px) { .blog-post__body p, .blog-post__body li, .blog-post__timestamp, .blog-post__author-name { font-size:1.25rem; line-height:38px; } }} .hs-search-field__button svg { height: 20px; } }