html,
body {
  width: 100%;
  min-height: 100vh;
  background-image: url(../bih-info/the-blue-sky220.png);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
  animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both
}

.scrolling-element-inside {
  background-color: rgba(152, 186, 147, .5);
  padding: 16px;
  border-radius: 16px
}

.scrolling-element-inside h3,
p {
  color: #3f4e4f
}

.fade-out-bck {
  -webkit-animation: fade-out-bck .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both;
  animation: fade-out-bck .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both
}

@-webkit-keyframes fade-out-bck {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }

  100% {
    -webkit-transform: translateZ(-80px);
    transform: translateZ(-80px);
    opacity: 0;
    z-index: -1
  }
}

@keyframes fade-out-bck {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }

  100% {
    -webkit-transform: translateZ(-80px);
    transform: translateZ(-80px);
    opacity: 0;
    z-index: -1
  }
}

.slide-in-fwd-center {
  -webkit-animation: slide-in-fwd-center .4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both;
  animation: slide-in-fwd-center .4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both
}

.slide-in-fwd-center-Delay1s {
  -webkit-animation: slide-in-fwd-center .4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s both;
  animation: slide-in-fwd-center .4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s both
}

@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
    transform: translateZ(-1400px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
    transform: translateZ(-1400px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.slit-in-horizontal {
  -webkit-animation: slit-in-horizontal .45s ease-out both;
  animation: slit-in-horizontal .45s ease-out both
}

@-webkit-keyframes slit-in-horizontal {
  0% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
    transform: translateZ(-800px) rotateX(90deg);
    opacity: 0
  }

  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
    transform: translateZ(-160px) rotateX(87deg);
    opacity: 1
  }

  100% {
    -webkit-transform: translateZ(0) rotateX(0);
    transform: translateZ(0) rotateX(0)
  }
}

@keyframes slit-in-horizontal {
  0% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
    transform: translateZ(-800px) rotateX(90deg);
    opacity: 0
  }

  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
    transform: translateZ(-160px) rotateX(87deg);
    opacity: 1
  }

  100% {
    -webkit-transform: translateZ(0) rotateX(0);
    transform: translateZ(0) rotateX(0)
  }
}

.opcineBiH {
  background-image: url(../bih-info/worldtravel.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  animation: putovanje 2.5s ease
}

@keyframes putovanje {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.regijeBiH {
  background-color: rgba(45, 55, 72, .7)
}

.imageBox {
  position: absolute;
  width: 906px;
  height: 100vh;
  margin-right: 10px;
  right: 0;
  z-index: 10;
  border: 2px solid #efb726;
  border-radius: 10px
}

.imageBox span {
  font-family: 'Pragati Narrow', sans-serif;
  color: #f3f3f3;
  font-size: 16px;
  background-color: #3b47c0;
  padding-top: 20px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
  border-top: 2px solid #f3f3f3
}

.bihInfo {
  color: #f3f3f3;
  font-family: 'Pragati Narrow', sans-serif;
  font-size: 20px;
  position: absolute;
  left: 10px;
  top: 20px;
  height: 820px;
  text-align: justify;
  padding: 10px 70px 10px 25px;
  background-color: rgba(87, 123, 193, 0);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 16
}

.scrolling-area {
  overflow-y: auto;
  direction: rtl
}

.scrolling-element-inside {
  direction: ltr
}

#zooming i {
  font-size: 20px;
  color: #babd42;
  padding: 5px
}

#zooming i:hover {
  transform: scale(1.2);
  cursor: pointer
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.menu {
  width: 5em;
  height: 5em
}

.menu .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  z-index: -10;
  cursor: pointer;
  transition: opacity 1s, z-index .3s, transform 1s;
  transform: translateX(0)
}

.menu .btn .fa {
  font-size: 3em;
  transition: color .3s
}

.menu .btn:hover .fa {
  color: rgba(255, 255, 255, 0.7)
}

.menu .btn:hover img {
  transform: scale(1.3)
}

.menu .btn.trigger {
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  transition: transform .3s
}

.menu .btn.trigger:hover {
  transform: scale(1.2)
}

.menu .btn.trigger:hover .line {
  background-color: rgba(255, 255, 255, 0.7)
}

.menu .btn.trigger:hover .line:before,
.menu .btn.trigger:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7)
}

.menu .btn.trigger .line {
  width: 60%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  transition: background-color .3s, height .3s, top .3s
}

.menu .btn.trigger .line:before,
.menu .btn.trigger .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  transition: background-color .3s, transform .3s
}

.menu .btn.trigger .line:before {
  top: -12px;
  transform-origin: 15% 100%
}

.menu .btn.trigger .line:after {
  top: 12px;
  transform-origin: 25% 30%
}

.menu .rotater {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%
}

.menu.active .btn-icon {
  opacity: 1;
  z-index: 50
}

.menu.active .trigger .line {
  height: 0;
  top: 45%
}

.menu.active .trigger .line:before {
  transform: rotate(45deg);
  width: 110%
}

.menu.active .trigger .line:after {
  transform: rotate(-45deg);
  width: 110%
}

.rotater:nth-child(1) {
  transform: rotate(-22.5deg)
}

.menu.active .rotater:nth-child(1) .btn-icon {
  transform: translateY(-8em) rotate(22.5deg)
}

.rotater:nth-child(2) {
  transform: rotate(22.5deg)
}

.menu.active .rotater:nth-child(2) .btn-icon {
  transform: translateY(-8em) rotate(-22.5deg)
}

.rotater:nth-child(3) {
  transform: rotate(67.5deg)
}

.menu.active .rotater:nth-child(3) .btn-icon {
  transform: translateY(-8em) rotate(-67.5deg)
}

.rotater:nth-child(4) {
  transform: rotate(112.5deg)
}

.menu.active .rotater:nth-child(4) .btn-icon {
  transform: translateY(-8em) rotate(-112.5deg)
}

.rotater:nth-child(5) {
  transform: rotate(157.5deg)
}

