.homepage video {
  width: 100%;
  height: 850px;
  object-fit: cover;
  display: block;
}
.homepage #ukazka {
  background: #000;
  height: 850px;
  position: relative;
}
.homepage #ukazka .background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-size: 100% auto;
  width: 100%;
  background: url('../prestaveni-zus/pc/pozadi.png');
  transition: opacity 0.5s;
  z-index: -1;
}
.homepage #ukazka .vstupte-wrapper {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%, -50%);
}
.homepage #ukazka.load {
  transition: 0.3s;
}
.homepage #ukazka.load .background {
  opacity: 0.3;
  transition: opacity 0.5s;
}
.homepage #ukazka.load .dvere,
.homepage #ukazka.load .artik {
  opacity: 1;
  transition: opacity 2s;
}
.homepage #ukazka.load .artik {
  animation: artik 2s linear forwards;
}
.homepage #ukazka.load #bublina #b1 {
  animation: bublina 0.5s linear forwards;
  animation-delay: 2s;
}
.homepage #ukazka.load #bublina #b2 {
  animation: bublina 0.5s linear forwards;
  animation-delay: 2.3s;
}
.homepage #ukazka.load #bublina #b3 {
  animation: bublina 0.5s linear forwards;
  animation-delay: 2.6s;
}
.homepage #ukazka.load #bublina #b4 {
  animation: bublinaLast 0.5s linear forwards;
  animation-delay: 2.9s;
}
.homepage #ukazka.load #bublina #text1 {
  opacity: 0;
  font-size: 22px;
  transform: translate(100px, 90px);
  animation: textShow1 0.5s linear forwards;
  animation-delay: 3s;
}
.homepage #ukazka.load #bublina #text2 {
  opacity: 0;
  font-size: 22px;
  transform: translate(130px, 130px);
  animation: textShow2 0.5s linear forwards;
  animation-delay: 3.5s;
}
.homepage #ukazka.load .text {
  opacity: 1;
  transition: opacity 0.5s;
  transition-delay: 3.5s;
  font-family: "Tahoma", sans-serif !important;
}
.homepage #ukazka.load .vstupte-wrapper {
  opacity: 1;
  transition: 1s;
  transition-delay: 4s;
  transform: translate(-50%, -50%);
}
.homepage #ukazka.load a.vstoupit {
  opacity: 1;
  transition-delay: 0;
}
.homepage #ukazka.load a.vstoupit:hover {
  transition-delay: 0;
  background: #F9AA8F;
  transition: 0.4s;
}
.homepage #ukazka a.vstoupit {
  display: inline-block;
  min-width: 250px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 35px;
  background: #FFCB05;
  border: 2px #000 solid;
  padding: 30px 55px;
  opacity: 0;
  transition: 0.4s;
  transition-delay: 0;
}
.homepage #ukazka a.vstoupit:hover {
  text-decoration: none;
  transition-delay: 0;
}
.homepage #ukazka #bublina {
  overflow: visible;
  position: absolute;
  top: 150px;
  transform: translateX(90px);
  width: 230%;
}
.homepage #ukazka #bublina #b1,
.homepage #ukazka #bublina #b2,
.homepage #ukazka #bublina #b3,
.homepage #ukazka #bublina #b4 {
  opacity: 0;
  transform: scale(0.8);
}
.homepage #ukazka .text {
  font-family: "Tahoma", sans-serif !important;
  opacity: 0;
  width: 300%;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  top: 233px;
  font-weight: bold;
  left: 195px;
}
.homepage #ukazka .text p {
  font-size: 20px;
  text-align: center;
}
.homepage #ukazka .text p strong {
  font-size: 28px;
  display: inline-block;
  margin-bottom: 10px;
}
.homepage #ukazka .dvere {
  opacity: 0;
  background: url('../prestaveni-zus/pc/dvere.svg');
  width: 172px;
  height: 582px;
  position: relative;
  top: 40px;
}
.homepage #ukazka .artik {
  opacity: 0;
  background: url('../prestaveni-zus/pc/artik.svg');
  width: 250px;
  height: 361px;
  position: absolute;
  left: -60px;
  bottom: 40px;
}
@keyframes artik {
  0% {
    left: -250px;
  }
  100% {
    left: -60px;
  }
}
@keyframes textShow1 {
  0% {
    opacity: 0;
    transform: translate(100px, 90px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(100px, 90px) scale(1);
  }
}
@keyframes textShow2 {
  0% {
    opacity: 0;
    transform: translate(100px, 135px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(100px, 135px) scale(1);
  }
}
@keyframes bublina {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bublinaLast {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1.5);
  }
}
#predstaveni #exampleModal {
  background: rgba(0, 0, 0, 0.7);
}
#predstaveni #exampleModal iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100% !important;
}
#predstaveni #exampleModal.modal-obor.obor-vo .modal-body,
#predstaveni #exampleModal.modal-obor.obor-ldo .modal-body,
#predstaveni #exampleModal.modal-obor.obor-to .modal-body,
#predstaveni #exampleModal.modal-obor.detail .modal-body,
#predstaveni #exampleModal.modal-obor.obor-ho .modal-body {
  padding: 0;
  position: relative;
  padding-bottom: 56.6%;
}
#predstaveni .container {
  max-width: 1362px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}
