@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
/* Open Sans 400 and 700 only, as on U8: live never loaded 300, so its font-weight:300 headings render at 400. */
/*
	Kim theme
	-----------------------------------------------------------------
	Plain CSS (no Sass source): ported from the U8 site's Css/default.css (L2602143, Fase 6) onto the Codebase.
	The header, hero, breadcrumb, certifications strip, footer and mobile bottom bar are the U8 markup (Views/Partials/header.cshtml
	and footer.cshtml) and carry the class "kim"; their rules are scoped to it, so they never reach the block grid. The page content
	is the Codebase block grid: it gets the Kim look through the core's variables and a few base rules.
	Bundler rules: no :is()/:where(), no nesting, absolute URLs, UTF-8 without BOM.

	Sections:
	1. Settings
	2. Base and content
	3. Grid (Bootstrap 4 subset for the U8 markup)
	4. Header and navigation
	5. Hero, slider and breadcrumb
	6. Certifications
	7. Footer
	8. Mobile header and navigation
	9. Buttons
	10. Forms
	11. Rows with a background colour
*/
/* ---------------------------------------------------------------
	1. Settings
--------------------------------------------------------------- */
:root {
  --lz-wrapper: 1140px;
  --lz-gutter: 15px;
  --lz-section: 48px;
  --lz-space: calc(var(--lz-section) / 2);
  --lz-padding-step: var(--lz-space);
  --lz-overlap-step: var(--lz-space);
  --lz-column-gap-step: var(--lz-space);
  --lz-stack-gap: 15px;
  --lz-flow: 15px;
  --lz-header: 126px;
  --c-font: "Open Sans", sans-serif;
  --c-font-size: 15px;
  --c-text: var(--lz-color-text, var(--lz-color-tekst, #101921));
  --c-muted: #999999;
  --c-background: var(--lz-color-background, var(--lz-color-achtergrond, #FFFFFF));
  --c-surface: rgba(0, 0, 0, 0.05);
  --c-line: var(--lz-color-line, var(--lz-color-lijn, rgba(0, 0, 0, 0.05)));
  --c-accent: var(--lz-color-primary, var(--lz-color-primair, #0085CF));
  --c-accent-text: var(--lz-color-primary-text, var(--lz-color-primair-tekst, #FFFFFF));
  --c-dark: #101921;
  --c-h1: 27px;
  --c-h2: 23px;
  --c-h3: 15px;
  --c-h4: 15px;
}

@media (max-width: 991.98px) {
  :root {
    --lz-header: 0px;
    --c-h1: 23px;
    --c-h2: 19px;
  }
}
/* ---------------------------------------------------------------
	2. Base and content
--------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--c-background);
  color: var(--c-text);
  font-family: var(--c-font);
  font-size: var(--c-font-size);
  line-height: 30px;
}

body.no-scroll {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-accent);
}

h1 {
  font-size: var(--c-h1);
  font-weight: 700;
  line-height: 30px;
  text-transform: uppercase;
}

h2 {
  font-size: var(--c-h2);
  font-weight: 700;
}

h3, h4, h5, h6 {
  font-size: var(--c-h3);
  font-weight: 400;
}

a, a:hover {
  color: var(--c-accent);
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  height: auto;
}

hr {
  margin: 0 0 15px 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

#main {
  padding-block: 30px 48px;
}

.kim-sr-only {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  position: absolute;
}

.kim .group:before, .kim .group:after {
  content: "";
  display: table;
}

.kim .group:after {
  clear: both;
}

.kim .padding.top {
  padding-top: 48px;
}

.kim .padding.double.top {
  padding-top: 30px;
}

.kim .padding.right {
  padding-right: 20px;
}

.kim .padding.bottom {
  padding-bottom: 48px;
}

.kim .padding.left {
  padding-left: 20px;
}

.kim p, .kim h1, .kim h2, .kim h4, .kim h5, .kim h6 {
  margin: 0 0 15px 0;
}

.kim h3 {
  margin: 0;
}

/* ---------------------------------------------------------------
	3. Grid (Bootstrap 4 subset for the U8 markup)
--------------------------------------------------------------- */
.kim .container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

.kim .row {
  margin-right: -15px;
  margin-left: -15px;
  display: flex;
  flex-wrap: wrap;
}

.kim .row.align-items-center {
  align-items: center;
}

.kim .col, .kim .col-lg-3, .kim .col-lg-6, .kim .col-lg-9, .kim .col-md-4, .kim .col-md-6 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  position: relative;
}

.kim .col {
  max-width: 100%;
  flex-basis: 0;
  flex-grow: 1;
}

@media (min-width: 576px) {
  .kim .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .kim .container {
    max-width: 720px;
  }
  .kim .col-md-4 {
    max-width: 33.333333%;
    flex: 0 0 33.333333%;
  }
  .kim .col-md-6 {
    max-width: 50%;
    flex: 0 0 50%;
  }
}
@media (min-width: 992px) {
  .kim .container {
    max-width: 960px;
  }
  .kim .col-lg-3 {
    max-width: 25%;
    flex: 0 0 25%;
  }
  .kim .col-lg-6 {
    max-width: 50%;
    flex: 0 0 50%;
  }
  .kim .col-lg-9 {
    max-width: 75%;
    flex: 0 0 75%;
  }
}
@media (min-width: 1200px) {
  .kim .container {
    max-width: 1140px;
  }
}
/* ---------------------------------------------------------------
	4. Header and navigation
--------------------------------------------------------------- */
header.kim {
  top: 0;
  right: 0;
  left: 0;
  background-color: #FFFFFF;
  box-shadow: 0 10px 5px var(--c-accent);
  position: fixed;
  z-index: 4;
}

header.kim .col {
  min-height: 126px;
}

header.kim .logo {
  top: 15px;
  bottom: 15px;
  position: relative;
  float: left;
}

header.kim .logo a img {
  width: auto;
  max-height: 96px;
  height: 96px;
  display: block;
}

header.kim .toolbar {
  top: 15px;
  right: 15px;
  bottom: 15px;
  font-size: 13px;
  color: var(--c-muted);
  position: absolute;
}

header.kim .toolbar p {
  margin: 0;
  float: left;
}

header.kim .toolbar div {
  float: right;
}

header.kim .toolbar span {
  margin: 0 10px;
}

header.kim .toolbar span, header.kim .toolbar a {
  color: var(--c-dark);
}

header.kim .search-form {
  line-height: 0;
  padding-top: 5px;
  position: relative;
}

header.kim .search-form input {
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--c-accent);
  border-radius: 0;
  font: inherit;
  font-size: 13px;
  line-height: 17px;
  text-indent: 10px;
  outline: none;
  position: relative;
  -webkit-appearance: none;
}

header.kim .search-form button {
  height: 21px;
  top: 5px;
  right: 0;
  padding: 0 6px;
  background-color: var(--c-accent);
  border: 0;
  cursor: pointer;
  outline: none;
  position: absolute;
}

header.kim .search-form i {
  color: #FFFFFF;
}

/* Desktop search in the style of the mobile one (feedback MRUT 2026-10-21): white field with a light line and a square blue
   button, 34px high so it stays clear of the navigation (from 54px). */
@media (min-width: 992px) {
  header.kim .toolbar p {
    line-height: 34px;
  }
  header.kim .toolbar .search-form {
    padding-top: 0;
    line-height: normal;
  }
  header.kim .toolbar .search-form input {
    width: 220px;
    height: 34px;
    padding: 0 46px 0 12px;
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 32px;
    text-indent: 0;
    display: block;
  }
  header.kim .toolbar .search-form input:focus {
    border-color: var(--c-accent);
  }
  header.kim .toolbar .search-form button {
    width: 34px;
    height: 34px;
    top: 0;
    right: 0;
    padding: 0;
  }
}

header.kim nav {
  right: 15px;
  bottom: 24px;
  position: absolute;
}

header.kim nav ul {
  margin: 0;
  padding: 0;
}

header.kim nav ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
  float: left;
  transition: all linear 250ms;
  position: relative;
}

header.kim nav ul li:last-of-type {
  display: none;
}

header.kim nav ul li a {
  padding: 7px 15px 11px 15px;
  font-weight: 700;
  text-decoration: none;
  display: block;
  transition: all linear 250ms;
}

header.kim nav ul li a, header.kim nav ul li a:hover {
  color: var(--c-dark);
}

header.kim nav > ul > li:before {
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--c-accent);
  content: "";
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
  position: absolute;
}

header.kim nav > ul > li:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

header.kim nav > ul > li.active:after {
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--c-accent);
  content: "";
  position: absolute;
}

header.kim nav > ul > li > a:hover, header.kim nav > ul > li.active > a {
  text-decoration: none;
  color: #000000;
}

header.kim nav ul li ul {
  top: 100%;
  left: 0;
  padding: 15px;
  background-color: #FFFFFF;
  display: none;
  position: absolute;
}

header.kim nav ul li:hover ul, header.kim nav ul li:focus-within ul {
  display: block;
  box-shadow: -10px 10px 5px var(--c-accent);
}

header.kim nav ul li ul li {
  margin: 0;
  float: none;
  display: block;
  white-space: nowrap;
}

header.kim nav ul li ul li:last-of-type {
  display: block;
}

header.kim nav ul li ul li a {
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  display: block;
}

header.kim nav ul li ul li.active a {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  header.kim nav ul li a {
    padding-left: 10px;
  }
}
@media (min-width: 992px) {
  header.kim #mobile-home, header.kim .mobile-information {
    display: none;
  }
}
@media (max-height: 830px) and (min-width: 992px) {
  header.kim nav > ul > li:last-of-type {
    margin: 0;
    float: none;
    display: block;
  }
}
/* ---------------------------------------------------------------
	5. Hero, slider and breadcrumb
--------------------------------------------------------------- */
section.hero.kim {
  height: 470px;
  background-color: rgba(0, 0, 0, 0.05);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.homepage section.hero.kim {
  height: 670px;
}

/* As U8's bxSlider: the photos at full width, the slider as high as the tallest one. The slides share one grid cell, so the
   order of the images does not matter. They slide to the
   left (default.js): waiting slides stand right of the frame, .is-active slides in, .is-leaving slides out to the left and
   then jumps back to the right without a transition. */
.header-slider.kim {
  overflow: hidden;
  display: grid;
  position: relative;
}

.header-slider.kim .slide-item {
  transform: translateX(100%);
  grid-area: 1 / 1;
  align-self: start;
}

.header-slider.kim .slide-item.is-active, .header-slider.kim .slide-item.is-leaving {
  transition: transform 1000ms ease;
}

.header-slider.kim .slide-item.is-active, .header-slider.kim:not(.is-ready) .slide-item:first-child {
  transform: none;
}

.header-slider.kim .slide-item.is-leaving {
  transform: translateX(-100%);
}

/* Every photo in the ratio of the tallest live slide (1920x720): the height stays as live, a wider photo (the building, 3:1)
   is zoomed in to fill the frame instead of leaving white below it (feedback MRUT 2026-10-21). */
.header-slider.kim img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 720;
  object-fit: cover;
  display: block;
}

section.breadcrumb.kim {
  border-bottom: 1px solid var(--c-line);
}

section.breadcrumb.kim .padding.top {
  padding-top: 15px;
}

section.breadcrumb.kim .padding.bottom {
  padding-bottom: 15px;
}

section.breadcrumb.kim ul {
  margin: 0;
  padding: 0;
}

section.breadcrumb.kim ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
  float: left;
  color: var(--c-dark);
}

section.breadcrumb.kim ul li .divider {
  margin: 0 5px;
  color: var(--c-muted);
}

section.breadcrumb.kim ul li a, section.breadcrumb.kim ul li a:hover {
  color: var(--c-muted);
}

section.search-title.kim .padding.double.top {
  padding-top: 30px;
}

section.search-title.kim h1 {
  margin: 0;
}

@media (max-width: 991.98px) {
  section.hero.kim {
    height: 230px;
  }
  .homepage section.hero.kim {
    height: 330px;
  }
  /* Phones: at least as high as the hero on the other pages (feedback Sam 2026-10-21; live is only 141px at 375px wide). */
  .header-slider.kim img {
    min-height: 230px;
    object-fit: cover;
  }
  section.breadcrumb.kim {
    display: none;
  }
}
/* ---------------------------------------------------------------
	6. Certifications
--------------------------------------------------------------- */
body.page section.certifications.kim {
  border-top: 1px solid var(--c-line);
}

section.certifications.kim h2 {
  margin: 0;
}

section.certifications.kim ul {
  margin: 0;
  padding: 0;
}

section.certifications.kim ul li {
  margin: 0 10px 15px 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
  float: left;
}

section.certifications.kim ul li:last-of-type {
  margin-right: 0;
}

section.certifications.kim ul li img {
  width: auto;
  height: 120px;
  margin-right: 15px;
  display: block;
}

/* ---------------------------------------------------------------
	6b. Cards ("Ook interessant", cards.cshtml) and the call to action in the sidebar
	The CTA is content: a text block starting with p.title next to the page text (twoColumns_8_4, mcp/12-zijbalk.js).
--------------------------------------------------------------- */
section.cards.kim {
  background: linear-gradient(to bottom, rgba(220, 216, 216, 0.25) 0%, rgba(220, 216, 216, 0) 100%);
}

section.cards.kim .padding.double.top {
  padding-top: 72px;
}

section.cards.kim .padding.bottom {
  padding-bottom: 72px;
}

section.cards.kim h2 {
  text-align: center;
}

section.cards.kim .card {
  margin: 0 0 15px 0;
}

section.cards.kim .card .image {
  width: 100%;
  margin-bottom: 15px;
  padding-top: 56.25%;
  background-color: rgba(0, 0, 0, 0.05);
  background-position: center;
  background-size: cover;
  border: 4px solid #FFFFFF;
  box-sizing: border-box;
  box-shadow: 10px 10px 5px grey;
  position: relative;
}

section.cards.kim .card .image:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 100%;
  background-color: rgba(16, 25, 33, 0);
  font-family: "Font Awesome 7 Pro";
  font-size: 48px;
  font-weight: 900;
  content: "\f0c1";
  color: rgba(255, 255, 255, 0);
  transition: all linear 250ms;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
}

