*{
    box-sizing: border-box;
    user-select: none;
}
/*scroll-bar*/
/* Apply custom styles to the scrollbar track */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
  }
  
  /* Customize the scrollbar handle (thumb) */
  ::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar handle */
  
}
  
  /* Change scrollbar handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color of the scrollbar handle on hover */
  }
  
  /* Customize the scrollbar track (the area behind the handle) */
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color of the scrollbar track */
  }
  
  /* Add a shadow to the scrollbar track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  }

  /*MENU-BAR*/
  .menu{
    height: 10vh;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    background-color: #151715 ;
    text-decoration: none;
    color: white;
    border-bottom: 2px solid white;
    user-select: none;
    top:0;
  }
  .menu a{
    color: white;
    text-decoration: none;
  }
  .menu .left{
    float: left;
    height: 6vh;
    border-right: 1px solid white;
    margin: 2vh 0 0 2vw ;
  }
  .menu .left a{
    line-height: 6.5vh;
    font-size: 2.5vh;
    margin: 0 2vw;
  }
    .menu .right{
    float: right;
    padding: 2vh 0;
    margin: 0vh 3vw 0 2vw;
    padding-top: 1.5vh;
    width: 19%;
    height: 10vh;
  }
  .menu .right a{
    font-size: 2vh;
    float: right;
    line-height: 2.5vh;
    margin: .5vh 2vw;
    display: block;
  }
  /*FOOTER*/
  .footer{
    height: 40vh;
    width: 100%;
    padding: 0 15vw;
    border-top: 1px solid white;
    background-color:#131914;
  }
  .footer div{
    float: left;
    width: 33%;
    padding-top: 8vh;
    

  }
  .footer div a{
    color: white;
    display: block;
    text-align: center;
    font-size: 2vh;
    margin: 3vh 0;
    text-decoration: none;
  }
  .footer img{
    width: 40%; /* Zabráni pretečeniu obrázka mimo kontajnera */
    height: auto; /* Zachovanie pomeru strán obrázka */
    justify-content: center; /* Horizontálne zarovnávanie */
    align-items: center; /* Vertikálne zarovnávanie */
    margin: 1vh 0 0 20%;

  }
  /*index.php*/