#predstaveni .container.fullscreen {
  max-width: 100%;
}
#predstaveni .container.fullscreen .text {
  font-size: 107.2% !important;
}
#predstaveni:-webkit-full-screen,
#predstaveni:-moz-full-screen,
#predstaveni:-ms-fullscreen,
#predstaveni:fullscreen {
  height: 100vh;
  width: 100vw;
}
#predstaveni #desktop:-webkit-full-screen,
#predstaveni #desktop:-moz-full-screen,
#predstaveni #desktop:-ms-fullscreen,
#predstaveni #desktop:fullscreen {
  width: 100vw;
  height: 100vh;
}
#predstaveni #desktop,
#predstaveni #vertical {
  position: relative;
  width: 100%;
  padding-bottom: 56.24%;
  max-width: 100%;
  background: #000;
}
#predstaveni #desktop .toggle_fullscreen,
#predstaveni #vertical .toggle_fullscreen {
  position: absolute;
  right: 30px;
  top: 20px;
  color: #fff !important;
  font-size: 20px;
}
#predstaveni #desktop .background,
#predstaveni #vertical .background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
#predstaveni #desktop #bublina_text,
#predstaveni #vertical #bublina_text {
  background: url(../prestaveni-zus/pc/bublina_text.svg?v=2);
  position: absolute;
  top: 39%;
  width: 200%;
  transform: translateX(41%);
  z-index: 99999999;
  height: 27.6%;
  background-size: 100% auto;
}
#predstaveni #desktop .text,
#predstaveni #vertical .text {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  top: 53.7%;
  font-weight: bold;
  left: 106%;
  font-size: 77.7%;
  z-index: 99999999;
}
#predstaveni #desktop .text p,
#predstaveni #vertical .text p {
  text-align: center;
}
#predstaveni #desktop .dvere,
#predstaveni #vertical .dvere {
  background: url('../prestaveni-zus/pc/dvere.svg');
  width: 11.8%;
  height: 69.8%;
  position: absolute;
  bottom: 10%;
  background-size: 100%;
}
#predstaveni #desktop .artik,
#predstaveni #vertical .artik {
  background: url('../prestaveni-zus/pc/artik.svg');
  width: 127%;
  height: 56%;
  position: absolute;
  left: 10px;
  bottom: 0px;
  z-index: 9999999;
  background-size: 100%;
  background-repeat: no-repeat;
}
#predstaveni #desktop .cesta,
#predstaveni #vertical .cesta {
  width: 88.57979%;
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 1;
}
#predstaveni #desktop .zapis,
#predstaveni #vertical .zapis {
  position: absolute;
  z-index: 1000;
  width: 11.89427313%;
  height: 36.81462141%;
  bottom: 16.31853786%;
  right: 7.32064422%;
  cursor: pointer;
  background: url(../prestaveni-zus/pc/prihlaska.svg);
  background-size: 100%;
  animation: pulzovani 2s linear infinite;
}
#predstaveni #desktop .obor-ho,
#predstaveni #vertical .obor-ho {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/pc/ho.svg);
  width: 21.049046%;
  height: 47.2%;
  bottom: 34.1%;
  left: 50.5%;
  background-size: 100%;
  cursor: pointer;
}