.menu.active .rotater:nth-child(5) .btn-icon {
  transform: translateY(-8em) rotate(-157.5deg)
}

.rotater:nth-child(6) {
  transform: rotate(202.5deg)
}

.menu.active .rotater:nth-child(6) .btn-icon {
  transform: translateY(-8em) rotate(-202.5deg)
}

.rotater:nth-child(7) {
  transform: rotate(247.5deg)
}

.menu.active .rotater:nth-child(7) .btn-icon {
  transform: translateY(-8em) rotate(-247.5deg)
}

.rotater:nth-child(8) {
  transform: rotate(292.5deg)
}

.menu.active .rotater:nth-child(8) .btn-icon {
  transform: translateY(-8em) rotate(-292.5deg)
}

.bih-images {
  position: absolute;
  width: 100%;
  height: 100vh;
  right: 0;
  z-index: 9
}

.scale-up-center {
  -webkit-animation: scale-up-center .4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-center .4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes circle {
  from {
    transform: scale(0);
    opacity: 1
  }

  to {
    transform: scale(4);
    opacity: 0
  }
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 47%;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  overflow: hidden
}

.one {
  animation: circle 6s 4s infinite linear;
  background: #ffac07
}

.two {
  animation: circle 6s 2s infinite linear;
  background: #ff8107
}

.three {
  animation: circle 6s 0s infinite linear;
  background: #ff4707
}

@media(min-width:1200px) {
  #horizontal-right {
    width: 100%;
    height: 100vh;
    background: url(../bih-info/the-blue-sky220.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 215px 0
  }

  #horizontal-left {
    width: 100%;
    height: 100vh;
    background: url(../bih-info/the-blue-sky.png);
    background-repeat: no-repeat;
    background-size: cover;
    animation: backgroundScroll 3s 2.2s ease-out forwards
  }

  @-webkit-keyframes backgroundScroll {
    from {
      background-position: 0 0
    }

    to {
      background-position: -220px 0
    }
  }

  @keyframes backgroundScroll {
    from {
      background-position: 0 0
    }

    to {
      background-position: -220px 0
    }
  }

  .navigacija {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0;
    top: -30px;
    margin-right: 680px;
    margin-top: 630px;
    z-index: 21
  }

  #zooming {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 430px;
    margin-bottom: 10px;
    z-index: 21;
    display: block
  }

  .searchable-dropdown {
    margin: 25px auto 0 auto;
    position: absolute;
    width: 230px;
    top: 450px;
    right: 675px;
    z-index: 22
  }

  ::-webkit-scrollbar {
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background: #293241;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb {
    background: #239b67;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #98c1d9;
    border-radius: 3px
  }
}

@media(min-width:992px) and (max-width:1199px) {
  #horizontal-right {
    width: 100%;
    height: 100vh;
    background: 0
  }

  .navigacija {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0;
    top: 0;
    margin-right: 680px;
    margin-top: 630px;
    z-index: 21
  }

  #zooming {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 400px;
    margin-bottom: 10px;
    z-index: 21;
    display: block
  }

  #info-img {
    visibility: hidden
  }

  #info-img {
    display: none
  }

  .searchable-dropdown {
    margin: 25px auto 0 auto;
    position: absolute;
    width: 230px;
    top: 450px;
    right: 670px;
    z-index: 22
  }

  ::-webkit-scrollbar {
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background: #d6efed;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb {
    background: #dfbb9d;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #cc9c75;
    border-radius: 3px
  }
}

@media(min-width:768px) and (max-width:991px) {
  #horizontal-right {
    width: 100%;
    height: 100vh;
    background: 0
  }

  .navigacija {
    position: absolute;
    width: 100px;
    height: 100px;
    right: -100px;
    top: 0;
    margin-right: 680px;
    margin-top: 630px;
    z-index: 21
  }

  #zooming {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 330px;
    margin-bottom: 10px;
    z-index: 21;
    display: block
  }

  #info-img {
    visibility: hidden
  }

  #info-img {
    display: none
  }

  .opcineBiH {
    left: -30px
  }

  #flag button {
    right: 145px !important
  }

  #flag #bihflag {
    right: 35px !important
  }

  #flag #leptirEarth img {
    right: 80px !important
  }

  .searchable-dropdown {
    margin: 25px auto 0 auto;
    position: absolute;
    width: 230px;
    top: 450px;
    right: 565px;
    z-index: 22
  }

  ::-webkit-scrollbar {
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background: #d6efed;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb {
    background: #dfbb9d;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #cc9c75;
    border-radius: 3px
  }
}

@media(min-width:576px) and (max-width:767px) {
  #horizontal-right {
    width: 100%;
    height: 100vh;
    background: 0
  }

  .navigacija {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0;
    top: -40px;
    margin-right: 410px;
    margin-top: 630px;
    z-index: 21
  }

  #zooming {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 25px;
    margin-bottom: 10px;
    z-index: 21;
    display: block
  }

  #info-img {
    visibility: hidden
  }

  #info-img {
    display: none
  }

  .opcineBiH {
    left: -75px;
    transform: scale(0.7)
  }

  #flag button {
    right: 110px !important
  }

  #flag #bihflag {
    right: 0 !important
  }

  #flag #leptirEarth img {
    right: 35px !important
  }

  .searchable-dropdown {
    margin: 25px auto 0 auto;
    position: absolute;
    width: 230px;
    top: 450px;
    right: 395px;
    z-index: 22
  }

  ::-webkit-scrollbar {
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background: #d6efed;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb {
    background: #dfbb9d;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #cc9c75;
    border-radius: 3px
  }
}