section.cards.kim .card .image:hover:after {
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
}

section.cards.kim .card .image a {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 3;
}

section.cards.kim .card h3 {
  margin: 0;
}

/* Page text with sidebar (twoColumns_8_4): U8 t_project/t_service used col-lg-7 + col-lg-4 on a 30px gutter, the last twelfth empty. */
@media (min-width: 992px) {
  .umb-block-grid__layout-item[data-content-element-type-alias="twoColumns_8_4"] > .umb-block-grid__area-container {
    column-gap: 30px;
  }
  .umb-block-grid__layout-item[data-content-element-type-alias="twoColumns_8_4"] > .umb-block-grid__area-container > .umb-block-grid__area[data-area-alias="left"] {
    grid-column: 1 / span 7;
  }
  .umb-block-grid__layout-item[data-content-element-type-alias="twoColumns_8_4"] > .umb-block-grid__area-container > .umb-block-grid__area[data-area-alias="right"] {
    grid-column: 8 / span 4;
  }
}

/* ---------------------------------------------------------------
	6c. Homepage bands and project tiles (cards.cshtml)
	Home: the page text on a light band, two thirds wide (U8 col-lg-8); the cards without their gradient; the projects band.
--------------------------------------------------------------- */
.homepage #main {
  padding-block: 72px;
  background-color: rgba(217, 218, 228, 0.25);
}

