@font-face {
  font-family: HelveticaNeueThin;
  src: url("font/HelveticaNeueThin.otf");
}

body {
  background-color: lightgray;
  font-family: HelveticaNeueThin;
}

   @keyframes slideInFromShadow {
     0% {
          opacity: 0;
        }
   100% {
          opacity: 1;
        }
   }
   
   body {
     margin: 0;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
   }

   html { box-sizing: border-box; height: 100%; } *, *::before, *::after { box-sizing: inherit; }
   
   @keyframes slidein {
     from {
        opacity: 0;
        height: 0;
     }

     to {
        opacity: 1;
        height: 350px;
     }
   }

   @keyframes slidein4 {
     from {
        opacity: 0;
        width: 0;
     }

     to {
        opacity: 1;
        width: 220px;
     }
   }

   @keyframes slidein2 {
     from {
        opacity: 0;
        height: 0;
     }

     to {
        opacity: 1;
        height: 90px;
     }
   }
   
    #main_menu {
     position: fixed;
     z-index: 1100;
     background-color: white;
     top: 0;
     left: 0; 
     right: 0;
     height: 64px;
     text-align: center; 
    }
    #menu_roll {
     animation-duration: 0.5s;
     animation-name: slidein;
     position: fixed;
     z-index: 5000;
     top: 64px;
     left: 0;
     width: 100%;
     height: 300px;
     max-height: 300px;
     padding: 10px;
     font-family: HelveticaNeueThin;
     font-size: 20px;
     background-color: white;
     text-align: center;
     text-decoration: none;
     box-shadow: 0 0 2px gray;
    }
    
    #search_roll {
     animation-duration: 0.5s;
     animation-name: slidein;    
     position: fixed;
     z-index: 5000;
     top: 64px;
     left: 0;
     width: 100%;
     height: 70px;
     max-height: 70px;
     font-size: 20px;
     padding: 10px;
     font-family: HelveticaNeueThin;
     background-color: white;
     text-align: center;
     text-decoration: none;
     box-shadow: 0 0 2px gray;     
    }
    
    #menu_butt {
     position: fixed;
     width: 40px;
     height: 40px;
     top: 12px;
     left: 12px;
     border-radius: 5px;
     cursor: pointer;
    }
    .menu_dill {
     text-align: center;
     position: relative;
     color: black;
     text-decoration: none;
     font-size: 22px;
     font-family: HelveticaNeueThin;
    }
    div#sipka_nahoru {
     position: fixed;
     bottom: 30px; 
     right: 30px;
     background-color: gray;
     opacity: 0.5;
     display: none;
    }
    .contact_dil {
     position: relative;
     left: 0;
     right: 0;
     margin-left: 12%;
     margin-right: 12%;
     text-align: center;
     margin-top: 25px;
     height: 150px;
     background-color: white;
     border-radius: 7%;
    }
    .aktualit, .kontakt {
     font-size: 18px;
     font-family: HelveticaNeueThin;
    }
    #menu_search {
     position: fixed;
     width: 40px;
     height: 40px;
     top: 22px;
     left: 54px;
     border-radius: 5px;
     cursor: pointer;     
    }
    #scroll_label_return {
     cursor: pointer;
     position: fixed;  
     width: 40px;
     height: 40px;
     top: 22px;
     left: 12px;
     border-radius: 5px;
    }

    .swiper-container {
      width: 100%;
      height: 500px;
      overflow: hidden;
      position: relative;
    }

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background-color: #f0f0f0;
    }

    .swiper-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper-text {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-family: 'HelveticaNeueThin', sans-serif;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        width: 90%;
        max-width: 350px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        z-index: 500;
    }

    .swiper-pagination {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-pagination-bullet {
      background-color: white;
      opacity: 0.8;
      width: 10px;
      height: 10px;
      box-shadow: 0 0 5px black;
      margin: 0 5px;
      border-radius: 0px;
      transition: background-color 0.3s ease;
    }

    .swiper-pagination-bullet-active {
      background-color: orange;
      opacity: 1;
    }

    @media (min-width: 768px) {
        .swiper-container {
            height: 60vh;
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: white;
      text-shadow: 0 0 10px rgba(0,0,0,0.8);
      font-size: 2rem;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    #main_layout {
        width: 100%;
        flex-grow: 1;
        position: relative;
        padding-top: 64px;
    }

    #main_1 {
        position: relative;
        width: 100%;
        text-align: center;
        z-index: 100;
    }
    #main_2 {
        position: relative
        width: 100%;
        min-height: 600px;
        background-color: white;
        text-align: center;
        margin-top: 0;
    }
    #main_3 {
        position: relative;
        width: 100%;
        min-height: 350px;
        text-align: center;
        z-index: 100;
    }
    #main_4 {
        position: relative;
        width: 100%;
        min-height: 400px;
        background-color: #B2BEB5;
        display: block;
    }
    #main_5 {
        position: relative;
        width: 100%;
        min-height: 350px;
        text-align: center;
        z-index: 100;
        background-color: white;
    }
    .dovolena_div {
        position: relative;
        width: 100%;
        min-height: 480px;
        background-color: white;
        padding: 10px;
        text-align: center;
    }
    .krivka {
        position: relative;
        width: 250px;
        height: 1px;
        background-color: black;
        margin: 15px auto;
    }
    .kontakt_div {
        position: relative;
        width: 100%;
        min-height: 250px;
        background-color: white;
        padding: 10px;
        text-align: center;
    }
    #main_6 {
        position: relative;
        width: 100%;
        min-height: 400px;
        text-align: center;
        background-color: white;
        box-shadow: 0 0 2px gray;
    }