@media(max-width:575px) {
  #horizontal-right {
    width: 100%;
    height: 100vh;
    background: 0;
    background-position: 0 0
  }

  #horizontal-left {
    width: 100%;
    height: 100vh;
    background: 0;
    background-position: 0 0
  }

  .navigacija {
    position: absolute;
    width: 100px;
    height: 100px;
    right: -100px;
    top: -70px;
    margin-right: 260px;
    margin-top: 630px;
    z-index: 21
  }

  #zooming {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: -85px;
    margin-bottom: 10px;
    z-index: 21;
    display: block
  }

  #info-img {
    display: none
  }

  .opcineBiH {
    left: -203px;
    transform: scale(0.55)
  }

  #flag button {
    right: 115px !important
  }

  #flag #bihflag {
    right: 5px !important
  }

  #flag #leptirEarth img {
    right: 5px !important
  }

  .searchable-dropdown {
    margin: 25px auto 0 auto;
    position: absolute;
    width: 230px;
    top: 450px;
    right: 120px;
    z-index: 22
  }

  ::-webkit-scrollbar {
    width: 10px
  }

  ::-webkit-scrollbar-track {
    background: #d6efed;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb {
    background: #dfbb9d;
    border-radius: 3px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #cc9c75;
    border-radius: 3px
  }
}

.fade-in-left {
  -webkit-animation: fade-in-left .6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-left .6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both
}

@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
  }
}

.searchable-dropdown button {
  outline: 0
}

input {
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 5px;
  font-size: 19px;
  margin: 0;
  padding: 3px 8px;
  width: 230px;
  color: #eae509;
  font-family: 'Dosis', sans-serif
}

::placeholder {
  font-family: 'Dosis', sans-serif;
  font-weight: 200;
  color: #eddfb3;
  font-style: normal;
  font-size: 16px
}

ul {
  background: rgba(206, 229, 208, 0.3);
  border-radius: 10px;
  display: none;
  max-height: 260px;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  top: 45px;
  width: 100%;
  color: #fff323;
  font-family: 'Dosis', sans-serif;
  font-size: 18px
}

.active ul {
  display: block
}

ul li {
  font-size: 18px;
  padding: 10px
}

ul li:hover {
  background: #293462;
  cursor: pointer
}

#info-img #golubica:hover {
  cursor: pointer;
  transform: scale(.99)
}

#videocont {
  position: absolute;
  left: 3%;
  z-index: 12
}

.video-mask {
  width: 260px;
  height: 260px;
  border-radius: 100%;
  position: absolute;
  background-image: url(../bih-info/video-mask-center.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  left: 0;
  top: 520px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  -webkit-transform: rotate(0.000001deg);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%
}

.video-circle {
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  border: 6px solid #94b49f
}

.fade-in {
  -webkit-animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) .5s both;
  animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) .5s both
}

.fade-in-circle {
  -webkit-animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) .7s both;
  animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) .7s both
}

.fade-in-body {
  -webkit-animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
  animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both
}

.fade-click {
  -webkit-animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.slide-right {
  -webkit-animation: slide-right .7s ease-out 2s both;
  animation: slide-right .7s ease-out 2s both
}

@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px)
  }
}

@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px)
  }
}

.rotate-center {
  -webkit-animation: rotate-center .6s ease-in-out 4s reverse both;
  animation: rotate-center .6s ease-in-out 4s reverse both
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.rotacija {
  animation: rotacija 4s 1.5s forwards
}

@keyframes rotacija {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(3deg)
  }
}

#srcetandara {
  background: #e5ff44;
  background: radial-gradient(circle, rgba(229, 255, 68, 1) 2%, rgba(9, 30, 121, .9) 71%, rgba(102, 227, 206, 1) 99%);
  animation: srcetandara 2s 4s forwards
}

@keyframes srcetandara {
  from {
    visibility: hidden;
    opacity: 0
  }

  to {
    visibility: visible;
    opacity: 1
  }
}

#srce {
  animation: srce 1s infinite
}

@keyframes srce {
  from {
    transform: scale(1.2);
    transition: all 1s ease-in
  }

  to {
    transform: scale(1);
    transition: all 1s ease-out
  }
}

.slide-bottom {
  -webkit-animation: slide-bottom .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-bottom .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
}

@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  100% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px)
  }
}

@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  100% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px)
  }
}

.scale-in-top {
  -webkit-animation: scale-in-top .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-top .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
}

@-webkit-keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 1
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 1
  }
}

@keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 1
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 1
  }
}

.skala img {
  display: flex;
  align-items: center;
  justify-content: center
}

#regijezoom img {
  margin-top: 0 !important
}

#mapatk {
  margin-right: 20px !important;
  margin-top: 3px !important
}

.bih-images img {
  margin-top: -30px;
  margin-right: -10px;
  padding: 18px !important
}

.tkdisplay div {
  margin-top: 18px !important
}

.tkdisplay button {
  margin-top: 18px !important
}

.opcineBiH img {
  padding: 22px !important;
  margin-top: -26px !important
}

.regijeBiH img {
  padding: 32px !important;
  position: relative;
  top: -22px !important
}

.regijeBiH .regijepopover {
  position: absolute;
  top: 0 !important;
  left: 12px !important;
  transform: scale(0.95)
}

.map-container {
  position: relative;
}

.imageBox .hoverImg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: none;
  pointer-events: none; /* Allows clicks to pass through */
}

.hoverSpan {     
  position: absolute;
  left: 0;
  top: 0;
  display: none;  
}