/*ROW1*/
.index-body, .onas-body, .ihrisko-body, .bazar-body, .pravidla-body, .sponzori-body, .footer{
    font-family: "Montserrat", sans-serif;
}
.row1{
    border-bottom: 1px solid white;
    margin-bottom: 50vh;
    background-color: #181818;
}
  .row1 .left{
    width: 30%;
    font-size: 2vh;
    text-align: center;
    line-height: 3vh;
    background-color: #181818;
    color: white;
    padding: 8vh 5vw;   
    float: left;
    height: 50vh;
  }
  .row1 .left #Nadpis{
    font-family: "Oswald", sans-serif;
    font-size: 3vh;
    line-height: 3.5vh;
    margin-bottom: 4vh;
  }
  .row1 .left p{
   margin-bottom: 2vh;
  }


  .image-container {
    width: 70%; /* šírka kontajnera */
    height: 50vh; /* výška kontajnera */
    overflow: hidden; /* skryje časť obrázku, ktorá presahuje kontajner */
    float: right;
    
}

  .index-body .img1{
    width: 100%;
    filter: brightness(80%);
    height: 100%;
    
    object-fit: cover; /* orezanie obrázku tak, aby vyplnil celý kontajner */
    object-position: center; /* centrum obrázku bude v strede kontajnera */
  }
  /*ROW2*/
  .row2{
    width: 100%;
    padding-top: 5vh;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: #131914;
  }
  .row2 h2{
    text-align: center;
    color: white;
    font-size: 5vh;
    font-family: "Oswald", sans-serif;
    margin: 2vh 0 7vh 0;
  }
  .row2 p{
    color: white;
    font-size: 2vh;
    width: 70%;
    margin: 0 0 0 15%;
    text-align: center;
    line-height: 3vh;
  }
  .row2 button{
    width: 15%;
    height: 7vh;
    font-family: "Oswald", sans-serif;
    margin: 5vh 42.5%;
    background-color: white;
    font-size: 2vh;
  }
  /*ROW3*/
  .row3{
    height: 50vh;
    width: 100%;
    
  }
  .row3 .video-container {
    width:70%; /* šírka kontajnera */
    height:  50vh; /* výška kontajnera */
    overflow: hidden; /* skryje časť videa, ktorá presahuje kontajner */
    position: relative;
    float: left;
}
.row3 .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* orezanie videa tak, aby vyplnilo celý kontajner */
    object-position: center; /* centrum videa bude v strede kontajnera */
}
  .row3 .right{
    float: right;
    width: 30%;
    height: 50vh;
    color: white;
    background-color: #181818;
  }
  .row3 .right h2{
    text-align: center;
    font-size: 3vh;
    font-family: "Oswald", sans-serif;
    margin: 8vh 0 2vh 0;
  }
  .row3 .right p{
    text-align: center;
    font-size: 2vh;
    margin: 8vh 0 2vh 0;
    line-height: 3vh;
    padding: 0 5vw
  }
  .row3 button{
    width: 30%;
    height: 7vh;
    margin: 5vh 35%;
    font-family: "Oswald", sans-serif;
    background-color: white;
    font-size: 2vh;
  }
  /*ROW4*/
  .row4{
    border-top: 1px solid white;
    width: 100%;
    height: 45vh;
    padding-top: 5vh;
    
    background-color: #131914;
  }
  .row4 h2{
    text-align: center;
    color: white;
    font-size: 5vh;
    font-family: "Oswald", sans-serif;
    margin: 2vh 0 7vh 0;
  }
  .row4 p{
    color: white;
    font-size: 2.5vh;
    width: 70%;
    margin: 1vh 0 4vh 15%;
    text-align: center;
    line-height: 4vh;
  }
  /*ROW5*/
  .row5 div{
    width: 100%;
    height: 65vh;
    padding: 27.5vh 0;
    text-align: center  ;
  }
  .row5 div p{
    text-decoration: none;
    color: white;
    font-size: 10vh;
    opacity: 50%;
    font-family: "Oswald", sans-serif;
    margin: -3vh 0 5vh 0;
  }
  .row5 button{
    background-color: white;
    width: 10%;
    font-family: "Oswald", sans-serif;  
    height: 5vh;
    font-size: 2vh;
    opacity: 50%;
    border: none;
  }
  
  .row5 .video-container {
    position: fixed;
    width: 100%;
    z-index: -10;
    height: 160%;
    overflow: hidden;
    top: -30vh;
}
.row5 .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#footer-index{
    border: none;
}

