/*
	Westerhof theme
	-----------------------------------------------------------------
	Source of default.css (compiled by compilerconfig.json, Web Compiler). Edit this file, not default.css.

	The look of westerhof-bv.com (v10 theme "Westerhof": KW/wwwroot/Themes/3897/Css/styles.scss) on the markup of v17.
	Started from the Clean theme: navigation, dropdowns, mobile menu, buttons, forms and footer; the Westerhof styles of
	the v10 site are added per component. Fonts (Source Sans 3) and images (patterns, 3D shapes) are in this folder.
	Everything that makes the site work and lay out comes from the core (_Codebase/_Core/Content/Stylesheets/core.scss):
	wrappers and widths, the row settings (padding top/bottom and margin top: enkel, dubbel, drievoudig; column gap;
	vertical align), columns and grids, the header mechanics and the mobile menu, form layout, the footer columns and the
	responsive behaviour. The markup is the Launchpad's (Views, copied), so its classes are the ones to style here.

	Sections:
	1. Settings: the layout values the core reads, and the few colours and sizes of this theme
	2. Base
	3. Header, navigation and dropdowns
	4. Mobile menu
	5. Buttons
	6. Rows with a background colour
	7. Forms
	8. Footer
*/
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/source-sans-3-v9-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/source-sans-3-v9-latin-600.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/source-sans-3-v9-latin-700.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 900;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/source-sans-3-v9-latin-900.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 300;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/fontawesome6/fa-light-300.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 400;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/fontawesome6/fa-regular-400.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/fontawesome6/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  src: url("/_Codebase/_Themes/Westerhof/Fonts/fontawesome6/fa-brands-400.woff2") format("woff2");
}
/* ---------------------------------------------------------------
	1. Settings
--------------------------------------------------------------- */
/*
	Layout (read by the core). These are the core's own defaults, repeated here so they are easy to change; smaller screens
	get their own values in the media queries below.
	- --lz-wrapper: the maximum width of the content.
	- --lz-gutter: the space between the content and the edge of the screen.
	- --lz-section: the space between two rows, and the base of the steps below.
	- --lz-padding-step: one step of a row's "Padding boven/onder" (enkel = 1, dubbel = 2, drievoudig = 3 steps).
	- --lz-overlap-step: one step of a row's "Marge boven" (the row slides that far up over the row above).
	- --lz-column-gap-step: one step of a row's "Column gap".
	- --lz-stack-gap: the space between columns once they are stacked (smaller screens).
	- --lz-flow: the top margin of text (headings, paragraphs); a row's top padding takes it into account.
	- --lz-header: the height of the header bar; the mobile menu opens right under it.
*/
:root {
  --lz-wrapper: 1640px;
  --lz-gutter: 20px;
  --lz-section: 120px;
  --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: 32px;
  --lz-flow: 16px;
  --lz-header: 162px;
  /* Westerhof colours (v10 styles.scss). Light blue is the heading colour, dark blue the main brand colour, green the
     accent. Lighter blue was an invalid value in v10 (#223071A), so it rendered transparent; here a light tint. */
  --w-dark-blue: #223071;
  --w-light-blue: #2863AE;
  --w-lighter-blue: #E9EFF7;
  --w-light-blue-10: rgb(40 99 174 / 0.1);
  --w-green: #C6D843;
  --w-dark-green: #AEC025;
  --w-black: #000000;
  /* Look of this theme. Source Sans 3 is served from this theme folder (@font-face above). */
  --c-font: "Source Sans 3", Verdana, Geneva, sans-serif;
  --c-font-size: 15px;
  --c-line-height: 24px;
  /* Icons in Font Awesome 6 (font faces above), as in v10: the families the Font Awesome 7 classes read, and icons as wide
     as their glyph (Font Awesome 7 gives every icon a fixed 1.25em). */
  --fa-family-classic: "Font Awesome 6 Pro";
  --fa-style-family: "Font Awesome 6 Pro";
  --fa-family-brands: "Font Awesome 6 Brands";
  --fa-width: auto;
  /*
  	Colours. The theme node's colour list (tab Branding) turns every colour into --lz-color-{name} (name in lower case,
  	spaces become hyphens). A colour with one of these names takes over; otherwise the neutral value after it is used:
  	- Primary (or Primair): buttons and the active menu item; "Primary text" (Primair tekst): the text on a button
  	- Text (Tekst), Background (Achtergrond), Footer: the text, the page and the footer band
  	- Line (Lijn): borders and dividers
  	The colours picked on a row ("Background colour") work with any name: the core passes them on as --lz-row-bg.
  */
  --c-text: var(--lz-color-text, var(--lz-color-tekst, #212529));
  --c-muted: #5C5C5C;
  --c-background: var(--lz-color-background, var(--lz-color-achtergrond, #FFFFFF));
  --c-surface: var(--w-lighter-blue);
  --c-footer: var(--lz-color-footer, var(--w-dark-blue));
  --c-line: var(--lz-color-line, var(--lz-color-lijn, #DDDDDD));
  --c-accent: var(--lz-color-primary, var(--lz-color-primair, var(--w-green)));
  --c-accent-text: var(--lz-color-primary-text, var(--lz-color-primair-tekst, var(--w-dark-blue)));
  --c-heading: var(--w-light-blue);
  --c-link: var(--w-dark-blue);
  --c-radius: 6px;
  --c-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
  /* Headings: size of h1 ... h4 (v10; smaller on phones, below) */
  --c-h1: 46px;
  --c-h2: 28px;
  --c-h3: 20px;
  --c-h4: 18px;
}

/* Tablet and phone as in v10 (up to 1024px): smaller headings, and no extra room between stacked columns (the margins of
   the content give the room, as with v10's Bootstrap columns). */
@media (max-width: 1024px) {
  :root {
    --lz-gutter: 20px;
    --lz-section: 96px;
    --lz-header: 88px;
    --lz-stack-gap: 0px;
    --c-h1: 28px;
    --c-h2: 20px;
    --c-h3: 18px;
    --c-h4: 15px;
  }
}
@media (max-width: 768px) {
  :root {
    --lz-gutter: 20px;
    --lz-section: 64px;
  }
}
/* ---------------------------------------------------------------
	2. Base
--------------------------------------------------------------- */
body {
  background: var(--c-background);
  color: var(--c-text);
  font-family: var(--c-font);
  font-size: var(--c-font-size);
  line-height: var(--c-line-height);
  -webkit-font-smoothing: auto;
}

/* Headings as in v10: light blue (h3 dark blue), bold; a part of a title between |bars| (span) in green. */
h1, h2, h3, h4, h5, h6 {
  margin: 24px 0 0;
  font-weight: 700;
  color: var(--c-heading);
}

h1 {
  font-size: var(--c-h1);
  line-height: 50px;
}

h2 {
  font-size: var(--c-h2);
  line-height: 32px;
}

h3 {
  font-size: var(--c-h3);
  line-height: 24px;
  color: var(--w-dark-blue);
}

h4 {
  font-size: var(--c-h4);
  line-height: 24px;
  font-weight: 900;
}

h5, h6 {
  font-size: var(--c-font-size);
  line-height: var(--c-line-height);
  font-weight: 900;
}

@media (max-width: 1024px) {
  h1 {
    line-height: 32px;
  }
  h2, h3, h4 {
    line-height: 24px;
  }
}
/* Text blocks use the full width of their column (v10); the core caps them at 640px. Lists 24px under the text above
   them, as everything else in v10 (the core: 16px). */
.rich-text {
  max-width: none;
}
.rich-text ul, .rich-text ol {
  margin-top: 24px;
}
.rich-text ul li p, .rich-text ol li p {
  margin: 0 !important;
  padding: 0 !important;
}

ul li p, ol li p {
  margin: 0 !important;
  padding: 0 !important;
}

/* The row grid: its column gap never more than the row can hold (on a phone 11 gaps of 32px are wider than the row and
   pushed the content past the right margin). The core caps the area grid the same way. */
.umb-block-grid__layout-container {
  column-gap: min(var(--umb-block-grid--column-gap, 32px), 9%);
}

/* Columns 40px apart, as v10's grid and Bootstrap gutter (the core: 32px). A row's own "Column gap" and the Machinepark
   rows set their own. */
.umb-block-grid__area-container {
  --umb-block-grid--areas-column-gap: 40px;
}

h1 span, h2 span {
  color: var(--w-green);
}

p, ol, ul {
  margin: 24px 0 0;
}

/* v10: paragraphs black, other text (lists, tables, labels) the grey body colour. Where a part of a row is dark, its
   paragraphs follow its white text. */
p {
  color: var(--w-black);
}

.lz-row.lz-on-dark-left .umb-block-grid__area-container > .umb-block-grid__area:first-child p,
.lz-row.lz-on-dark-right .umb-block-grid__area-container > .umb-block-grid__area:last-child p {
  color: inherit;
}

/* A small label above a title (subtitle of a heading block or card, the hero label). */
.lz-label, p.subtitle {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-light-blue);
}

a {
  color: inherit;
}

/* Links in running text: dark blue, underlined until hovered. */
:is(.rich-text, .lz-beamer, .card .body, .umbraco-forms-form) a:not(.button a) {
  color: var(--c-link);
}
:is(.rich-text, .lz-beamer, .card .body, .umbraco-forms-form) a:not(.button a):hover {
  text-decoration: none;
}

/* Lists in running text: a green chevron instead of a bullet (v10). */
:is(.rich-text, .lz-beamer, .card .body, .card-360metal, .products td) ul,
ul.features {
  padding: 0;
}
:is(.rich-text, .lz-beamer, .card .body, .card-360metal, .products td) ul > li,
ul.features > li {
  padding-left: 30px;
  list-style: none;
  position: relative;
}
:is(.rich-text, .lz-beamer, .card .body, .card-360metal, .products td) ul > li::before,
ul.features > li::before {
  top: 0;
  left: 0;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-weight: 400;
  content: "\f054";
  color: var(--w-green);
  position: absolute;
}

strong, b {
  font-weight: 700;
}

img {
  height: auto;
}

/* The logo is an inline SVG without a size of its own (lockup.cshtml): without this it fills the full width. */
.lz-lockup {
  width: auto;
  height: 48px;
  display: block;
}

/* Small plain buttons of the markup (menu arrows, back, video toggle): no browser button look. */
.submenu-arrow, .back-btn, .lz-video__toggle {
  background: none;
  border: 0;
  color: inherit;
}

/* ---------------------------------------------------------------
	3. Header, navigation and dropdowns
--------------------------------------------------------------- */
/* Text that is only for screen readers (the labels of the phone and e-mail icons). */
.sr-only {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

/*
	The bar (as in v10): fixed at the top over the hero, dark blue fading to transparent, white logo and navigation.
	The service menu (secondary: uppercase, phone and e-mail icons, the green login button) sits above the main menu.
*/
#header > .placeholder > .top {
  top: 0;
  right: 0;
  left: 0;
  background: linear-gradient(180deg, rgb(34, 48, 113) 0%, rgba(34, 48, 113, 0) 100%);
  color: #FFFFFF;
  position: fixed;
  z-index: 100;
}
#header > .placeholder > .top .wrapper {
  justify-content: space-between;
}

#header .logo {
  margin-left: -20px;
  align-self: flex-start;
  display: flex;
}

#header .logo .lz-lockup {
  height: 60px;
}

#header .navigation {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
#header .navigation nav > ul > li > a {
  text-decoration: none;
  color: #FFFFFF;
}
#header .navigation nav > ul > li > a:hover, #header .navigation nav > ul > li > a:focus-visible, #header .navigation nav > ul > li > a[aria-current=page] {
  color: var(--w-green);
}
#header .navigation {
  /* An item with a dropdown gets a chevron. */
}
#header .navigation nav > ul > li.has-children > a > span::after {
  margin-left: 13.5px;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-weight: 900;
  font-size: 16px;
  content: "\f078";
  vertical-align: top;
}
#header .navigation {
  /* v10: in the service menu the regular chevron, after the smaller space of its 14px label. */
}
#header .navigation nav.secondary > ul > li.has-children > a > span::after {
  margin-left: 12.7px;
  font-weight: 400;
}
#header .navigation {
  /* Dropdown (v10): a white card right under the item, as wide as its longest item, no shadow; the items in the size of
     their menu (18/26px, service menu 14/20px), regular weight, no capitals. */
}
#header .navigation nav ul li ul {
  width: max-content;
  min-width: 100%;
  gap: 0;
  padding: 12px 32px 12px 0;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: none;
  z-index: 100;
}
#header .navigation nav ul li ul a {
  padding: 0 16px;
  font-weight: 400;
  text-transform: none;
  white-space: nowrap;
  color: var(--w-black);
  text-decoration: none;
}
#header .navigation nav ul li ul a:hover, #header .navigation nav ul li ul a:focus-visible {
  text-decoration: underline;
}
#header .navigation nav.primary > ul {
  gap: 32px;
}
#header .navigation nav.primary > ul > li > a {
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
#header .navigation nav.primary > ul li ul a {
  font-size: 18px;
  line-height: 26px;
}
#header .navigation nav.secondary > ul {
  gap: 32px;
}
#header .navigation nav.secondary > ul > li > a {
  padding: 6px 0;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
}
#header .navigation nav.secondary > ul li ul a {
  font-size: 14px;
  line-height: 20px;
}
#header .navigation nav.secondary > ul > li.phone, #header .navigation nav.secondary > ul > li.email {
  margin-left: -12px;
}
#header .navigation nav.secondary > ul > li.phone > a, #header .navigation nav.secondary > ul > li.email > a {
  width: 32px;
  padding: 0;
  font-size: 15px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: var(--w-green);
}
#header .navigation nav.secondary > ul > li.phone > a:hover, #header .navigation nav.secondary > ul > li.phone > a:focus-visible, #header .navigation nav.secondary > ul > li.email > a:hover, #header .navigation nav.secondary > ul > li.email > a:focus-visible {
  color: #FFFFFF;
}
#header .navigation nav.secondary > ul > li.phone > a i, #header .navigation nav.secondary > ul > li.email > a i {
  line-height: inherit;
  display: inline;
}
#header .navigation nav.secondary > ul > li.login > a {
  padding: 6px 28px;
  background: var(--w-green);
  border-radius: var(--c-radius);
  font-weight: 600;
  text-transform: none;
  color: var(--w-dark-blue);
}
#header .navigation nav.secondary > ul > li.login > a:hover, #header .navigation nav.secondary > ul > li.login > a:focus-visible {
  background: var(--w-light-blue);
  color: #FFFFFF;
}

