@font-face {
  font-family: frutiger;
  src: url(https://www.ssh.com/hubfs/ssh-infographic/fonts/frutiger.ttf);
}

@font-face {
  font-family: frutiger-book;
  src: url(https://www.ssh.com/hubfs/ssh-infographic/fonts/frutiger-book.ttf);
}

@font-face {
  font-family: frutiger-heavy;
  src: url(https://www.ssh.com/hubfs/ssh-infographic/fonts/frutiger-heavy.ttf);
}

@font-face {
  font-family: frutiger-light;
  src: url(https://www.ssh.com/hubfs/ssh-infographic/fonts/frutiger-light.ttf);
}

* {
  font-family: 'frutiger';
}

.swiper {
  height: 18em;
  overflow: initial !important;
}

.mySwiper2 {
  width: 100%;
  margin: 3em 0em;
  text-align: center;
}

.mySwiper2 h2 {
  width: 80%;
}

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: .2em;
  font-size: 22px;
  padding: .5em 0em;
  font-weight: bold;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: all .5s ease !important;
  transition: all .5s ease !important;
  opacity: .8;
}

.swiper-slide.swiper-slide-active {
  -webkit-transform: scale(1.25) !important;
          transform: scale(1.25) !important;
  z-index: 2;
  opacity: 1;
}

.swiper-slide .cardsIcons {
  width: 3.5em;
}

.swiper-slide h1 {
  margin: 4px 0px;
  font-size: 2.75em;
}

.swiper-slide h5 {
  width: 85%;
  text-align: center;
  font-size: .5em;
  margin: 0px;
}

.swiperBtn {
  background: white;
  padding: 0.75em;
  border-radius: 0.6em;
}

.cardsPlusSwipe {
  width: 92.5%;
  width: 100%;
  padding: 4.75em 0em;
  overflow-x: hidden;
}

.gradientShadowBgContainer {
  height: 25em;
  position: absolute;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gradientShadowBgContainer .gradientShadowBg {
  position: absolute;
  margin-top: -2em;
  opacity: .35;
}

.swiper-blue {
  background: #4249FE;
}

.swiper-lightblue {
  background: #DAE6FD;
  color: #060B32;
}

.swiper-darkblue {
  background: #060B32;
}

.swiper-orange {
  background: #F1A323;
}

.swipeCardsTriggerContainer {
  width: 100%;
  height: 3em;
  padding-top: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

h6 {
  font-size: .775em !important;
}

.DScloseIconContainer {
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  width: 95vw;
  z-index: 400;
}

.DScloseIconContainer .DScloseIcon {
  position: absolute;
  cursor: pointer;
  height: 100%;
}

.DScloseIconContainer .DScloseIconBg {
  margin: .5em;
  width: 4em;
  height: 4em;
  background-color: #fff;
  float: right;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: .5em;
  top: 1em;
  right: .5em;
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
}

.DScloseIconContainer .DScloseIconBg :hover {
  width: 70%;
  height: auto;
  border-radius: 1em;
  padding: .5em;
  -webkit-transition: .25s;
  transition: .25s;
}

.DSoverlayHeaderAniContainer {
  margin-top: 12.5em;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

.DSoverlayContainerAccess {
  width: 24em;
  height: 30em;
  position: relative;
}

.DSoverlayContainerAccess img {
  position: absolute;
}

.DSoverlayContainerAccess .DSbovenlijf {
  right: 0em;
}

.DSoverlayContainerAccess .DSbovenarm {
  right: 8em;
  top: 7em;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.DSoverlayContainerAccess .DSarm {
  right: 10em;
  top: 7.25em;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}

.DSoverlayContainerAccess .DSaccess {
  top: 5em;
  right: 9.5em;
  width: 11em;
  height: 6.5em;
  border: 4px solid white;
  background-color: green;
  position: absolute;
  overflow: hidden;
  padding: 0em .25em;
}

.DSoverlayContainerAccess .DSaccess .containerSterAccess {
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .25em;
}

.DSoverlayContainerAccess .DSaccess .containerSterAccess .DSaccessSter {
  font-size: 2em;
  color: #4249FE;
  height: 0.9em;
  width: 1em;
  border-radius: 0.2em;
  background: white;
  border: 1px solid;
  text-align: center;
  overflow: hidden;
}

.DSoverlayContainerAccess .DSaccess .containerSterAccess .DSaccessSter h4 {
  margin-top: 15px;
}

.DSoverlayContainerAccess .DSaccess h2 {
  bottom: 6px;
  margin: 0px;
  left: 20px;
  position: absolute;
  font-size: 1em;
  opacity: 0;
}

.DSoverlayContainerAccess .DSaccess .DSaccessGlass {
  background-color: #fff;
  width: 240px;
  top: 15px;
  height: 35px;
  opacity: .2;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  position: absolute;
}

.DSmainContainerAccess {
  position: absolute !important;
  bottom: 0px !important;
  height: 35.5em !important;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform: scale(0.65) translateX(22em);
          transform: scale(0.65) translateX(22em);
}

.DSoverlayContainerDesk {
  width: 40em;
  height: 35em;
  position: relative;
}

.DSoverlayContainerDesk img {
  position: absolute;
  bottom: 0px !important;
}

.DSoverlayContainerDesk .DSmanBureauArmAchter {
  top: 15.5em;
  left: 7em;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.DSoverlayContainerDesk .DSmanBureauHoofd {
  top: 4.5em;
  left: 5em;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.DSoverlayContainerDesk .DSmanBureauArmVoor {
  top: 16.7em;
  left: 11.5em;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.DSmainContainerDesk {
  position: absolute !important;
  bottom: 0px !important;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  left: 4em;
  -webkit-transform: scale(0.65) translateX(-12em);
          transform: scale(0.65) translateX(-12em);
}

.DSoverlayContainerStok {
  width: 20em;
  height: 35em;
  position: relative;
}

.DSoverlayContainerStok img {
  position: absolute;
}

.DSoverlayContainerStok .DSstokBovenArm {
  top: 7.5em;
  left: 7.5em;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.DSoverlayContainerStok .DSstokOnderArm {
  top: 10.5em;
  left: 8.2em;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.DSoverlayContainerStok .DSstokHand {
  top: 9em;
  left: 12.7em;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.DSmainContainerStok {
  position: absolute !important;
  bottom: 0px !important;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  left: 4em;
  -webkit-transform: scale(0.75) translateX(15em);
          transform: scale(0.75) translateX(15em);
}

.DSoverlayContainerGroep {
  width: 20em;
  height: 35em;
  position: relative;
}

.DSoverlayContainerGroep img {
  position: absolute;
}

.DSoverlayContainerGroep .DSgroepHandOrange {
  top: 13.2em;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.DSoverlayContainerGroep .DSgroepBlad {
  left: 20em;
  top: 16em;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.DSoverlayContainerGroep .DSgroepTablet {
  top: 11.5em;
  left: 27em;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}

.DSoverlayContainerGroep .DSgroepBeen {
  top: 19.45em;
  left: 21.7em;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.DSmainContainerGroep {
  position: absolute !important;
  bottom: 0px !important;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  left: 4em;
  -webkit-transform: scale(0.75) translateX(50em);
          transform: scale(0.75) translateX(50em);
}

.DSoverlayHeader {
  padding: 2.5em 0em;
  width: 100%;
  height: 40em;
  margin-bottom: -15em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #e9f2ff;
}

.DSoverlayHeader h1 {
  font-size: 2.5em;
  color: #0A0F59;
  margin: 1em .5em;
  border-bottom: 3px solid #BBCDEA;
  width: 80%;
  padding-bottom: .5em;
  position: absolute;
}

.overlaySecAll {
  display: none;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}

.overlaySecAll ::-webkit-scrollbar {
  width: 10px !important;
  height: 10px;
}

.overlaySecAll ::-webkit-scrollbar-track {
  background: white !important;
  -webkit-box-shadow: inset 0 0 4px #dadada;
          box-shadow: inset 0 0 4px #dadada;
  border-radius: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

.overlaySecAll ::-webkit-scrollbar-thumb {
  background: #DAE6FD !important;
  border-radius: 10px;
}

.overlaySecAll ::-webkit-scrollbar-thumb:hover {
  background: #4249FE !important;
}

.nameSec {
  text-align: center;
  z-index: 4;
  width: 12em;
  padding: 1em 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #4249FE;
  position: absolute;
  color: white !important;
  border-radius: 50em;
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.overlayBackground {
  width: 100%;
  height: 100%;
  background-color: #060b32d2;
  z-index: 49;
  top: 0px;
  position: fixed;
}

.overlayFlexCenter {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  //width: 100%;
  height: 100vh;
  position: absolute;
}

.overlayStyle {
  margin-top: 2.5vh;
  width: 95vw;
  position: fixed;
  max-height: 80vh;
  background-color: #F2F7FF;
  border: 2px solid #7184FF;
  top: 150px;
  border-radius: .5em;
  z-index: 50;
  overflow-y: scroll;
  right: 50%;
  transform: translateX(50%);
}

@media (max-width: 991px) {
	
  .overlayStyle {
	top: 80px;
  }	
}



.overlayStyle .sec1Item1 {
  height: 45em;
  position: relative;
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 1.5em 0px;
  border-radius: .5em;
  background-color: #fff;
  border: 1px solid #C7DDFF;
  width: 92.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 3.75%;
}

.overlayStyle .betterWorseContainer {
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .7em;
  padding: 0em 2.25em;
  border-radius: 5em;
}

.overlayStyle .sec1Item1Left {
  padding-bottom: .5em;
  width: 90%;
  min-height: 38%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: .7em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 2px solid #C7DDFF;
}

.overlayStyle .sec1Item1Left .sec1Item1LeftGrafiek {
  background-color: #77BB43;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  /* height: 0px; */
  /* width: 3em; */
  border-radius: .25em;
}

.overlayStyle .sec1Item1Left .sec1Item1LeftGrafiek h5 {
  /* -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl; */
  font-size: 15px;
  margin: 1.5em 2em;
  text-align: right;
}

.overlayStyle .sec1Item1Right {
  padding-top: .5em;
  width: 90%;
  min-height: 32%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: .7em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.overlayStyle .sec1Item1Right .sec1Item1RightGrafiek {
  background-color: #FF5267;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  /* width: 3em; */
  border-radius: .25em;
}

.overlayStyle .sec1Item1Right .sec1Item1RightGrafiek h5 {
  /* -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl; */
  font-size: 15px;
  margin: 1.5em 2em;
  padding: 0px;
  text-align: left;
}

.overlayStyle .sec1Item2 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  padding-bottom: 1em;
}

.overlayStyle .sec1Item2 .sec1Item2Container {
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 1.5em 0px;
  border-radius: .5em;
  background-color: #fff;
  border: 1px solid #C7DDFF;
  margin: 1em;
  min-width: 12em;
  min-height: 12em;
  border-radius: .5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.overlayStyle .sec1Item2 .sec1Item2Container .sec1Item2Txt {
  width: 80%;
  text-align: center;
  bottom: 0px;
  margin: 0px;
}

.overlayStyle .sec1Item2 .sec1Item2Container img {
  max-width: 60%;
  margin-bottom: 1em;
}

.overlayStyle .legendaGraf {
  width: 80%;
  margin-left: 10%;
}

.overlayStyle .legenadaContainer {
  padding: 1em 0em;
  opacity: .7;
  text-align: center;
}

.overlayStyle .legenadaContainer h6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1em 2em;
}

.overlayStyle .legenadaContainer .legendaItem {
  min-width: 1.2em;
  height: 1.2em;
  margin-right: 1em;
}

.overlayStyle .legenadaContainer .legendaOrange {
  background-color: #F1A323;
}

.overlayStyle .legenadaContainer .legendaLightBlue {
  background-color: #4249FE;
}

.overlayStyle .legenadaContainer .legendaLightLightBlue {
  background-color: #DAE6FD;
}

.overlayStyle .legenadaContainer .legendaDarkblue {
  background-color: #060B32;
}

.overlayStyle .sec1Item3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 1em;
  width: 92.5%;
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 1.5em 0px;
  border-radius: .5em;
  background-color: rgba(255, 255, 255, 0.26);
  border: 1px solid #C7DDFF;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 3.75%;
}

.overlayStyle .sec1Item3 .sec1Item3Slider {
  overflow-x: scroll;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2em;
}

.overlayStyle .sec1Item3 h1 {
  font-size: 2em;
  margin-top: 0.5em;
  margin-bottom: 0em;
  text-align: center;
}

.overlayStyle .sec1Item3 .sec1Item3Container {
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 1.5em 0px;
  border-radius: .5em;
  background-color: #fff;
  border: 1px solid #C7DDFF;
  background-color: #DAE6FD;
  margin: 1em;
  min-width: 12em;
  min-height: 12em;
  border-radius: .5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.overlayStyle .sec1Item3 .sec1Item3Container .sec1Item2Txt {
  width: 80%;
  text-align: center;
  bottom: 0px;
  margin: 0px;
  margin-top: 1em;
}

.overlayStyle .sec1Item3 .sec1Item3Container img {
  max-width: 60%;
  margin-bottom: 1em;
}

.overlayStyle .sec1Item4 {
  width: 92.5%;
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 1.5em 0px;
  border-radius: .5em;
  background-color: rgba(255, 255, 255, 0.26);
  border: 1px solid #C7DDFF;
  margin-left: 3.75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-x: hidden;
}

.overlayStyle .sec1Item4 h1 {
  font-size: 2em;
  margin: .5em;
  text-align: center;
}

.overlayStyle .sec1Item5 {
  width: 92.5%;
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 1.5em 0px;
  border-radius: .5em;
  background-color: rgba(255, 255, 255, 0.26);
  border: 1px solid #C7DDFF;
  margin-left: 3.75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2.5em;
}

.overlayStyle .sec1Item5 h1 {
  font-size: 2em;
  margin-top: 0.5em;
  margin-bottom: 0em;
  text-align: center;
}

.overlayStyle .sec1Item5 .sec1Item5Container {
  width: 90%;
  margin: 1em 0em;
}

.overlayStyle .sec1Item5 .sec1Item5Container h3,
.overlayStyle .sec1Item5 .sec1Item5Container h5 {
  margin: 0px;
}

.overlayStyle .sec1Item5 .sec1Item5Container h3 {
  padding: .5em 0em .5em 1em;
  border-radius: .3em;
  color: white;
}

.overlayStyle .sec1Item5 .sec1Item5Container h5 {
  padding-left: .5em;
  margin-top: .5em;
  margin-bottom: .75em;
}

.overlayStyle .sec1Item5 .sec1Item5Container .sec1Item5Grafiek1 h3 {
  background-color: #060B32;
}

.overlayStyle .sec1Item5 .sec1Item5Container .sec1Item5Grafiek2 h3 {
  background-color: #F1A323;
}

.overlayStyle .sec1Item5 .sec1Item5Container .sec1Item5Grafiek3 h3 {
  background-color: #4249FE;
  width: 80%;
}

.overlayStyle .sec1Item5 .sec1Item5Container .sec1Item5Grafiek4 h3 {
  background-color: #060B32;
  width: 70%;
}

.overlayStyle .sec1Item5 .sec1Item5Container .sec1Item5Grafiek5 h3 {
  background-color: #F1A323;
  width: 60%;
}

.overlayStyle .sec1Item5 .sec1Item5Container .sec1Item5Grafiek6 h3 {
  background-color: #4249FE;
  width: 28%;
}

* {
  font-family: 'frutiger';
}

.swiper {
  height: 18em;
  overflow: initial !important;
}

.mySwiper2 {
  width: 100%;
  margin: 3em 0em;
  text-align: center;
}

.mySwiper2 h2 {
  width: 80%;
}

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: .2em;
  font-size: 22px;
  padding: .5em 0em;
  font-weight: bold;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: all .5s ease !important;
  transition: all .5s ease !important;
  opacity: .8;
}

.swiper-slide.swiper-slide-active {
  -webkit-transform: scale(1.25) !important;
          transform: scale(1.25) !important;
  z-index: 2;
  opacity: 1;
}

.swiper-slide .cardsIcons {
  width: 3.5em;
}

.swiper-slide h1 {
  margin: 4px 0px;
  font-size: 2.75em;
  color: white !important;
}

.swiper-lightblue h1 {
  color: unset !important;
}

.swiper-slide h5 {
  width: 85%;
  text-align: center;
  font-size: .5em;
  margin: 0px;
}

.swiperBtn {
  background: white;
  padding: 0.75em;
  border-radius: 0.6em;
}

.cardsPlusSwipe {
  width: 92.5%;
  width: 100%;
  padding: 4.75em 0em;
  overflow-x: hidden;
}

.gradientShadowBgContainer {
  height: 25em;
  position: absolute;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gradientShadowBgContainer .gradientShadowBg {
  position: absolute;
  margin-top: -2em;
  opacity: .35;
}

.swiper-blue {
  background: #4249FE;
}

.swiper-lightblue {
  background: #DAE6FD;
  color: #060B32;
}

.swiper-darkblue {
  background: #060B32;
}

.swiper-darkblue h5, .swiper-blue h5, .swiper-orange h5 {
  color: white !important;
}

.swiper-orange {
  background: #F1A323;
}

.swipeCardsTriggerContainer {
  width: 100%;
  height: 3em;
  padding-top: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body {
  margin: 0px;
}

::-moz-selection {
  background: transparent;
}

::selection {
  background: transparent;
}

html {
  scroll-behavior: smooth;
}

#DSplaceHolder {
  min-height: 100%;
  position: relative;
  max-width: 100vw;
}

.startAutoOverlay {
  background-color: rgba(0, 0, 255, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  cursor: pointer !important;
}

.startAutoOverlay .autoBox {
  width: 40em;
  height: 30em;
  background-color: #fff;
  position: relative;
  border-radius: 1em;
  overflow: hidden;
}

.startAutoOverlay .startTopBox {
  height: 18em;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.startAutoOverlay .startBottomBox {
  width: 100%;
  height: 12.5em;
  position: absolute;
  bottom: 0em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 0px;
  background-color: #eeeeff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.startAutoOverlay .startBottomBox .exploreNowBtn {
  color: white;
  padding: 1.5em 2em;
  border-radius: 100em;
  background-color: blue;
  letter-spacing: 1px;
  font-size: 1.5em;
  margin: 0px;
}

.startAutoOverlay .startBottomBox #countdown {
  margin-top: 5px;
  color: blue;
  font-size: 1.35em;
  font-weight: 900;
}

.startAutoOverlay .startLearnBox {
  width: 40%;
  margin-top: 2.5em;
  height: 12.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-left: solid 2px grey;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.startAutoOverlay .startLearnBox .hotspotTrigger {
  -webkit-transform: scale(1.6);
          transform: scale(1.6);
}

.startAutoOverlay .startLearnBox h4 {
  position: absolute;
  bottom: 4px;
}

.startAutoOverlay .startExploreBox {
  width: 40%;
  height: 12.5em;
  margin-top: 2.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.startAutoOverlay .startExploreBox .startExploreIcon {
  width: 80px;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}

.startAutoOverlay .startExploreBox h4 {
  position: absolute;
  bottom: 4px;
}

.groteQoute {
  padding: 4em 0em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}

.groteQoute h1 {
  font-family: frutiger;
  font-size: 1.25em;
  width: 75%;
  margin: 0.5em 0em;
}

.groteQoute h3 {
  color: #4249FE;
  width: 75%;
  font-size: .8em;
}

.groteQoute .DSqoute {
  width: 2em;
  height: auto;
  position: absolute;
}

.groteQoute .DSqouteTop {
  left: 1em;
  top: 1em;
}

.groteQoute .DSqouteBottom {
  bottom: 1em;
  right: 1em;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.sec1ItemGrafiekTxt {
  cursor: default;
}

.sshlogo {
  position: absolute;
  right: 1em;
  z-index: 10;
  width: 8em;
  top: 1em;
  z-index: 49;
}

.legendaGraf {
  opacity: 1 !important;
}

#DSmoduleContainer {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
  background: #060B32;
}

@media (max-width: 40em) {
  .DSarrowNav {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    bottom: 1em;
  }

  .sec1Item1RightMarginTopFix{
    margin-top: 3em;
  }
  .startExploreBox,
  .startLearnBox {
    padding: 1%;
    min-width: 45%;
  }
  .DSdeur {
    left: -2em !important;
    width: 57em !important;
    height: auto !important;
  }
  .startAutoOverlay {
    max-width: 90%;
    padding-left: 5%;
    padding-right: 5%;
  }

}

@media (min-width: 40em) {
  .mySwiper2 {
    width: 100% !important;
  }
  #DScontainer {
    height: 85vh;
    width: 90vw !important;
    overflow: hidden;
    margin: 2em;
    border: 5px solid #4249FE;
    border-radius: 1em;
    -webkit-box-shadow: 0 14px 28px #4249FE30, 0 10px 10px rgba(0, 0, 0, 0.22);
            box-shadow: 0 14px 28px #4249FE30, 0 10px 10px rgba(0, 0, 0, 0.22);
  }
  .overlayStyle {
    border: 0.5em solid #7184FF;
    max-width: 77.5em;
  }
  .DScloseIconContainer {
    right: 2em;
  }
  .DSarrowNav {
    margin: 2em;
    bottom: 1em;
  }
  .legendaContainerGraf {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 100% !important;
  }
  .legendaGraf {
    max-width: 18em;
  }
}

@media (min-width: 1440px) {
  .sec1Item3Slider {
    overflow-x: auto !important;
  }
  .DSarrowNav {
    bottom: auto !important;
  }
  .groteQoute {
    width: 70%;
    margin-left: 15%;
    padding: 7em 0em !important;
  }
  .blauwText {
    opacity: 0;
  }
  .DSsection2 .DSlamp {
    top: -75px !important;
  }
  .sec1Item1 {
    flex-direction: row !important;
    /* -webkit-transform: translate(330px, 15px) rotate(-90deg) !important;
            transform: translate(330px, 15px) rotate(-90deg) !important; */
    /* opacity: 1;
    min-height: 60em;
    margin-bottom: -15em !important; */
    max-height: 25em;
  }

  .sec1Item1Left{
    padding-right: .5em;
  border-right: 2px solid #C7DDFF;
  border-bottom: none !important;
  align-items: flex-end !important;
  }

  .sec1Item1Right{
    padding-left: .5em;

    align-items: flex-start !important;
  }

  #DScontainer {
    min-height: 55 em;
    width: 90vw !important;
    overflow: hidden;
    max-width: 108em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .swipeCardsTriggerContainer {
    display: none !important;
  }
  .legenadaContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1em 5em !important;
  }
  .legenadaContainer h6 {
    max-width: 25em;
  }
  .DSoverlayContainerDeskCenter {
    width: 55em;
  }
  #DSmoduleContainer {
    padding: 5em 0em 5em 0em;
  }
  #DSgrabBox {
    min-width: 200em;
  }
  .DSwatermachine {
    left: 40em !important;
  }

  .DSoverlayHeader h1 {
    max-width: 50%;
    margin-left: 3em;
  }
  .DSoverlayContainerStokCenter {
    right: 22.5em;
  }
  .DSoverlayHeaderAniContainer {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  .DSoverlayHeaderAniContainer .DSoverlayContainerAccess {
    right: 31em;
    -webkit-transform: scale(1.2) translateY(3em);
            transform: scale(1.2) translateY(3em);
  }
  .DSsection1 {
    min-width: 45em;
  }
  .DSsection2 {
    min-width: 65em;
  }
  .DSsection3 {
    min-width: 105em;
    margin-left: -15em !important;
  }
  .sec1Item2,
  .sec1Item3 {
    overflow: hidden !important;
  }
  .DScloseIconContainer {
    max-width: 77em;
    right: auto;
  }
  .DSmainContainerAccess {
    -webkit-transform: scale(0.75) translateX(25em);
            transform: scale(0.75) translateX(25em);
  }
  .DSarrowNav {
    margin: 0em;
    min-height: 10em;
  }
}

.DSarrowNav {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 4em;
  height: 4em;
  position: absolute;
  z-index: 100;
  background-color: #4249FE80;
  border: #9da1ff solid 3px;
  border-radius: .5em;
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

#DSarrowNavRight {
  right: 1em;
}

#DSarrowNavLeft {
  left: 1em;
  display: none;
}

#DScontainer {
  position: relative;
  width: 100%;
  height: 50em;
  -webkit-box-shadow: inset 0 0 20px deepskyblue;
          box-shadow: inset 0 0 20px deepskyblue;
  background: #4249FE;
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

#DScontainer img {
  position: absolute;
}

.hotspotTrigger {
  cursor: pointer !important;
  position: absolute;
  width: 20%;
  height: 8%;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hotspotTrigger:focus {
  outline: none !important;
}

.blauwText {
  width: 20em;
  height: 8.8em;
  position: absolute;
  z-index: 5;
}

.blauwText .puntNameSec {
  bottom: 0px;
  position: absolute;
  right: 3em;
}

.blauwText1 {
  bottom: 21.5em;
  left: 6em;
}

.hotspotPos-1 {
  bottom: 18em;
  left: 18em;
}

.hotspotPos-2 {
  bottom: 14em;
  left: 14em;
}

.blauwText2 {
  bottom: 17em;
  left: 3em;
}

.hotspotPos-3 {
  bottom: 12em;
  left: 9em;
}

.blauwText3 {
  bottom: 15em;
  left: 2em;
}

.hotspotPos-4 {
  bottom: 24.5em;
  left: 60em;
}

.blauwText4 {
  bottom: 28em;
  left: 54em;
}

.hotspotObj {
  width: 2.15em;
  height: 2.15em;
  background-color: #FF5267;
  border-radius: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.hotspotObjFade1 {
  border: solid rgba(255, 255, 255, 0) 1px;
  width: 2em;
  height: 2em;
  position: absolute;
}

.hotspotObjFade2 {
  border: solid rgba(255, 255, 255, 0) 1px;
  width: 2em;
  height: 2em;
  position: absolute;
  background-color: #ffffff;
}

#DSgrabBox {
  left: 0px;
  width: 170em;
  height: 100%;
  position: relative;
}

.DSwolk1 {
  margin-left: -50em;
}

.DSwolk1b {
  -webkit-transform: scale(0.6) translateX(58em) translateY(-15em);
          transform: scale(0.6) translateX(58em) translateY(-15em);
}

.DSwolk1c {
  -webkit-transform: scale(0.5) translateX(-35em) translateY(-15em);
          transform: scale(0.5) translateX(-35em) translateY(-15em);
}

.DSwolk2 {
  margin-left: -38em;
}

.DSwolk2b {
  -webkit-transform: scale(0.8) translateX(0em) translateY(-15em);
          transform: scale(0.8) translateX(0em) translateY(-15em);
}

.DSwolk2c {
  -webkit-transform: scale(0.5) translateX(-35em) translateY(-15em);
          transform: scale(0.5) translateX(-35em) translateY(-15em);
}

.DSswipeIcon {
  width: 45px;
  margin-right: .5em;
}

.DStussenTekst {
  width: 92.5%;
  width: 90%;
  margin: 2% 5%;
  font-family: 'frutiger-light';
  text-align: center;
  font-size: 1em;
}

.DStussenTekst .tekstHeavy {
  font-style: normal;
  font-family: 'frutiger-heavy';
}

.DSwatermachine {
  left: 31em;
  width: 6.5em;
  z-index: 1;
  position: absolute;
  bottom: 0em;
}

.DSsection1 {
  width: 35em;
  min-height: 100%;
  background-color: rgba(235, 36, 36, 0.534);
  position: relative;
  overflow: hidden;
  float: left;
}

.DSsection1 img {
  bottom: 0px;
}

.DSsection1 .itemSec1 {
  width: 100%;
}

.DSsection1 .DSbgSec1 {
  height: 100%;
  width: 100%;
}

.DSsection1 .DSbord {
  top: 0px;
}

.DSsection1 .DSramen {
  height: 100%;
}

.DSsection1 .DSbord {
  left: -2em;
  width: 34em;
}

.DSsection1 .DSkluisjes {
  left: -4em;
  bottom: -1px;
}

.DSsection2 {
  width: 50em;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  float: left;
}

.DSsection2 img {
  bottom: 0px;
}

.DSsection2 .itemSec2 {
  width: 100%;
}

.DSsection2 .DSbgSec2 {
  position: absolute;
  width: 80%;
  height: 100%;
  background: #787b8f;
  background: -webkit-gradient(linear, left top, right top, color-stop(1%, #787b8f), to(#4f5163));
  background: linear-gradient(90deg, #787b8f 1%, #4f5163 100%);
}

.DSsection2 .enterCheck {
  width: 100px;
  margin-left: 19.5em;
  bottom: 15em;
}

.DSsection2 .deskComp {
  z-index: 1;
}

.DSsection2 .DSlamp {
  top: 0px;
}

.DSsection3 {
  width: 95em;
  margin-left: -10em;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  float: left;
  background-color: #dad3c3;
}

.DSsection3 img {
  bottom: 0px;
}

.DSsection3 .itemSec3 {
  width: 100%;
}

.DSsection3 .DSplakbord {
  z-index: 1;
}

.DSsection3 .DSmanStok {
  pointer-events: none;
  z-index: 2;
}

.DSsection3 .postIt {
  height: 16px;
  width: 16px;
  position: absolute;
  pointer-events: none;
  -webkit-transform: skew(5deg, 4deg);
          transform: skew(5deg, 4deg);
}

.DSsection3 .hoverAreaPostIt {
  width: 18em;
  height: 14em;
  position: absolute;
  z-index: 5;
  left: 8em;
  bottom: 17em;
}

.DSsection3 .posIt1 {
  background-color: #F279C7;
  bottom: 24em;
  left: 15em;
}

.DSsection3 .posIt2 {
  background-color: #73BB24;
  bottom: 22em;
  left: 10em;
}

.DSsection3 .posIt3 {
  background-color: #FFEF2E;
  bottom: 27em;
  left: 12em;
}

.DSsection3 .mensenTafel {
  margin-left: -7em;
}

.DSsection3 .DSlampSec3 {
  top: 0px;
  height: 110%;
  margin-top: -3.35%;
}

.DSsection3 .DSlampLicht {
  height: 104.5%;
}

.DSsection3 .DSklok {
  width: 6em;
  height: auto;
  position: absolute;
  left: 76.75em;
  bottom: 30.75em;
}

.DSsection3 .DSklokWijzer {
  position: absolute;
  left: 79.4em;
  bottom: 33.7em;
  border-radius: 1em 1em .5em .5em;
  background-color: #fff;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.DSsection3 .KlokGr {
  width: .5em;
  height: 2.25em;
}

.DSsection3 .KlokKl {
  width: .6em;
  height: 1.9em;
}

.DSaccessH2 {
  color: white;
}

.DSalarmClock {
  float: right;
  width: 75px;
  height: 75px;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}




/*# sourceMappingURL=style.css.map */