/*O NAS*/
.onas-body .row1{
  height: 40vh;
  background-color: #131914;
  padding: 8vh 10%;
  margin-bottom: 20vh;
}
.onas-body .row1 p{
  margin-bottom: 5vh;
  line-height: 3vmin;
  font-size: 2vmin;
  color: white;
  text-align: center;
}
#row2-onas div{
    padding: 0;
}
#row2-onas div a{
  margin-top: 25vh;
}
.onas-body .row3{
  margin-top: -22vh;
  height: 35vh;
  background-color: #181818;
  padding: 8vh 10%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.onas-body .row3 p{
  margin-bottom: 5vh;
  line-height: 3vmin;
  font-size: 2vmin;
  color: white;
  text-align: center;
}

/*IHRISKO*/
.ihrisko-body .row1{
  background:none;
  margin-bottom: 0;
  height: 25vmax;
  text-align: center;

}
.ihrisko-body .row1 h2{
  color: white;
  line-height: 25vmax;
  font-size: 5vmax;
  font-family: "Oswald", sans-serif;
  background-color:none;
  position: absolute;
  z-index: 10;
  opacity: 90%;
  text-align: center;
  width: 100%;
}
.ihrisko-body .row1 img{
  width: 100%;
  z-index: 5;
  margin-top: 0vh;
  filter: grayscale(10%) brightness(0.8) contrast(100%); /* Kombinovaný filter */
  position: relative;
}
.ihrisko-body .row2{
  border-top: 1px solid white;
}
.ihrisko-body .row2 p{
  line-height: 3vmin;
  margin-bottom: 3vh;
  font-size: 2vmin;
}
.ihrisko-body .row2 button{
  margin-top: 2vh;
}

.ihrisko-body .row3 .map-container{
  height: 50vh;
  background-color: #151715;
  width: 100%;
}
.ihrisko-body .row3 .map-container h2{
  color: white;
  font-family: "Oswald", sans-serif;
  width: 100%;
  text-align: center;
  line-height: 5vmin;
  font-size: 3vmin;
  padding-top: 5vmin;
}
.ihrisko-body .row3 .map-container iframe{
  width: 70%;
  height: 50%;
  margin: 2% 15%;
}

.ihrisko-body .row4{
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid white;
}
.ihrisko-body .row4 img{
  height: 80vh;
  margin: 0 0 5vh 0;
  border: 1px solid white;
}
/* Ked bude aj priblizenie
.ihrisko-body .row4 img{
  height: 80vh;
  float: left;
  border: 1px solid white;
  margin: 0 10% 0 5%;
}*/

/*GALÉRIA*/

.galeria-body{
  background-color: #151715;
}
.gallery-container {
  position: relative;
  width: 80%;
  padding: 8vh 0;
  margin: auto;
  overflow: hidden; /* Skryje časti, ktoré presahujú kontajner */
}

.gallery {
  display: flex;
  transition: transform 0.5s ease;
  align-items: center; /* Vertikálne zarovnávanie */
}

.slide {
  min-width: calc(100% - 20px); /* Pridajte priestor na okraje */
  margin: 0 10px; /* Rozostupy medzi obrázkami */
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Horizontálne zarovnávanie obrázka */
  align-items: center; /* Vertikálne zarovnávanie obrázka */
}

.slide img {
  max-width: 90%; /* Zabráni pretečeniu obrázka mimo kontajnera */
  max-height: 80vh; /* Zabezpečí, že obrázok nebude vyšší ako 80% výšky okna */
  height: auto; /* Zachovanie pomeru strán obrázka */
  object-fit: contain; /* Zachovanie celého obrázka v rámci kontajnera */
  border: 1px solid white;
}

.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  border: none;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border-radius: 3px;
  z-index: 10;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}
/*SPONZORI*/
.sponzori-body{
  width: 100%;
  background-color: #181818;
  padding: 20vh 0;
  border-bottom: 1px solid white;
}
.sponzori-body p{
  font-family: "Oswald", sans-serif;
  color: white;
  width: 80%;
  margin: 0 10%;
  margin-bottom: 15vh;
  text-align: center;
  line-height: 8vmin;
  font-size: 5vmin;
}
.sponzori-body img{
  width: 20%;
  background-color: none;
  margin: 10vh 40%;
  border: none;
}
/*PRAVIDLÁ*/
.pravidla-body{
  background-color: #181818;
  width: 100%;
  color: white;
  padding: 10vh 0 0 0;
  border-bottom: 1px solid white;
}

.pravidla-body h2{
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  line-height: 5vmin;
  font-size: 4vmin;
  margin-bottom: 15vh;
}
.pravidla-body p{
  line-height: 3vmin;
  font-size: 2vmin;
  margin: 8vh 10vw 2vh 10vw;
}

.pravidla-body h3{
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  line-height: 4vmin;
  font-size: 3vmin;
  padding: 0 5vw;
  margin: 15vh 0; 
}

.pravidla-body h4{
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  line-height: 3vmin;
  font-size: 2.5vmin;
  padding: 0 5vw;
  margin: 15vh 0; 
  text-align: center;
}
/*BAZÁR*/
.bazar-body .row1{
 margin: 0;

}
.bazar-body .row1 h2{
  color: white;
  line-height: 90vmin;
  text-align: center;
  font-size: 5vmin;
  font-family: "Oswald", sans-serif;
  width: 100%;
  background-color: #151715;

}

