/* ✅ Obal pre ikonovú navigáciu */
#xxx2 .image-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
  background: transparent;
}

/* ✅ Všeobecný štýl pre všetky tlačidlá (hlavné aj podikonky) */
#xxx2 .button,
#xxx2 .sub-button {
  position: absolute;
  width: 65px;
  height: 60px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ✅ Hlavné ikony (NECHAŤ ROVNAKO) */
#xxx2 .top-left    { top: 119px; left: 37px; }
#xxx2 .top-right   { top: 119px; left: 198px; }
#xxx2 .bottom-center { top: 128px; left: 83px; width: 130px; height: 40px; }

/* ✅ Stredový button */
#xxx2 .center {
  position: absolute;
  top: 110px;
  left: 110px;
  transform: translate(-50%, -50%);
}

/* ✅ Priehľadnosť pre niektoré prvky */
#xxx2 .transparent {
  opacity: 0.3;
  transition: opacity 1s;
}

/* ✅ Podikonky (v submenu – subSet) – zmenšené a upravené pozície */
#xxx2 [id^=subSet] .top-left {
  top: 45px;
  left: 127px;
  width: 50px;
  height: 50px;
}

#xxx2 [id^=subSet] .top-right {
  top: 128px;
  left: 203px;
  width: 55px;
  height: 50px;
}

#xxx2 [id^=subSet] .bottom-left {
  bottom: 125px;
  left: 40px;
  width: 60px;
  height: 50px;
}

#xxx2 [id^=subSet] .bottom-right {
  bottom: 45px;
  right: 124px;
  width: 50px;
  height: 50px;
}

/* ✅ Vnútro obrázkov */
#xxx2 .button img,
#xxx2 .sub-button img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ✅ Efekty po kliknutí a hover */
#xxx2 .button:active,
#xxx2 .button:focus,
#xxx2 .button:hover,
#xxx2 .sub-button:active,
#xxx2 .sub-button:focus,
#xxx2 .sub-button:hover {
  outline: 0;
  background: transparent;
}

/* ✅ Mobilné zobrazenie (zmenšené ešte o niečo viac pre malé displeje) */
@media (max-width: 600px) {
  #xxx2 .button,
  #xxx2 .sub-button {
    width: 65px;
    height: 60px;
  }

  #xxx2 .top-left { top: 119px; left: 37px; }
  #xxx2 .top-right { top: 119px; left: 199px; }
  #xxx2 .bottom-center { top: 128px; left: 80px; width: 140px; height: 40px; }

  #xxx2 [id^=subSet] .top-left {
    top: 45px;
    left: 127px;
    width: 48px;
    height: 45px;
  }

  #xxx2 [id^=subSet] .top-right {
    top: 130px;
    left: 207px;
    width: 47px;
    height: 43px;
  }

  #xxx2 [id^=subSet] .bottom-left {
    bottom: 125px;
    left: 40px;
    width: 60px;
    height: 50px;
  }

  #xxx2 [id^=subSet] .bottom-right {
    bottom: 45px;
    right: 124px;
    width: 50px;
    height: 50px;
  }
}

/* ✅ Tablety (601–1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  #xxx2 .button,
  #xxx2 .sub-button {
    width: 70px;
    height: 55px;
  }

  #xxx2 .top-left { top: 120px; left: 39px; }
  #xxx2 .top-right { top: 120px; left: 200px; }
  #xxx2 .bottom-center { top: 130px; left: 93px; width: 120px; height: 35px; }

  #xxx2 [id^=subSet] .top-left {
    top: 45px;
    left: 127px;
    width: 50px;
    height: 50px;
  }

  #xxx2 [id^=subSet] .top-right {
    top: 128px;
    left: 203px;
    width: 55px;
    height: 45px;
  }

  #xxx2 [id^=subSet] .bottom-left {
    bottom: 125px;
    left: 40px;
    width: 60px;
    height: 50px;
  }

  #xxx2 [id^=subSet] .bottom-right {
    bottom: 45px;
    right: 124px;
    width: 50px;
    height: 50px;
  }
}

/* ✅ Skrytie prvkov */
#xxx2 .hidden {
  display: none;
}