@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:ital, wght@0, 100..900;1,100..900&display=swap);

.reset-button,
.tab {
  text-transform: uppercase;
}




:root {
  --clr-light-blue: #d5e9ff;
  --clr-blue: #1487df;
  --clr-dark-blue: #1e4176;
  --clr-white: #fff;
  --clr-tabs: var(--clr-dark-blue);
  --clr-bottom-left: #1e4176;
  --clr-top-right: #1487df;
  --clr-font-color: var(--clr-white);
  --clr-border-color: var(--clr-white);
  --clr-modal-background: var(--clr-white);
  
  

  --tab-active: var(--clr-light-blue);
}



:focus-visible {
  outline: yellow solid 3px;
  outline-offset: 4px;
}

.hotspot:focus-visible,
.reset-button:focus-visible {
  outline: 3px solid yellow;
  outline-offset: 4px;
  background-color: rgba(4, 248, 81, 0.356);
}

.hotspot:hover,
.reset-button:hover {
  background-color: rgba(4, 248, 81, 0.356);
}

.tab.tab-active,
.tab:hover,
section.title {
  background: var(--tab-active);
  color: var(--clr-dark-blue);
}


body {
  font-family: Helvetica, sans-serif;
  max-height: 800px;
  overflow: hidden;
  margin: 0 auto;
}

section.title {
  margin: 0;
  padding: 3px;
  border-bottom: 1px var(--clr-white) solid;
  text-align: center;
  font-size: 24px;
  color: var(--clr-white);
}

.visible {
  opacity: 1 !important;
  pointer-events: initial;
}

.hotspot-group,
.modal,
.modal-body:after {
  pointer-events: none;
}

.tabs {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.tab {
  background: var(--clr-dark-blue);
  padding: 1em;
  font-size: 1.25em;
  color: var(--clr-font-color);
  font-weight: 400;
  border: 2px solid var(--clr-border-color);
  border-top: initial;
  text-align: center;
  -webkit-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  z-index: 8000;
}

.tab:first-of-type {
  border-left: initial;
}

.tab:last-of-type {
  border-right: initial;
}

.tab:focus-visible {
    outline: none;
}

.tab:focus-visible span {
    outline: 3px solid yellow;
    outline-offset: 4px;
}


.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0 20px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 9000;
  transition: opacity 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-body {
  overflow-y: auto;
  padding: 1rem;
  flex-grow: 1;
  position: relative;
}

.modal-body:after {
  content: "";
  position: sticky;
  bottom: 0;
  height: 80px;
  width: 100%;
  background: #000;
  z-index: 99999;
}

.modal-content {
  position: relative;
  width: 80%;
  max-height: 80%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  background: linear-gradient(210deg, rgba(255, 255, 255, 0.9) 0, #fff 30%);
}

.hotspot,
.reset-button {
  background: var(--clr-dark-blue);
}

.modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--clr-dark-blue);
  color: #fff;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  border-radius: 7px;
  font-weight: 700;
}

@media (max-width: 768px) {

  .product,
  .tabs {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
  }

  .tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .tab {
    font-size: 1rem;
    padding: 1em;
    border: initial;
    border-bottom: 2px solid #fff;
  }

  .product {
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
  }

  .product img {
    width: 80px;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .modal {
    height: 70%;
    padding: 1em;
  }

  .modal-body {
    overflow-y: auto;
    padding: 1rem;
    flex-grow: 1;
    position: relative;
  }

  .modal h2 {
    font-size: 1.25rem;
    text-align: center;
    margin-left: 0;
  }

  section.widget.solution-selector .solution-window .section-img-cnt.show {
    width: 480px;
    height: 100%;
  }

  section.widget.solution-selector .solution-window .section-img-cnt.show:not(.zoom) {
    width: 100%;
  }
}

.modal-body::-webkit-scrollbar {
  width: 16px;
}

.modal-body::-webkit-scrollbar-track {
  background: var(--clr-modal-background);
}

.divider,
.more-button {
  background-color: var(--clr-dark-blue);
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--clr-dark-blue);
  border-radius: 10px;
  border: 3px solid #fff;
}

.modal h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--clr-dark-blue);
}

.modal h3 {
  font-size: 20px;
  font-weight: light;
}

.modal p {
  line-height: 1.5;
}

.modal.open {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
}