.hamburger {
  color: #FFFFFF;
}

/*
	The hero (v10 "jumbotron"): the page's header image under a dark blue veil (darker on the left, where the text is), the
	text in white with the title accent in green, the advantages with a green check, and the green X pattern bottom right.
	On the homepage it is taller, with the green plus shape on the right.
*/
#header > .placeholder > .bottom {
  min-height: 500px;
  padding: 165px 0 80px;
  background-color: var(--w-dark-blue);
  background-image: var(--background-image);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  color: #FFFFFF;
  position: relative;
  isolation: isolate;
}
#header > .placeholder > .bottom::before {
  inset: 0;
  background: linear-gradient(90deg, rgb(34, 48, 113) 25%, rgba(34, 48, 113, 0.5) 37.5%, rgba(34, 48, 113, 0) 50%), rgba(34, 48, 113, 0.5);
  content: "";
  position: absolute;
  z-index: -1;
}
#header > .placeholder > .bottom {
  /* The X pattern, as v10 against the hero itself (its wrapper there has no position): 156px past the right edge of the
     screen and 56px above the bottom, on every screen width. */
}
#header > .placeholder > .bottom::after {
  right: -156px;
  bottom: 56px;
  width: 577px;
  height: 136px;
  background: url("/_Codebase/_Themes/Westerhof/Images/x_green_with_white.svg") no-repeat;
  content: "";
  position: absolute;
}
#header > .placeholder > .bottom > .wrapper {
  position: relative;
}
#header > .placeholder > .bottom > .wrapper > .placeholder {
  max-width: 33.3333333333%;
  position: relative;
  z-index: 1;
}
#header > .placeholder > .bottom {
  /* v10: a long title word is not hyphenated ("Aanleverspecificaties" runs past the half column around 1200px). */
}
#header > .placeholder > .bottom h1 {
  overflow-wrap: normal;
  hyphens: manual;
}
#header > .placeholder > .bottom .lz-screamer {
  margin-top: 24px;
  color: #FFFFFF;
}
#header > .placeholder > .bottom .lz-screamer span {
  color: var(--w-green);
}
#header > .placeholder > .bottom .lz-beamer {
  padding-top: 0;
}
#header > .placeholder > .bottom .lz-beamer p {
  color: #FFFFFF;
}
#header > .placeholder > .bottom .lz-beamer a {
  color: #FFFFFF;
  text-decoration: underline;
}
#header > .placeholder > .bottom .lz-beamer a:hover {
  text-decoration: none;
}
#header > .placeholder > .bottom ul.features {
  margin-top: 24px;
}
#header > .placeholder > .bottom ul.features > li {
  color: #FFFFFF;
}
#header > .placeholder > .bottom ul.features > li::before {
  content: "\f00c";
}
#header > .placeholder > .bottom .buttons {
  margin-top: 8px;
}
#header > .placeholder > .bottom {
  /* The divider of the Launchpad markup is not used in this theme. */
}
#header > .placeholder > .bottom > .placeholder:last-child {
  display: none;
}

body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom {
  min-height: 750px;
}
body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom > .wrapper {
  display: flow-root;
}
body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom {
  /* v10: 260px from the top of the hero, against the right edge of the 1640px page (20px in from it on smaller screens). */
}
body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom > .wrapper::before {
  top: 95px;
  right: 0;
  width: 240px;
  height: 240px;
  background: url("/_Codebase/_Themes/Westerhof/Images/plus.svg") no-repeat 0 0;
  content: "";
  position: absolute;
}
body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom::after {
  display: none;
}
@media (max-width: 1640px) {
  body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom > .wrapper::before {
    right: 20px;
  }
}

@media (max-width: 1024px) {
  #header .logo {
    margin-top: 0;
    margin-left: -16px;
    align-self: center;
  }
  #header .logo .lz-lockup {
    height: 48px;
  }
  /* No decorative shapes over the text on smaller screens. */
  #header > .placeholder > .bottom > .wrapper::before,
  #header > .placeholder > .bottom::after {
    display: none;
  }
  /* The hero as high as its text (v10: no minimum height, 140px above the text and 80px below). */
  #header > .placeholder > .bottom,
  body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom {
    min-height: 0;
    padding-top: 140px;
    /* The veil runs from dark blue at the bottom (under the text) to clear at the top (v10). */
  }
  #header > .placeholder > .bottom::before,
  body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom::before {
    background: linear-gradient(0deg, rgb(34, 48, 113) 0%, rgba(34, 48, 113, 0) 100%), rgba(34, 48, 113, 0.5);
  }
  #header > .placeholder > .bottom > .wrapper > .placeholder,
  body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom > .wrapper > .placeholder {
    max-width: 50%;
  }
}
@media (max-width: 576px) {
  #header > .placeholder > .bottom > .wrapper > .placeholder,
  body:has(#header .bottom:not(.lz-hero--compact)) #header > .placeholder > .bottom > .wrapper > .placeholder {
    max-width: none;
  }
}
/* With the mobile menu open the bar is solid dark blue (v10 body.is--locked). */
body:has(.nav-menu.open) #header > .placeholder > .top {
  background-color: var(--w-dark-blue);
}

#header > .placeholder > .top {
  transition: background-color 125ms linear;
}

