:root {
  --container-width: 1160px;
  --container-two-thirds: calc(var(--container-width) * calc( 2 / 3));
  --rest-width: calc(calc(100% - var(--container-width)) / 2);
}

@media (prefers-reduced-motion) {
  [data-aos] {
    transform: none;
  }
}
.data-aos { opacity: 0; }

.red-title :is(h1,h2) { color: #fff; margin-bottom: 0; }
.red-title :is(h1,h2)::before { content: ''; background: var(--red); position: absolute; top: 0; right: 100%; width: 50vw; height: 100%; }
.red-title :is(h1,h2) strong { padding-left: 0; padding-right: 0.5em; margin-top: 0px; padding: 24px 24px 24px 0;}

.red-title h1::after{ content: ""; background: url(/media/2023-09/logo-lach.svg); background-size: 75% auto; background-repeat: no-repeat; background-position: center; width: 80px; position: absolute; right: calc(100% + 20px); height: 100%; top: 0%; display: flex; flex-direction: column; justify-content: center; }

.red-title h2::after { content: ""; background: url(/media/2023-09/logo-lach.svg); background-size: 100% auto; background-repeat: no-repeat; width: 60px; position: absolute; right: calc(100% + 20px); height: 80%; top: 25%; display: flex; flex-direction: column; justify-content: center; }
.red-title h2 strong:nth-child(1) { padding-top: 0.375rem; }
.red-title h2 strong:nth-child(2) { padding-bottom: 0.375rem; }

h1 strong:nth-of-type(1)::after{display: none;}

.red-title :is(h1,h2) strong:has( + strong) { display: block; padding-bottom: 0; width: fit-content;}
.red-title :is(h1,h2) strong + strong { display: block; padding-top: 0;}

.page-start-below-title { padding-top: 75px; }

.content blockquote p { font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--blue); }

h3 { color: var(--red); font-size: 1.25rem; margin-bottom: 1em; }

.container-fluid.banner img { min-height: 200px; }

.container-fluid.content .block.content ul { margin-bottom: 25px; }
.container-fluid.content .block.content ul:last-child { margin-bottom: 0; }

.red-title { height: 0; }
.red-title > .container { transform: translateY(-75%); z-index: 2; }

body:has(.page-content) {overflow-x: hidden;}

