﻿/*
Style matrix from donor https://www.spieshecker.com/corporate/en_GB.html
body.home.typeB.theme_color15 + axbase:
- Body p: #1e1e1e / #555, Arial 15px/22px; panel body 16px/22px
- Accent/theme_color15: #ff0000; headings h2 30px/39px, h3 20px/26px, no uppercase
- Stage heading: #fff 22px/28.6px on #ff0000 desktop; mobile #ff0000 on #e5e5e5
- Divider hr: 227px x 2px, #808080, margin 10px auto 35px
- CTA: #ff0000 background, 2px border; hover/focus white background, red text
- Surfaces: flat #fff, #eee quicklinks, #e5e5e5/#e6e6e6 grey panels, no radius/shadow
*/

.sh-home-page {
  --sh-red: #f00;
  --sh-text: #1e1e1e;
  --sh-muted: #555;
  --sh-grey: #eaeaea;
  --sh-bg-gray: #555;
  --sh-light-grey: #eee;
  --sh-container: 1170px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--sh-text);
  background: #fff;
}

.sh-home-page *,
.sh-home-page *::before,
.sh-home-page *::after {
  box-sizing: border-box;
}

.sh-home-page a {
  color: var(--sh-red);
  text-decoration: none;
}

.sh-home-page a:hover,
.sh-home-page a:focus-visible {
  color: #c00;
  text-decoration: none;
}

.sh-home-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sh-home-container {
  width: min(var(--sh-container), calc(100% - 48px));
  margin-inline: auto;
}

.sh-home-page .component {
  margin: 0;
}

.sh-home-page h2,
.sh-home-page h3,
.sh-home-page h4,
.sh-home-page p {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.sh-home-page .component.headline h2,
.sh-home-page .section-block h2,
.sh-home-page h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sh-red);
  text-align: center;
  text-transform: none;
}

.sh-home-page h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sh-red);
  text-transform: none;
}

.sh-home-page p {
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 22px;
}

.sh-home-page ul {
  margin: 0 0 18px;
  padding-left: 20px;
}

.sh-home-page li {
  margin: 0 0 5px;
}

.sh-home-page .headline hr {
  width: 227px;
  max-width: 52vw;
  height: 2px;
  margin: 10px auto 35px;
  border: 0;
  background: #808080;
}

.sh-home-page .btn.btn-default {
  display: inline-block;
  min-width: 135px;
  min-height: 45px;
  margin: 30px 0 5px;
  padding: 10px 28px 11px;
  border: 2px solid var(--sh-red);
  border-radius: var(--btn-border-radius, 3px);
  background: var(--sh-red);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-transform: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sh-home-page .btn.btn-default:hover,
.sh-home-page .btn.btn-default:focus-visible {
  border-color: #626266;
  background: #fff;
  color: var(--sh-red);
  outline: 0;
}

.sh-home-stage {
  width: 100%;
  margin: 0 0 0;
  overflow: hidden;
}

.sh-home-stage .component.ctaTeaser {
  width: 100%;
  padding: 0 !important;
  background: var(--sh-red);
}

.sh-home-page .component.ctaTeaser > div {
  display: flex;
  position: relative;
  min-height: 416px;
}

.sh-home-stage .component.ctaTeaser > div {
  min-height: 512px;
}

.sh-home-page .component.ctaTeaser .ctaTeaserImageDiv {
  width: 66%;
  min-height: 200px;
}

.sh-home-page .component.ctaTeaser .ctaTeaserImageDiv img,
.sh-home-page .component.ctaTeaser .ctaTeaserImageDiv picture {
  width: 100%;
  height: 100%;
}

.sh-home-page .component.ctaTeaser .ctaTeaserImageDiv img {
  object-fit: cover;
}

.sh-home-page .component.ctaTeaser .ctaTeaserTextDiv {
  display: flex;
  width: 34%;
  min-height: 200px;
  padding: 30px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sh-red);
  color: #fff;
}

.sh-home-page .component.ctaTeaser .ctaTeaserTextDiv > div {
  width: 100%;
}

.sh-home-page .component.ctaTeaser .ctaTeaserTextDiv h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 400;
  text-align: center;
}

.sh-home-page .component.ctaTeaser .ctaTeaserTextDiv p {
  margin: 12px auto 0;
  color: #fff;
}

