@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/*
	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 bottom bar and mobile 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: 300;
}

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;
}

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-search, 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;
}

.header-slider.kim {
  overflow: hidden;
  position: relative;
}

.header-slider.kim .slide-item {
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1000ms linear;
  position: absolute;
}

.header-slider.kim .slide-item:first-child {
  position: relative;
}

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

.header-slider.kim img {
  width: 100%;
  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;
  }
  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;
}

/* ---------------------------------------------------------------
	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%;
  }
}
@media (max-width: 991.98px) {
  section.projects.kim h2 {
    float: none;
  }
  section.projects.kim .project {
    margin-top: 15px;
  }
}

#main 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: 300;
  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;
}

footer.kim .copyright {
  line-height: 26px;
  text-align: center;
}

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

footer.kim .copyright p#copyright-line {
  display: block;
}

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 bottom bar and mobile navigation
	Below 992px the header is static, its toolbar and navigation are hidden and the bottom bar shows a hamburger: it opens the
	navigation full screen on a blue panel (default.js toggles .open on #kim-menu and .no-scroll on the body).
--------------------------------------------------------------- */
.thumbs-safe.kim {
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FFFFFF;
  border-top: 4px solid var(--c-accent);
  position: fixed;
  z-index: 4;
}

.thumbs-safe.kim ul {
  margin: 0 auto;
  padding: 0;
  display: table;
}

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

.thumbs-safe.kim button {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-dark);
  font-size: 20px;
  cursor: pointer;
  display: block;
}

.thumbs-safe.kim button i {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
}

.thumbs-safe.kim button:hover i, .thumbs-safe.kim button:focus-visible i {
  background-color: #DCD8D8;
}

@media (min-width: 992px) {
  .thumbs-safe.kim {
    display: none;
  }
}
@media (max-width: 991.98px) {
  body {
    padding-bottom: 52px;
  }
  header.kim {
    position: static;
  }
  header.kim .toolbar, header.kim nav {
    display: none;
  }
  header.kim .logo {
    margin: 0 auto;
    display: table;
    float: none;
  }
  header.kim nav {
    top: 0;
    right: 0;
    bottom: 52px;
    left: 0;
    background-color: rgba(0, 133, 207, 0.9);
    overflow-y: auto;
    position: fixed;
    z-index: 3;
  }
  header.kim nav.open {
    display: block;
  }
  header.kim nav > ul > li {
    border-bottom: 1px solid #FFFFFF;
    display: block;
    float: none;
  }
  header.kim nav > ul > li:before, header.kim nav > ul > li.active:after {
    display: none;
  }
  header.kim nav > ul > li > a {
    padding: 9px 15px;
    text-transform: uppercase;
  }
  header.kim nav > ul > li > a, header.kim nav > ul > li > a:hover {
    background-color: transparent;
    color: #FFFFFF;
  }
  header.kim nav > ul > li.active > a, header.kim nav > ul > li.active > a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }
  header.kim nav ul li ul {
    padding: 0;
    background-color: transparent;
    display: block;
    position: static;
  }
  header.kim nav ul li:hover ul, header.kim nav ul li:focus-within ul {
    box-shadow: none;
  }
  header.kim nav ul li ul li {
    border-top: 1px solid #FFFFFF;
  }
  header.kim nav ul li ul li a {
    padding: 9px 15px;
  }
  header.kim nav ul li ul li a, header.kim nav ul li ul li a:hover {
    color: #FFFFFF;
  }
  header.kim #mobile-search, header.kim #mobile-home {
    display: block;
  }
  header.kim .search-form {
    height: 48px;
    padding-top: 0;
    background-color: #FFFFFF;
  }
  header.kim .search-form input {
    width: 100%;
    height: 100%;
    padding: 9px 15px;
    background-color: #FFFFFF;
    border: 0;
    border-top: 1px solid #E4E4E5;
    border-bottom: 1px solid #FFFFFF;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    text-indent: 0;
    text-transform: uppercase;
    display: block;
  }
  header.kim .search-form button {
    width: 48px;
    height: 48px;
    top: 0;
    right: 0;
  }
  header.kim .mobile-information {
    padding: 20px;
    background-color: #FFFFFF;
    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;
  }
}
/* ---------------------------------------------------------------
	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,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation input[type=submit] {
  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;
}

p.button a:before, p.link a: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 {
  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:hover,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation input[type=submit]: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;
}

.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 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;
}

.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));
}