#predstaveni #desktop .obor-ho:hover, #predstaveni #desktop .obor-to:hover, #predstaveni #desktop .obor-vo:hover, #predstaveni #desktop .obor-ldo:hover, #desktop span#playArtikVideo:hover {
  animation: pulzovani 1s linear infinite;
}
#predstaveni #desktop .obor-to,
#predstaveni #vertical .obor-to {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/pc/to.svg);
  width: 17.9%;
  height: 43.898172%;
  background-size: 100%;
  left: 21.9%;
  bottom: 78%;
  cursor: pointer;
}
#predstaveni #desktop .obor-vo,
#predstaveni #vertical .obor-vo {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/pc/vo.svg);
  width: 22.570631%;
  height: 46.5%;
  bottom: 84%;
  left: 81%;
  background-size: 100%;
  cursor: pointer;
}
#predstaveni #desktop .obor-ldo,
#predstaveni #vertical .obor-ldo {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/pc/ldo.svg);
  background-size: 100%;
  width: 17.691924%;
  height: 45.22611%;
  bottom: 99.174151%;
  left: 55.392364%;
  cursor: pointer;
}
#predstaveni #vertical {
  padding-bottom: 177.8%;
}
#predstaveni #vertical .dvere {
  background: url('../prestaveni-zus/pc/dvere.svg');
  width: 17.62402089%;
  height: 29.73568282%;
  position: absolute;
  top: 0%;
  background-size: 100%;
}
#predstaveni #vertical .artik {
  background: url('../prestaveni-zus/pc/artik.svg');
  width: 145.18518519%;
  height: 69.87654321%;
  position: absolute;
  left: 10px;
  bottom: 0px;
  z-index: 9999999;
  background-size: 100%;
  background-repeat: no-repeat;
}
#predstaveni #vertical .cesta {
  width: 18.1462%;
  position: absolute;
  bottom: 0;
  top: 0;
  z-index: 1;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#predstaveni #vertical .zapis {
  position: absolute;
  z-index: 1000;
  width: 21.27937337%;
  height: 14.31718062%;
  bottom: 2.318538%;
  right: 42.320644%;
  cursor: pointer;
  background: url(../prestaveni-zus/mobil/zapis.svg);
  background-size: 100%;
}
#predstaveni #vertical .obor-ho {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/mobil/ho.svg);
  width: 34.46475196%;
  height: 17.69456681%;
  bottom: 22.1%;
  left: 17%;
  background-size: 100%;
  cursor: pointer;
  transform: rotate(45deg);
}
#predstaveni #vertical .obor-to {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/mobil/to.svg);
  width: 33.02872063%;
  height: 17.20351391%;
  background-size: 100%;
  left: 49.7%;
  top: 5%;
  bottom: auto;
  cursor: pointer;
  transform: rotate(327deg);
}
#predstaveni #vertical .obor-vo {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/mobil/vo.svg);
  width: 37.00787402%;
  height: 16.15271659%;
  bottom: auto;
  left: 43%;
  top: 43%;
  background-size: 100%;
  cursor: pointer;
  transform: rotate(-45deg);
}
#predstaveni #vertical .obor-ldo {
  position: absolute;
  z-index: 999999;
  background: url(../prestaveni-zus/mobil/ldo.svg);
  background-size: 100%;
  width: 31.88976378%;
  height: 18.00878477%;
  bottom: auto;
  top: 23%;
  left: 26.392364%;
  cursor: pointer;
  transform: rotate(45deg);
}
#predstaveni #vertical #bublina_text {
  position: absolute;
  top: 26%;
  width: 200%;
  transform: translateX(46%);
  z-index: 99999999;
  height: 30.85%;
  background-size: 100% auto;
}
#exampleModal.modal-obor .close {
  color: #fff !important;
  opacity: 1 !important;
}
#exampleModal.modal-obor.obor-to .modal-header,
#exampleModal.modal-obor.obor-to .modal-footer,
#exampleModal.modal-obor.obor-to .modal-body {
  background: #f6af95;
  border: 0;
  border-radius: 0;
  color: #fff;
}
#exampleModal.modal-obor.obor-ldo .modal-header,
#exampleModal.modal-obor.obor-ldo .modal-footer,
#exampleModal.modal-obor.obor-ldo .modal-body {
  background: #dccf70;
  border: 0;
  border-radius: 0;
  color: #fff;
}
#exampleModal.modal-obor.obor-vo .modal-header,
#exampleModal.modal-obor.obor-vo .modal-footer,
#exampleModal.modal-obor.obor-vo .modal-body {
  background: #f7a940;
  border: 0;
  border-radius: 0;
  color: #fff;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-dialog.modal-lg {
  max-width: 100%;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-footer {
  display: none;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-header,
#exampleModal.modal-obor.obor-ho-vyber .modal-footer,
#exampleModal.modal-obor.obor-ho-vyber .modal-body,
#exampleModal.modal-obor.obor-ho-vyber .modal-content {
  background: transparent;
  border: 0;
  color: #fff;
  border-radius: 0;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-header .zamereni,
#exampleModal.modal-obor.obor-ho-vyber .modal-footer .zamereni,
#exampleModal.modal-obor.obor-ho-vyber .modal-body .zamereni,
#exampleModal.modal-obor.obor-ho-vyber .modal-content .zamereni {
  cursor: pointer;
  padding: 15px;
  text-align: center;
  background: #fecc00;
  margin-bottom: 30px;
  font-size: 18px;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-header .zamereni h4,
#exampleModal.modal-obor.obor-ho-vyber .modal-footer .zamereni h4,
#exampleModal.modal-obor.obor-ho-vyber .modal-body .zamereni h4,
#exampleModal.modal-obor.obor-ho-vyber .modal-content .zamereni h4 {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-header .zamereni p,
#exampleModal.modal-obor.obor-ho-vyber .modal-footer .zamereni p,
#exampleModal.modal-obor.obor-ho-vyber .modal-body .zamereni p,
#exampleModal.modal-obor.obor-ho-vyber .modal-content .zamereni p {
  background: #fff;
  text-align: center;
  padding: 10px;
  margin: 0;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-header .zamereni p span,
#exampleModal.modal-obor.obor-ho-vyber .modal-footer .zamereni p span,
#exampleModal.modal-obor.obor-ho-vyber .modal-body .zamereni p span,
#exampleModal.modal-obor.obor-ho-vyber .modal-content .zamereni p span {
  font-size: 25px;
  color: red;
}
#exampleModal.modal-obor.obor-ho-vyber .modal-header .zamereni img,
#exampleModal.modal-obor.obor-ho-vyber .modal-footer .zamereni img,
#exampleModal.modal-obor.obor-ho-vyber .modal-body .zamereni img,
#exampleModal.modal-obor.obor-ho-vyber .modal-content .zamereni img {
  height: 100px;
  margin: 20px 0;
}
#exampleModal.modal-obor.obor-ho .modal-header,
#exampleModal.modal-obor.obor-ho .modal-footer,
#exampleModal.modal-obor.obor-ho .modal-body {
  background: #fecc00;
  border: 0;
  border-radius: 0;
  color: #fff;
}
@media (max-width: 1660px) {
  .vstupte-wrapper {
    transform: translate(50%, -50%) !important;
  }
}
@media (max-width: 1441px) {
  .vstupte-wrapper {
    transform: translate(50%, -50%) !important;
  }
}
@media (max-width: 1120px) {
  .vstupte-wrapper {
    transform: translate(60%, -50%) !important;
  }
}
@media (max-width: 1025px) {
  .vstupte-wrapper {
    transform: translate(60%, -50%) !important;
  }
  @keyframes bublinaLast {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: scale(1.2);
    }
  }
  .homepage #ukazka.load #bublina #text1 {
    font-size: 18px;
    transform: translate(77px, 70px) !important;
  }
  .homepage #ukazka.load #bublina #text2 {
    font-size: 18px;
    transform: translate(77px, 107px) !important;
  }
  .homepage #ukazka.load #bublina #text2 tspan.cls-3 {
    font-size: 18px;
  }
}
@media (max-width: 769px) {
  .vstupte-wrapper {
    transform: translate(-65%, 20%) !important;
  }
  @keyframes bublinaLast {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: scale(1.2);
    }
  }
}
@media (max-width: 501px) {
  .vstupte-wrapper {
    transform: translate(-25%, 30%) !important;
  }
  /*
    
    .homepage #ukazka #bublina {
        transform: translateX(6px) scale(0.8);
    }
    */
  .homepage #ukazka #bublina {
    transform: translateX(34px) scale(0.7);
  }
  .homepage #ukazka .vstupte-wrapper {
    opacity: 0;
    position: absolute;
    top: 45%;
    left: 52%;
    transform: translateY(-50%, -50%);
  }
  @keyframes bublinaLast {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: scale(1.2);
    }
  }
  .homepage #ukazka.load a.vstoupit {
    display: inline-block;
    min-width: 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 23px;
    background: #FFCB05;
    border: 2px #000 solid;
    padding: 25px 50px;
    transition: 0.4s;
    transition-delay: 0;
  }
}
@media (max-width: 450px) {
  .vstupte-wrapper {
    transform: translate(-10%, 30%) !important;
  }
  .homepage #ukazka.load a.vstoupit {
    display: inline-block;
    min-width: 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    background: #FFCB05;
    border: 2px #000 solid;
    padding: 25px 50px;
    transition: 0.4s;
    transition-delay: 0;
  }
  .homepage #ukazka #bublina {
    transform: translateX(6px) scale(0.65);
  }
  @keyframes bublinaLast {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: scale(1.2);
    }
  }
}
@media (max-width: 1366px) and (min-width: 800px) and (max-height: 650px) {
  .homepage #ukazka .dvere {
    top: -65px;
  }
  .homepage #ukazka {
    height: 110vh;
  }
  .vstupte-wrapper {
    transform: translate(50%, -100%) !important;
  }
}