.sh-home-page .component.ctaTeaser .rightImage .ctaTeaserTextDiv {
  order: 1;
}

.sh-home-page .component.ctaTeaser .rightImage .ctaTeaserImageDiv {
  order: 2;
}

.sh-home-page .component.ctaTeaser .leftImage .ctaTeaserImageDiv {
  order: 1;
}

.sh-home-page .component.ctaTeaser .leftImage .ctaTeaserTextDiv {
  order: 2;
}

.sh-home-stage .component.ctaTeaser .ctaTeaserImageDiv {
  width: 64%;
}

.sh-home-stage .component.ctaTeaser .ctaTeaserTextDiv {
  width: 36%;
}

.sh-home-stage .btn.btn-default,
.sh-home-page .component.ctaTeaser .ctaTeaserTextDiv .btn.btn-default {
  border-color: #fff;
}

.sh-home-stage .btn.btn-default:hover,
.sh-home-stage .btn.btn-default:focus-visible,
.sh-home-page .component.ctaTeaser .ctaTeaserTextDiv .btn.btn-default:hover,
.sh-home-page .component.ctaTeaser .ctaTeaserTextDiv .btn.btn-default:focus-visible {
  border-color: #fff;
}

.sh-home-quicklinks {
  width: min(var(--sh-container), calc(100% - 48px));
  margin: 120px auto 84px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.sh-home-page .quicklinksIcon .component {
  min-height: 139px;
  padding: 30px;
  background: var(--sh-light-grey);
}

.sh-home-page .quicklinksIcon .linkItem {
  margin: 0;
}

.sh-home-page .quicklinksIcon .linkItem a {
  min-height: 60px;
  display: flex;
  align-items: center;
  color: var(--sh-red);
}

.sh-home-page .quicklinksIcon .linkItem a > span {
  width: 64px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 64px;
  font-family: "Linearicons", sans-serif;
  font-size: 50px;
  line-height: 1;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sh-home-page .icon-magnifier::before {
  content: "\e922";
}

.sh-home-page .icon-register::before {
  content: "\e908";
}

.sh-home-page .icon-papers::before {
  content: "\e905";
}

.sh-home-page .quicklinksIcon .text {
  max-width: calc(100% - 64px);
  align-self: center;
}

.sh-home-page .quicklinksIcon h4 {
  margin: 0;
  color: var(--sh-red);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
}

.sh-home-stage-teasers {
  display: grid;
  gap: 85px;
  margin-bottom: 30px;
}

.sh-home-stage-teasers .component.ctaTeaser {
  min-height: 416px;
  background: var(--sh-red);
}

.sh-home-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 30px;
  margin-bottom: 84px;
}

.sh-home-page .mediaTeaser {
  background: #fff;
}

.sh-home-page .mediaTeaser.grey {
  background: var(--sh-grey);
}

.sh-home-page .mediaTeaser a {
  display: block;
  color: var(--sh-text);
}

.sh-home-page .mediaTeaser.grey > a {
  color: inherit;
}

.sh-home-page .mediaTeaser.grey > a:hover,
.sh-home-page .mediaTeaser.grey > a:focus-visible {
  color: inherit;
  text-decoration: none;
}

.sh-home-page .mediaTeaser img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sh-home-page .mediaTeaser h3,
.sh-home-page .mediaTeaser p,
.sh-home-page .mediaTeaser span {
  display: block;
  padding-inline: 30px;
}

.sh-home-page .mediaTeaser h3 {
  margin-top: 20px;
  color: var(--sh-red);
}

.sh-home-page .mediaTeaser p {
  margin-top: 3px;
  color: var(--sh-text);
}

.sh-home-page .mediaTeaser span {
  margin-top: 5px;
  margin-bottom: 20px;
  color: var(--sh-red);
}

.sh-home-media-pair .mediaTeaser {
  padding: 30px;
}

.sh-home-media-pair .mediaTeaser h3,
.sh-home-media-pair .mediaTeaser p,
.sh-home-media-pair .mediaTeaser span {
  padding-inline: 0;
}

.sh-home-media-pair .mediaTeaser h3 {
  margin-top: 29px;
  margin-bottom: 10px;
}

.sh-home-media-pair .mediaTeaser p {
  margin-top: 0;
  font-size: 16px;
  line-height: 22px;
  color: #6d6e71;
}

.sh-home-media-pair .mediaTeaser span {
  position: relative;
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 25px;
  font-size: 15px;
  line-height: 22px;
  color: #959595;
}

.sh-home-media-pair .mediaTeaser span::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
}

