.image-hotspot {
    position: relative;
    max-width: 1000px;
    margin: 40px auto;
  }

  .image-hotspot img {
    max-width: 100%;
  }

  .image-hotspot__content {
    display: none;
    position: absolute;
  }

  .image-hotspot__content-text {
    --content-width: 200px;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #333;
    font-size: 16px;
    line-height: 30px;
    padding: 10px;
    width: var(--content-width);
  }

  .image-hotspot__content-text--left {
    border-left: 2px dotted #a6a6a6;
  }

  .image-hotspot__content-text--right {
    border-right: 2px dotted #a6a6a6;
  }

  .image-hotspot__content-text--up {
    border-top: 2px dotted #a6a6a6;
  }

  .image-hotspot__content-text--down {
    border-bottom: 2px dotted #a6a6a6;
  }

  .image-hotspot__spacer {
    display: block;
  }

  .image-hotspot__spacer--left-border {
    border-left: 2px dotted #a6a6a6;
  }

  .image-hotspot__spacer--right-border {
    border-right: 2px dotted #a6a6a6;
  }

  .image-hotspot__spacer--up-border {
    border-top: 2px dotted #a6a6a6;
  }

  .image-hotspot__spacer--down-border {
    border-bottom: 2px dotted #a6a6a6;
  }

  .image-hotspot__item {
    position: absolute;
  }

  .image-hotspot__item--active .image-hotspot__content {
    display: block;
  }

  .image-hotspot__item--active .image-hotspot__content.image-hotspot__content--horizontal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .image-hotspot__item--active .image-hotspot__trigger {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }

  .image-hotspot__item--active .image-hotspot__trigger:before {
    opacity: 0;
  }

  .image-hotspot__item--active .image-hotspot__spacer--horizontal {
    -webkit-animation: open-horizontal-spacer .8s ease-in 1;
            animation: open-horizontal-spacer .8s ease-in 1;
  }

  .image-hotspot__item--active .image-hotspot__spacer--vertical {
    -webkit-animation: open-vertical-spacer .8s ease-in 1;
            animation: open-vertical-spacer .8s ease-in 1;
  }

  .image-hotspot__item--active.image-hotspot__item--closing .image-hotspot__spacer--horizontal {
    -webkit-animation: close-horizontal-spacer .8s ease-in 1;
            animation: close-horizontal-spacer .8s ease-in 1;
  }

  .image-hotspot__item--active.image-hotspot__item--closing .image-hotspot__spacer--vertical {
    -webkit-animation: close-vertical-spacer .8s ease-in 1;
            animation: close-vertical-spacer .8s ease-in 1;
  }

  @media screen and (max-width: 991px) {
    .image-hotspot__item {
      display: none;
    }
    .image-hotspot__item--active {
      display: block;
    }
    .image-hotspot__item--active .image-hotspot__trigger {
      display: block;
    }
    .image-hotspot__item--active .image-hotspot__trigger:after {
      display: none;
    }
    .image-hotspot__item--active .image-hotspot__content {
      display: none !important;
    }
  }

  .image-hotspot__trigger {
    background-color: #fff;
    border: 1px solid #a6a6a6;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    outline: none;
    -webkit-transition: .8s transform;
    transition: .8s transform;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    position: relative;
    z-index: 1;
  }

  .image-hotspot__trigger:before, .image-hotspot__trigger:after {
    content: '';
    display: block;
    position: absolute;
    border: 1px solid #000;
  }

  .image-hotspot__trigger:before {
    height: 0;
    width: 12px;
    top: 14px;
    left: 8px;
    -webkit-transition: .8s opacity;
    transition: .8s opacity;
  }

  .image-hotspot__trigger:after {
    width: 0;
    height: 12px;
    top: 8px;
    left: 14px;
  }

  .image-hotspot__trigger:hover {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }

  .image-hotspot__trigger:hover:before {
    opacity: 0;
  }

  .image-hotspot__trigger-pulse {
    border: 1px solid #a6a6a6;
    position: absolute;
    top: -11px;
    left: -11px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    opacity: 0;
  }

  .image-hotspot__trigger-pulse--1 {
    -webkit-animation: pulse 2s linear infinite 0s;
            animation: pulse 2s linear infinite 0s;
  }

  .image-hotspot__trigger-pulse--2 {
    -webkit-animation: pulse 2s linear infinite 1s;
            animation: pulse 2s linear infinite 1s;
  }

  .image-hotspot__mobile-wrapper {
    display: none;
    margin: 20px 0;
  }

  @media screen and (max-width: 991px) {
    .image-hotspot__mobile-wrapper {
      display: block;
    }
  }

  .image-hotspot__mobile-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 20px;
  }

  .image-hotspot__mobile-nav-item {
    background: #000;
    border: 0;
    border-radius: 50%;
    display: block;
    padding: 0;
    height: 10px;
    width: 10px;
  }

  .image-hotspot__mobile-nav-item--active {
    height: 18px;
    width: 18px;
    margin: -4px;
  }

  @-webkit-keyframes pulse {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    33% {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
    }
  }

  @keyframes pulse {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    33% {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
    }
  }

  @-webkit-keyframes open-horizontal-spacer {
    0% {
      width: 0;
    }
    100% {
      width: var(--distance);
    }
  }

  @keyframes open-horizontal-spacer {
    0% {
      width: 0;
    }
    100% {
      width: var(--distance);
    }
  }

  @-webkit-keyframes close-horizontal-spacer {
    0% {
      width: var(--distance);
    }
    100% {
      width: 0;
    }
  }

  @keyframes close-horizontal-spacer {
    0% {
      width: var(--distance);
    }
    100% {
      width: 0;
    }
  }

  @-webkit-keyframes open-vertical-spacer {
    0% {
      height: 0;
    }
    100% {
      height: var(--distance);
    }
  }

  @keyframes open-vertical-spacer {
    0% {
      height: 0;
    }
    100% {
      height: var(--distance);
    }
  }

  @-webkit-keyframes close-vertical-spacer {
    0% {
      height: var(--distance);
    }
    100% {
      height: 0;
    }
  }

  @keyframes close-vertical-spacer {
    0% {
      height: var(--distance);
    }
    100% {
      height: 0;
    }
  }
  /*# sourceMappingURL=hotspot.css.map */