/* "Header verbergen": only the bar, on a solid dark blue background, and room for it above the content. */
#header > .placeholder.no-hero {
  height: var(--lz-header);
}
#header > .placeholder.no-hero > .top {
  background: var(--w-dark-blue);
}

/* ---------------------------------------------------------------
	4. Mobile menu
	As in v10 (Slinky): under the header bar a white list over the full width (items 15px, 8px 35px, thin light blue lines,
	dark blue chevrons) on a light blue sheet that fills the rest of the screen. Both slide up from the bottom in 0.5s;
	a submenu slides in from the right in 0.3s while the list takes its height. A submenu row shows only the back arrow.
	The panel is as high as its content (initMobileMenu in default.js).
--------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* The light blue sheet under the list, sliding up with it. */
  .overlay {
    top: var(--lz-header, 88px);
    background: var(--w-light-blue);
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.5s ease, visibility 0s 0.5s;
  }
  .overlay.active {
    transform: none;
    transition: transform 0.5s ease, visibility 0s;
  }
  .nav-menu {
    transform: translateY(calc(100dvh - var(--lz-header, 88px)));
    transition: transform 0.5s ease, height 0.3s ease, visibility 0s 0.5s;
  }
  .nav-menu.open {
    transform: none;
    transition: transform 0.5s ease, height 0.3s ease, visibility 0s;
  }
  .nav-menu .menu-panel {
    transition: left 0.3s ease;
  }
  /* No scrolling in the list (v10 Slinky: overflow hidden): while the height animates it would show a scrollbar. */
  .nav-menu .menu-panel ul {
    overflow: hidden;
  }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .overlay, .overlay.active, .nav-menu, .nav-menu.open, .nav-menu .menu-panel {
    transition: none;
  }
}
/* The arrows of the core's mobile menu (named Font Awesome 7 there): Font Awesome 6 regular, 15px, as v10. */
.nav-menu .menu-panel .panel-header .back-btn::after,
.nav-menu .menu-panel ul li.menu-item .submenu-arrow::after {
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-size: 15px;
  font-weight: 400;
}

.nav-menu {
  left: 0;
  right: 0;
  background: #FFFFFF;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}
.nav-menu.open {
  left: 0;
}

.nav-menu .menu-panel {
  padding: 0;
  background: #FFFFFF;
  /* A line above the list (v10), on a submenu above its back row. */
}
.nav-menu .menu-panel[data-depth="0"] > ul, .nav-menu .menu-panel:not([data-depth="0"]) > .panel-header {
  border-top: 1px solid #EDF5FA;
}
.nav-menu .menu-panel .panel-header {
  min-height: 48px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #EDF5FA;
}
.nav-menu .menu-panel .panel-header .back-btn {
  width: 80px;
  height: 48px;
  color: #21209C;
}
.nav-menu .menu-panel .panel-header {
  /* v10 shows no title in a submenu: only for screen readers. */
}
.nav-menu .menu-panel .panel-header .panel-title {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  position: absolute;
}
.nav-menu .menu-panel ul {
  gap: 0;
}
.nav-menu .menu-panel ul li.menu-item {
  border-bottom: 1px solid #EDF5FA;
}
.nav-menu .menu-panel ul li.menu-item a.menu-link {
  padding: 8px 35px;
  line-height: 32px;
  text-decoration: none;
  color: var(--w-black);
}
.nav-menu .menu-panel ul li.menu-item a.menu-link:hover, .nav-menu .menu-panel ul li.menu-item a.menu-link:focus-visible {
  text-decoration: underline;
}
.nav-menu .menu-panel ul li.menu-item.has-children {
  grid-template-columns: minmax(0, 1fr) 80px;
}
.nav-menu .menu-panel ul li.menu-item .submenu-arrow {
  width: 80px;
  height: 48px;
  color: #21209C;
}

/* ---------------------------------------------------------------
	5. Buttons
	As in v10: p.button is a green button with dark blue text (light blue with white text on hover); p.button.textual
	(and the second button p.link) is a dark blue text link. The same for the buttons of a form.
--------------------------------------------------------------- */
p.button a, p.link a,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]) {
  padding: 8px 28px;
  background: var(--c-accent);
  border: 0;
  border-radius: var(--c-radius);
  font: inherit;
  font-weight: 600;
  line-height: var(--c-line-height);
  color: var(--c-accent-text);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
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 :is(button, input[type=submit]):hover,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]):focus-visible {
  background: var(--w-light-blue);
  color: #FFFFFF;
}

p.button.textual a, p.link a,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]).prev {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  color: var(--w-dark-blue);
}
p.button.textual a:hover, p.button.textual 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 :is(button, input[type=submit]).prev:hover,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]).prev:focus-visible {
  background: transparent;
  color: var(--w-dark-blue);
  text-decoration: underline;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
}
.buttons p {
  margin-top: 24px;
}

/* v10: up to 820px the buttons under each other, each over the full width (not a card, which has the class too). */
@media (max-width: 820px) {
  .buttons:not(.card) {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    row-gap: 0;
  }
  .buttons:not(.card) > p:not(:last-child) {
    margin-right: 20px;
  }
}
/* ---------------------------------------------------------------
	6. Rows with a background colour
	A colour picked on a row (theme node, tab Branding) only sets --lz-row-bg in the core; here the row gets it, with some
	room inside. A dark colour switches to white text.
--------------------------------------------------------------- */
/*
	As in v10: the rows (v10 sections) touch each other, without a gap between them or around the content, and every row
	has 56px above and 80px below its content. Two rows of the same colour after each other (or two without a colour)
	read as one band: the second has no room above it. "Padding boven/onder" dubbel/drievoudig adds to that.
*/
:root {
  --lz-row-gap: 0px;
}

#main {
  padding-block: 0;
  container-type: inline-size;
}

/* Full-width rows reach the edges of #main (cqw) instead of the viewport (vw): 100vw includes the scroll bar on desktop,
   which shifted their content 7px against the other rows. */
.lz-row.lz-full {
  margin-inline: calc(50% - 50cqw);
}

.umb-block-grid > .lz-row {
  --lz-pt: calc(56px + var(--lz-flow));
  --lz-pb: 80px;
}
.umb-block-grid > .lz-row.padding-top-dubbel {
  --lz-pt: calc(112px + var(--lz-flow));
}
.umb-block-grid > .lz-row.padding-top-drievoudig {
  --lz-pt: calc(168px + var(--lz-flow));
}
.umb-block-grid > .lz-row.padding-bottom-dubbel {
  --lz-pb: 160px;
}
.umb-block-grid > .lz-row.padding-bottom-drievoudig {
  --lz-pb: 240px;
}

/* Phone: 32px above and 56px below the content of a row (v10). */
@media (max-width: 576px) {
  .umb-block-grid > .lz-row {
    --lz-pt: calc(32px + var(--lz-flow));
    --lz-pb: 56px;
  }
}
.umb-block-grid > .lz-row.lz-bg--dark-blue + .lz-row.lz-bg--dark-blue,
.umb-block-grid > .lz-row.lz-bg--light-blue + .lz-row.lz-bg--light-blue,
.umb-block-grid > .lz-row.lz-bg--green + .lz-row.lz-bg--green,
.umb-block-grid > .lz-row:not([class*=lz-bg--]) + .lz-row:not([class*=lz-bg--]) {
  --lz-pt: 0px;
}

/* The curved divider of the Launchpad markup is not part of this theme. */
.lz-row > .divider {
  display: none;
}

.lz-row[class*=lz-bg--] {
  background: var(--lz-row-bg);
}

/* Dark blue and light blue rows: white headings and text (v10). */
.lz-row:is(.lz-bg--dark-blue, .lz-bg--light-blue) :is(h1, h2, h3, h4, h5, h6, p, li, td, th),
.lz-row:is(.lz-bg--dark-blue, .lz-bg--light-blue) > .inner-wrapper > .umb-block-grid__layout-container .rich-text :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: #FFFFFF;
}
.lz-row:is(.lz-bg--dark-blue, .lz-bg--light-blue) .rich-text a {
  color: #FFFFFF;
}

/* Green rows: dark blue text, and a dark blue button with white text (v10). */
.lz-row.lz-bg--green :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--w-dark-blue);
}
.lz-row.lz-bg--green p.button:not(.textual) a {
  background: var(--w-dark-blue);
  color: #FFFFFF;
}
.lz-row.lz-bg--green p.button:not(.textual) a:hover, .lz-row.lz-bg--green p.button:not(.textual) a:focus-visible {
  background: var(--w-light-blue);
}

/* Not full width: a tile inside the wrapper, with room on the sides too. */
.lz-row:is([class*=lz-bg--], [class*=lz-bg-left--], [class*=lz-bg-right--]):not(.lz-full) {
  padding-inline: var(--lz-gutter);
  border-radius: var(--c-radius);
}

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

/* A two-column row with a colour per half ("Background colour left/right"): painted as one gradient on the row, so there is
   no seam between the columns. The split follows the column ratio (33/67, 67/33); anything else is 50/50. */
.lz-row:is([class*=lz-bg-left--], [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));
}

.lz-row:has(> .umb-block-grid__layout-container > [data-content-element-type-alias=twoColumns_4_8]),
.lz-row:has(> .inner-wrapper > .umb-block-grid__layout-container > [data-content-element-type-alias=twoColumns_4_8]) {
  --lz-split: 33.333%;
}

.lz-row:has(> .umb-block-grid__layout-container > [data-content-element-type-alias=twoColumns_8_4]),
.lz-row:has(> .inner-wrapper > .umb-block-grid__layout-container > [data-content-element-type-alias=twoColumns_8_4]) {
  --lz-split: 66.667%;
}

.lz-row.lz-on-dark-left .umb-block-grid__area-container > .umb-block-grid__area:first-child,
.lz-row.lz-on-dark-right .umb-block-grid__area-container > .umb-block-grid__area:last-child {
  color: #FFFFFF;
}