.homepage section.cards.kim {
  background: none;
}

.homepage section.cards.kim h2, .homepage section.projects.kim h2 {
  font-size: var(--c-h1);
  line-height: 30px;
  text-transform: uppercase;
}

section.projects.kim {
  padding-bottom: 15px;
  background-color: rgba(217, 218, 228, 0.25);
  position: relative;
}

section.projects.kim .padding.top {
  padding-top: 72px;
}

section.projects.kim .padding.bottom {
  padding-bottom: 72px;
}

section.projects.kim h2 {
  float: left;
}

.homepage section.projects.kim h2 {
  float: none;
  text-align: center;
}

section.projects.kim p.button {
  margin: 30px 0 0 15px;
}

section.projects.kim .project {
  width: 100%;
  padding-top: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  background-position: center;
  background-size: cover;
  position: relative;
}

section.projects.kim .project a {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 2;
}

section.projects.kim .project h3 {
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 9px 30px;
  background-color: var(--c-accent);
  color: #FFFFFF;
  transition: all linear 250ms;
  position: absolute;
  z-index: 1;
}

section.projects.kim .project:hover h3 {
  padding: 21px 30px;
  background-color: var(--c-dark);
}

section.projects.overview.kim .grouped {
  position: relative;
}

section.projects.overview.kim .project {
  margin-top: 15px;
}

