@charset "UTF-8";

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

    html {
      /* efektnejšie skrolovanie po stránke */
      scroll-behavior: smooth;
    }

    /*Alebo pomocou jQuery? Vraj je to 100% funkčné na každom prehliadači potom...*/
/*
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>*/

    /* toto zabezpečí aby bol plávajúci blok správne ukončený */
 .clearfix::after {
  content: "";
  clear: both;
  display: table;
}

    h1 {
      text-align: center;
      font-family: "Times New Roman", Times, serif;
      font-size: 1.6rem;
    }
    .popis {
      text-align: center;
    }

    p {
      font-size: 1rem;
    }

    /* Slideshow container */
    .slideshow-container {
      max-width: 1150px;
      /*toto určuje šírku stránky*/
      position: relative;
      margin: 0 auto;
      padding: 0;
      font-family: Verdana, sans-serif;
    }


    .mySlides img {
      /*veľký obrázok*/
      /*vertical-align: middle;*/
      display: block;
      max-width: 100%;
      max-height: 70vh;
      margin: 0px auto;
    }

    /* na začiatok nezobraz žiadny veľký obrázok (js ten prvý vybaví) */
    .mySlides {
      display: none;
    }

    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      margin-left: 0px;
      margin-right: 0px;
      background-color: rgba(0, 0, 0, 0.3);
      color: white;
      font-weight: bold;
      font-size: 25px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      z-index: 2;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0px;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    /* Caption text - momentálne nevyužité...*/ 
    .text {
      /*color: #f2f2f2;*/
      color: rgb(251, 255, 0);
      font-size: 1.5rem; 
      text-align: center;
      background-color: black;
      opacity: 0.6;
      margin-top: 0.5rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }


    /* Number text (1/3 etc) */
    .numbertext {
      color: rgb(251, 255, 0);/*#f2f2f2;*/
      font-size: 18px;
      padding: 8px 5px;
      position: absolute;
      top: 0;
      left: 45%;
      background-color: black;
      opacity: 0.6;
    }

    /* The dots/bullets/indicators */
    .dots {
      text-align: center;
    }

    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb; /*v podstate farba guličky...*/
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active,
    .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }

    @keyframes fade {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }

    /*malá galéria dolu*/
    div .gallery {
      /*4 stĺpce vojdú...*/
      position: relative;
      margin: 1%;
      padding: 1%;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 2px #ccc;
      float: left;
      width: 23%;
      /*1150/4 a -1 marginy!*/
      height: 160px; /*jednotná výška*/
      transition: transform .2s;
    }

    div.gallery:hover {
      /*transition: background-color .2s;*/
      transition: .2s;
      background-color: #7171711a;
      transform: scale(1.05);
    }

    div .gallery img {
      /* obrázky v malej galérii - na stred*/
      max-width: 95%;
      max-height: 95%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /*div .gallery img:hover {
      
    }*/



    /*responzivita - hlavne zväčšuj malé obrázky*/
    @media only screen and (max-width: 991px) {
      div.gallery {
        width: 31%;
      } 
      }

      @media only screen and (max-width: 768px) {
      div.gallery {
        width: 48%;
      } 
      }

      @media only screen and (max-width: 500px) {
      div.gallery {
        float: none;
        width: 80%; /* na celú obrazovku nie, bolo to moc */
        height: 200px;
        margin: 2% auto;}
      .prev,
      .next,
      .text {
        font-size: 1.125rem;
      }

      .numbertext {
        font-size: 1rem
      }
      
      }