/* ---------------------------------------------------------------
	7. Forms
	As in v10: white fields of 60px with a light blue border and rounded corners, the label inside the empty field; with
	focus or a value it moves onto the border as a small light blue tag (the floating itself is the core's). Check boxes
	as light blue squares, a light blue file button, 16px between the fields.
--------------------------------------------------------------- */
.umbraco-forms-form.umbraco-forms-logisz {
  --lz-field-height: 60px;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field {
  margin-top: 16px;
}
.umbraco-forms-form.umbraco-forms-logisz :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], textarea, select) {
  padding: 16px 24px;
  background: #FFFFFF;
  border: 2px solid var(--w-light-blue-10);
  border-radius: 8px;
  font: inherit;
  color: var(--w-black);
}
.umbraco-forms-form.umbraco-forms-logisz :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], textarea, select):focus {
  border-color: var(--w-light-blue);
  outline: 0;
}
.umbraco-forms-form.umbraco-forms-logisz {
  /* v10: the text area 84px high, on a line of text (8px under it). */
}
.umbraco-forms-form.umbraco-forms-logisz textarea {
  height: 84px;
  min-height: 84px;
  margin-bottom: 8px;
}
.umbraco-forms-form.umbraco-forms-logisz {
  /* v10: the first field right under the text above the form, the button 16px under the last field. */
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-fieldset:first-of-type > .umbraco-forms-field:first-child {
  margin-top: 0;
}
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation {
  margin-top: 16px;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> :where(input.text, input.datepickerfield, textarea, select)) > .umbraco-forms-label {
  line-height: 24px;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-label {
  color: var(--c-text);
}
.umbraco-forms-form.umbraco-forms-logisz {
  /* The label resting inside the field, and as a tag on the border once the field has focus or a value. */
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> :where(input.text, input.datepickerfield, textarea, select)) > .umbraco-forms-label {
  left: 21px;
  padding: 0 5px;
  border-radius: 4px;
  transition: all 0.15s ease-in-out;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field > :is(input.text, input.datepickerfield, textarea):is(:focus, :not(:placeholder-shown)) ~ .umbraco-forms-label,
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field > select ~ .umbraco-forms-label {
  padding: 3px 8px;
  background: var(--w-light-blue);
  line-height: 12px;
  color: #FFFFFF;
}
.umbraco-forms-form.umbraco-forms-logisz {
  /* Consent: only the check box with its text (the field caption, "AVG", is left out as in v10). */
}
.umbraco-forms-form.umbraco-forms-logisz .dataconsent > .umbraco-forms-label {
  display: none;
}
.umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper input, .umbraco-forms-form.umbraco-forms-logisz .checkboxlist > div input, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div input {
  opacity: 0;
  position: absolute;
}
.umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper label, .umbraco-forms-form.umbraco-forms-logisz .checkboxlist > div label, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div label {
  padding-left: 32px;
  position: relative;
}
.umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper label::before, .umbraco-forms-form.umbraco-forms-logisz .checkboxlist > div label::before, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div label::before {
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: #D0E6F3;
  border: 1px solid #D0E6F3;
  border-radius: 4px;
  box-sizing: border-box;
  content: "";
  position: absolute;
}
.umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper input:checked + label::after, .umbraco-forms-form.umbraco-forms-logisz .checkboxlist > div input:checked + label::after, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div input:checked + label::after {
  top: 0;
  left: 4px;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-weight: 900;
  content: "\f00c";
  color: #21209C;
  position: absolute;
}
.umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper input:is(:hover, :focus-visible) + label::before, .umbraco-forms-form.umbraco-forms-logisz .checkboxlist > div input:is(:hover, :focus-visible) + label::before, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div input:is(:hover, :focus-visible) + label::before {
  border-color: #2A99D7;
}
.umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div label::before {
  border-radius: 50%;
}
.umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div input:checked + label::after {
  left: 6px;
  font-size: 11px;
  content: "\f111";
}
.umbraco-forms-form.umbraco-forms-logisz input[type=file]::file-selector-button {
  margin-right: 16px;
  padding: 8px 28px;
  background: var(--w-light-blue);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
}
.umbraco-forms-form.umbraco-forms-logisz input[type=file]:hover::file-selector-button {
  background: var(--w-dark-blue);
}
.umbraco-forms-form.umbraco-forms-logisz .field-validation-error, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-validation-summary {
  margin-top: 8px;
  color: #FF3131;
}
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]) {
  height: auto;
}

/* A form on a green row (Landingspagina 360METAL): a dark blue submit button and white check boxes (v10). */
.lz-bg--green .umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]):not(.prev) {
  background: var(--w-dark-blue);
  color: #FFFFFF;
}
.lz-bg--green .umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]):not(.prev):hover, .lz-bg--green .umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]):not(.prev):focus-visible {
  background: var(--w-light-blue);
  color: #FFFFFF;
}
.lz-bg--green .umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper label::before {
  background: #FFFFFF;
}

/* The application form of a vacancy in a light blue box (v10 .form-box). */
.vacancies.detail .form {
  margin-top: 24px;
  padding: 40px;
  background: var(--w-light-blue-10);
  border-radius: 16px;
}
.vacancies.detail .form > h3 {
  margin-top: 0;
}

/* ---------------------------------------------------------------
	8. Footer
	As in v10 (footer.cshtml): a light blue band with the white 3D shape of 360METAL behind the second column, white text
	and links (underlined on hover). The first column holds the logo, the green social media icons and the legal links
	with the copyright; the theme's footer columns follow from the third of five columns, on a tablet too; phone: one
	centred column, without the shape. Scoped as the core's footer rules (#footer > .bottom), which it replaces.
--------------------------------------------------------------- */
#footer {
  background: var(--w-light-blue) url("/_Codebase/_Themes/Westerhof/Images/3d_shape_360_white.svg") no-repeat calc(50% - 292px) 48px/480px auto;
  color: #FFFFFF;
}
#footer a {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-block;
}
#footer a:hover, #footer a:focus-visible {
  text-decoration: underline;
}
#footer p, #footer li {
  color: #FFFFFF;
}

#footer > .bottom .wrapper {
  padding-block: 30px 54px;
}
#footer > .bottom .grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 0 40px;
}
#footer > .bottom .grid > :first-child + * {
  grid-column-start: 3;
}
#footer > .bottom .grid p, #footer > .bottom .grid ul {
  margin: 24px 0 0;
}
#footer > .bottom .grid ul {
  display: block;
}
#footer > .bottom .logo {
  margin-left: -20px;
}
#footer > .bottom .logo .lz-lockup {
  height: 60px;
}
#footer > .bottom .grid ul.socials {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}
#footer > .bottom .grid ul.socials a {
  font-size: 18px;
  color: var(--w-green);
}
#footer > .bottom .grid ul.socials li {
  height: 24px;
  line-height: 24px;
}
#footer > .bottom .copyright {
  margin-top: 24px;
  padding-top: 0;
  display: block;
  /* v10: the links as text, each followed by 20px and a space, so they wrap at the same places. */
}
#footer > .bottom .copyright nav ul {
  margin: 0;
  display: block;
}
#footer > .bottom .copyright nav ul li {
  display: inline;
}
#footer > .bottom .copyright nav ul li:not(:last-child) a {
  margin-right: 20px;
}
#footer > .bottom .copyright p {
  margin: 0;
}
#footer > .bottom .copyright p span {
  display: block;
}

/* A tablet keeps the five columns and the shape (v10); a phone has one column without the shape. */
@media (max-width: 576px) {
  #footer {
    background-image: none;
  }
  #footer > .bottom {
    text-align: center;
  }
  #footer > .bottom .grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  #footer > .bottom .grid > :first-child + * {
    grid-column-start: auto;
  }
  #footer > .bottom .logo {
    display: inline-block;
  }
  #footer > .bottom .grid ul.socials, #footer > .bottom .copyright nav ul {
    justify-content: center;
  }
  #footer > .bottom .copyright {
    align-items: center;
  }
}
/* ---------------------------------------------------------------
	9. Components (v10 styles of westerhof-bv.com on the v17 markup)
--------------------------------------------------------------- */
/*
	Images with a ratio (image block "Verhouding", card image): the picture fills a box of that ratio, with rounded corners.
	v10 drew these as figure.ratio_*; here they are div.image.ratio_*.
*/
.image[class*=ratio_] {
  width: 100%;
  margin: 24px 0 0;
  position: relative;
}
.image[class*=ratio_] picture, .image[class*=ratio_] > img {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  position: absolute;
  overflow: hidden;
}
.image[class*=ratio_] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image[class*=ratio_].ratio_1_1 {
  padding-top: 100%;
}
.image[class*=ratio_].ratio_4_3 {
  padding-top: 75%;
}
.image[class*=ratio_].ratio_5_2 {
  padding-top: 40%;
}
.image[class*=ratio_].ratio_5_1 {
  padding-top: 20%;
}
.image[class*=ratio_].ratio_16_9 {
  padding-top: 56.25%;
}
.image[class*=ratio_].ratio_21_9 {
  padding-top: 42.857%;
}

/* An image block without a ratio: the image as it is, with rounded corners. */
.image:not([class*=ratio_]) img {
  border-radius: 16px;
  display: block;
}

/* The 3D shape behind a card ("3D-patroon"). */
.shape_3d {
  margin-top: 0;
  padding: 78px 0;
  background: url("/_Codebase/_Themes/Westerhof/Images/3d_shape.svg") no-repeat center/auto 100%;
}
.shape_3d > .card.horizontal:not(.entries .card) {
  margin: 0;
}

/* Blocks that start with a card or list, not with text, get no block margin (the core gives them the 16px of text): in v10
   the first card, vacancy or filter follows the room of the row with only its own margin. */
.umb-block-grid__area > :is(.entries, .jobs, .products, .form) {
  margin-top: 0;
}