@media (min-width: 992px) {
  .homepage #main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container {
    max-width: 66.666667%;
  }
}

/* Bands as blocks in the content (Kaarten / Projecttegels at the root of the block grid, feedback MRUT 2026-10-21): they look
   as when they stood under #main. Full width: #main is a container, so 50cqw is half its width (without the scrollbar). The
   flex gap (48px) is the old space under the text (#main padding-bottom); on the homepage 72px, on its grey band. Bands
   follow each other without a gap and the last one closes the page without the bottom padding of #main. */
#main {
  container-type: inline-size;
}

#main > .umb-block-grid > section.cards.kim, #main > .umb-block-grid > section.projects.kim {
  margin-right: calc(50% - 50cqw);
  margin-left: calc(50% - 50cqw);
}

#main > .umb-block-grid > section.kim + section.kim {
  margin-top: -48px;
}

#main > .umb-block-grid > section.cards.kim:last-child, #main > .umb-block-grid > section.projects.kim:last-child {
  margin-bottom: -48px;
}

.homepage #main > .umb-block-grid > .lz-row + section.kim {
  margin-top: 24px;
}

.homepage #main > .umb-block-grid > section.cards.kim:last-child, .homepage #main > .umb-block-grid > section.projects.kim:last-child {
  margin-bottom: -72px;
}

/* The grey band of the homepage lies under the whole of #main: the bands cover it with their own (white based) colour. */
.homepage #main > .umb-block-grid > section.cards.kim {
  background: #FFFFFF;
}

.homepage #main > .umb-block-grid > section.projects.kim {
  background: linear-gradient(rgba(217, 218, 228, 0.25), rgba(217, 218, 228, 0.25)), #FFFFFF;
}
@media (max-width: 991.98px) {
  section.projects.kim h2 {
    float: none;
  }
  section.projects.kim .project {
    margin-top: 15px;
  }
}