/* Modern browsers: Show image when matching area is hovered */
.map-container:has(.hover-area[data-target="area1"]:hover) .h-a1,
.map-container:has(.hover-area[data-target="area2"]:hover) .h-a2,
.map-container:has(.hover-area[data-target="area3"]:hover) .h-a3,
.map-container:has(.hover-area[data-target="area4"]:hover) .h-a4,
.map-container:has(.hover-area[data-target="area5"]:hover) .h-a5,
.map-container:has(.hover-area[data-target="area6"]:hover) .h-a6,
.map-container:has(.hover-area[data-target="area7"]:hover) .h-a7,
.map-container:has(.hover-area[data-target="area8"]:hover) .h-a8,
.map-container:has(.hover-area[data-target="area9"]:hover) .h-a9,
.map-container:has(.hover-area[data-target="area10"]:hover) .h-a10,
.map-container:has(.hover-area[data-target="area11"]:hover) .h-a11,
.map-container:has(.hover-area[data-target="area12"]:hover) .h-a12,
.map-container:has(.hover-area[data-target="area13"]:hover) .h-a13,
.map-container:has(.hover-area[data-target="area14"]:hover) .h-a14,
.map-container:has(.hover-area[data-target="area15"]:hover) .h-a15,
.map-container:has(.hover-area[data-target="area16"]:hover) .h-a16,
.map-container:has(.hover-area[data-target="area17"]:hover) .h-a17,
.map-container:has(.hover-area[data-target="area18"]:hover) .h-a18,
.map-container:has(.hover-area[data-target="area19"]:hover) .h-a19,
.map-container:has(.hover-area[data-target="area20"]:hover) .h-a20,
.map-container:has(.hover-area[data-target="area21"]:hover) .h-a21,
.map-container:has(.hover-area[data-target="area22"]:hover) .h-a22,
.map-container:has(.hover-area[data-target="area23"]:hover) .h-a23,
.map-container:has(.hover-area[data-target="area24"]:hover) .h-a24,
.map-container:has(.hover-area[data-target="area25"]:hover) .h-a25,
.map-container:has(.hover-area[data-target="area26"]:hover) .h-a26,
.map-container:has(.hover-area[data-target="area27"]:hover) .h-a27,
.map-container:has(.hover-area[data-target="area28"]:hover) .h-a28,
.map-container:has(.hover-area[data-target="area29"]:hover) .h-a29,
.map-container:has(.hover-area[data-target="area30"]:hover) .h-a30,
.map-container:has(.hover-area[data-target="area31"]:hover) .h-a31,
.map-container:has(.hover-area[data-target="area32"]:hover) .h-a32,
.map-container:has(.hover-area[data-target="area33"]:hover) .h-a33,
.map-container:has(.hover-area[data-target="area34"]:hover) .h-a34,
.map-container:has(.hover-area[data-target="area35"]:hover) .h-a35,
.map-container:has(.hover-area[data-target="area36"]:hover) .h-a36,
.map-container:has(.hover-area[data-target="area37"]:hover) .h-a37,
.map-container:has(.hover-area[data-target="area38"]:hover) .h-a38,
.map-container:has(.hover-area[data-target="area39"]:hover) .h-a39,
.map-container:has(.hover-area[data-target="area40"]:hover) .h-a40,
.map-container:has(.hover-area[data-target="area41"]:hover) .h-a41,
.map-container:has(.hover-area[data-target="area42"]:hover) .h-a42,
.map-container:has(.hover-area[data-target="area43"]:hover) .h-a43,
.map-container:has(.hover-area[data-target="area44"]:hover) .h-a44,
.map-container:has(.hover-area[data-target="area45"]:hover) .h-a45,
.map-container:has(.hover-area[data-target="area46"]:hover) .h-a46,
.map-container:has(.hover-area[data-target="area47"]:hover) .h-a47,
.map-container:has(.hover-area[data-target="area48"]:hover) .h-a48,
.map-container:has(.hover-area[data-target="area49"]:hover) .h-a49,
.map-container:has(.hover-area[data-target="area50"]:hover) .h-a50,
.map-container:has(.hover-area[data-target="area51"]:hover) .h-a51,
.map-container:has(.hover-area[data-target="area52"]:hover) .h-a52,
.map-container:has(.hover-area[data-target="area53"]:hover) .h-a53,
.map-container:has(.hover-area[data-target="area54"]:hover) .h-a54,
.map-container:has(.hover-area[data-target="area55"]:hover) .h-a55,
.map-container:has(.hover-area[data-target="area56"]:hover) .h-a56,
.map-container:has(.hover-area[data-target="area57"]:hover) .h-a57,
.map-container:has(.hover-area[data-target="area58"]:hover) .h-a58,
.map-container:has(.hover-area[data-target="area59"]:hover) .h-a59,
.map-container:has(.hover-area[data-target="area60"]:hover) .h-a60,
.map-container:has(.hover-area[data-target="area61"]:hover) .h-a61,
.map-container:has(.hover-area[data-target="area62"]:hover) .h-a62,
.map-container:has(.hover-area[data-target="area63"]:hover) .h-a63,
.map-container:has(.hover-area[data-target="area64"]:hover) .h-a64,
.map-container:has(.hover-area[data-target="area65"]:hover) .h-a65,
.map-container:has(.hover-area[data-target="area66"]:hover) .h-a66,
.map-container:has(.hover-area[data-target="area67"]:hover) .h-a67,
.map-container:has(.hover-area[data-target="area68"]:hover) .h-a68,
.map-container:has(.hover-area[data-target="area69"]:hover) .h-a69,
.map-container:has(.hover-area[data-target="area70"]:hover) .h-a70,
.map-container:has(.hover-area[data-target="area71"]:hover) .h-a71,
.map-container:has(.hover-area[data-target="area72"]:hover) .h-a72,
.map-container:has(.hover-area[data-target="area73"]:hover) .h-a73,
.map-container:has(.hover-area[data-target="area74"]:hover) .h-a74,
.map-container:has(.hover-area[data-target="area75"]:hover) .h-a75,
.map-container:has(.hover-area[data-target="area76"]:hover) .h-a76,
.map-container:has(.hover-area[data-target="area77"]:hover) .h-a77,
.map-container:has(.hover-area[data-target="area78"]:hover) .h-a78,
.map-container:has(.hover-area[data-target="area79"]:hover) .h-a79,
.map-container:has(.hover-area[data-target="area80"]:hover) .h-a80,
.map-container:has(.hover-area[data-target="area81"]:hover) .h-a81,
.map-container:has(.hover-area[data-target="area82"]:hover) .h-a82,
.map-container:has(.hover-area[data-target="area83"]:hover) .h-a83,
.map-container:has(.hover-area[data-target="area84"]:hover) .h-a84,
.map-container:has(.hover-area[data-target="area85"]:hover) .h-a85,
.map-container:has(.hover-area[data-target="area86"]:hover) .h-a86,
.map-container:has(.hover-area[data-target="area87"]:hover) .h-a87,
.map-container:has(.hover-area[data-target="area88"]:hover) .h-a88,
.map-container:has(.hover-area[data-target="area89"]:hover) .h-a89,
.map-container:has(.hover-area[data-target="area90"]:hover) .h-a90,
.map-container:has(.hover-area[data-target="area91"]:hover) .h-a91,
.map-container:has(.hover-area[data-target="area92"]:hover) .h-a92,
.map-container:has(.hover-area[data-target="area93"]:hover) .h-a93,
.map-container:has(.hover-area[data-target="area94"]:hover) .h-a94,
.map-container:has(.hover-area[data-target="area95"]:hover) .h-a95,
.map-container:has(.hover-area[data-target="area96"]:hover) .h-a96,
.map-container:has(.hover-area[data-target="area97"]:hover) .h-a97,
.map-container:has(.hover-area[data-target="area98"]:hover) .h-a98,
.map-container:has(.hover-area[data-target="area99"]:hover) .h-a99,
.map-container:has(.hover-area[data-target="area100"]:hover) .h-a100,
.map-container:has(.hover-area[data-target="area101"]:hover) .h-a101,
.map-container:has(.hover-area[data-target="area102"]:hover) .h-a102,
.map-container:has(.hover-area[data-target="area103"]:hover) .h-a103,
.map-container:has(.hover-area[data-target="area104"]:hover) .h-a104,
.map-container:has(.hover-area[data-target="area105"]:hover) .h-a105,
.map-container:has(.hover-area[data-target="area106"]:hover) .h-a106,
.map-container:has(.hover-area[data-target="area107"]:hover) .h-a107,
.map-container:has(.hover-area[data-target="area108"]:hover) .h-a108,
.map-container:has(.hover-area[data-target="area109"]:hover) .h-a109,
.map-container:has(.hover-area[data-target="area110"]:hover) .h-a110,
.map-container:has(.hover-area[data-target="area111"]:hover) .h-a111,
.map-container:has(.hover-area[data-target="area112"]:hover) .h-a112,
.map-container:has(.hover-area[data-target="area113"]:hover) .h-a113,
.map-container:has(.hover-area[data-target="area114"]:hover) .h-a114,
.map-container:has(.hover-area[data-target="area115"]:hover) .h-a115,
.map-container:has(.hover-area[data-target="area116"]:hover) .h-a116,
.map-container:has(.hover-area[data-target="area117"]:hover) .h-a117,
.map-container:has(.hover-area[data-target="area118"]:hover) .h-a118,
.map-container:has(.hover-area[data-target="area119"]:hover) .h-a119,
.map-container:has(.hover-area[data-target="area120"]:hover) .h-a120,
.map-container:has(.hover-area[data-target="area121"]:hover) .h-a121,
.map-container:has(.hover-area[data-target="area122"]:hover) .h-a122,
.map-container:has(.hover-area[data-target="area123"]:hover) .h-a123,
.map-container:has(.hover-area[data-target="area124"]:hover) .h-a124,
.map-container:has(.hover-area[data-target="area125"]:hover) .h-a125,
.map-container:has(.hover-area[data-target="area126"]:hover) .h-a126,
.map-container:has(.hover-area[data-target="area127"]:hover) .h-a127,
.map-container:has(.hover-area[data-target="area128"]:hover) .h-a128,
.map-container:has(.hover-area[data-target="area129"]:hover) .h-a129,
.map-container:has(.hover-area[data-target="area130"]:hover) .h-a130,
.map-container:has(.hover-area[data-target="area131"]:hover) .h-a131,
.map-container:has(.hover-area[data-target="area132"]:hover) .h-a132,
.map-container:has(.hover-area[data-target="area133"]:hover) .h-a133,
.map-container:has(.hover-area[data-target="area134"]:hover) .h-a134,
.map-container:has(.hover-area[data-target="area135"]:hover) .h-a135,
.map-container:has(.hover-area[data-target="area136"]:hover) .h-a136,
.map-container:has(.hover-area[data-target="area137"]:hover) .h-a137,
.map-container:has(.hover-area[data-target="area138"]:hover) .h-a138,
.map-container:has(.hover-area[data-target="area139"]:hover) .h-a139,
.map-container:has(.hover-area[data-target="area140"]:hover) .h-a140,
.map-container:has(.hover-area[data-target="area141"]:hover) .h-a141,
.map-container:has(.hover-area[data-target="area142"]:hover) .h-a142,
.map-container:has(.hover-area[data-target="area143"]:hover) .h-a143 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area18"]:hover) .h-a19,
.map-container:has(.hover-area[data-target="area19"]:hover) .h-a18 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area8"]:hover) .h-a21,
.map-container:has(.hover-area[data-target="area21"]:hover) .h-a8 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area29"]:hover) .h-a30,
.map-container:has(.hover-area[data-target="area30"]:hover) .h-a29 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area58"]:hover) .h-a59,
.map-container:has(.hover-area[data-target="area59"]:hover) .h-a58 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area73"]:hover) .h-a74,
.map-container:has(.hover-area[data-target="area74"]:hover) .h-a73 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area75"]:hover) .h-a76,
.map-container:has(.hover-area[data-target="area75"]:hover) .h-a77,
.map-container:has(.hover-area[data-target="area75"]:hover) .h-a78,
.map-container:has(.hover-area[data-target="area75"]:hover) .h-a79,
.map-container:has(.hover-area[data-target="area75"]:hover) .h-a80,
.map-container:has(.hover-area[data-target="area75"]:hover) .h-a81 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area76"]:hover) .h-a75,
.map-container:has(.hover-area[data-target="area76"]:hover) .h-a77,
.map-container:has(.hover-area[data-target="area76"]:hover) .h-a78,
.map-container:has(.hover-area[data-target="area76"]:hover) .h-a79,
.map-container:has(.hover-area[data-target="area76"]:hover) .h-a80,
.map-container:has(.hover-area[data-target="area76"]:hover) .h-a81 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area77"]:hover) .h-a76,
.map-container:has(.hover-area[data-target="area77"]:hover) .h-a75,
.map-container:has(.hover-area[data-target="area77"]:hover) .h-a78,
.map-container:has(.hover-area[data-target="area77"]:hover) .h-a79,
.map-container:has(.hover-area[data-target="area77"]:hover) .h-a80,
.map-container:has(.hover-area[data-target="area77"]:hover) .h-a81 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area78"]:hover) .h-a76,
.map-container:has(.hover-area[data-target="area78"]:hover) .h-a77,
.map-container:has(.hover-area[data-target="area78"]:hover) .h-a75,
.map-container:has(.hover-area[data-target="area78"]:hover) .h-a79,
.map-container:has(.hover-area[data-target="area78"]:hover) .h-a80,
.map-container:has(.hover-area[data-target="area78"]:hover) .h-a81 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area79"]:hover) .h-a76,
.map-container:has(.hover-area[data-target="area79"]:hover) .h-a77,
.map-container:has(.hover-area[data-target="area79"]:hover) .h-a78,
.map-container:has(.hover-area[data-target="area79"]:hover) .h-a75,
.map-container:has(.hover-area[data-target="area79"]:hover) .h-a80,
.map-container:has(.hover-area[data-target="area79"]:hover) .h-a81 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area80"]:hover) .h-a76,
.map-container:has(.hover-area[data-target="area80"]:hover) .h-a77,
.map-container:has(.hover-area[data-target="area80"]:hover) .h-a78,
.map-container:has(.hover-area[data-target="area80"]:hover) .h-a79,
.map-container:has(.hover-area[data-target="area80"]:hover) .h-a75,
.map-container:has(.hover-area[data-target="area80"]:hover) .h-a81 {
  opacity: 1;
  display: block;
}