/*
	Card (block view "Card", v10 Card macro): the body (label, title, text, buttons) next to a 16:9 image; the image on the
	right, or on the left with "Tekst en afbeelding omdraaien". The X patterns at two corners, unless "X-patroon
	verbergen". The background colour is the body's; without one the text is white (for a dark row).
*/
.card.horizontal:not(.entries .card) {
  margin: 24px 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  position: relative;
}
.card.horizontal:not(.entries .card):not(.hide-x-pattern)::before, .card.horizontal:not(.entries .card):not(.hide-x-pattern)::after {
  width: 280px;
  height: 66px;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  z-index: 0;
}
.card.horizontal:not(.entries .card):not(.hide-x-pattern)::before {
  top: -48px;
  left: -48px;
  background-image: url("/_Codebase/_Themes/Westerhof/Images/x_white_with_blue.svg");
}
.card.horizontal:not(.entries .card):not(.hide-x-pattern)::after {
  right: -48px;
  bottom: -48px;
  background-image: url("/_Codebase/_Themes/Westerhof/Images/x_green_with_white.svg");
}
.card.horizontal:not(.entries .card) > .image {
  width: 50%;
  margin: 0;
  padding-top: 0;
  order: 2;
}
.card.horizontal:not(.entries .card) > .image picture {
  border-radius: 0 16px 16px 0;
}
.card.horizontal:not(.entries .card) > .body {
  width: 50%;
  padding: 16px 100px 40px 40px;
  box-sizing: border-box;
  border-radius: 16px 0 0 16px;
  order: 1;
  position: relative;
  z-index: 1;
}
.card.horizontal:not(.entries .card) > .body :is(h2, p, ul, li) {
  color: #FFFFFF;
}
.card.horizontal:not(.entries .card) > .body p.subtitle {
  margin-top: 24px;
}
.card.horizontal:not(.entries .card) > .body p.subtitle + h2 {
  margin-top: 0;
}
.card.horizontal:not(.entries .card) > .body ul > li::before {
  content: "\f00c";
}
.card.horizontal:not(.entries .card).is-flipped > .body {
  order: 2;
  border-radius: 0 16px 16px 0;
}
.card.horizontal:not(.entries .card).is-flipped > .image {
  order: 1;
}
.card.horizontal:not(.entries .card).is-flipped > .image picture {
  border-radius: 16px 0 0 16px;
}
.card.horizontal:not(.entries .card) {
  /* A card without two buttons is one big link in v10: a hover shadow and a dark blue body. */
}
.card.horizontal:not(.entries .card):not(.buttons):hover > .body {
  box-shadow: inset 4px 4px 20px 0 rgba(0, 0, 0, 0.6);
}
.card.horizontal:not(.entries .card).white > .body {
  background: #FFFFFF;
}
.card.horizontal:not(.entries .card).white > .body h2 {
  color: var(--w-light-blue);
}
.card.horizontal:not(.entries .card).white > .body :is(p, ul, li) {
  color: var(--w-black);
}
.card.horizontal:not(.entries .card).lighter-blue > .body {
  padding-inline: 96px;
  background: var(--w-lighter-blue);
}
.card.horizontal:not(.entries .card).lighter-blue > .body h2 {
  margin-top: 0;
  color: var(--w-light-blue);
}
.card.horizontal:not(.entries .card).lighter-blue > .body :is(p, ul, li) {
  color: var(--w-black);
}
.card.horizontal:not(.entries .card).lighter-blue > .body p.subtitle {
  font-weight: 700;
}
.card.horizontal:not(.entries .card).lighter-blue > .body p.button:not(.textual) a {
  background: var(--w-light-blue);
  color: #FFFFFF;
}
.card.horizontal:not(.entries .card).lighter-blue > .body p.button:not(.textual) a:hover, .card.horizontal:not(.entries .card).lighter-blue > .body p.button:not(.textual) a:focus-visible {
  background: var(--w-dark-blue);
}
.card.horizontal:not(.entries .card).light-blue > .body {
  background: var(--w-light-blue);
}
.card.horizontal:not(.entries .card).dark-blue > .body {
  background: var(--w-dark-blue);
}
.card.horizontal:not(.entries .card).dark-blue > .body p.button.textual a {
  color: #FFFFFF;
}
.card.horizontal:not(.entries .card).green > .body {
  background: var(--w-green);
}
.card.horizontal:not(.entries .card).green > .body :is(h2, p, ul, li) {
  color: var(--w-dark-blue);
}
.card.horizontal:not(.entries .card).green > .body ul > li::before {
  color: #FFFFFF;
}
.card.horizontal:not(.entries .card).green > .body p.button:not(.textual) a {
  background: var(--w-dark-blue);
  color: #FFFFFF;
}
.card.horizontal:not(.entries .card).green > .body p.button:not(.textual) a:hover, .card.horizontal:not(.entries .card).green > .body p.button:not(.textual) a:focus-visible {
  background: #FFFFFF;
  color: var(--w-dark-blue);
}
.card.horizontal:not(.entries .card) {
  /* Text links of a card without a background (on a dark row) are white. */
}
.card.horizontal:not(.entries .card):not(.white, .lighter-blue, .green) > .body p.button.textual a {
  color: #FFFFFF;
}

/*
	360METAL: the green block with the 360METAL logo and its advantages on the left and the white "order online" card on
	the right, the 3D shape behind it and the X pattern at the bottom right. On the homepage it overlaps the hero.
*/
.card-360metal {
  margin: 24px 0 0;
  position: relative;
  z-index: 2;
}
.card-360metal .gradient {
  background: linear-gradient(to right, var(--w-green) 50%, var(--w-dark-green) 75%);
  border-radius: 16px;
  position: relative;
}
.card-360metal .gradient::before, .card-360metal .gradient::after {
  width: 280px;
  height: 66px;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  z-index: -1;
}
.card-360metal .gradient::after {
  right: -48px;
  bottom: -48px;
  background-image: url("/_Codebase/_Themes/Westerhof/Images/x_green_with_blue.svg");
}
.card-360metal .shape_3d_360 {
  padding: 40px;
  background: url("/_Codebase/_Themes/Westerhof/Images/3d_shape_360_green.svg") no-repeat center/auto 768px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.card-360metal .shape_3d_360 > div {
  width: 50%;
  box-sizing: border-box;
}
.card-360metal .logo {
  padding: 30px 40px;
}
.card-360metal .logo > img {
  height: 32px;
  display: block;
}
.card-360metal .logo ul {
  margin-top: 24px;
  padding: 0;
}
.card-360metal .logo ul > li {
  padding-left: 28px;
  list-style: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--w-dark-blue);
  position: relative;
}
.card-360metal .logo ul > li::before {
  top: 0;
  left: 0;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-weight: 900;
  content: "\f00c";
  color: var(--w-dark-blue);
  position: absolute;
}
.card-360metal .body {
  padding: 30px 40px;
  background: #FFFFFF;
  border-radius: 4px;
}
.card-360metal .body > img {
  width: 80px;
  height: auto;
  margin-left: 40px;
  float: right;
  transform: rotate(5deg);
}
.card-360metal .body h2 {
  margin: 0;
  color: var(--w-dark-blue);
}
.card-360metal .body p {
  color: var(--w-black);
}
.card-360metal .body p.button:not(.textual) a {
  background: var(--w-light-blue);
  color: #FFFFFF;
}
.card-360metal .body p.button:not(.textual) a:hover, .card-360metal .body p.button:not(.textual) a:focus-visible {
  background: var(--w-dark-blue);
}
.card-360metal .body p.button.textual a {
  color: var(--w-dark-blue);
}

/* Homepage: the first row (360METAL) slides up over the hero, as in v10. */
body.homepage .umb-block-grid > .lz-row:first-child .card-360metal {
  margin-top: -224px;
  z-index: 3;
}
body.homepage .umb-block-grid > .lz-row:first-child .card-360metal .gradient::before {
  top: -48px;
  left: -48px;
  background-image: url("/_Codebase/_Themes/Westerhof/Images/x_white_with_green.svg");
}