/* ---------------------------------------------------------------
	6d. Sidebar carousel (imageCarouselBlock override), as the U8 bxSlider: one image, round blue arrows over it, the blue
	"i / n afbeeldingen" bar under it. Selectors carry .wrapper .glide.kim-carousel to beat the core's .wrapper .glide rules.
--------------------------------------------------------------- */
.wrapper .glide.kim-carousel {
  margin-bottom: 30px;
  position: relative;
}

/* U8 slide: 2:1 frame (padding-top 50%), photo anchored at the top and cropped below. */
.wrapper .glide.kim-carousel .image {
  margin: 0;
  border: 0;
  box-shadow: none;
  aspect-ratio: 2 / 1;
}

.wrapper .glide.kim-carousel .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.wrapper .glide.kim-carousel .img-count {
  padding: 10px 0;
  background-color: var(--c-accent);
  text-align: center;
}

.wrapper .glide.kim-carousel .img-count p {
  margin: 0;
  color: #FFFFFF;
}

.wrapper .glide.kim-carousel .glide__arrows {
  top: calc(50% - 8px);
  right: 0;
  left: 0;
  margin: 0;
  padding: 0 10px;
  justify-content: space-between;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.wrapper .glide.kim-carousel .glide__arrows .glide__arrow {
  width: 32px;
  height: 32px;
  background-color: var(--c-accent);
  border-radius: 50%;
  font-size: 0;
  color: #FFFFFF;
  pointer-events: auto;
  cursor: pointer;
}

.wrapper .glide.kim-carousel .glide__arrows .glide__arrow:after {
  font-family: "Font Awesome 7 Pro";
  font-size: 16px;
  font-weight: 900;
  line-height: 32px;
  content: "\f105";
}

.wrapper .glide.kim-carousel .glide__arrows .glide__arrow--left:after {
  content: "\f104";
}

/* ---------------------------------------------------------------
	6e. Search page (core SearchResults view): inside the wrapper and as a plain list of links, as on U8.
--------------------------------------------------------------- */
body.searchResults #main > .search--results {
  width: 100%;
  max-width: var(--lz-wrapper);
  margin: 0 auto;
  padding-inline: var(--lz-gutter);
  box-sizing: border-box;
}

body.searchResults .search--result {
  margin: 0 0 0 20px;
  display: list-item;
  list-style: disc;
  color: var(--c-accent);
}

body.searchResults .search--result p {
  margin: 0;
}

body.searchResults .search--result .heading-4 {
  font-size: var(--c-font-size);
  font-weight: 400;
}

body.searchResults .search--result .url, body.searchResults .search--result .matched-text {
  display: none;
}

section.search-title.kim h2 {
  margin: 30px 0 0 0;
  font-size: var(--c-h1);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
	6f. U8 content classes still in the migrated page text (U8 default.css applied them site-wide)
--------------------------------------------------------------- */
.rich-text .padding.left {
  padding-left: 20px;
}

.rich-text .padding.right {
  padding-right: 20px;
}

.rich-text .padding.bottom {
  padding-bottom: 48px;
}

.rich-text .img-responsive img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Certificeringen: logo left of the heading, text and button (U8 inline float, stripped from the stored HTML). */
.rich-text .group {
  clear: both;
}

.rich-text .group img {
  margin: 0 30px 30px 0;
  float: left;
}

/* reCAPTCHA: no label above the widget (U8 showed none). */
.umbraco-forms-form .umbraco-forms-field.recaptcha2 .umbraco-forms-label {
  display: none;
}

#main p.title, section.search-cta.kim p.title {
  font-size: 23px;
  font-weight: 700;
  color: var(--c-accent);
}