.sh-home-media-pair .mediaTeaser a:hover span,
.sh-home-media-pair .mediaTeaser a:focus-visible span {
  color: var(--sh-red);
}

.sh-home-coty {
  background: var(--sh-bg-gray);
  padding: 84px 0 90px;
  margin-bottom: 84px;
}

.sh-home-drivus,
.sh-home-audurra {
  background: var(--sh-grey);
}

.sh-home-coty .component.bgGray {
  background: var(--sh-bg-gray);
}

.sh-home-coty-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}

.wistia_responsive_padding {
  padding: 56.25% 0 0;
  position: relative;
}

.wistia_responsive_wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.wistia_embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.sh-home-coty .textComponent {
  text-align: center;
}

.sh-home-coty .textComponent h2 {
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
}

.sh-home-coty .textComponent p {
  font-size: 16px;
  line-height: 22px;
  color: #fff;
}

.sh-home-products {
  margin-bottom: 84px;
}

.sh-home-products-headline-band {
  width: 100%;
  background: var(--sh-grey);
  margin-bottom: 30px;
}

.sh-home-products-headline-band .component.headline.grey {
  background: transparent;
  padding: 30px 30px 1px;
  margin-bottom: 0;
}

.sh-home-products-categories-band {
  width: 100%;
  background: var(--sh-grey);
  margin-bottom: 40px;
}

.sh-home-products-systems-band {
  width: 100%;
  background: var(--sh-grey);
}

.sh-home-products-categories-band .sh-home-card-grid {
  gap: 0;
  margin: 0;
}

.sh-home-products-categories-band .mediaTeaser.grey {
  background: transparent;
  padding: 29px 30px 30px;
}

.sh-home-products .sh-home-card-grid {
  margin-top: 0;
  margin-bottom: 0;
}

.sh-home-card-grid {
  display: grid;
  gap: 30px;
}

.sh-home-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sh-home-products-categories-band .sh-home-card-grid .mediaTeaser h3,
.sh-home-products .sh-home-card-grid .mediaTeaser h3,
.sh-home-products .sh-home-systems-slider-track .mediaTeaser h3 {
  min-height: 0;
  margin-top: 10px;
  margin-bottom: 0;
  padding-inline: 0;
  font-size: 20px;
  line-height: 26px;
  text-align: left;
}

.sh-home-systems-headline {
  display: none;
}

.sh-home-systems-slider {
  margin: 0;
  padding: 0;
  background: transparent;
}

.sh-home-systems-slider-outer {
  position: relative;
}

.sh-home-systems-slider-viewport {
  position: relative;
}