/* Tablet (v10 up to 1024px): the card stays side by side, with less padding and the buttons under each other. */
@media (max-width: 1024px) {
  .card.horizontal:not(.entries .card) > .body {
    padding: 8px 32px 32px;
  }
  .card.horizontal:not(.entries .card) > .body > .buttons {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0;
  }
  .card.horizontal:not(.entries .card).lighter-blue > .body {
    padding-inline: 32px;
  }
  .card-360metal .shape_3d_360 {
    padding: 24px;
  }
  .card-360metal .logo {
    padding: 0 0 32px;
  }
  .card-360metal .logo > img {
    width: auto;
    height: 24px;
  }
  .card-360metal .body > img {
    width: 60px;
    margin-left: 32px;
  }
  .card-360metal .body {
    padding: 24px;
  }
  .card-360metal {
    /* v10: the green runs to dark green over the whole width. */
  }
  .card-360metal .gradient {
    background: linear-gradient(to right, var(--w-green) 0%, var(--w-dark-green) 100%);
    border-radius: 8px;
  }
  body.homepage .umb-block-grid > .lz-row:first-child .card-360metal {
    margin-top: 48px;
  }
}
/* Phone (v10 up to 576px): stacked. */
@media (max-width: 576px) {
  .card.horizontal:not(.entries .card) {
    flex-direction: column;
  }
  .card.horizontal:not(.entries .card) > .image, .card.horizontal:not(.entries .card) > .body {
    width: 100%;
  }
  .card.horizontal:not(.entries .card) {
    /* v10: the text first and the photo under it (a flipped card: the photo first). */
  }
  .card.horizontal:not(.entries .card) > .image {
    padding-top: 56.25%;
    order: 2;
  }
  .card.horizontal:not(.entries .card) > .image picture {
    border-radius: 0 0 16px 16px;
  }
  .card.horizontal:not(.entries .card) > .body {
    border-radius: 16px 16px 0 0;
    order: 1;
  }
  .card.horizontal:not(.entries .card).is-flipped > .image {
    order: 1;
  }
  .card.horizontal:not(.entries .card).is-flipped > .image picture {
    border-radius: 16px 16px 0 0;
  }
  .card.horizontal:not(.entries .card).is-flipped > .body {
    order: 2;
    border-radius: 0 0 16px 16px;
  }
  .card-360metal .shape_3d_360 {
    flex-direction: column;
    align-items: stretch;
  }
  .card-360metal .shape_3d_360 > div {
    width: 100%;
  }
}
/*
	Entries (v10 MetalworkingList "Horizontal" and MaterialsList "Vertical"): cards with a light blue body, the title with a
	green arrow and the whole card as the link (the link of the title is stretched over it). On hover (and keyboard focus)
	an inner shadow and a dark blue body.
*/
.entries {
  display: grid;
  column-gap: 40px;
}
.entries.horizontal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.entries.vertical {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.entries .card {
  height: calc(100% - 24px);
  margin: 24px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  position: relative;
}
.entries .card::before {
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 4px 4px 20px 0 rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.entries .card:is(:hover, :focus-within)::before {
  opacity: 1;
}
.entries .card:is(:hover, :focus-within) > .body {
  background: var(--w-dark-blue);
}
.entries .card > .image {
  margin: 0;
  flex-shrink: 0;
}
.entries .card > .body {
  padding: 16px 40px 40px;
  background: var(--w-light-blue);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.entries .card > .body h3 {
  font-size: var(--c-h3);
  color: #FFFFFF;
}
.entries .card > .body h3::before {
  margin-right: 14px;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-size: 18px;
  font-weight: 900;
  content: "\f061";
  color: var(--w-green);
  width: 24px;
  display: inline-block;
  vertical-align: top;
}
.entries .card > .body h3 a {
  color: inherit;
  text-decoration: none;
  outline: 0;
}
.entries .card > .body h3 a::after {
  inset: 0;
  border-radius: 16px;
  content: "";
  position: absolute;
  z-index: 2;
}
.entries .card > .body h3 + p {
  margin-top: 8px;
}
.entries .card > .body p {
  color: #FFFFFF;
}
.entries .card.horizontal {
  flex-direction: row;
}
.entries .card.horizontal > .image {
  width: 25%;
  padding-top: 0;
}
.entries .card.horizontal > .image picture {
  border-radius: 16px 0 0 16px;
}
.entries .card.horizontal > .body {
  border-radius: 0 16px 16px 0;
}
.entries .card.vertical {
  flex-direction: column;
}
.entries .card.vertical > .image picture {
  border-radius: 16px 16px 0 0;
}
.entries .card.vertical > .body {
  border-radius: 0 0 16px 16px;
}
.entries .card.vertical p.button {
  margin-top: auto;
  padding-top: 24px;
}
.entries .card.vertical p.button span {
  padding: 8px 28px;
  background: var(--c-accent);
  border-radius: var(--c-radius);
  font-weight: 600;
  color: var(--c-accent-text);
  display: inline-block;
}
.entries .card.vertical:is(:hover, :focus-within) p.button span {
  background: var(--w-light-blue);
  color: #FFFFFF;
}

/* The intro (title and text) above entries is as narrow as the first column of v10's "cols-4-8" grid. */
:is(.rich-text, .module-title):has(+ .entries) {
  max-width: 33.3333333333%;
}

/*
	Products (material page): the filter on material type, the list of products and, on desktop, the details of the chosen
	product in a sticky panel on the right; on a phone the details open below the product (productsBlock.cshtml).
*/
.products [hidden] {
  display: none !important;
}
.products .material-type {
  margin-top: 0;
  padding: 20px 40px;
  background: var(--w-light-blue-10);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
}
.products .material-type p {
  margin: 0;
}
.products {
  /* A checkbox as in v10: a light blue square with a dark blue check. */
}
.products .checkbox-wrapper input {
  opacity: 0;
  position: absolute;
}
.products .checkbox-wrapper label {
  padding-left: 32px;
  position: relative;
  cursor: pointer;
}
.products .checkbox-wrapper label::before {
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: #D0E6F3;
  border: 1px solid #D0E6F3;
  border-radius: 4px;
  box-sizing: border-box;
  content: "";
  position: absolute;
}
.products .checkbox-wrapper input:checked + label::after {
  top: 0;
  left: 4px;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-weight: 900;
  content: "\f00c";
  color: #21209C;
  position: absolute;
}
.products .checkbox-wrapper input:is(:hover, :focus-visible) + label::before {
  border-color: #2A99D7;
}
.products > .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.products .list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.products .card {
  margin: 0;
  padding: 0;
  background: var(--w-light-blue-10);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.products .card > .image {
  width: 64px;
  margin: 0;
  flex: 0 0 64px;
  position: relative;
}
.products .card > .image picture {
  inset: 0;
  position: absolute;
}
.products .card > .image img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}
.products .card > .body {
  padding: 20px 40px;
  flex: 1 1 0;
  position: relative;
}
.products .card > .body p {
  margin: 0;
  font-size: var(--c-h4);
  font-weight: 900;
  color: var(--w-dark-blue);
}
.products .card > .details {
  padding: 16px 40px 40px;
  flex-basis: 100%;
  background: #FFFFFF;
  display: none;
  cursor: default;
}
.products .card:is(:hover, :focus-visible, .is--active) {
  background: var(--w-light-blue);
}
.products .card:is(:hover, :focus-visible, .is--active) > .body p {
  color: #FFFFFF;
}
.products .card {
  /* v10 hover (every card, desktop and phone): the name on dark blue and the card pressed in, a shadow inside over it all. */
}
.products .card:is(:hover, :focus-visible) > .body {
  background: var(--w-dark-blue);
}
.products .card:is(:hover, :focus-visible)::before {
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 4px 4px 20px 0 rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.products .card:focus-visible {
  outline: 2px solid var(--w-dark-blue);
  outline-offset: 2px;
}
.products {
  /* Phone: a chevron on each product; an active product shows its details below it. */
}
.products:not(.is--desktop) .card > .body {
  padding-right: 75px;
}
.products:not(.is--desktop) .card > .body::after {
  top: 20px;
  right: 40px;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-weight: 900;
  content: "\f078";
  color: var(--w-dark-blue);
  position: absolute;
}
.products:not(.is--desktop) .card:is(:hover, .is--active) > .body::after {
  color: #FFFFFF;
}
.products:not(.is--desktop) .card.is--active > .body::after {
  transform: rotate(-180deg);
}
.products:not(.is--desktop) .card.is--active > .details {
  display: block;
}
.products:not(.is--desktop) .card.is--active {
  /* v10 shows "Informatie" and "Afmetingen" here as small headings (.heading-5), not as in the desktop panel. */
}
.products:not(.is--desktop) .card.is--active > .details h3 {
  font-size: 15px;
  font-weight: 900;
  line-height: 24px;
  color: var(--w-light-blue);
}
.products:not(.is--desktop) .card.is--active {
  /* v10: an open product looks pressed in, as on hover. */
}
.products:not(.is--desktop) .card.is--active::before {
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 4px 4px 20px 0 rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.products .sticky {
  top: calc(var(--lz-header) + 15px);
  position: sticky;
}

/* Tables (product details, the table of a machine) and tags (sizes of a product), as in v10. */
:is(.rich-text, .products, .lz-row) table {
  width: 100%;
  margin: 24px 0 0;
  border-collapse: collapse;
  border-top: 1px solid var(--w-light-blue-10);
}
:is(.rich-text, .products, .lz-row) table tr:nth-child(even) {
  background: var(--w-light-blue-10);
}
:is(.rich-text, .products, .lz-row) table tbody tr:last-child {
  border-bottom: 1px solid var(--w-light-blue-10);
}
:is(.rich-text, .products, .lz-row) table th, :is(.rich-text, .products, .lz-row) table td {
  padding: 8px;
  border: 0;
  text-align: left;
  vertical-align: top;
}
:is(.rich-text, .products, .lz-row) table td ul {
  margin: 0;
}

.tags {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.tags .tag {
  margin: 6px 12px 0 0;
  padding: 8px 16px;
  background: var(--w-light-blue-10);
  border-radius: 8px;
}

@media (max-width: 1024px) {
  :is(.rich-text, .module-title):has(+ .entries) {
    max-width: 50%;
  }
  .entries.horizontal, .entries.vertical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  :is(.rich-text, .module-title):has(+ .entries) {
    max-width: none;
  }
  .entries.horizontal, .entries.vertical {
    grid-template-columns: minmax(0, 1fr);
  }
  .entries .card {
    height: auto;
  }
  /*
  	Products on a phone: everything within the screen. v10 let the filter and long table values push the list wider than
  	the screen (cut off, no way to scroll to it); here the filter wraps, the columns may shrink below their content, an
  	open product has less room on the sides and the details table is stacked: each label above its value, which then has
  	the full width.
  */
  .products {
    grid-template-columns: minmax(0, 1fr);
    /* The filter: its label on a line of its own, the check boxes next to each other under it. */
  }
  .products .material-type {
    padding: 16px 24px;
    row-gap: 8px;
  }
  .products .material-type > p {
    flex-basis: 100%;
  }
  .products > .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .products .list, .products .card, .products .card > .body {
    min-width: 0;
  }
  .products .card > .details {
    padding: 8px 24px 32px;
  }
  .products table, .products tbody, .products tr, .products td {
    display: block;
    width: 100%;
  }
  .products table tr {
    padding: 8px 0;
  }
  .products table td {
    padding: 0 8px;
    overflow-wrap: break-word;
  }
  .products table td.label + td.value {
    margin-top: 2px;
  }
}
/*
	Machinepark (v10 Machine macro, migrated to a 50/50 row: a text block with title, text and table next to an image):
	100px between the columns, the image as high as the text (cover) with an X pattern at its outer corner, the first
	column of the table bold and check marks in the list. Recognised as a 50/50 row whose text block has a table.
*/
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) {
  --umb-block-grid--areas-column-gap: 100px;
  align-items: stretch;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area:has(> .image:only-child) {
  display: flex;
  flex-direction: column;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area > .image:only-child {
  padding-top: 56.25%;
  margin: 24px 0 0;
  flex-grow: 1;
  position: relative;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area > .image:only-child::after {
  right: -48px;
  bottom: -48px;
  width: 280px;
  height: 66px;
  background: url("/_Codebase/_Themes/Westerhof/Images/x_green_with_blue.svg") no-repeat center;
  content: "";
  position: absolute;
  z-index: 0;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area > .image:only-child picture {
  inset: 0;
  border-radius: 16px;
  position: absolute;
  overflow: hidden;
  z-index: 1;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area > .image:only-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) {
  /* Text on the right: the pattern at the left corner. */
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area:first-child > .image:only-child::after {
  right: auto;
  left: -48px;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) td:first-child {
  font-weight: 700;
}
.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) .rich-text ul > li::before {
  content: "\f00c";
}

/* On a coloured row: white X pattern and a table in dark blue tints with white text (v10). */
.lz-row.lz-on-dark .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area > .image:only-child::after {
  background-image: url("/_Codebase/_Themes/Westerhof/Images/x_green_with_white.svg");
}

.lz-on-dark table {
  border-top-color: rgba(34, 48, 113, 0.15);
}
.lz-on-dark table tr:nth-child(even) {
  background: rgba(34, 48, 113, 0.15);
}
.lz-on-dark table tbody tr:last-child {
  border-bottom-color: rgba(34, 48, 113, 0.15);
}
.lz-on-dark table td {
  color: #FFFFFF;
}

/*
	Columns on a tablet, as v10: a Machinepark row ("grid cols-2") stays two columns with 100px between them down to 577px;
	the other column rows (Bootstrap col-xl-*) are stacked below 1200px, without a gap between the columns.
*/
@media (max-width: 1199px) {
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias^=twoColumns] > .umb-block-grid__area-container {
    column-gap: 0;
    row-gap: 0;
  }
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias^=twoColumns] > .umb-block-grid__area-container > .umb-block-grid__area {
    grid-column: 1/-1;
  }
}

.lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) {
  column-gap: 100px;
  /* Two tracks (v10 "cols-2"): with Umbraco's twelve the 100px gap would count eleven times and push the row out. */
}
@media (min-width: 577px) {
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area {
    grid-column: auto/span 1;
  }
}
@media (max-width: 576px) {
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) {
    column-gap: 0;
  }
}

@media (max-width: 768px) {
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area > .image:only-child {
    min-height: 0;
    padding-top: 56.25%;
  }
}
/* v10: up to 1640px the pattern of a photo on the left (text right) also comes 20px in. */
@media (max-width: 1640px) {
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area:first-child > .image:only-child::after {
    left: -20px;
  }
}
/*
	Image blocks: the ratios are the migrated ones. Only the image next to the text on Home has the X pattern in v10
	(the other image blocks were "zonder patroon").
*/
body.homepage .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] .image[class*=ratio_]::after {
  right: -48px;
  bottom: -48px;
  width: 280px;
  height: 66px;
  background: url("/_Codebase/_Themes/Westerhof/Images/x_green_with_blue.svg") no-repeat center;
  content: "";
  position: absolute;
  z-index: 0;
}
body.homepage .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] .image[class*=ratio_] picture {
  z-index: 1;
}

/* Up to 1640px the X patterns at the right stay 20px outside the content instead of 48px, so they stay in view (v10). */
@media (max-width: 1640px) {
  .card-360metal .gradient::after,
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area > .image:only-child::after,
  body.homepage .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] .image[class*=ratio_]::after {
    right: -20px;
  }
  body.homepage .umb-block-grid > .lz-row:first-child .card-360metal .gradient::before {
    left: -20px;
  }
}
/*
	Vacancies (v10 JobsList and job page): the text in the first 8 of 12 columns, the 16:9 photo in the last 4, with 40px
	between them (v10 Bootstrap col-lg-8 / col-lg-4: 910px and 435px at 1440px). The photo has the X pattern at its bottom
	right corner. Up to 1024px stacked, the photo first.
*/
.jobs .item,
.vacancies.detail {
  display: grid;
  grid-template-columns: calc((100% + 40px) * 2 / 3 - 40px) minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}

.jobs .item {
  margin-top: 48px;
}
.jobs .item:first-child {
  margin-top: 0;
}
.jobs .item h2 a {
  color: var(--w-light-blue);
  text-decoration: none;
}
.jobs .item h2 a:hover, .jobs .item h2 a:focus-visible {
  text-decoration: underline;
}
.jobs .item > .image > a {
  inset: 0;
  position: absolute;
  z-index: 2;
}

.jobs .item > .image::after,
.vacancies.detail > .side > .image::after {
  right: -48px;
  bottom: -48px;
  width: 280px;
  height: 66px;
  background: url("/_Codebase/_Themes/Westerhof/Images/x_green_with_blue.svg") no-repeat center;
  content: "";
  position: absolute;
  z-index: 0;
}
.jobs .item > .image picture,
.vacancies.detail > .side > .image picture {
  z-index: 1;
}

/* The job page: the room of a v10 section, the text and the form at full column width, the photo not sticky. */
.vacancies.detail {
  padding-block: 56px 80px;
}
.vacancies.detail > .content {
  max-width: none;
}
.vacancies.detail > .content .text > :first-child {
  margin-top: 24px;
}
.vacancies.detail > .content .text p, .vacancies.detail > .content .text ul, .vacancies.detail > .content .text ol {
  margin: 24px 0 0;
}
.vacancies.detail > .content .text h2, .vacancies.detail > .content .text h3, .vacancies.detail > .content .text h4 {
  margin: 24px 0 0;
}
.vacancies.detail > .content .text ul {
  padding: 0;
}
.vacancies.detail > .content > p.button.back {
  margin-top: 24px;
}
.vacancies.detail > .side {
  position: static;
}
.vacancies.detail > .side > .image {
  margin-top: 24px;
  overflow: visible;
}
.vacancies.detail > .side > .image picture, .vacancies.detail > .side > .image img {
  height: 100%;
}

@media (max-width: 1640px) {
  .jobs .item > .image::after,
  .vacancies.detail > .side > .image::after {
    right: -20px;
  }
}
/* v10 col-lg-8 / col-lg-4: side by side from 992px, below that the photo above the text. */
@media (max-width: 991px) {
  .jobs .item,
  .vacancies.detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .jobs .item > .image,
  .vacancies.detail > .side {
    order: -1;
  }
}
@media (max-width: 576px) {
  .vacancies.detail {
    padding-block: 32px 56px;
  }
}
/*
	Homepage details of v10: its Home template wrapped the texts of the machining intro and the contact card in an extra
	<p>, which left an empty paragraph (24px) after them, and an empty dark blue "slider" section (80px) followed the
	machining processes. Repeated here so the page keeps v10's rhythm.
*/
body.homepage .umb-block-grid > .lz-row:has(.entries) {
  --lz-pb: 160px;
}
body.homepage .rich-text:has(+ .entries) {
  padding-bottom: 24px;
}
body.homepage .card.horizontal:not(.entries .card) > .body > .buttons {
  margin-top: 24px;
}

/* ---------------------------------------------------------------
	1:1 corrections (pixel comparison with v10, all page types at 1440, 1906 and 375px)
--------------------------------------------------------------- */
/* The block grid of Umbraco gives every grid row at least 50px and lets an area span two rows (threeColumns_4_4_4,
   "right"): an empty column then still took 50px, and a row grew. v10 rows are as high as their content. */
.umb-block-grid__area-container {
  grid-auto-rows: auto;
}
.umb-block-grid__area-container > .umb-block-grid__area {
  grid-row: auto;
}

/*
	"Back to top" button (core, shown after scrolling) in the house style: a green button with a dark blue arrow, light blue
	with a white arrow on hover, as the buttons. Above the reCAPTCHA badge (bottom right, 60px high from 14px) when a page
	has one.
*/
#scrollTopBtn {
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--w-green);
  border: 0;
  border-radius: var(--c-radius);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
  font-size: 18px;
  color: var(--w-dark-blue);
}
#scrollTopBtn i {
  font-weight: 400;
}
#scrollTopBtn:hover, #scrollTopBtn:focus-visible {
  background: var(--w-light-blue);
  color: #FFFFFF;
}
#scrollTopBtn:focus-visible {
  outline: 2px solid var(--w-dark-blue);
  outline-offset: 2px;
}