@keyframes pulzovani {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
#desktop span#playArtikVideo {
  position: absolute;
  top: 48.1%;
  left: 37.4%;
  color: red;
  font-size: 30px;
  border-radius: 25px;
  cursor: pointer;
  animation: pulzovani 2s infinite linear;
}
#vertical span#playArtikVideo {
  position: absolute;
  top: 48.1%;
  left: 37.4%;
  color: red;
  font-size: 30px;
  border-radius: 25px;
  cursor: pointer;
  animation: pulzovani 2s infinite linear;
}

.zapis_do_zus {
  position: fixed;
    top: calc(25% + 40px);
    z-index: 1000000;
    right: 57px;
    background: #f9aa8f;
    padding: 10px;
    color: #fff !important;
    font-weight: bold;
    letter-spacing: 0.5px;
    transform: translateX(100%);
    transition: .3s;
}
.fb_icon_social {
  position: fixed;
    top: calc(25% - 63px);
    z-index: 1000000;
    width: 57px;
    text-align: center;
    text-decoration: none !important;
    right: 0;
    background: #4267B2;
    padding: 10px;
    color: #fff !important;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.zapis_do_zus:hover {
  transform: translateX(0);
  right: 0;
  transition: .3s;
}

.read_content {
  width: 57px !important;
  top: calc(25% + 10px) !important;
  z-index: 9999999 !important;
}

body#website {
  overflow-x: hidden;
}

.predstaveni_zus h2 {
  padding-top: 0;
  padding-bottom: 25px;
}