.image-with-hotspots.container{padding-top:var(--padding-top-mobile);padding-bottom:var(--padding-bottom-mobile)}image-with-hotspots{display:block;position:relative;width:100%;height:100%;padding-bottom:var(--mobile-image-aspect-ratio)}image-with-hotspots .image-with-hotspots-image img,image-with-hotspots .image-with-hotspots-image svg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}image-with-hotspots .image-with-hotspots-image__hotspot{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:calc(var(--vertical-position));left:calc(var(--horizontal-position));transform:translate(var(--horizontal-offset),var(--vertical-offset));transition:transform 2s ease-out}image-with-hotspots .image-with-hotspots-image__hotspot:before,image-with-hotspots .image-with-hotspots-image__hotspot:after{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background-color:#5e9374;opacity:0;transition:opacity 2s ease-out,transform 2s ease-out}image-with-hotspots .image-with-hotspots-image__hotspot:before{animation:pulseSmall 3s cubic-bezier(.4,0,.2,1) infinite}image-with-hotspots .image-with-hotspots-image__hotspot:after{animation:pulseLarge 3s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}@keyframes pulseSmall{0%{transform:scale(1);opacity:0}50%{transform:scale(1.3);opacity:.5}to{transform:scale(1.3);opacity:0}}@keyframes pulseLarge{0%{transform:scale(1);opacity:0}50%{transform:scale(1.6);opacity:.3}to{transform:scale(1.6);opacity:0}}image-with-hotspots .image-with-hotspots-image__hotspot.active:before,image-with-hotspots .image-with-hotspots-image__hotspot.active:after,image-with-hotspots .image-with-hotspots-image__hotspot:hover:before,image-with-hotspots .image-with-hotspots-image__hotspot:hover:after{background-color:#fff}image-with-hotspots .image-with-hotspots-image__hotspot-circle:before,image-with-hotspots .image-with-hotspots-image__hotspot-circle:after{display:none}image-with-hotspots .image-with-hotspots-image__hotspot-circle{width:32px;height:32px;padding:10px;border-radius:50%;background-color:#5e9374;opacity:1;transition:opacity .3s ease-out,background-color .3s ease-out;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;z-index:5}image-with-hotspots .image-with-hotspots-image__hotspot-circle svg path{fill:#fff;transition:fill .3s ease-out}image-with-hotspots .image-with-hotspots-image__hotspot.active .image-with-hotspots-image__hotspot-circle,image-with-hotspots .image-with-hotspots-image__hotspot:hover .image-with-hotspots-image__hotspot-circle{opacity:1;transition:opacity .3s ease-in,background-color .3s ease-in;background-color:#fff}image-with-hotspots .image-with-hotspots-image__hotspot.active .image-with-hotspots-image__hotspot-circle svg path,image-with-hotspots .image-with-hotspots-image__hotspot:hover .image-with-hotspots-image__hotspot-circle svg path{fill:#5e9374;transition:fill .3s ease-in}image-with-hotspots .image-with-hotspots-image__hotspot-text{position:absolute;top:40px;left:50%;transform:translate(-50%);background-color:#fff;padding:24px;border-radius:16px;color:#222223;font-size:1rem;line-height:21px;text-align:left;max-width:282px;width:max-content;opacity:0;transition:opacity .3s ease-out;z-index:-2;pointer-events:none;box-shadow:0 4px 12px #0000001a;max-height:85vh;overflow-y:auto}image-with-hotspots .image-with-hotspots-image__hotspot-text[style*="bottom: 100%"]{top:auto;bottom:40px}image-with-hotspots .image-with-hotspots-image__hotspot-text>*+*{margin-top:10px}image-with-hotspots .image-with-hotspots-image__hotspot.active .image-with-hotspots-image__hotspot-text,image-with-hotspots .image-with-hotspots-image__hotspot:hover .image-with-hotspots-image__hotspot-text{opacity:1;transition:opacity .3s ease-out;z-index:10;pointer-events:auto}@media screen and (min-width:768px){.image-with-hotspots.container{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}image-with-hotspots{padding-bottom:var(--desktop-image-aspect-ratio)}image-with-hotspots .image-with-hotspots-image__hotspot-text{font-size:var(--hotspots-text-font-size-desktop);line-height:1.2}image-with-hotspots .image-with-hotspots-image__hotspot{top:calc(var(--desktop-vertical-position));left:calc(var(--desktop-horizontal-position));transform:translate(var(--desktop-horizontal-offset),var(--desktop-vertical-offset))}}@media screen and (max-width:767px){image-with-hotspots .image-with-hotspots-image__hotspot-text{width:220px;padding:16px;font-size:.875rem;line-height:1.4}image-with-hotspots .image-with-hotspots-image__hotspot{z-index:5}image-with-hotspots .image-with-hotspots-image__hotspot.active,image-with-hotspots .image-with-hotspots-image__hotspot:hover{z-index:20}image-with-hotspots .image-with-hotspots-image__hotspot.active .image-with-hotspots-image__hotspot-text,image-with-hotspots .image-with-hotspots-image__hotspot:hover .image-with-hotspots-image__hotspot-text{z-index:20}image-with-hotspots .image-with-hotspots-image__hotspot-text[style*="left: 0"]{left:0;transform:none}image-with-hotspots .image-with-hotspots-image__hotspot-text[style*="right: 0"]{right:0;left:auto;transform:none}}
/*# sourceMappingURL=/cdn/shop/t/84/assets/image-with-hotspots.css.map */