body:has(.grecaptcha-badge) #scrollTopBtn {
  bottom: 88px;
}

/*
	reCAPTCHA badge: above the page (the footer text and other positioned content covered it), as the "back to top" button.
	The core gives every iframe 16px above it, which pushed Google's badge half out of its box.
*/
.grecaptcha-badge {
  z-index: 50;
}
.grecaptcha-badge iframe {
  margin: 0;
}

/*
	Page transition (core, props.txt EnableNavigationOverlay): the plus of the hero in the middle of the white screen, gently
	pulsing. The pulse runs on the clock (--lz-pulse-delay, set in the head of master.cshtml), so it carries on where it was
	when the next page starts; keep its 1600ms the same as there. Still with reduced motion.
*/
.page-transition-overlay {
  align-items: center;
}
.page-transition-overlay::before {
  width: 120px;
  height: 120px;
  background: url("/_Codebase/_Themes/Westerhof/Images/plus.svg") no-repeat center/contain;
  content: "";
  animation: lz-plus-pulse 1600ms ease-in-out var(--lz-pulse-delay, 0ms) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay::before {
    animation: none;
  }
}

@keyframes lz-plus-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.88);
    opacity: 0.75;
  }
}
/* The debug dashboard's button (development only) in the house style too: dark blue with a green bug, red with errors. */
.debug-dashboard .toggle-button {
  background: var(--w-dark-blue);
  border-radius: var(--c-radius);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
  color: var(--w-green);
}
.debug-dashboard .toggle-button:hover, .debug-dashboard .toggle-button:focus-visible {
  background: var(--w-light-blue);
  color: #FFFFFF;
}
.debug-dashboard .toggle-button.contains-errors {
  background: #FD3D3D;
  border-radius: var(--c-radius);
  color: #FFFFFF;
}