/* ---------------------------------------------------------------
	7. Footer
--------------------------------------------------------------- */
footer.kim .footer {
  background-color: var(--c-dark);
  background-image: url("/_Codebase/_Themes/Kim/Images/footer_background-tiny.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto 100%;
  color: #FFFFFF;
}

footer.kim .footer > .container > .row {
  background: linear-gradient(to right, rgba(16, 25, 33, 0) 0%, rgb(16, 25, 33) 8%, rgb(16, 25, 33) 100%);
}

footer.kim .footer a, footer.kim .footer a:hover {
  color: #FFFFFF;
}

footer.kim .footer p.title, footer.kim .footer h2 {
  margin: 0 0 15px 0;
  padding: 0 0 14px 0;
  border-bottom: 1px solid #FFFFFF;
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  color: #FFFFFF;
}

footer.kim .footer ul {
  margin: 0 0 15px 0;
  padding: 0;
}

footer.kim .footer ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

footer.kim .footer ul li a {
  text-decoration: none;
}

footer.kim .footer ul li a:hover {
  text-decoration: underline;
}

footer.kim .footer ul.social li {
  margin-right: 10px;
  display: inline-block;
  float: left;
}

footer.kim .footer ul.social li:last-of-type {
  margin-right: 0;
}

footer.kim .footer ul.social li a {
  width: 48px;
  height: 48px;
  line-height: 48px;
  background-color: #FFFFFF;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  color: var(--c-dark);
  transition: all linear 250ms;
  display: block;
}

footer.kim .footer ul.social li a:hover {
  background-color: var(--c-accent);
  color: #FFFFFF;
}

/* Copyright and legal links left, "Gerealiseerd door: LOGISZ" right (as on Portuur and Wiggers); stacked and centred on phones. */
footer.kim .copyright {
  line-height: 26px;
}

footer.kim .copyright .padding {
  padding-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 30px;
}

footer.kim .copyright p {
  margin: 0;
  font-size: 13px;
  display: inline-block;
  vertical-align: top;
}

@media (max-width: 767.98px) {
  footer.kim .copyright .padding {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

footer.kim .copyright p#copyright-line a {
  color: var(--c-muted);
}

footer.kim .copyright ul {
  margin: 0 0 0 10px;
  padding: 0;
  display: inline-block;
  vertical-align: top;
}

footer.kim .copyright ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
  float: left;
}

footer.kim .copyright ul li:not(:last-of-type):after {
  content: "\00a0\2022\00a0";
  color: var(--c-muted);
  display: inline-block;
}

footer.kim .copyright ul li a {
  font-size: 13px;
  text-decoration: none;
  color: var(--c-muted);
}

footer.kim .copyright ul li a:hover {
  text-decoration: underline;
}

@media (max-width: 1199.98px) {
  footer.kim .footer {
    background-image: none;
  }
}
/* ---------------------------------------------------------------
	8. Mobile header and navigation (feedback 2026-10-21)
	Below 992px the header sticks to the top: logo left, hamburger right, animated into a cross as on Portuur. The hamburger
	opens the navigation as a panel under the header, as on Staring: rows with a line between them, an arrow per item with
	subpages that slides its submenu in from the right (with a back button), then search and the information bar. default.js
	toggles .open on #kim-menu, .sub-open on the item, .is-shifted on the list and sets --kim-menu-top.
--------------------------------------------------------------- */
.kim-burger, header.kim nav .submenu-toggle, header.kim nav ul li ul li.submenu-back, header.kim .mobile-search {
  display: none;
}

@media (max-width: 991.98px) {
  header.kim {
    box-shadow: none;
    position: sticky;
  }
  header.kim .col {
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  header.kim .logo {
    top: auto;
    bottom: auto;
    float: none;
  }
  header.kim .logo a img {
    height: 64px;
    max-height: 64px;
  }
  header.kim .toolbar {
    display: none;
  }
  .kim-burger {
    width: 48px;
    height: 48px;
    margin: 0 -8px 0 15px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
  }
  .kim-burger .bun {
    width: 32px;
    height: 32px;
    display: block;
    position: relative;
  }
  .kim-burger .burger {
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
  }
  .kim-burger .bun:before, .kim-burger .bun:after, .kim-burger .burger:before, .kim-burger .burger:after {
    width: 32px;
    height: 2px;
    background-color: var(--c-accent);
    content: "";
    transition: all 500ms cubic-bezier(0.1, 0.9, 0, 1.2);
    position: absolute;
  }
  .kim-burger .bun:before {
    top: 5px;
    right: 5px;
  }
  .kim-burger .bun:after {
    bottom: 5px;
    left: -5px;
  }
  .kim-burger .burger:before, .kim-burger .burger:after {
    top: 15px;
    left: 0;
  }
  .kim-burger[aria-expanded=true] .bun:before, .kim-burger[aria-expanded=true] .bun:after {
    width: 0;
  }
  .kim-burger[aria-expanded=true] .burger:before {
    transform: rotate(135deg);
  }
  .kim-burger[aria-expanded=true] .burger:after {
    transform: rotate(45deg);
  }
  header.kim nav {
    top: var(--kim-menu-top, 88px);
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: 30px;
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #E3E3E3;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 300ms, transform 300ms, visibility 0s linear 300ms;
    display: block;
    position: fixed;
    z-index: 3;
  }
  header.kim nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 300ms, transform 300ms;
  }
  header.kim nav > ul {
    transition: transform 300ms ease;
    position: relative;
  }
  header.kim nav > ul.is-shifted {
    transform: translateX(-100%);
  }
  header.kim nav ul li {
    border-bottom: 1px solid #E3E3E3;
    display: flex;
    float: none;
    position: static;
  }
  header.kim nav > ul > li:before, header.kim nav > ul > li.active:after {
    display: none;
  }
  header.kim nav ul li a {
    padding: 9px 15px;
    flex: 1 1 auto;
  }
  header.kim nav > ul > li > a, header.kim nav > ul > li > a:hover {
    color: var(--c-dark);
  }
  header.kim nav > ul > li.active > a, header.kim nav > ul > li.active > a:hover, header.kim nav ul li ul li.active a {
    color: var(--c-accent);
    text-decoration: none;
  }
  header.kim nav .submenu-toggle {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-left: 1px solid #E3E3E3;
    font-size: 18px;
    color: var(--c-accent);
    cursor: pointer;
    display: block;
    flex: 0 0 48px;
  }
  header.kim nav ul li ul {
    top: 0;
    left: 100%;
    width: 100%;
    padding: 0;
    background: none;
    display: none;
    position: absolute;
  }
  header.kim nav ul li:hover ul, header.kim nav ul li:focus-within ul {
    display: none;
    box-shadow: none;
  }
  header.kim nav ul li.sub-open ul {
    display: block;
  }
  header.kim nav ul li ul li {
    white-space: normal;
  }
  header.kim nav ul li ul li a {
    padding: 9px 15px;
  }
  header.kim nav ul li ul li.submenu-back {
    display: flex;
  }
  header.kim .submenu-back button {
    width: 100%;
    padding: 9px 15px;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--c-accent);
    text-align: left;
    cursor: pointer;
  }
  header.kim .submenu-back button i {
    margin-right: 10px;
  }
  header.kim #mobile-home {
    display: flex;
  }
  header.kim .mobile-search {
    margin: 30px 15px 0;
    display: block;
  }
  header.kim .mobile-search .search-form {
    line-height: normal;
    padding-top: 0;
  }
  header.kim .mobile-search .search-form input {
    width: 100%;
    height: 48px;
    padding: 9px 63px 9px 15px;
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 30px;
    text-indent: 0;
    display: block;
  }
  header.kim .mobile-search .search-form button {
    width: 48px;
    height: 48px;
    top: 0;
    right: 0;
  }
  header.kim .mobile-information {
    padding: 20px 15px 0;
    text-align: center;
  }
  header.kim .mobile-information p, header.kim .mobile-information a {
    margin: 0;
    color: var(--c-dark);
    display: inline;
  }
  header.kim .mobile-information span {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .kim-burger .bun:before, .kim-burger .bun:after, .kim-burger .burger:before, .kim-burger .burger:after,
  header.kim nav, header.kim nav.open, header.kim nav > ul {
    transition: none;
  }
}
/* ---------------------------------------------------------------
	9. Buttons
	U8 a.button: a blue block with a light shadow block behind it and an angle icon; the Codebase button block renders p.button a.
--------------------------------------------------------------- */
p.button a, p.link a,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation button.btn,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation input[type=submit].btn {
  padding: 9px 30px;
  background-color: var(--c-accent);
  border: 0;
  border-radius: 0;
  font: inherit;
  line-height: 30px;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--c-accent-text);
  transition: all linear 250ms;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* The form's submit button gets the same shadow block and angle as the content buttons (feedback 2026-10-21). */