/*MEDIA QUERRY*/
/*MEDIA QUERRY*/
/*MEDIA QUERRY*/
/*MEDIA QUERRY*/
/*MEDIA QUERRY*/
@media (max-aspect-ratio:13/9){
  /*Index*/
  .index-body .left{
    padding: 5vh 3vw;
  }
  .index-body .row1 .left p{
    font-size: 1.9vh;
  }
  .index-body .row3 .right button{
    margin: 5vh 20%;
    width: 60%;
  }
/*O nás*/
.onas-body .row1{
  padding: 5vh 5%;
}
.onas-body .row3{
  padding: 5vh 5%;
}
}
@media (max-aspect-ratio: 11/10) {
  /* Štýly pre veľké displeje */
    /*Menu*/
    .menu{
      height: 60vh;
    }
    .menu .left{
      width: 70%;
      border: none;
      margin: 7vh 15% 3.5vh 15%;
      height: fit-content;
      padding: 0 0 5vh 0;
      text-align: center;
      border-bottom: 1px solid white;
    }
    .menu .left a {
      display: block;
      width: 100%;
      margin: 0;
    }
    .menu .right{
      float: none;
      width: 70%;
      text-align: center;
      margin: 0vh 15%;
      text-align: center;
      height: fit-content;
      
    }
    .menu .right a{
      float: none;
      line-height: 4vh;
      margin: 0.5vh 0;
    }
    /*Footer*/
    .footer{
      height: 131vh;
    }
    .footer div{
      display: block;
      width: 70%;
      margin: 0 15%;
      padding: 8vh 0vh;
      border-bottom: 1px solid white;
    }
    .footer > div:last-child {
      border: none;
  }
    .footer div a{
      font-size: 2.5vh;
      line-height: 5vh;
    }
    .footer img{
      margin: 1vh 0 0 30%;
    }
    /*Domov*/
    /*ROW1*/
.row1{
  border-bottom: 1px solid white;
  height: fit-content;
}
.row1 .left{
  width: 100%;
  font-size: 2.5vh;
  background-color: #181818;
  text-align: center;
  line-height: 5vh;
  padding: 8vh 15%;   
  float: none;
  height: fit-content;;
}
.row1 .left #Nadpis{
  font-family: "Oswald", sans-serif;
  font-size: 4vh;
  line-height: 8vh;
  margin-bottom: 4vh;
}
.row1 .left p{
 margin-bottom: 2vh;
}


.image-container {
    margin-top: 2vh;
    width: 100%; /* šírka kontajnera */
    height: 50vh; /* výška kontajnera */
    overflow: hidden; /* skryje časť obrázku, ktorá presahuje kontajner */
    float: none;
    
}

/*ROW2*/

.row2 p{
  font-size: 2.5vh;
  line-height: 5vh;
}
.row2 button{
  width: 50%;
  margin: 5vh 25%;

}
/*ROW3*/
.row3{
  height: fit-content;
  width: 100%;
  
}
.row3 .video-container {
  width: 100%; /* šírka kontajnera */
  height:  50vh; /* výška kontajnera */
  overflow: hidden; /* skryje časť videa, ktorá presahuje kontajner */
  position: static;
  float: none;
}

.row3 .right{
  float: none;
  width: 100%;
  padding: 10vh 0 0 0;
  margin-top: -8vh;
  height: fit-content;
}
.row3 .right h2{
  font-size: 5vh;
}
.row3 .right p{
  text-align: center;
  font-size: 2.5vh;
  line-height: 5vh;
  padding: 0 10%
}
.row3 button{
  width: 50%;
  height: 7vh;
  margin: 5vh 25% 10vh 25%;
  font-family: "Oswald", sans-serif;
  background-color: white;
  font-size: 2vh;
}
/*ROW4*/
.row4{
  height: fit-content;
  padding: 5vh 0;
}

.row4 p{
  font-size: 2.5vh;
  line-height: 5vh;
}
/*ROW5*/
.row5 div{
  width: 100%;
  height: 65vh;
  padding: 27.5vh 0;
  text-align: center  ;
}
.row5 div p{
  text-decoration: none;
  color: white;
  font-size: 10vh;
  opacity: 50%;
  font-family: "Oswald", sans-serif;
  margin: -3vh 0 5vh 0;
}
.row5 button{
  background-color: white;
  width: 50%;
  font-family: "Oswald", sans-serif;  
  height: 5vh;
  font-size: 2vh;
  opacity: 50%;
  border: none;
}