/* Footer: a link followed by another in the same paragraph keeps 20px after it (v10), which moves a centred line. */
#footer > .bottom .grid p > a:not(:last-of-type) {
  margin-right: 20px;
}

/* Tables: a 2px line under the header row (v10). */
:is(.rich-text, .products, .lz-row) table thead tr {
  border-bottom: 2px solid var(--w-light-blue-10);
}

/* Product details: the list of features 16px in (v10). */
.products table td ul > li {
  margin-left: 16px;
}

/* Products: the filter, then the list 6px under it (v10 grid). As v10 a plain 1fr: on a phone the filter (no wrapping)
   makes the column a little wider than the screen, and the product names wrap less. Check boxes at the top of the bar. */
.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.products .material-type {
  align-items: flex-start;
}

/* Entries with a title: the cards 24px under it (their own margin), not also the 32px under a module title. */
.module-title:has(+ .entries) {
  margin-bottom: 0;
}

/* Entries: materials 40px apart when stacked (v10). */
.entries.vertical {
  row-gap: 40px;
}

/* Sitemap, as v10: the main pages bold with 24px between them, their pages 30px in with a green chevron; black links,
   underlined on hover. */
.sitemap ul {
  margin: 0;
  padding: 0;
}
.sitemap ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.sitemap ul li a {
  color: var(--w-black);
  text-decoration: none;
}
.sitemap ul li a:hover, .sitemap ul li a:focus-visible {
  text-decoration: underline;
}
.sitemap ul li.level-3 {
  margin-top: 24px;
}
.sitemap ul li.level-3 > a {
  font-weight: 700;
}
.sitemap ul li.level-4 {
  padding-left: 30px;
}
.sitemap ul li.level-4::before {
  top: 0;
  left: 0;
  font-family: var(--fa-family-classic, "Font Awesome 6 Pro");
  font-weight: 400;
  content: "\f054";
  color: var(--w-green);
  position: absolute;
}

/* Landing page: the form row 3/6/3 (v10 col-lg-3/6/3) on wider screens, the form 24px under its text. */
@media (min-width: 992px) {
  .umb-block-grid__layout-item[data-content-element-type-alias=threeColumns_4_4_4]:has(.form) > .umb-block-grid__area-container > .umb-block-grid__area {
    grid-column: auto/span 3;
  }
  .umb-block-grid__layout-item[data-content-element-type-alias=threeColumns_4_4_4]:has(.form) > .umb-block-grid__area-container > .umb-block-grid__area[data-area-alias=center] {
    grid-column: auto/span 6;
  }
}
.umb-block-grid__layout-item[data-content-element-type-alias=threeColumns_4_4_4] .umb-block-grid__area > .rich-text + .form {
  margin-top: 24px;
}

/* Application form: the CV field as v10 (inline, in the text font, its button 4px before the file name). */
.umbraco-forms-form.umbraco-forms-logisz input[type=file] {
  width: auto;
  font: inherit;
  line-height: 24px;
  display: inline-block;
}
.umbraco-forms-form.umbraco-forms-logisz input[type=file]::file-selector-button {
  margin-right: 4px;
}

@media (max-width: 1024px) {
  /* Header on tablet and phone (v10): the green login button stays next to the menu button. */
  #header .navigation {
    margin-left: auto;
    display: flex;
  }
  #header .navigation nav.primary {
    display: none;
  }
  #header .navigation nav.secondary > ul > li:not(.login) {
    display: none;
  }
  /* v10: the login button (6px 22px) 34px from the top, the 32px menu button 10px right of it. */
  #header .navigation {
    align-self: flex-start;
    margin-top: 34px;
  }
  #header .navigation nav.secondary > ul > li.login > a {
    padding: 6px 22px;
  }
  #header .hamburger {
    width: 32px;
    height: 32px;
    margin: 34px 0 0 10px;
    align-self: flex-start;
    order: 3;
    flex-shrink: 0;
  }
  /* The bar as v10: the logo with 20px above and below it fills the 88px; no gap between the parts (the login button has
     10px before it), and nothing shrinks: on a narrow phone the buttons run a little past the right margin, as in v10. */
  #header > .placeholder > .top .wrapper {
    column-gap: 0;
    align-items: flex-start;
  }
  #header > .placeholder > .top .wrapper > * {
    flex-shrink: 0;
  }
  #header .navigation nav.secondary > ul > li.login {
    margin-left: 10px;
  }
  #header .logo {
    margin-block: 20px;
    align-self: flex-start;
  }
  /* Homepage: the hero 8px under its text, the 360METAL block 48px under the hero (v10). */
  body.homepage #header > .placeholder > .bottom {
    padding-bottom: 8px;
  }
  /* Entries on tablet and phone: the v10 body of a horizontal card (metalworking; the vertical material cards keep theirs). */
  .entries .card.horizontal > .body {
    padding: 8px 40px 32px 32px;
  }
  /* Vacancies: 48px under the photo once it sits above the text. */
  .jobs .item > .image,
  .vacancies.detail > .side > .image {
    margin-bottom: 48px;
  }
}
@media (max-width: 576px) {
  /* Homepage: on a phone v10's empty dark blue band after the machining processes has no height. */
  body.homepage .umb-block-grid > .lz-row:has(.entries) {
    --lz-pb: 56px;
  }
  /* Entries: the photo of a horizontal card at least 16:9 of the card width (v10 figure on a phone). */
  .entries .card.horizontal > .image {
    padding-top: 56.25%;
  }
  /* 360METAL on a phone (v10): more room inside, the buttons under each other. */
  .card-360metal .shape_3d_360 {
    padding: 32px;
  }
  .card-360metal .body .buttons {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0;
  }
  .card-360metal .body .buttons p.button:last-child {
    margin-top: 6px;
  }
  /* Machinepark: rows with the text on the right show the text first on a phone (v10). */
  .lz-row .umb-block-grid__layout-item[data-content-element-type-alias=twoColumns_6_6] > .umb-block-grid__area-container:has(> .umb-block-grid__area > .rich-text table) > .umb-block-grid__area:first-child:has(> .image:only-child) {
    order: 2;
  }
}
/* ---------------------------------------------------------------
	1:1 corrections, round 2 (details, phone, interactions)
--------------------------------------------------------------- */
/* Page: always a scroll bar (v10), so short pages don't shift sideways; no sticky footer; smooth scrolling to anchors. */
html {
  overflow-y: scroll;
}

body {
  min-height: 0;
}

/* Mobile menu open (default.js): the page behind it does not scroll; the gutter keeps the scroll bar's room, so nothing shifts. */
html.lz-scroll-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: none;
}
html.lz-scroll-locked body {
  overflow: hidden;
  touch-action: none;
}
html.lz-scroll-locked .nav-menu {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
/* Desktop menu: an item stays green while its dropdown is open (v10). */
#header .navigation nav > ul > li:hover > a {
  color: var(--w-green);
}

/* Hero: a button in the hero text keeps its own colours (not the white, underlined hero links). */
#header > .placeholder > .bottom .lz-beamer p.button:not(.textual) a {
  color: var(--c-accent-text);
  text-decoration: none;
}
#header > .placeholder > .bottom .lz-beamer p.button:not(.textual) a:hover, #header > .placeholder > .bottom .lz-beamer p.button:not(.textual) a:focus-visible {
  color: #FFFFFF;
  text-decoration: none;
}

/* Card label ("Nieuws"): plain text, 15px, as v10 (no capitals, no colour of its own). */
.card.horizontal > .body p.subtitle {
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--w-black);
}

.card.horizontal:is(.light-blue, .dark-blue) > .body p.subtitle,
.card.horizontal:not(.white, .lighter-blue, .green) > .body p.subtitle {
  color: inherit;
}

/* Product filter: the labels as v10 (inline-block, a 24px line). */
.products .checkbox-wrapper label {
  display: inline-block;
}

@media (max-width: 1024px) {
  /* Menu button (v10 "hamburger--squeeze"): white bars of 32px with a green, shorter middle bar on the right; open, the
     top bar fades and the other two turn into an X. */
  #header .hamburger {
    position: relative;
    display: block;
  }
  #header .hamburger span {
    left: 0;
    width: 32px;
    height: 2px;
    margin: 0;
    background: #FFFFFF;
    border-radius: 2px;
    position: absolute;
  }
  #header .hamburger span:nth-child(1) {
    top: 7px;
    opacity: 1;
    transform: none;
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
  }
  #header .hamburger span:nth-child(2) {
    top: 15px;
    left: 8px;
    width: 24px;
    background: var(--w-green);
    transform: none;
    transition: transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  #header .hamburger span:nth-child(3) {
    top: 23px;
    transform: none;
    transition: top 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  #header .hamburger.active span:nth-child(1) {
    top: 15px;
    opacity: 0;
    transform: none;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
  }
  #header .hamburger.active span:nth-child(2) {
    left: 0;
    width: 32px;
    opacity: 1;
    transform: rotate(-45deg);
    transition: transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  #header .hamburger.active span:nth-child(3) {
    top: 15px;
    transform: rotate(45deg);
    transition: top 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  /* 360METAL: the 3D shape lower in the block (v10). */
  .card-360metal .shape_3d_360 {
    background-position: 50% 384px;
  }
  /* Text buttons as a light grey pill on tablet and phone (v10). */
  p.button.textual a {
    padding-inline: 28px;
    background: #F2F2F2;
    white-space: nowrap;
  }
  p.button.textual a:hover, p.button.textual a:focus-visible {
    background: #F2F2F2;
  }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  #header .hamburger span {
    transition: none !important;
  }
}