.op_offices_nfo > li:not(:last-child) {
  margin-bottom:4px;
}

.zagreb_pointer {
  position: absolute;
  top: 12%;
  left: 55%;
  width: 10%;
  height: 3%;
  background: #ccc;
  transform: skew(-78deg)rotate(20deg);
  z-index: 0;
}
.vg_pointer {
  position: absolute;
  top: 19%;
  left: 24%;
  width: 7%;
  height: 3%;
  background: #ccc;
  transform: skew(74deg)rotate(-29deg);
  z-index: 0;
}
.kor_pointer {
position: absolute;
top: 81%;
left: 67%;
width: 10%;
height: 3%;
background: #ccc;
transform: skew(-63deg)rotate(-15deg);
z-index: 0;
}

.op_offices_loc > li:not(:last-child) {
  margin-bottom:10px;
}
.op_offices_loc {
  max-width:500px;
}

.op_zagreb_img {
top: 4%;
left: 56%;
max-width: 236px;
width: 24%;
}
.op_vg_img {
top: 11%;
left: 16%;
max-width: 155px;
width: 15%;
}
.op_kor_img {
top: 72%;
left: 67%;
max-width: 151px;
width: 17%;
}
.op_loc_image {
  position: absolute;
  height: auto;
  box-shadow: 0 0 0 6px #ccc;
  z-index:3;
  background:#ccc;
}
.loc_mod{
    box-shadow: 0 0 0 6px #f3bc65!important;
}
.p_mod {
    background:#f3bc65!important;
}

.op_off {
  display: flex;
  align-items: center;
  background: #eee;
  padding: 10px;
  cursor: pointer;
}

.op_off:before {
  content: "";
  display: block;
  background-image: url("https://www.opereta.hr/wp-content/uploads/2022/02/office.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.op_off_logo {
  max-width: 250px;
  display: block;
  width:100%;
}

.op_map_offices {
  
}

.op_map_offices > div {
  padding:20px;
}

.op_map_offices > div > ul {
  list-style-type:none;
  padding:0;
  margin:0;
}

.op_map_offices > div > ul > li:first-child{
font-weight: bold;
text-transform: uppercase;
}


.op_map_offices > div:first-child{
  
}


.op_loc_icon{
position: absolute;
display: flex;
align-items: center;
}

.op_map_legend {
padding: 10px;
background: #ddd;
}
.op_map_legend > div {
    display:flex;
    align-items:center;
}
.op_map_legend > div:not(:last-child) {
    margin-bottom:10px;
}

.op_map_legend .icon_u{
    width:30px;
    height:30px;
    position:relative;
    margin-right:10px;
}
.op_map{
display: flex;
max-width: 1920px;
margin: 0 auto;
}
.op_map_loc{
flex: 1;
min-width: 368px;
}

.op_map_h svg {
  position: absolute;
  width: 6%;
  overflow:visible;
}

.op_map_h{
  position: relative;
  max-width: 1044px;
  width: 100%;
}

.op_map_logo {
position: absolute;
top: 45%;
left: 53%;
width: 30%;
  height:auto;
}
.op_map_map {
  width:100%;
  height:auto;
}
.icon_u{
  position:absolute;
width: 2.5%;
height: 2.5%;
border-radius: 100%;
display: block;
margin-right: 6px;
}

.icon_f > i{
    background: #cc0000;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.icon_f {
border: 1px solid #cc0000;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
  cursor:pointer;
}
.icon_v > i{
    background: #f3bc65;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.icon_v {
    border: 1px solid #fff;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:#fff;
}
#zagreb {
    top: 17%;
    left: 40%;
}
#zagreb_svg {
top: 17.3%;
left: 43%;
}

#kar_svg {
    top: 25.5%;
    left: 38%;
}

#karlovac {
    top: 25.3%;
    left: 35%;
}

#velika_gorica {
    top: 20.5%;
    left: 42%;
}
#vg_svg {
top: 23.3%;
left: 37%;
}
#korcula {
  top: 85%;
  left: 59%;
}
#kor_svg {
top: 87.6%;
left: 58%;
}
#gospic{
    top: 49%;
left: 31%;
}

#gos_svg {
top: 49.4%;
left: 34%;
}


#zadar{
    top: 59%;
left: 29%;
}

#zad_svg{
  top: 59.6%;
left: 32%;
}

#rijeka{
    top: 30%;
left: 14.8%;
}

#rij_svg{
  top: 29.4%;
left: 18%;
}

#split{
    top: 73%;
left: 49%;
}


#spl_svg{
  top: 72.6%;
left: 52%;
}

#dubrovnik{
    top: 92%;
left: 75%;
}

#dub_svg{
  top: 94.6%;
left: 71%;
}

#pula{
    top:41%;
    left:5%;
}

#pul_svg{
  top: 43.4%;
left: 3%;
}

#makarska{
    top: 78%;
left: 58%;
}

#mak_svg{
  top: 75.6%;
left: 58%;
}

#sibenik{
    top: 67%;
left: 38%;
}

#sib_svg{
  top: 67.6%;
left: 41%;
}

#rovinj{
  top: 36%;
  left: 1.5%;
}
#rov_svg{
  top: 36.4%;
left: 4.5%;
}


@media all and (max-width:1044px) {
  .op_map{
    flex-wrap:wrap;
  }
  .op_map_h {
    flex: 0 0 100%;
  }
  .op_map_loc{
    flex: 0 0 100%;
  }
}
@media all and (max-width:768px) {
 .op_map_h .icon_f, .op_map_h .icon_v {
    padding:0px;
  }
  .op_map_h .icon_f{
    background:#cc0000;
  }
  .op_map_h .icon_v {
    background:#f3bc65;
    border:none;
  }
  .op_map_loc{
    min-width: auto;
  }
  .op_loc_image {
    box-shadow: 0 0 0px 3px #ccc;
  }
  .loc_mod{
    box-shadow: 0 0 0 3px #f3bc65!important;
  }
}