.product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 30px 15px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--clr-blue);
  align-items: center;
}

.reset-button,
.reset-button span {
  display: -webkit-box;
  display: -ms-flexbox;
}

.product:first-of-type {
  margin-top: 15px;
}

.product:last-of-type {
  border-bottom: initial;
  margin-bottom: 0;
}

.product img {
  width: 200px;
  max-height: 200px;
  margin-right: 30px;
  border-radius: 4px;
  -o-object-fit: contain;
  object-fit: contain;
}

.more-button,
.reset-button {
  border: none;
  cursor: pointer;
}

.product-details {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-bottom: 7px;
}

.product-header {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.product-header h3 {
  padding-bottom: 3px;
  margin: 0;
}

.product em {
  margin-bottom: 7px;
}

.product li {
  padding-bottom: 7px;
}

.more-button {
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  float: right;
  text-decoration: none;
}

.divider {
  height: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
}

section.widget.solution-selector {
  height: 800px;
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #1e4176;
  background: -webkit-gradient(linear,
      left bottom,
      left top,
      from(#1e4176),
      to(#1487df));
  background: -o-linear-gradient(bottom, #1e4176 0, #1487df 100%);
  background: linear-gradient(0deg, #1e4176 0, #1487df 100%);
}

section.widget.solution-selector a {
  cursor: pointer;
}

@media only screen and (max-width: 1500px) {
  section.widget.solution-selector {
    height: 800px;
  }
}

section.widget.solution-selector .solution-nav .mobile-headline h2 {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.5rem;
  width: 100%;
}

@media only screen and (max-width: 968px) {
  section.widget.solution-selector {
    height: 850px;
  }

  section.widget.solution-selector .solution-nav .mobile-headline {
    display: block;
  }

  section.widget.solution-selector .solution-nav .mobile-headline h2 {
    font-size: 1.125rem;
  }
}

section.widget.solution-selector .solution-nav .mobile-headline img.mobile-img {
  max-height: 220px;
  width: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

section.widget.solution-selector .solution-window {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 95%;
  height: 100%;
  background-size: 16px;
  background-position: center;
}

@media only screen and (max-width: 968px) {
  section.widget.solution-selector .solution-window {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
  }
}

section.widget.solution-selector .solution-window .section-img-cnt {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(100% - 75px);
  opacity: 0;
  z-index: -1;
}

section.widget.solution-selector .solution-window .section-img-cnt img {
  width: calc(100% - 100px);
  height: auto;
  max-width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

section.widget.solution-selector .solution-window .section-img-cnt img.map-img {
  z-index: 15;
}

section.widget.solution-selector .solution-window .section-img-cnt:after,
section.widget.solution-selector .solution-window .section-img-cnt:before {
  opacity: 0;
  background-image: none;
}

section.widget.solution-selector .solution-window .section-img-cnt.show {
  z-index: 1;
  opacity: 1;
}

section.widget.solution-selector .solution-window .section-img-cnt.show img.main {
  opacity: 1;
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant:after,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant:before {
  content: "";
  width: calc(100% - 100px);
  height: 100%;
  max-width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant.zoom:after,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant.zoom:before {
  max-width: 100%;
  width: 100%;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant.zoom:before {
  z-index: 5;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant.zoom:after {
  z-index: 2;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant.zoom .map-img {
  display: none;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover$="-hover"] img.main,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view$="-view"] img.main {
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover$="-hover"]:after,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover$="-hover"]:before,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view$="-view"]:after,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view$="-view"]:before {
  opacity: 1;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view$="-view"].zoom:after,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view$="-view"].zoom:before {
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view$="-view"].zoom .hotspots.shown {
  opacity: 1;
  z-index: 20;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover="back-of-house-hover"]:before,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"]:before {
  background-image: url(https://mbm-creative-com.stackstaging.com/ecolab-SolutionSelector/prod/assets/back-of-house.png);
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover="back-of-house-hover"]:after,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"]:after {
  background-image: url(https://mbm-creative-com.stackstaging.com/ecolab-SolutionSelector/prod/assets/back-of-house-wires.png);
}

section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:after,
section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:before {
  background-size: 120%;
  background-position: 24% calc(0% + 75px);
}



@media only screen and (max-width: 1400px) {
    section.widget.solution-selector .solution-window .section-img-cnt.restaurarant {
      background-position: 24% 200px;
    }
  }

  @media only screen and (max-width: 1200px) {
      section.widget.solution-selector .solution-window .section-img-cnt.restaurant {
        background-position: 24% 200px;
      }
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover="front-of-house-hover"]:before,
    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"]:before {
      background-image: url(https://mbm-creative-com.stackstaging.com/ecolab-SolutionSelector/prod/assets/front-of-house.png);
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover="front-of-house-hover"]:after,
    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"]:after {
      background-image: url(https://mbm-creative-com.stackstaging.com/ecolab-SolutionSelector/prod/assets/front-of-house-wires.png);
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover="restroom-hover"]:after,
    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"]:after {
      background-image: url(https://mbm-creative-com.stackstaging.com/ecolab-SolutionSelector/prod/assets/restroom-wires.png);
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-hover="restroom-hover"]:before,
    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"]:before {
      background-image: url(https://mbm-creative-com.stackstaging.com/ecolab-SolutionSelector/prod/assets/restroom.png);
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"].zoom:after,
    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"].zoom:before {
      background-size: 120%;
      background-position: 107% calc(100% - 75px);
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"].zoom:after {
      background-position: 137% calc(100% - 135px);
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:after,
    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:before {
      background-size: 140%;
      background-position: -55% calc(50% - 42px);
    }

    section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:after {
      background-position: -85% calc(50% - 42px);
    }


    @media only screen and (max-width: 968px) {
            section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"].zoom:after,
            section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"].zoom:before {
      background-size: 120%;
      background-position: 107% calc(100% - 200px);
        }
    }



    @media only screen and (max-width: 760px) {

        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view=front-of-house-view].zoom: after,
        section.widget.solution-selector .solution-window .section-img-cnt.restaurant {
          background-size: 120%;
          background-position: 105% calc(50% - 42px);
        }

        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"].zoom:after {
          background-position: 105% calc(50% - 42px);
        }

        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:after,
        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:before {
          background-size: 160%;
          background-position: 30% calc(90% - 42px);
        }

        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:after {
          background-position: 30% calc(90% + 20px);
        }

        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:after,
        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:before {
          background-size: 280%;
          background-position: 0 calc(50% - 42px);
        }

        section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:after {
          background-position: 0 calc(50% - 42px);
        }
      }

      @media only screen and (max-width: 480px) {
          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view=front-of-house-view].zoom:after,
          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view=front-of-house-view].zoom:before {
            background-size: 90%;
            background-position: -15% calc(50% - 42px);
          }

          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="front-of-house-view"].zoom:after {
            background-position: -15% calc(50% - 42px);
          }

          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:after,
          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:before {
            background-size: 110%;
            background-position: 7% calc(90% - 42px);
          }

          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="back-of-house-view"].zoom:after {
            background-position: 7% calc(90% + 20px);
          }

          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:after,
          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:before {
            background-size: 200%;
            background-position: -15% calc(50% - 20px);
          }

          section.widget.solution-selector .solution-window .section-img-cnt.restaurant[data-view="restroom-view"].zoom:after {
            background-position: -15% calc(50% - 160px);
          }
        }

        section.widget.solution-selector .solution-window .section-img-cnt .hotspots {
          opacity: 0;
          position: absolute;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          width: calc(100% - 100px);
          -webkit-transition-delay: 0s;
          -o-transition-delay: 0s;
          transition-delay: 0s;
          -webkit-transition-duration: 0.3s;
          -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          z-index: -1;
        }

        section.widget.solution-selector .solution-window .section-img-cnt .hotspots#back-of-house-hotspots {
          top: 75px;
          width: 80%;
          padding-top: 54.17989%;
        }

        section.widget.solution-selector .solution-window .section-img-cnt .hotspots#front-of-house-hotspots {
          bottom: 75px;
          width: 97%;
          padding-top: 52.05709%;
        }

        section.widget.solution-selector .solution-window .section-img-cnt .hotspots#restroom-hotspots {
          width: 50%;
          left: 22%;
          top: calc(50% - 7px);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          padding-top: 39%;
        }

        @media only screen and (max-width: 760px) {
          section.widget.solution-selector .solution-window .section-img-cnt .hotspots#back-of-house-hotspots {
            top: 260px;
            right: 0;
            width: 90%;
            padding-top: 54.17989%;
          }

          section.widget.solution-selector .solution-window .section-img-cnt .hotspots#front-of-house-hotspots {
            bottom: 240px;
            width: 97%;
            padding-top: 48.05709%;
          }

          section.widget.solution-selector .solution-window .section-img-cnt .hotspots#restroom-hotspots {
            width: 100%;
            left: 0;
            top: calc(50% - 22px);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            padding-top: 74%;
          }
        }

        .reset-button {
          position: absolute;
          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: 12px;
          top: 90px;
          left: 15px;
          font-size: 1em;
          letter-spacing: 3px;
          padding: 0 1.25em;
          line-height: 0;
          color: var(--clr-font-color);
          font-weight: lighter;
          -webkit-box-shadow: rgba(50, 50, 105, 0.15) 0 2px 5px 0,
            rgba(0, 0, 0, 0.05) 0 1px 1px 0;
          box-shadow: rgba(50, 50, 105, 0.15) 0 2px 5px 0,
            rgba(0, 0, 0, 0.05) 0 1px 1px 0;
          border-radius: 30px;
          opacity: 0;
          -webkit-transition: 0.3s ease-in;
          -o-transition: 0.3s ease-in;
          transition: 0.3s ease-in;
          z-index: 9000;
        }

        #hotspot-container,
        .hotspot-group {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
          position: absolute;
        }

        .reset-button span {
          height: 44px;
          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: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
        }

        .hotspot,
        .toast.show {
          opacity: 1;
          pointer-events: auto;
        }

        .hotspot {
          position: absolute;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          bottom: var(--hotspot-bottom);
          left: var(--hotspot-left);
          border: 2px solid #fff;
          cursor: pointer;
          opacity: 0.9;
          transition: 0.3s ease-in-out;
        }

        [data-tippy]:before {
          background: var(--clr-dark-blue) !important;
          border: 1px solid #fff;
        }

        [data-tippy][data-tippy-pos="up"]:after {
          border-top-color: transparent !important;
        }

        .hotspot:focus,
        .hotspot:focus-visible,
        .hotspot:hover {
          z-index: 99999;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Hygiène des mains"] {
          --hotspot-bottom: 380px;
          --hotspot-left: 10%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle en machine"] {
          --hotspot-bottom: 510px;
          --hotspot-left: 23%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle manuel"] {
          --hotspot-bottom: 620px;
          --hotspot-left: 35%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Dégraissant"] {
          --hotspot-bottom: 680px;
          --hotspot-left: 54%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de four et gril"] {
          --hotspot-bottom: 690px;
          --hotspot-left: 62%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de la friteuse"] {
          --hotspot-bottom: 700px;
          --hotspot-left: 70%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Désinfection des surfaces"] {
          --hotspot-bottom: 760px;
          --hotspot-left: 40%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
          --hotspot-bottom: 770px;
          --hotspot-left: 54%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Entretien des sols"] {
          --hotspot-bottom: 680px;
          --hotspot-left: 50%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyants spéciaux"] {
          --hotspot-bottom: 900px;
          --hotspot-left: 85%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de blanchisserie"] {
          --hotspot-bottom: 800px;
          --hotspot-left: 90%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Hygiène des mains"] {
          --hotspot-bottom: 280px;
          --hotspot-left: 87%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Contrôle des odeurs"] {
          --hotspot-bottom: 320px;
          --hotspot-left: 57%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Désinfection des surfaces"] {
          --hotspot-bottom: 40px;
          --hotspot-left: 40%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
          --hotspot-bottom: 220px;
          --hotspot-left: 75%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Entretien des sols"] {
          --hotspot-bottom: 120px;
          --hotspot-left: 48%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Nettoyants spéciaux"] {
          --hotspot-bottom: 390px;
          --hotspot-left: 75%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Hygiène des mains"] {
          --hotspot-bottom: 270px;
          --hotspot-left: 55%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Contrôle des odeurs"] {
          --hotspot-bottom: 210px;
          --hotspot-left: 5%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Désinfection des surfaces"] {
          --hotspot-bottom: 290px;
          --hotspot-left: 62%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
          --hotspot-bottom: 430px;
          --hotspot-left: 58%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Entretien des sols"] {
          --hotspot-bottom: 270px;
          --hotspot-left: 48%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Nettoyage des toilettes et des urinoirs"] {
          --hotspot-bottom: 230px;
          --hotspot-left: 28%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Nettoyants spéciaux"] {
          --hotspot-bottom: 250px;
          --hotspot-left: 46%;
        }
        
        @media(max-width: 1300px) {
                    .hotspot-container.--back-of-house .hotspot[data-title="Hygiène des mains"] {
          --hotspot-bottom: 360px;
          --hotspot-left: 10%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle en machine"] {
          --hotspot-bottom: 460px;
          --hotspot-left: 23%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle manuel"] {
          --hotspot-bottom: 570px;
          --hotspot-left: 35%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Dégraissant"] {
          --hotspot-bottom: 610px;
          --hotspot-left: 54%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de four et gril"] {
          --hotspot-bottom: 620px;
          --hotspot-left: 62%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de la friteuse"] {
          --hotspot-bottom: 630px;
          --hotspot-left: 70%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Désinfection des surfaces"] {
          --hotspot-bottom: 680px;
          --hotspot-left: 40%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
          --hotspot-bottom: 700px;
          --hotspot-left: 54%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Entretien des sols"] {
          --hotspot-bottom: 650px;
          --hotspot-left: 50%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyants spéciaux"] {
          --hotspot-bottom: 850px;
          --hotspot-left: 85%;
        }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de blanchisserie"] {
          --hotspot-bottom: 800px;
          --hotspot-left: 90%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Hygiène des mains"] {
          --hotspot-bottom: 260px;
          --hotspot-left: 87%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Contrôle des odeurs"] {
          --hotspot-bottom: 260px;
          --hotspot-left: 57%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Désinfection des surfaces"] {
          --hotspot-bottom: 00px;
          --hotspot-left: 40%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
          --hotspot-bottom: 180px;
          --hotspot-left: 75%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Entretien des sols"] {
          --hotspot-bottom: 90px;
          --hotspot-left: 48%;
        }

        .hotspot-container.--front-of-house .hotspot[data-title="Nettoyants spéciaux"] {
          --hotspot-bottom: 350px;
          --hotspot-left: 75%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Hygiène des mains"] {
          --hotspot-bottom: 250px;
          --hotspot-left: 55%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Contrôle des odeurs"] {
          --hotspot-bottom: 170px;
          --hotspot-left: 5%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Désinfection des surfaces"] {
          --hotspot-bottom: 270px;
          --hotspot-left: 62%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
          --hotspot-bottom: 390px;
          --hotspot-left: 58%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Entretien des sols"] {
          --hotspot-bottom: 270px;
          --hotspot-left: 48%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Nettoyage des toilettes et des urinoirs"] {
          --hotspot-bottom: 200px;
          --hotspot-left: 28%;
        }

        .hotspot-container.--restroom .hotspot[data-title="Nettoyants spéciaux"] {
          --hotspot-bottom: 220px;
          --hotspot-left: 46%;
        }
    }

        @media (max-width: 968px) {
          .hotspot-container.--back-of-house .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 300px;
            --hotspot-left: 12%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle en machine"] {
            --hotspot-bottom: 400px;
            --hotspot-left: 24%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle manuel"] {
            --hotspot-bottom: 480px;
            --hotspot-left: 34%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Dégraissant"] {
            --hotspot-bottom: 550px;
            --hotspot-left: 50%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de four et gril"] {
            --hotspot-bottom: 560px;
            --hotspot-left: 60%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de la friteuse"] {
            --hotspot-bottom: 580px;
            --hotspot-left: 68%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: 620px;
            --hotspot-left: 38%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 660px;
            --hotspot-left: 52%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 680px;
            --hotspot-left: 48%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 750px;
            --hotspot-left: 89%;
          }
        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de blanchisserie"] {
          --hotspot-bottom: 700px;
          --hotspot-left: 90%;
        }

          .hotspot-container.--front-of-house .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 320px;
            --hotspot-left: 87%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Contrôle des odeurs"] {
            --hotspot-bottom: 280px;
            --hotspot-left: 56%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: 70px;
            --hotspot-left: 40%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 200px;
            --hotspot-left: 75%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 160px;
            --hotspot-left: 48%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 360px;
            --hotspot-left: 73%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 205px;
            --hotspot-left: 53%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Contrôle des odeurs"] {
            --hotspot-bottom: 110px;
            --hotspot-left: 5%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: 240px;
            --hotspot-left: 60%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 350px;
            --hotspot-left: 57%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 260px;
            --hotspot-left: 48%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Nettoyage des toilettes et des urinoirs"] {
            --hotspot-bottom: 160px;
            --hotspot-left: 28%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 170px;
            --hotspot-left: 41%;
          }
        }

        @media (max-width: 760px) {
          .reset-button {
            top: 180px;
            left: 15px;
            border: 1px solid #fff;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 80px;
            --hotspot-left: 9%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle en machine"] {
            --hotspot-bottom: 160px;
            --hotspot-left: 22%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle manuel"] {
            --hotspot-bottom: 240px;
            --hotspot-left: 32%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Dégraissant"] {
            --hotspot-bottom: 320px;
            --hotspot-left: 56%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de four et gril"] {
            --hotspot-bottom: 340px;
            --hotspot-left: 64%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de la friteuse"] {
            --hotspot-bottom: 360px;
            --hotspot-left: 72%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: 400px;
            --hotspot-left: 42%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 440px;
            --hotspot-left: 54%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 420px;
            --hotspot-left: 52%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 550px;
            --hotspot-left: 92.5%;
          }

        .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de blanchisserie"] {
          --hotspot-bottom: 525px;
          --hotspot-left: 95%;
        }


          .hotspot-container.--front-of-house .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 50px;
            --hotspot-left: 83%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Contrôle des odeurs"] {
            --hotspot-bottom: -30px;
            --hotspot-left: 57%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: -190px;
            --hotspot-left: 37%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: -10px;
            --hotspot-left: 72%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: -120px;
            --hotspot-left: 48%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 40px;
            --hotspot-left: 73%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 190px;
            --hotspot-left: 52%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Contrôle des odeurs"] {
            --hotspot-bottom: 90px;
            --hotspot-left: 4%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: 220px;
            --hotspot-left: 58%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 330px;
            --hotspot-left: 56%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 240px;
            --hotspot-left: 42%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Nettoyage des toilettes et des urinoirs"] {
            --hotspot-bottom: 140px;
            --hotspot-left: 26%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 150px;
            --hotspot-left: 44%;
          }
        }

        @media (max-width: 480px) {
          .hotspot-container.--back-of-house .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 0px;
            --hotspot-left: 9%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle en machine"] {
            --hotspot-bottom: 80px;
            --hotspot-left: 22%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Lavage de la vaisselle manuel"] {
            --hotspot-bottom: 160px;
            --hotspot-left: 32%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Dégraissant"] {
            --hotspot-bottom: 220px;
            --hotspot-left: 50%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de four et gril"] {
            --hotspot-bottom: 260px;
            --hotspot-left: 56%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyage de la friteuse"] {
            --hotspot-bottom: 280px;
            --hotspot-left: 62%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: 320px;
            --hotspot-left: 42%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 350px;
            --hotspot-left: 54%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 360px;
            --hotspot-left: 48%;
          }

          .hotspot-container.--back-of-house .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 420px;
            --hotspot-left: 80%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 160px;
            --hotspot-left: 78%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Contrôle des odeurs"] {
            --hotspot-bottom: 70px;
            --hotspot-left: 55%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: -90px;
            --hotspot-left: 37%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 90px;
            --hotspot-left:69%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 0px;
            --hotspot-left: 44%;
          }

          .hotspot-container.--front-of-house .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 120px;
            --hotspot-left: 67%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Hygiène des mains"] {
            --hotspot-bottom: 170px;
            --hotspot-left: 50%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Contrôle des odeurs"] {
            --hotspot-bottom: 60px;
            --hotspot-left: 15%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Désinfection des surfaces"] {
            --hotspot-bottom: 210px;
            --hotspot-left: 58%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Entretien des surfaces multiples et du verre"] {
            --hotspot-bottom: 300px;
            --hotspot-left: 56%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Entretien des sols"] {
            --hotspot-bottom: 240px;
            --hotspot-left: 42%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Nettoyage des toilettes et des urinoirs"] {
            --hotspot-bottom: 100px;
            --hotspot-left: 34%;
          }

          .hotspot-container.--restroom .hotspot[data-title="Nettoyants spéciaux"] {
            --hotspot-bottom: 140px;
            --hotspot-left: 44%;
          }
        }