p.button a:before, p.link a:before,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation button.btn:before {
  width: 100%;
  height: 100%;
  top: 10px;
  left: -10px;
  background-color: rgba(217, 218, 228, 0.25);
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}

p.button a:after, p.link a:after,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation button.btn:after {
  margin-left: 30px;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f105";
  display: inline-block;
}

p.button a:hover, p.button a:focus-visible, p.link a:hover, p.link a:focus-visible,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation button.btn:hover,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation input[type=submit].btn:hover {
  background-color: var(--c-dark);
  color: var(--c-accent-text);
  text-decoration: none;
}

p.button a span, p.link a span {
  display: inline;
}

/* ---------------------------------------------------------------
	10. Forms
--------------------------------------------------------------- */
.umbraco-forms-form.umbraco-forms-logisz input[type=text], .umbraco-forms-form.umbraco-forms-logisz input[type=email],
.umbraco-forms-form.umbraco-forms-logisz input[type=tel], .umbraco-forms-form.umbraco-forms-logisz input[type=number],
.umbraco-forms-form.umbraco-forms-logisz input[type=date], .umbraco-forms-form.umbraco-forms-logisz input[type=url],
.umbraco-forms-form.umbraco-forms-logisz input[type=password], .umbraco-forms-form.umbraco-forms-logisz textarea,
.umbraco-forms-form.umbraco-forms-logisz select {
  min-height: 48px;
  padding: 9px 30px;
  background-color: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  outline: none;
  box-sizing: border-box;
}

.umbraco-forms-form.umbraco-forms-logisz textarea {
  height: 110px;
}