.row5 .video-container {
  position: fixed;
  width: 100%;
  z-index: -10;
  height: 160%;
  overflow: hidden;
  top: -30vh;
}
.row5 .video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#footer-index{
  border: none;
}
    /*O nás*/
    .onas-body .row1{
      height: fit-content;
      padding: 8vh 10% 0 10%;
    }
    .onas-body .row1 p{
      margin-bottom: 5vh;
      line-height: 8vmin;
      font-size: 4vmin;
    }
    #row2-onas div a button{
      margin-top: 0vh;
      width: 50%;
    }
    .onas-body .row3{
      height: fit-content;
      padding: 8vh 10% 0 10%;
    }
    .onas-body .row3 p{
      line-height: 8vmin;
      font-size: 4vmin;
    }
    /*Ihrisko*/
    .ihrisko-body .row1{
      height: 50vmax;
      position: relative;
      width: 100vw; /* Šírka kontajnera sa rovná šírke zobrazenia */
      overflow: hidden; /* Skryje časť obrázka, ktorá presahuje kontajner */
      display: flex;
      justify-content: center; /* Horizontálne zarovnanie obrázka */
      align-items: center; /* Vertikálne zarovnanie obrázka */
      
    }
    .ihrisko-body .row1 h2{
      line-height: 10vmax;
      font-size: 5vmax;
      padding: 0 20%;
    }
    .ihrisko-body .row1 img{
      height: 55vh;
      width: auto;
    }
    .ihrisko-body .row2{
      border-top: 1px solid white;
    }
    .ihrisko-body .row2 p{
      line-height: 10vmin;
      margin-bottom: 3vh;
      font-size: 5vmin;
    }
    .ihrisko-body .row2 button{
      margin-top: 2vh;
      width: 70%;
      margin: 0vh 15% 5vh 15%;
    }
    .ihrisko-body .row3{
      height: fit-content;
    }
    .ihrisko-body .row3 .map-container{
      height: fit-content;
    }
    .ihrisko-body .row3 .map-container h2{
      font-size: 6vmin;
      padding-top: 10vmin;
    }
    .ihrisko-body .row3 .map-container iframe{
      width: 80%;
      height: 30vh;
      margin: 5vh 10%;
    }
    
    .ihrisko-body .row4{
      height: fit-content;
    }
    .ihrisko-body .row4 img{
      width: 80%;
      height: auto;
      margin: 0;
    }
    /*Galeria*/
    .gallery-container {
      width: 90%;
    }
    .slide img {
      max-width: 70%; /* Zabráni pretečeniu obrázka mimo kontajnera */
      max-height: 80vh; /* Zabezpečí, že obrázok nebude vyšší ako 80% výšky okna */
      height: auto; /* Zachovanie pomeru strán obrázka */
      object-fit: contain; /* Zachovanie celého obrázka v rámci kontajnera */
      border: 1px solid white;
    }
    .prev, .next {
      position: absolute;
      top: 36%;
      height: 30%;
      width: 15%;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 3vh;
      border: none;
      background-color: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      border-radius: 3px;
      z-index: 10;
    }
    /*Sponzori*/
    .sponzori-body p{
      width: 70%;
      margin: 0 15%;
    }
    .sponzori-body img{
      width: 40%;
      margin: 10vh 30%;
    
    }
    /*Pravidla*/
    .pravidla-body h2{
      width: 100%;
      text-align: center;
      font-family: "Oswald", sans-serif;
      line-height: 12vmin;
      font-size: 6vmin;
      margin-bottom: 5vh;
    }
    .pravidla-body p{
      line-height: 5vmin;
      font-size: 2.5vmin;
      margin: 8vh 15% 2vh 15%;
    }
    
    .pravidla-body h3{
      width: 100%;
      text-align: center;
      font-family: "Oswald", sans-serif;
      line-height: 9vmin;
      font-size: 4.5vmin;
      padding: 0 10vw;
      margin: 15vh 0; 
    }
    
    .pravidla-body h4{
      width: 100%;
      text-align: center;
      font-family: "Oswald", sans-serif;
      line-height: 8vmin;
      font-size: 4vmin;
      padding: 0 10vw;
      margin: 15vh 0; 
      text-align: center;
    }
}