.parani-service-map { background:transparent; color:#0055b8; overflow:hidden; padding:55px 20px 80px; }
.parani-service-map__canvas { margin:0 auto; max-width:1180px; position:relative; }
.parani-service-map__canvas > img { display:block; height:auto; width:100%; }
.parani-service-map__marker { height:1px; left:var(--x); position:absolute; top:var(--y); width:1px; z-index:2; }
.parani-service-map__pin { --pin-red:#ed3838; background:var(--pin-red); border-radius:2px; color:#fff; font:700 10px/1 Montserrat,Arial,sans-serif; left:0; letter-spacing:.02em; opacity:0; padding:6px 7px; position:absolute; text-transform:uppercase; top:0; transform:translate(0,calc(-100% - 300px)); transition:opacity 1000ms cubic-bezier(.22,1,.36,1),transform 1000ms cubic-bezier(.22,1,.36,1); white-space:nowrap; }
.parani-service-map__pin::after { border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--pin-red); bottom:-6px; content:""; left:0; position:absolute; }
.parani-service-map__marker.is-visible .parani-service-map__pin { opacity:1; transform:translate(0,-100%); }
.parani-service-map__pin--up { transform:translate(0,-345px); }
.parani-service-map__marker.is-visible .parani-service-map__pin--up { transform:translate(0,-45px); }
.parani-service-map__pin--up::after { border-bottom:8px solid var(--pin-red); border-left:7px solid transparent; border-right:7px solid transparent; border-top:0; bottom:auto; left:0; top:-8px; }
@media (max-width:767px) { .parani-service-map { padding:38px 10px 60px; }.parani-service-map__pin { font-size:5px; padding:3px 4px; }.parani-service-map__pin::after { border-left-width:3px; border-right-width:3px; border-top-width:4px; bottom:-4px; } }