.interactive-demo{max-width:1200px;position:relative;z-index:1}.interactive-demo h2{font-size:14px!important;margin-bottom:.25rem}@media (width >= 768px){.interactive-demo h2{margin-bottom:.375rem}}.interactive-demo p,.interactive-demo ul li{font-size:12px!important}.interactive-demo p{margin-bottom:0}.interactive-image--shadow{border-radius:15px;box-shadow:0 3px 100px rgba(0,0,0,.16)}.interactive-demo__hotspots{height:100%;position:absolute;top:0;width:100%}.hotspots{height:inherit;width:inherit}.hotspot,.hotspots{position:inherit;transition:all .15s linear}.hotspot{transform:translateX(-.25em);z-index:1}.interactive-demo--default .hotspot,.interactive-demo--graph .hotspot{height:min(3vw,20px);width:min(3vw,20px)}.hotspot:active,.hotspot:focus,.hotspot:hover{z-index:2}.hotspot__button{border-radius:50%;height:inherit;padding:0;position:inherit;width:inherit}.interactive-demo--default .hotspot__button{background-color:#42eac2;border:3px solid #fff}.interactive-demo--graph .hotspot__button{background-color:transparent}.hotspot__button:after,.hotspot__button:before{border-radius:inherit;content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transform-origin:0 0;transition:transform .25s ease-in-out;z-index:-1}.interactive-demo--default .hotspot__button:after,.interactive-demo--default .hotspot__button:before{background-color:#42eac2;box-shadow:0 3px 27px #42eac2;height:min(8vw,45px);width:min(8vw,45px)}.interactive-demo--graph .hotspot__button:after,.interactive-demo--graph .hotspot__button:before{height:min(4vw,53px);width:min(4vw,53px)}@media (width >= 992px){.interactive-demo--graph .hotspot__button:after,.interactive-demo--graph .hotspot__button:before{box-shadow:0 0 0 2px #fff}}.hotspot__button:after{animation:pulse 2.5s ease infinite}.hotspot__button:active:before,.hotspot__button:focus:before,.hotspot__button:hover:before{transform:scale(1.25) translate(-50%,-50%);transform-origin:0 0}.hotspot__button:active:after,.hotspot__button:focus:after,.hotspot__button:hover:after{display:none}.hotspot__button:focus-visible{outline-offset:20px}.interactive-demo--graph .hotspot__content{text-align:center}.interactive-demo--default .hotspot__content{border:1px solid #41eac2}.hotspot__content{background-color:#fff;border-radius:8px;box-shadow:0 3px 22px rgba(0,0,0,.16);font-size:18px;left:50%;max-width:35vw;opacity:0;overflow-wrap:anywhere;padding:.375em;pointer-events:none;position:relative;transform:translate(-50%,2.25em);transition:opacity 175ms linear;width:255px}.interactive-demo--default .hotspot__content:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 30.4'%3E%3Cpath fill='%23fff' d='M42.1 36.5H.9L21.5 1z'/%3E%3Cpath fill='%2341eac2' d='M21.5 2 1.7 36h39.5zm0-2L43 37H0z'/%3E%3C/svg%3E")}.interactive-demo--graph .hotspot__content:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 30.4'%3E%3Cpath fill='%23fff' d='M42.1 36.5H.9L21.5 1z'/%3E%3C/svg%3E")}.hotspot__content:before{background-repeat:no-repeat;background-size:100% 100%;bottom:100%;content:"";height:17px;left:50%;pointer-events:none;position:absolute;transform:translate(-50%,.125px);user-select:none;width:23px}@media (width >= 768px){.hotspot__content{max-width:25vw;padding:.75em}}@media (width >= 440px){.hotspot__content{max-width:25vw;transform:translate(-50%,4.25em)}.hotspot__content:before{height:37px;width:43px}}.hotspot ul{display:flex;flex-wrap:wrap;font-weight:700;margin:.375rem 0 0}.hotspot ul li+li:before{color:inherit;content:"|";display:inline-block;padding-left:.375em;padding-right:.375em}.hotspot__button:active~.hotspot__content,.hotspot__button:focus~.hotspot__content,.hotspot__button:hover~.hotspot__content{opacity:1;pointer-events:auto}@media (width >= 768px){.interactive-demo h2{font-size:18px!important}.interactive-demo p,.interactive-demo ul li{font-size:14px!important}.interactive-demo--default .hotspot__button{border:4px solid #fff}}@media (width >= 992px){.interactive-demo--default .hotspot__content{padding:1.5em}.hotspot__content{width:354px}}@keyframes pulse{0%,to{display:block;opacity:0;transform:scale(1) translate(-50%,-50%)}50%{display:block;opacity:.6;transform:scale(1.3) translate(-50%,-50%)}}