.mapa{width:100%;height:auto;display:block}

.mapa g path{stroke-linejoin:round}
.mapa .mp-okoli path{fill:#191B20;stroke:rgba(240,238,233,.16);stroke-width:.8}
.mapa .mp-okraj path{fill:#282B32;stroke:rgba(240,238,233,.38);stroke-width:1}
.mapa .mp-doma path{fill:#2C3038;stroke:rgba(240,238,233,.48);stroke-width:1.1}
.mapa .mp-hlavni path{fill:#383D46;stroke:rgba(240,238,233,.72);stroke-width:1.3}

.mapa .mp-trasa{fill:none;stroke:var(--akcent);stroke-width:2.2;
  stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
  animation:mpTrasa 9s cubic-bezier(.36,0,.18,1) infinite;
  animation-delay:calc(var(--i,0) * .14s)}
.mapa .mp-trasa--okraj,.mapa .mp-trasa--doma{stroke:rgba(240,238,233,.36);stroke-width:1.6}

.mapa .mp-mesto{fill:#F0EEE9;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:mpMesto 9s cubic-bezier(.3,1.5,.4,1) infinite;
  animation-delay:calc(var(--i,0) * .14s)}
.mapa .mp-mesto--okraj,.mapa .mp-mesto--doma{fill:#8A8D93}

.mapa .mp-home{fill:var(--akcent)}
.mapa .mp-ping{fill:none;stroke:var(--akcent);stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:mpPing 9s cubic-bezier(.2,.7,.3,1) infinite}

@keyframes mpTrasa{0%,4%{stroke-dashoffset:100}26%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:100}}
@keyframes mpMesto{0%,14%{opacity:0;transform:scale(.3)}
  21%{opacity:1;transform:scale(1.3)}25%,90%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(.3)}}
@keyframes mpPing{0%{opacity:.85;transform:scale(.22)}
  22%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .mapa *{animation:none!important}
  .mapa .mp-trasa{stroke-dashoffset:0}
  .mapa .mp-mesto{opacity:1;transform:none}
  .mapa .mp-ping{opacity:0}
}

.mapwrap{position:relative}
.mapwrap .lbl{position:absolute;white-space:nowrap;pointer-events:none;line-height:1.25}

.lbl-zeme{font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700;color:#5E6167;
  transform:translate(-50%,-50%)}
.lbl-zeme.is-hlavni{color:#C9CBD0}
.lbl-zeme.is-doma{color:#9C9EA3}

.lbl-mesto{transform:translate(-50%,-50%);display:grid;gap:1px}
.lbl-mesto b{font-size:12.5px;font-variation-settings:"wdth" 100,"wght" 700;
  color:#F0EEE9;letter-spacing:-.01em}
.lbl-mesto span{font-size:11px;color:#7C7F85;font-variant-numeric:tabular-nums}
.lbl-mesto.is-okraj b,.lbl-mesto.is-doma b{color:#A8ABB1;font-variation-settings:"wdth" 100,"wght" 600}

.lbl.to-t{transform:translate(-50%,-100%) translateY(-11px)}
.lbl.to-b{transform:translate(-50%,0) translateY(11px)}
.lbl.to-l{transform:translate(-100%,-50%) translateX(-11px);text-align:right}
.lbl.to-r{transform:translate(0,-50%) translateX(11px)}

.lbl-opava{transform:translate(0,-50%) translateX(15px);display:grid;gap:2px}
.lbl-opava b{font-size:14px;color:#F0EEE9;font-variation-settings:"wdth" 106,"wght" 800;
  letter-spacing:-.02em}
.lbl-opava span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--akcent);
  font-variation-settings:"wdth" 100,"wght" 700}

@media (max-width:900px){
  .lbl-zeme{font-size:9.5px;letter-spacing:.14em}
  .lbl-mesto b{font-size:11px}
  .lbl-mesto span{display:none}
  .lbl-zeme.is-okoli{display:none}
}
@media (max-width:700px){
  .lbl-zeme.is-okraj{display:none}
}
@media (max-width:600px){
  .lbl-opava{transform:translate(-100%,-50%) translateX(-13px);text-align:right}
  .lbl-mesto[data-kod="ant"],.lbl-mesto[data-kod="dui"]{display:none}
}