.block.html.storeblock{ margin-bottom: 10px; }
.block.html.storeblock span{ background: var(--blue); color: #ffffff; padding: 5px 20px; border-radius: 50px; }

.solliciteren-btn-wrap { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.closed{ display: flex; justify-content: center; margin-bottom: 15px; background: var(--red); font-size: 1rem; font-weight: 700; color: #fff; text-transform: uppercase; padding: 0.5rem 1.25rem; }
.vacancy-specs{ margin: 20px -15px 15px -15px; min-height: 50px; align-items: center; }
.vacancy-specs .item { display: flex; align-items: center; }
.vacancy-specs .item i { font-size: 2rem; margin-right: 15px; width: 32px; text-align: center; }

.solliciteren-btn-wrap:has(ul) {flex-direction: column; align-items: flex-end; justify-content: flex-end;}
.solliciteren-btn-wrap:has(ul) ul { margin: 12px 0; padding: 0; display: flex; gap: 12px;}
.solliciteren-btn-wrap:has(ul) ul li { width: 48px; display: flex; justify-content: center; align-items: center; margin: 0; background-color: var(--blue); aspect-ratio: 1/1; border-radius: 50%; transition: all;}
.solliciteren-btn-wrap:has(ul) ul li::before {display: none !important;}
.solliciteren-btn-wrap:has(ul) ul li a { padding: 12px; color: #ffffff;}

.solliciteren-btn-wrap:has(ul) ul li:hover,
.solliciteren-btn-wrap:has(ul) ul li:has(a:hover),
.solliciteren-btn-wrap:has(ul) ul li:has(a:focus) {background-color: var(--red);}

.desc-floating-person-wrap {  }
.desc-floating-person-wrap .col-lg-8 { width: var(--container-two-thirds); margin-left: var(--rest-width); }
.desc-floating-person-wrap .col-lg-4 { width: auto; flex-grow: 1; position: relative; padding-left: 75px; padding-right: 0; pointer-events: none; }
.desc-floating-person-wrap .col-lg-4 .html { position: absolute; z-index: 2; overflow: hidden; width: calc(100% - 75px); }
.desc-floating-person-wrap .col-lg-4 .html .tagline { padding-left: 100px; pointer-events: auto; }
.desc-floating-person-wrap .col-lg-4 .html blockquote { margin-bottom: 0; position: absolute; top: 50%; transform: translateY(-50%); }
.desc-floating-person-wrap .col-lg-4 .html blockquote p { display: inline-block; text-align: right; line-height: 1.2; position: relative; z-index: 2; font-size: 3rem; margin-bottom: 0; }
.desc-floating-person-wrap .col-lg-4 .html blockquote p::before { content: ''; background: var(--red); position: absolute; top: 0; left: 100%; width: 50vw; height: 100%; }
.desc-floating-person-wrap .col-lg-4 .html blockquote p strong { position: relative; color: #fff; display: inline-block; padding-left: 0.5em; }
.desc-floating-person-wrap .col-lg-4 .html blockquote p strong::before { content: ''; background: var(--red); position: absolute; top: 0; left: 0; width: 100%; height: 101%; z-index: -1; }
.desc-floating-person-wrap .col-lg-4 .html blockquote p strong:nth-of-type(1) { z-index: 2; padding-top: 0.325em; }
.desc-floating-person-wrap .col-lg-4 .html blockquote p strong:nth-of-type(2) { padding-bottom: 0.325em; }
.desc-floating-person-wrap .col-lg-4 .html img {  }

.photos-right { }
.photos-right .col-lg-8 { width: var(--container-two-thirds); margin-left: var(--rest-width); display: flex; flex-direction: column; justify-content: center; }
.photos-right .col-lg-4 { width: auto; flex-grow: 1; width: calc(100% - calc(var(--container-two-thirds) + var(--rest-width))); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-right: 0; max-width: 800px; }
.photos-right .col-lg-4 .html { max-width: 650px; min-height: 50%; flex-grow: 1; }
.photos-right .col-lg-4 .html > a { display: block; height: 100%; }
.photos-right .col-lg-4 .html img { height: 100%; }

.contact-block {  }
.contact-block h2 { color: var(--red); margin-bottom: 0.5em; }
.contact-block h4 { color: #fff; }
.contact-block h5 { font-size: 1.125rem; }
.contact-block .container { max-width: 100%; }
.contact-block .col-lg-4 { width: auto; flex-grow: 1; width: calc(100% - calc(var(--container-two-thirds) + var(--rest-width))); padding-left: 0; padding-right: 75px; position: relative; }
.contact-block .col-lg-8 { width: var(--container-two-thirds); margin-right: var(--rest-width); }
.contact-block .person { position: absolute; z-index: 2; overflow: hidden; width: calc(100% - 75px); bottom: 0; display: flex; flex-direction: column; align-items: flex-end; }
.contact-block .person img { width: 500px; }
.contact-block .contact-name { position: relative; }
.contact-block .contact-name svg.arrow { position: absolute; right: 100%; bottom: 10px; margin-right: 30px; height: auto; }
.contact-block .contact-details i { margin-right: 10px; }
.contact-block .quote-wrap blockquote { position: relative; background: var(--red); color: #fff; margin-bottom: -10px; padding: 15px 20px; z-index: 2; }
.contact-block blockquote p { font-weight: 400; font-size: 1rem; text-transform: none; color: #fff; }
.contact-block blockquote > *:last-child { margin-bottom: 0; }

.academy-logos { display: flex; justify-content: flex-end; align-items: flex-end; gap: 20px; }

.form { }
.form .form-group { margin-bottom: 1rem; }
.form .form-group label { font-weight: 600; margin-bottom: 5px; }
.form .form-control { border-radius: 0; padding: 0.5rem 0.75rem; }
.form .form-control:focus { box-shadow: 0 0 0 0.25rem rgb(0 41 88 / 30%); }

.sitemap a { color: var(--red); }
.sitemap a:hover { color: var(--blue); }

.quote-wrap blockquote { margin-bottom: 0; }
.quote-wrap blockquote p { margin-bottom: 0; }

.floating-rob {  }
.floating-rob .rob { position: relative; height: 100%; padding-right: 100px; }
.floating-rob .rob img { position: absolute; width: calc(100% - 100px); bottom: 0; }

.items-vertically-centered .row { align-items: center; }
.sbb-logo { max-width: 275px; }

.block.html.video {position: relative;}
.block.html.video a {position: relative; display: block; height: 100%;}
.block.html.video a::before {content: '\f04b'; font-family: "Font Awesome 6 Pro"; color: #fff; font-size: 2rem; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); z-index: 1;}
.block.html.video a img {width: 100%;}

.dark-blue-pattern-wall {margin: 24px 0;}

@media only screen and (max-width: 1601px) {
  .desc-floating-person-wrap .col-lg-4 { padding-left: 25px; }
  .desc-floating-person-wrap .col-lg-4 .html { width: calc(100% - 25px); }
  .desc-floating-person-wrap .col-lg-4 .html blockquote p { font-size: 2.5rem; }
  .desc-floating-person-wrap .col-lg-4 .html .tagline { padding-left: 75px; }
}

/* --------------------------------------- */
@media only screen and (max-width: 1399px) {
  .red-title h1,
  .red-title h2 { margin-left: 75px; }
  .red-title h1::after,
  .red-title h2::after { width: 55px; }

  .content blockquote p { font-size: 1.75rem; }

  .desc-floating-person-wrap .col-lg-4 { padding-left: 0; }
  .desc-floating-person-wrap .col-lg-4 .html { width: 100%; }
  .desc-floating-person-wrap .col-lg-4 .html blockquote p { font-size: 2rem; }
  .desc-floating-person-wrap .col-lg-4 .html .tagline { padding-left: 50px; }

  .contact-block .contact-name svg.arrow { width: 150px; margin-right: 15px; }

  .contact-block blockquote p { font-size: 1rem; }
}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {
  :root {
    --container-width: 960px;
  }

  .page-start-below-title { padding-top: 50px; }

  .desc-floating-person-wrap .col-lg-4 .html blockquote p { font-size: 1.75rem; }
  .desc-floating-person-wrap .col-lg-4 .html .tagline { padding-left: 25px; }

  .contact-block .contact-name svg.arrow { width: 125px; }

  .academy-logos img { width: 175px; }

  .floating-rob .rob { padding-right: 50px; }
  .floating-rob .rob img { width: calc(100% - 50px); bottom: 50px; }
}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {
  :root {
    --container-width: 720px;
  }

  .red-title h1,
  .red-title h2 { margin-left: 50px; }
  .red-title h1::after,
  .red-title h2::after { width: 50px; }

  .content blockquote p { font-size: 1.5rem; }

  .solliciteren-btn-wrap { justify-content: flex-start; }
  .vacancy-specs { margin-bottom: 20px; }

  .desc-floating-person-wrap .col-lg-4 .html { display: flex; flex-direction: column-reverse; }
  .desc-floating-person-wrap .col-lg-4 .html .tagline { padding-left: 10px; }
  .desc-floating-person-wrap .col-lg-4 .html blockquote { position: static; transform: none; top: 0; padding-right: calc(var(--bs-gutter-x) * 0.5); }
  .desc-floating-person-wrap .col-lg-4 .html blockquote p { font-size: 1.25rem; }

  .photos-right .col-lg-8 { width: var(--container-width); }
  .photos-right .col-lg-4 { width: var(--container-width); flex-grow: 0; margin: auto; padding-right: calc(var(--bs-gutter-x) * 0.5); }
  .photos-right .col-lg-4 .html { max-width: none; }

  .contact-block .col-lg-4 { padding-right: 25px; }
  .contact-block .person { width: 100%; max-width: 250px; right: 25px; }
  .contact-block .contact-name svg.arrow { width: 80px; margin-right: 10px; }
  .contact-block blockquote p { font-size: 1rem; }

  .floating-rob .rob { padding-right: 0; }
  .floating-rob .rob img { width: 100%; bottom: 50px; }
}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {
  :root {
    --container-width: 540px;
  }
	
  .red-title h1::after,
  .red-title h2::after{ width: 40px; }

  .content blockquote p { font-size: 1.25rem; }

  .vacancy-specs .item { margin-bottom: 10px; }
  .vacancy-specs .item i { font-size: 1.5rem; margin-right: 8px; }

  .contact-block h4 { font-size: 1.125rem; }
  .contact-block h5 { font-size: 1rem; }
  .contact-block .contact-name svg.arrow { display: none; }
  .contact-block .col-lg-4 { padding-right: calc(var(--bs-gutter-x) * .5); }
  .contact-block .person { right: calc(var(--bs-gutter-x) * .5); }
  .contact-block blockquote p { font-size: 1rem; }

  .academy-logos { gap: 10px; }
  .academy-logos img { width: 150px; }

  .floating-rob .content > * { width: calc(200% + var(--bs-gutter-x)); }
  .floating-rob .content > *:nth-last-child(1),
  .floating-rob .content > *:nth-last-child(2),
  .floating-rob .content > *:nth-last-child(3) { width: 100%; }
}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {
  :root {
    --container-width: 100%;
  }

  h3 { font-size: 1.125rem; }

  .red-title h1,
  .red-title h2 { margin-left: calc(50px + calc(var(--bs-gutter-x) * 0.5)); }

  .desc-floating-person-wrap .col-lg-4 .html blockquote p { font-size: 1rem; }

  .desc-floating-person-wrap .col-lg-8 { width: 100%; }
  .desc-floating-person-wrap .col-lg-4 { display: none; }
  .mobile-full-width.video-img { margin-left: 0; margin-bottom: 10px; width: 100%; }

  .photos-right .col-lg-4 { padding-left: 0; padding-right: 0; }

  .contact-block .person { top: -75px; }
  .contact-block .contact-name { margin-bottom: 15px; }
  .contact-block .col-lg-8 { z-index: 2; padding-left: 0; }
  .contact-block .col-lg-8 .quote-wrap { width: calc(150% - calc(var(--bs-gutter-x) * 0.25)); margin-left: calc(-50% + calc(var(--bs-gutter-x) * 0.25)); }
  .contact-block .contact-details { margin-bottom: 15px; }
  .contact-block .contact-details i { margin-right: 5px; }
  .contact-block blockquote { padding: 10px 15px; }

  .academy-logos { justify-content: center; }

  .sbb-logo { margin: auto; }
}

/* --------------------------------------- */
@media only screen and (max-width: 479px) {
  .contact-block .contact-details { font-size: 0.875rem; }

  .vacancy-specs { margin-left: -5px; margin-right: -5px; }
  .vacancy-specs .item { padding: 0 5px; }
  .vacancy-specs .item i { font-size: 1.125rem; width: 23px; margin-right: 3px; }

  .academy-logos {  }
  .academy-logos img { width: 125px; }

  .floating-rob .rob img { bottom: 0; }
  /* .floating-rob .content > *:nth-last-child(2) { width: calc(200% + var(--bs-gutter-x)); } */

  .sbb-logo { max-width: 225px; }
}