.sh-home-systems-slider-track {
  --sh-systems-gap: 30px;
  --sh-systems-per-view: 3;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sh-systems-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.sh-home-systems-slider-track::-webkit-scrollbar {
  display: none;
}

.sh-home-systems-slider-track .mediaTeaser {
  flex: 0 0 calc((100% - (var(--sh-systems-per-view) - 1) * var(--sh-systems-gap)) / var(--sh-systems-per-view));
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 29px 30px 30px;
  background: var(--sh-grey);
}

.sh-home-systems-slider-track .mediaTeaser img {
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sh-home-systems-slider-track .mediaTeaser h3 {
  color: var(--sh-red);
}

.sh-home-products-systems-band .sh-home-systems-slider,
.sh-home-products-systems-band .sh-home-systems-slider-outer,
.sh-home-products-systems-band .sh-home-systems-slider-viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sh-home-products-systems-band .sh-home-systems-slider-viewport {
  overflow: hidden;
}

.sh-home-products-systems-band .sh-home-systems-slider-track {
  --sh-systems-gap: 0;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sh-home-products-systems-band .sh-home-systems-slider-track .mediaTeaser {
  flex: 0 0 calc(100% / var(--sh-systems-per-view));
  flex-shrink: 0;
  max-width: none;
  background: transparent;
}

.sh-home-systems-slider-viewport .slider-control {
  z-index: 2;
}

.sh-home-systems-slider-viewport .slider-control.prev {
  left: 8px;
}

.sh-home-systems-slider-viewport .slider-control.next {
  right: 8px;
}

.sh-home-systems-slider-viewport .slider-control[disabled] {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

.sh-home-systems-slider-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--slider-dot-gap, 8px);
  margin-top: 18px;
}

.sh-home-systems-slider-dots[hidden] {
  display: none !important;
}

.sh-home-systems-slider-dots button {
  width: var(--slider-dot-size, 9px);
  height: var(--slider-dot-size, 9px);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #ccc;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sh-home-systems-slider-dots button.active {
  background: var(--sh-red);
}

.sh-home-systems-slider-dots button:focus-visible {
  outline: 2px solid var(--sh-red);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .sh-home-systems-slider-outer .slider-control {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .sh-home-systems-slider-outer .slider-control:not([disabled]) {
    pointer-events: auto;
  }

  .sh-home-systems-slider-outer:hover .slider-control:not([disabled]),
  .sh-home-systems-slider-outer .slider-control:focus-visible:not([disabled]) {
    opacity: 1;
  }
}

.sh-home-products .component.button.grey {
  background: var(--sh-grey);
  padding: 29px 30px 30px;
  margin-top: 28px;
}

.sh-home-products-systems-band .component.button.grey {
  background: transparent;
  margin-top: 0;
}

.sh-home-products .component.button.grey .btn.btn-default {
  margin-top: 0;
}

.sh-home-products .button {
  text-align: center;
}

.sh-home-logo-pair .mediaTeaser {
  background: var(--sh-grey);
}

.sh-home-logo-pair .mediaTeaser img {
  padding: 0;
  background: var(--sh-grey);
}

.sh-home-logo-pair .mediaTeaser h3 {
  text-align: center;
  padding-bottom: 24px;
}

.sh-home-colour {
  margin-bottom: 84px;
}

.sh-home-colour .headline {
  margin-bottom: 35px;
}

.sh-home-colour .component.ctaTeaser + .component.ctaTeaser {
  margin-top: 85px;
}

.sh-home-colour .component.button.center {
  margin-top: 40px;
  text-align: center;
}

.sh-home-colour .component.button.center .btn.btn-default {
  margin-top: 0;
}

.sh-home-drivus {
  padding: 84px 0;
  margin-bottom: 84px;
}

.sh-home-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

.sh-home-split--text-media {
  grid-template-columns: 1fr 2fr;
}

.sh-home-split--media-text {
  grid-template-columns: 2fr 1fr;
  align-items: center;
}

.sh-home-drivus .textComponent {
  padding-top: 0;
}

.sh-home-drivus .textComponent.listStyle_1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-home-drivus .textComponent.listStyle_1 ul li {
  position: relative;
  margin: 0 0 14px;
  padding: 0 0 0 1.35em;
  font-size: 15px;
  line-height: 22px;
  color: var(--sh-text);
}

.sh-home-drivus .textComponent.listStyle_1 ul li:last-child {
  margin-bottom: 0;
}

.sh-home-drivus .textComponent.listStyle_1 ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--sh-red);
  font-weight: 700;
  line-height: 1;
}

.sh-home-drivus .component.button.center {
  margin-top: 40px;
  text-align: center;
}

.sh-home-drivus .component.button.center .btn.btn-default {
  margin-top: 0;
}

.sh-home-training {
  margin-bottom: 84px;
}

.sh-home-training > .headline {
  margin-bottom: 35px;
}

.sh-home-training-copy .component.headline h2 {
  margin-bottom: 0;
}

.sh-home-training .textComponent p {
  margin-top: 20px;
  text-align: left;
  font-size: 15px;
  line-height: 22px;
  color: var(--sh-text);
}

.sh-home-training .component.button.center {
  margin-top: 0;
  text-align: center;
}

.sh-home-training .component.button.center .btn.btn-default {
  margin-top: 30px;
}

.sh-home-audurra {
  padding: 84px 0;
}

.sh-home-audurra .textComponent {
  text-align: center;
}

.sh-home-audurra .textComponent h2 {
  margin-bottom: 16px;
}

@media (max-width: 1023px) {
  .sh-home-systems-headline {
    display: block;
    padding: 30px 30px 1px;
    margin-bottom: 0;
  }

  .sh-home-products-systems-band .sh-home-systems-headline {
    background: transparent;
  }
}

@media (min-width: 1024px) {
  .sh-home-systems-headline {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .sh-home-container,
  .sh-home-quicklinks {
    width: calc(100% - 48px);
  }

  .sh-home-page h2,
  .sh-home-page .component.headline h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .sh-home-stage .component.ctaTeaser > div,
  .sh-home-page .component.ctaTeaser > div {
    min-height: 0;
    display: block;
  }

  .sh-home-stage .component.ctaTeaser,
  .sh-home-stage .component.ctaTeaser .ctaTeaserTextDiv {
    background: var(--sh-grey);
  }

  .sh-home-page .component.ctaTeaser .ctaTeaserImageDiv,
  .sh-home-page .component.ctaTeaser .ctaTeaserTextDiv,
  .sh-home-stage .component.ctaTeaser .ctaTeaserImageDiv,
  .sh-home-stage .component.ctaTeaser .ctaTeaserTextDiv {
    width: 100%;
  }

  .sh-home-stage .component.ctaTeaser .ctaTeaserImageDiv {
    min-height: 0;
  }

  .sh-home-stage .component.ctaTeaser .ctaTeaserTextDiv {
    min-height: 213px;
    padding: 31px 24px 55px;
  }

  .sh-home-stage .component.ctaTeaser .ctaTeaserTextDiv h2 {
    color: var(--sh-red);
    font-size: 22px;
    line-height: 1.2;
  }

  .sh-home-stage .btn.btn-default {
    border-color: var(--sh-red);
  }

  .sh-home-stage .btn.btn-default:hover,
  .sh-home-stage .btn.btn-default:focus-visible {
    border-color: var(--sh-red);
  }

  .sh-home-page .component.ctaTeaser:not(.sh-home-stage .component.ctaTeaser) .ctaTeaserTextDiv {
    min-height: 220px;
  }

  .sh-home-quicklinks {
    margin-top: 90px;
    margin-bottom: 85px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sh-home-stage-teasers,
  .sh-home-colour .component.ctaTeaser + .component.ctaTeaser {
    gap: 0;
    margin-bottom: 84px;
  }

  .sh-home-stage-teasers .component.ctaTeaser + .component.ctaTeaser,
  .sh-home-colour .component.ctaTeaser + .component.ctaTeaser {
    margin-top: 85px;
  }

  .sh-home-media-pair,
  .sh-home-coty-grid,
  .sh-home-card-grid--three,
  .sh-home-split,
  .sh-home-split--text-media,
  .sh-home-split--media-text {
    grid-template-columns: 1fr;
  }

  .sh-home-coty,
  .sh-home-drivus,
  .sh-home-audurra {
    padding: 55px 0;
  }

  .sh-home-coty,
  .sh-home-products,
  .sh-home-media-pair,
  .sh-home-colour,
  .sh-home-drivus,
  .sh-home-training {
    margin-bottom: 70px;
  }

  .sh-home-products-systems-band .sh-home-systems-slider {
    margin: 0;
  }

  .sh-home-systems-slider {
    margin: 42px 0 28px;
  }

  .sh-home-systems-slider-track {
    --sh-systems-per-view: 1;
    --sh-systems-gap: 0;
    scroll-padding-inline: 0;
  }

  .sh-home-systems-slider-track .mediaTeaser h3 {
    margin-top: 10px;
    padding-inline: 0;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
  }

  .sh-home-systems-slider-viewport .slider-control {
    top: calc(50% - 28px);
  }

  .sh-home-systems-slider-viewport .slider-control.prev {
    left: max(4px, env(safe-area-inset-left, 0px));
  }

  .sh-home-systems-slider-viewport .slider-control.next {
    right: max(4px, env(safe-area-inset-right, 0px));
  }

  @media (hover: none) and (pointer: coarse) {
    .sh-home-systems-slider-outer .slider-control {
      display: none;
    }
  }

  .sh-home-page .mediaTeaser h3,
  .sh-home-page .mediaTeaser p,
  .sh-home-page .mediaTeaser span {
    padding-inline: 0;
  }

  .sh-home-logo-pair .mediaTeaser h3 {
    padding-inline: 24px;
  }
}