.map-container:has(.hover-area[data-target="area81"]:hover) .h-a76,
.map-container:has(.hover-area[data-target="area81"]:hover) .h-a77,
.map-container:has(.hover-area[data-target="area81"]:hover) .h-a78,
.map-container:has(.hover-area[data-target="area81"]:hover) .h-a79,
.map-container:has(.hover-area[data-target="area81"]:hover) .h-a80,
.map-container:has(.hover-area[data-target="area81"]:hover) .h-a75 {
  opacity: 1;
  display: block;
}

/* Fallback: Hover on entire container (works but less precise) */
/* .map-container:hover .hoverImg { opacity: 0.8; } */

#noklik {
  position: absolute;
  right: 34px;
  top: -58px;
  display: none;
}

#yesklik {
  position: absolute;
  right: 34px;
  top: -58px;
  display: none;
}

#noklik:hover {
  cursor: pointer;
  transform: scale(0.94);
}

#yesklik:hover {
  cursor: pointer;
  transform: scale(0.94);
}

.map-container:has(.hover-area[data-target="area1"]:hover) #hoverSpan1 { display: block; }
.map-container:has(.hover-area[data-target="area2"]:hover) #hoverSpan2 { display: block; }
.map-container:has(.hover-area[data-target="area3"]:hover) #hoverSpan3 { display: block; }
.map-container:has(.hover-area[data-target="area4"]:hover) #hoverSpan4 { display: block; }
.map-container:has(.hover-area[data-target="area5"]:hover) #hoverSpan5 { display: block; }
.map-container:has(.hover-area[data-target="area6"]:hover) #hoverSpan6 { display: block; }
.map-container:has(.hover-area[data-target="area7"]:hover) #hoverSpan7 { display: block; }
.map-container:has(.hover-area[data-target="area8"]:hover) #hoverSpan8 { display: block; }
.map-container:has(.hover-area[data-target="area9"]:hover) #hoverSpan9 { display: block; }
.map-container:has(.hover-area[data-target="area10"]:hover) #hoverSpan10 { display: block; }
.map-container:has(.hover-area[data-target="area11"]:hover) #hoverSpan11 { display: block; }
.map-container:has(.hover-area[data-target="area12"]:hover) #hoverSpan12 { display: block; }
.map-container:has(.hover-area[data-target="area13"]:hover) #hoverSpan13 { display: block; }
.map-container:has(.hover-area[data-target="area14"]:hover) #hoverSpan14 { display: block; }
.map-container:has(.hover-area[data-target="area15"]:hover) #hoverSpan15 { display: block; }
.map-container:has(.hover-area[data-target="area16"]:hover) #hoverSpan16 { display: block; }
.map-container:has(.hover-area[data-target="area17"]:hover) #hoverSpan17 { display: block; }
.map-container:has(.hover-area[data-target="area18"]:hover) #hoverSpan18 { display: block; }
.map-container:has(.hover-area[data-target="area19"]:hover) #hoverSpan19 { display: block; }
.map-container:has(.hover-area[data-target="area20"]:hover) #hoverSpan20 { display: block; }
.map-container:has(.hover-area[data-target="area21"]:hover) #hoverSpan21 { display: block; }
.map-container:has(.hover-area[data-target="area22"]:hover) #hoverSpan22 { display: block; }
.map-container:has(.hover-area[data-target="area23"]:hover) #hoverSpan23 { display: block; }
.map-container:has(.hover-area[data-target="area24"]:hover) #hoverSpan24 { display: block; }
.map-container:has(.hover-area[data-target="area25"]:hover) #hoverSpan25 { display: block; }
.map-container:has(.hover-area[data-target="area26"]:hover) #hoverSpan26 { display: block; }
.map-container:has(.hover-area[data-target="area27"]:hover) #hoverSpan27 { display: block; }
.map-container:has(.hover-area[data-target="area28"]:hover) #hoverSpan28 { display: block; }
.map-container:has(.hover-area[data-target="area29"]:hover) #hoverSpan29 { display: block; }
.map-container:has(.hover-area[data-target="area30"]:hover) #hoverSpan30 { display: block; }
.map-container:has(.hover-area[data-target="area31"]:hover) #hoverSpan31 { display: block; }
.map-container:has(.hover-area[data-target="area32"]:hover) #hoverSpan32 { display: block; }
.map-container:has(.hover-area[data-target="area33"]:hover) #hoverSpan33 { display: block; }
.map-container:has(.hover-area[data-target="area34"]:hover) #hoverSpan34 { display: block; }
.map-container:has(.hover-area[data-target="area35"]:hover) #hoverSpan35 { display: block; }
.map-container:has(.hover-area[data-target="area36"]:hover) #hoverSpan36 { display: block; }
.map-container:has(.hover-area[data-target="area37"]:hover) #hoverSpan37 { display: block; }
.map-container:has(.hover-area[data-target="area38"]:hover) #hoverSpan38 { display: block; }
.map-container:has(.hover-area[data-target="area39"]:hover) #hoverSpan39 { display: block; }
.map-container:has(.hover-area[data-target="area40"]:hover) #hoverSpan40 { display: block; }
.map-container:has(.hover-area[data-target="area41"]:hover) #hoverSpan41 { display: block; }
.map-container:has(.hover-area[data-target="area42"]:hover) #hoverSpan42 { display: block; }
.map-container:has(.hover-area[data-target="area43"]:hover) #hoverSpan43 { display: block; }
.map-container:has(.hover-area[data-target="area44"]:hover) #hoverSpan44 { display: block; }
.map-container:has(.hover-area[data-target="area45"]:hover) #hoverSpan45 { display: block; }
.map-container:has(.hover-area[data-target="area46"]:hover) #hoverSpan46 { display: block; }
.map-container:has(.hover-area[data-target="area47"]:hover) #hoverSpan47 { display: block; }
.map-container:has(.hover-area[data-target="area48"]:hover) #hoverSpan48 { display: block; }
.map-container:has(.hover-area[data-target="area49"]:hover) #hoverSpan49 { display: block; }
.map-container:has(.hover-area[data-target="area50"]:hover) #hoverSpan50 { display: block; }
.map-container:has(.hover-area[data-target="area51"]:hover) #hoverSpan51 { display: block; }
.map-container:has(.hover-area[data-target="area52"]:hover) #hoverSpan52 { display: block; }
.map-container:has(.hover-area[data-target="area53"]:hover) #hoverSpan53 { display: block; }
.map-container:has(.hover-area[data-target="area54"]:hover) #hoverSpan54 { display: block; }
.map-container:has(.hover-area[data-target="area55"]:hover) #hoverSpan55 { display: block; }
.map-container:has(.hover-area[data-target="area56"]:hover) #hoverSpan56 { display: block; }
.map-container:has(.hover-area[data-target="area57"]:hover) #hoverSpan57 { display: block; }
.map-container:has(.hover-area[data-target="area58"]:hover) #hoverSpan58 { display: block; }
.map-container:has(.hover-area[data-target="area59"]:hover) #hoverSpan59 { display: block; }
.map-container:has(.hover-area[data-target="area60"]:hover) #hoverSpan60 { display: block; }
.map-container:has(.hover-area[data-target="area61"]:hover) #hoverSpan61 { display: block; }
.map-container:has(.hover-area[data-target="area62"]:hover) #hoverSpan62 { display: block; }
.map-container:has(.hover-area[data-target="area63"]:hover) #hoverSpan63 { display: block; }
.map-container:has(.hover-area[data-target="area64"]:hover) #hoverSpan64 { display: block; }
.map-container:has(.hover-area[data-target="area65"]:hover) #hoverSpan65 { display: block; }
.map-container:has(.hover-area[data-target="area66"]:hover) #hoverSpan66 { display: block; }
.map-container:has(.hover-area[data-target="area67"]:hover) #hoverSpan67 { display: block; }
.map-container:has(.hover-area[data-target="area68"]:hover) #hoverSpan68 { display: block; }
.map-container:has(.hover-area[data-target="area69"]:hover) #hoverSpan69 { display: block; }
.map-container:has(.hover-area[data-target="area70"]:hover) #hoverSpan70 { display: block; }
.map-container:has(.hover-area[data-target="area71"]:hover) #hoverSpan71 { display: block; }
.map-container:has(.hover-area[data-target="area72"]:hover) #hoverSpan72 { display: block; }
.map-container:has(.hover-area[data-target="area73"]:hover) #hoverSpan73 { display: block; }
.map-container:has(.hover-area[data-target="area74"]:hover) #hoverSpan74 { display: block; }
.map-container:has(.hover-area[data-target="area75"]:hover) #hoverSpan75 { display: block; }
.map-container:has(.hover-area[data-target="area76"]:hover) #hoverSpan76 { display: block; }
.map-container:has(.hover-area[data-target="area77"]:hover) #hoverSpan77 { display: block; }
.map-container:has(.hover-area[data-target="area78"]:hover) #hoverSpan78 { display: block; }
.map-container:has(.hover-area[data-target="area79"]:hover) #hoverSpan79 { display: block; }
.map-container:has(.hover-area[data-target="area80"]:hover) #hoverSpan80 { display: block; }
.map-container:has(.hover-area[data-target="area81"]:hover) #hoverSpan81 { display: block; }
.map-container:has(.hover-area[data-target="area82"]:hover) #hoverSpan82 { display: block; }
.map-container:has(.hover-area[data-target="area83"]:hover) #hoverSpan83 { display: block; }
.map-container:has(.hover-area[data-target="area84"]:hover) #hoverSpan84 { display: block; }
.map-container:has(.hover-area[data-target="area85"]:hover) #hoverSpan85 { display: block; }
.map-container:has(.hover-area[data-target="area86"]:hover) #hoverSpan86 { display: block; }
.map-container:has(.hover-area[data-target="area87"]:hover) #hoverSpan87 { display: block; }
.map-container:has(.hover-area[data-target="area88"]:hover) #hoverSpan88 { display: block; }
.map-container:has(.hover-area[data-target="area89"]:hover) #hoverSpan89 { display: block; }
.map-container:has(.hover-area[data-target="area90"]:hover) #hoverSpan90 { display: block; }
.map-container:has(.hover-area[data-target="area91"]:hover) #hoverSpan91 { display: block; }
.map-container:has(.hover-area[data-target="area92"]:hover) #hoverSpan92 { display: block; }
.map-container:has(.hover-area[data-target="area93"]:hover) #hoverSpan93 { display: block; }
.map-container:has(.hover-area[data-target="area94"]:hover) #hoverSpan94 { display: block; }
.map-container:has(.hover-area[data-target="area95"]:hover) #hoverSpan95 { display: block; }
.map-container:has(.hover-area[data-target="area96"]:hover) #hoverSpan96 { display: block; }
.map-container:has(.hover-area[data-target="area97"]:hover) #hoverSpan97 { display: block; }
.map-container:has(.hover-area[data-target="area98"]:hover) #hoverSpan98 { display: block; }
.map-container:has(.hover-area[data-target="area99"]:hover) #hoverSpan99 { display: block; }
.map-container:has(.hover-area[data-target="area100"]:hover) #hoverSpan100 { display: block; }
.map-container:has(.hover-area[data-target="area101"]:hover) #hoverSpan101 { display: block; }
.map-container:has(.hover-area[data-target="area102"]:hover) #hoverSpan102 { display: block; }
.map-container:has(.hover-area[data-target="area103"]:hover) #hoverSpan103 { display: block; }
.map-container:has(.hover-area[data-target="area104"]:hover) #hoverSpan104 { display: block; }
.map-container:has(.hover-area[data-target="area105"]:hover) #hoverSpan105 { display: block; }
.map-container:has(.hover-area[data-target="area106"]:hover) #hoverSpan106 { display: block; }
.map-container:has(.hover-area[data-target="area107"]:hover) #hoverSpan107 { display: block; }
.map-container:has(.hover-area[data-target="area108"]:hover) #hoverSpan108 { display: block; }
.map-container:has(.hover-area[data-target="area109"]:hover) #hoverSpan109 { display: block; }
.map-container:has(.hover-area[data-target="area110"]:hover) #hoverSpan110 { display: block; }
.map-container:has(.hover-area[data-target="area111"]:hover) #hoverSpan111 { display: block; }
.map-container:has(.hover-area[data-target="area112"]:hover) #hoverSpan112 { display: block; }
.map-container:has(.hover-area[data-target="area113"]:hover) #hoverSpan113 { display: block; }
.map-container:has(.hover-area[data-target="area114"]:hover) #hoverSpan114 { display: block; }
.map-container:has(.hover-area[data-target="area115"]:hover) #hoverSpan115 { display: block; }
.map-container:has(.hover-area[data-target="area116"]:hover) #hoverSpan116 { display: block; }
.map-container:has(.hover-area[data-target="area117"]:hover) #hoverSpan117 { display: block; }
.map-container:has(.hover-area[data-target="area118"]:hover) #hoverSpan118 { display: block; }
.map-container:has(.hover-area[data-target="area119"]:hover) #hoverSpan119 { display: block; }
.map-container:has(.hover-area[data-target="area120"]:hover) #hoverSpan120 { display: block; }
.map-container:has(.hover-area[data-target="area121"]:hover) #hoverSpan121 { display: block; }
.map-container:has(.hover-area[data-target="area122"]:hover) #hoverSpan122 { display: block; }
.map-container:has(.hover-area[data-target="area123"]:hover) #hoverSpan123 { display: block; }
.map-container:has(.hover-area[data-target="area124"]:hover) #hoverSpan124 { display: block; }
.map-container:has(.hover-area[data-target="area125"]:hover) #hoverSpan125 { display: block; }
.map-container:has(.hover-area[data-target="area126"]:hover) #hoverSpan126 { display: block; }
.map-container:has(.hover-area[data-target="area127"]:hover) #hoverSpan127 { display: block; }
.map-container:has(.hover-area[data-target="area128"]:hover) #hoverSpan128 { display: block; }
.map-container:has(.hover-area[data-target="area129"]:hover) #hoverSpan129 { display: block; }
.map-container:has(.hover-area[data-target="area130"]:hover) #hoverSpan130 { display: block; }
.map-container:has(.hover-area[data-target="area131"]:hover) #hoverSpan131 { display: block; }
.map-container:has(.hover-area[data-target="area132"]:hover) #hoverSpan132 { display: block; }
.map-container:has(.hover-area[data-target="area133"]:hover) #hoverSpan133 { display: block; }
.map-container:has(.hover-area[data-target="area134"]:hover) #hoverSpan134 { display: block; }
.map-container:has(.hover-area[data-target="area135"]:hover) #hoverSpan135 { display: block; }
.map-container:has(.hover-area[data-target="area136"]:hover) #hoverSpan136 { display: block; }
.map-container:has(.hover-area[data-target="area137"]:hover) #hoverSpan137 { display: block; }
.map-container:has(.hover-area[data-target="area138"]:hover) #hoverSpan138 { display: block; }
.map-container:has(.hover-area[data-target="area139"]:hover) #hoverSpan139 { display: block; }
.map-container:has(.hover-area[data-target="area140"]:hover) #hoverSpan140 { display: block; }
.map-container:has(.hover-area[data-target="area141"]:hover) #hoverSpan141 { display: block; }
.map-container:has(.hover-area[data-target="area142"]:hover) #hoverSpan142 { display: block; }
.map-container:has(.hover-area[data-target="area143"]:hover) #hoverSpan143 { display: block; }