/* U8 showed no labels: a grey placeholder and the required star at the right of the field. The core's floating label is
   turned off; the label text stays in the accessibility tree (font-size 0), only its star is shown. The doubled classes
   outrank the core's :focus/:not(:placeholder-shown) label rule. */
.umbraco-forms-form.umbraco-forms-logisz input.text::placeholder, .umbraco-forms-form.umbraco-forms-logisz textarea::placeholder {
  color: #757575;
  opacity: 1;
}

.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.umbraco-forms-field > .umbraco-forms-label.umbraco-forms-label {
  top: 0;
  right: 30px;
  left: auto;
  margin: 0;
  padding: 0;
  background: none;
  font-size: 0;
  line-height: 48px;
  color: #757575;
  transform: none;
  pointer-events: none;
  position: absolute;
}

.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field > .umbraco-forms-label .umbraco-forms-indicator {
  font-size: 15px;
  color: #757575;
}

/* The consent checkbox carries its own text: no field label or star next to it (feedback 2026-10-21, as wiggers.eu). */
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.dataconsent > .umbraco-forms-label.umbraco-forms-label {
  display: none;
}

/* The 20px box centred on the first 30px line of its text. */
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.dataconsent .checkbox-wrapper input[type=checkbox] {
  margin-top: 5px;
  accent-color: var(--c-accent);
}

.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-recaptcha-notice {
  font-size: 13px;
  line-height: 20px;
  display: block;
}

.umbraco-forms-form.umbraco-forms-logisz .heading-4 {
  color: var(--c-accent);
}

.umbraco-forms-form.umbraco-forms-logisz input:focus, .umbraco-forms-form.umbraco-forms-logisz textarea:focus,
.umbraco-forms-form.umbraco-forms-logisz select:focus {
  outline: 1px solid var(--c-accent);
}

.umbraco-forms-form.umbraco-forms-logisz .input-validation-error {
  background-color: rgba(255, 0, 0, 0.5);
}

.umbraco-forms-form.umbraco-forms-logisz .field-validation-error, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-validation-summary,
.validation-summary-errors ul {
  color: #FF0000;
}

/* ---------------------------------------------------------------
	10b. Core overrides (Atlas, umbraco-17-upgrade/gotchas: generic core.css rules that change a ported theme)
--------------------------------------------------------------- */
/* FA7 gives every icon a fixed 1.25em width; the U8 site (FA5) had none. .fa-fw keeps its width via the variable. */
body {
  --fa-width: auto;
}

/* The core caps text at 640px; the U8 text column was the full col-lg-8. */
.rich-text {
  max-width: none;
}

/* The core gives every iframe a margin: the reCAPTCHA v3 badge then sits askew and half open (Atlas gotcha, wiggers). */
.grecaptcha-badge iframe {
  margin: 0;
}

/* The core hyphenates headings; U8 did not. */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: normal;
  hyphens: manual;
}

/* TipTap stores list items as <li><p>: without this every bullet gets a paragraph margin. */
.rich-text li > p {
  margin: 0;
}

.rich-text img {
  max-width: 100%;
  height: auto;
}

/* The core master's scroll-to-top button did not exist on the U8 site. */
#scrollTopBtn {
  display: none;
}

/* ---------------------------------------------------------------
	11. Rows with a background colour
	A colour picked on a row only sets --lz-row-bg in the core; here the row gets it, with some room inside.
--------------------------------------------------------------- */
.lz-row[class*=lz-bg--] {
  --lz-pt: var(--lz-padding-step);
  --lz-pb: var(--lz-padding-step);
  background: var(--lz-row-bg);
}

.lz-row.lz-on-dark {
  color: #FFFFFF;
}

/* On Blauw / Donkerblauw (theme colours, mcp/29) headings and links turn white, a button white with blue text. */
.lz-row.lz-on-dark h1, .lz-row.lz-on-dark h2, .lz-row.lz-on-dark h3, .lz-row.lz-on-dark h4, .lz-row.lz-on-dark h5, .lz-row.lz-on-dark h6,
.lz-row.lz-on-dark p.title, .lz-row.lz-on-dark .rich-text a {
  color: #FFFFFF;
}

.lz-row.lz-on-dark p.button a {
  background-color: #FFFFFF;
  color: var(--c-accent);
}

.lz-row.lz-on-dark p.button a:hover, .lz-row.lz-on-dark p.button a:focus-visible {
  background-color: var(--c-dark);
  color: #FFFFFF;
}

.lz-row[class*=lz-bg-left--], .lz-row[class*=lz-bg-right--] {
  --lz-split: 50%;
  --lz-pt: var(--lz-padding-step);
  --lz-pb: var(--lz-padding-step);
  background: linear-gradient(to right, var(--lz-row-left, transparent) var(--lz-split), var(--lz-row-right, transparent) var(--lz-split));
}