:root {
  --color: white;
  --red-light: #e65c7b;
  --yellow: #ffce3e;
  --grey: #454545;
  --black: #333;
  --green: #68b250;
  --dark-blue: #3e4060;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.hero-section {
  height: 700px;
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('/media/20231209_144118.jpg');
  background-position: 0 0, 50% 40%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  justify-content: center;
  align-items: center;
  padding-top: 8rem;
  padding-left: 6rem;
  padding-right: 6rem;
  display: flex;
}

.menu {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  justify-content: space-between;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 6rem;
  display: flex;
  position: fixed;
}

.hero-section__div.hero-section__div--vertical {
  align-items: center;
  margin-top: 0;
}

.div__titulek {
  color: var(--color);
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  font-size: 72px;
  line-height: 120%;
}

.div__podtitulek {
  color: var(--color);
  text-align: center;
  letter-spacing: 1px;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.hero-section__button.hero-section__button-rainbow {
  background-image: linear-gradient(to right, var(--red-light), var(--yellow));
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 4px;
  margin-top: 60px;
  padding: 20px 35px;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.brand {
  align-items: center;
  margin-left: 0;
  margin-right: auto;
  display: flex;
}

.section-regular {
  border-bottom: 0px none var(--grey);
  flex-direction: column;
  align-items: center;
  padding: 4rem 6rem 2rem;
  display: flex;
}

.section-regular.section-regular--yellow {
  height: auto;
  background-color: var(--yellow);
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-regular.section-regular--pading-bot {
  padding-bottom: 6rem;
}

.section-regular__nadpis {
  text-align: center;
  letter-spacing: -1px;
  padding-bottom: 3rem;
  font-family: Poppins, sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 110%;
}

.section-regular__nadpis.section-regular__nadpis--normal {
  padding-bottom: 3rem;
  font-weight: 500;
}

.section-regular__nadpis.section-regular__nadpis--gap {
  padding-bottom: 3rem;
}

.section-regular__div {
  flex-direction: row;
  justify-content: center;
}

.section-regular__div.section-regular__div--gap {
  grid-column-gap: 35px;
  grid-row-gap: 35px;
}

.section-regular__div.section-regular__div--features {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.section-regular__div.section-regular__div--gap-small {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  margin-bottom: 3rem;
}

.div__image-slider {
  width: 65%;
  height: 550px;
}

.div__flexbox.div__flexbox--vertical {
  width: 35%;
  height: 550px;
}

.slide {
  background-image: url('/media/vu-anh-ExOmPidaHvY-unsplash.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.icon, .icon-2 {
  color: var(--yellow);
  font-size: 48px;
  font-weight: 700;
}

.image-slider__slide {
  background-image: url('/media/vu-anh-ExOmPidaHvY-unsplash.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.image-slider__slide.image-slider__slide-1 {
  background-image: url('/media/20231209_144143.jpg');
}

.image-slider__slide2 {
  background-image: url('/media/chata-slider.png');
  background-position: 50%;
  background-size: cover;
}

.image-slider__slide3 {
  background-image: url('/media/chata-slider-koupelna.png');
  background-position: 0 0;
  background-size: cover;
}

.flexbox__div--vertical {
  width: 100%;
  height: 50%;
  justify-content: center;
  padding: 15px 15px 15px 20px;
}

.div--vertical__text {
  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 160%;
  font-weight: 500;
}

.div--vertical__nadpis-ikona {
  width: 100%;
  align-items: center;
  padding-top: 0;
  padding-bottom: 10px;
}

.nadpis-ikona__nadpis {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 8px;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 120%;
}

.div__flebox-vertical {
  width: 33%;
  height: 230px;
  padding: 20px 15px 15px 20px;
}

.div__flebox-vertical.div__flexbox-vertical--35 {
  width: 35%;
  height: 230px;
}

.div__flebox-vertical.div__flexbox-vertical--features {
  height: auto;
  padding: 0 0 10px;
}

.div__flebox-vertical.div__flexbox-vertical--shadow {
  height: 235px;
  border-radius: 15px;
  align-items: center;
  padding: 15px 15px 10px;
  box-shadow: 0 10px 26px 2px rgba(0, 0, 0, .25);
}

.div__tlacitko.div__tlacitko--pruhledne {
  color: var(--black);
  background-color: rgba(56, 152, 236, 0);
  border: 2px solid #000;
  border-radius: 50px;
  align-items: center;
  padding: 10px 20px;
  text-decoration: none;
  display: flex;
}

.tlacitko__text {
  padding-left: 5px;
  font-family: Raleway, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}

.flexbox-vertical__image {
  width: 100%;
  height: 250px;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 0 0;
  background-size: auto;
}

.flexbox-vertical__image.flexbox-vertical__image-1 {
  background-image: url('/media/chata-obytna.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.flexbox-vertical__image.flexbox-vertical__image2 {
  background-image: url('/media/pokojprizemi.png');
  background-position: 0 100%;
  background-size: cover;
}

.flexbox-vertical__image.flexbox-vertical__image3 {
  background-image: url('/media/chata-pokoj2.png');
  background-size: cover;
}

.flexbox-vertical__image.flexbox-vertical__image4 {
  background-image: url('/media/chata-slider.png');
  background-size: cover;
}

.flexbox-vertical__image.flexbox-vertical__image5 {
  background-image: url('/media/20231209_144143.jpg');
  background-size: cover;
}

.flexbox-vertical__image.flexbox-vertical__image6 {
  background-image: url('/media/chata-obytna2.png');
  background-position: 0%;
  background-size: cover;
}

.div-block {
  width: 100%;
  height: 150px;
}

.flexbox-vertical__title {
  padding-left: 10px;
  padding-right: 10px;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  line-height: 120%;
}

.flexbox-vertical__text {
  padding-left: 10px;
  padding-right: 10px;
  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 160%;
  font-weight: 500;
}

.flexbox-vertical__text.flexbox-vertical__text--center {
  text-align: center;
}

.flexbox-vertical__icons {
  margin-bottom: 30px;
}

.section-regular__nadpis3 {
  width: 80%;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-family: Poppins, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 120%;
}

.section-regular__nadpis3.section-regular__nadpis3--gap {
  padding-bottom: 1rem;
}

.table-wrap__table-header {
  width: 100%;
}

.table-header__cell {
  width: 23%;
  background-color: var(--green);
  justify-content: center;
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.table-header__cell.table-header__cell--longer {
  width: 31%;
}

.table-header__nadpis {
  color: var(--color);
  letter-spacing: .5px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
}

.table-wrap__table-regular {
  width: 100%;
  border-bottom: 1px solid var(--grey);
}

.table-regular__cell {
  width: 25%;
  border: 1px #000;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
}

.table-regular__cell.table__cell-left {
  width: 23%;
  border-left-style: solid;
  border-left-color: var(--grey);
}

.table-regular__cell.table__cell-right {
  border-right-style: solid;
  border-right-color: var(--grey);
}

.table-regular__cell.table__cell-right.table__cell--long {
  width: 31%;
}

.table-regular__cell.table__cell-both {
  border-right-style: solid;
  border-right-color: var(--grey);
  border-left-style: solid;
  border-left-color: var(--grey);
}

.table-regular__text {
  font-family: Open Sans, sans-serif;
  font-size: 16px;
}

.table-regular__text.table-regular__text--bold {
  font-size: 17px;
  font-weight: 700;
}

.section-yellow__nadpis {
  color: var(--color);
  letter-spacing: -1px;
  margin-top: 0;
  padding-bottom: 4rem;
  font-family: Poppins, sans-serif;
  font-size: 48px;
  line-height: 110%;
}

.section-yellow__div {
  width: 100%;
  grid-column-gap: 35px;
  grid-row-gap: 35px;
}

.div__calendar, .div__reservation-form {
  width: 33%;
}

.form {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
}

.select-field {
  height: 58px;
  background-color: var(--color);
  color: #000;
  border-radius: 6px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-top: 15px;
  padding-bottom: 0;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 500;
  display: block;
}

.select-field-2 {
  background-color: var(--color);
  border-radius: 6px;
}

.submit-button {
  background-color: var(--green);
  border-radius: 6px;
}

.reservation-form__submit-button {
  width: 80%;
  background-color: var(--green);
  text-transform: capitalize;
  border-radius: 6px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.reservation-form__input {
  height: 58px;
  background-color: var(--color);
  color: var(--black);
  border-radius: 6px;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.footer {
  background-color: var(--dark-blue);
  padding: 2rem 6rem;
}

.section-regular__text {
  font-family: Poppins, sans-serif;
  font-size: 18px;
  line-height: 160%;
}

.footer__div {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.footer__div--vertical {
  width: 26%;
  align-items: flex-start;
}

.footer__div--vertical.footer__div--vertical--smaller {
  width: 20%;
}

.footer__nadpis {
  color: var(--color);
  padding-bottom: 10px;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 120%;
}

.footer__div-text-icon {
  width: 100%;
  align-items: center;
  padding-bottom: 10px;
}

.footer__text {
  color: var(--color);
  padding-bottom: 0;
  padding-left: 5px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 160%;
}

.text-block {
  color: var(--color);
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 160%;
}

.text-span {
  font-weight: 700;
}

.links__button {
  color: var(--color);
  text-transform: uppercase;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.link-block {
  display: flex;
}

.menu__link {
  text-decoration: none;
  display: flex;
}

.link__text {
  color: var(--color);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.flex-block {
  align-items: center;
  margin-left: auto;
}

.div__calendar-wrap {
  width: 66%;
  justify-content: space-around;
  display: flex;
}

.calendar-wrap__calendar {
  height: 250px;
}

.div__calendar-copy {
  width: 33%;
}

.text-span-2, .text-span-3, .text-span-4, .text-span-5, .text-span-6, .text-span-7, .text-span-8, .text-span-9, .text-span-10, .text-span-11 {
  font-weight: 600;
}

.flex-block-2, .section-regular__table-wrap {
  width: 80%;
}

.section-regular__list {
  width: 100%;
  padding-left: 40px;
  font-family: Poppins, sans-serif;
  font-size: 18px;
}

.section-regular__list.section-regular__list--small {
  padding-left: 60px;
  list-style-type: square;
}

.list__list-item {
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 160%;
  list-style-type: disc;
}

.list__list-item.list__list-item--small-gap {
  padding-top: 15px;
  padding-bottom: 15px;
}

.list-item-2, .list-item-3 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.section-regular__heading-small {
  width: 100%;
  text-align: left;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

@media screen and (min-width: 1280px) {
  .hero-section, .menu {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .section-regular {
    padding-bottom: 4rem;
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .section-regular.section-regular--yellow {
    height: auto;
    justify-content: center;
    padding-bottom: 8rem;
  }

  .section-regular.section-regular--pading-bot {
    padding-bottom: 8rem;
  }

  .section-regular__div.section-regular__div--features {
    padding-bottom: 40px;
  }

  .section-regular__div.section-regular__div--gap-small {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .section-regular__div.section-regular__div--height-tablet {
    padding-top: 20px;
  }

  .div__flebox-vertical.div__flexbox-vertical--shadow {
    height: 210px;
  }

  .section-regular__nadpis3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-yellow__nadpis {
    padding-bottom: 6rem;
  }

  .reservation-form__submit-button {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .footer {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media screen and (max-width: 991px) {
  .hero-section {
    height: 750px;
    padding-top: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .menu {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .section-regular {
    border-bottom-style: none;
    border-bottom-width: 0;
    padding-bottom: 4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .section-regular.section-regular--yellow {
    padding-top: 6rem;
  }

  .section-regular__div {
    height: auto;
  }

  .section-regular__div.section-regular__div--horizontal {
    height: auto;
    flex-direction: column;
  }

  .section-regular__div.section-regular__div--gap {
    width: 60%;
    justify-content: space-between;
  }

  .section-regular__div.section-regular__div--height-tablet {
    height: 300px;
  }

  .div__image-slider {
    width: 100%;
  }

  .div__flexbox.div__flexbox--vertical {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding-top: 1rem;
  }

  .div__flebox-vertical.div__flexbox-vertical--shadow {
    height: 260px;
  }

  .section-regular__nadpis3, .table-wrap__table-header, .table-wrap__table-regular {
    width: 100%;
  }

  .section-yellow__div {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .reservation-form__submit-button {
    width: 100%;
  }

  .footer {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .footer__div {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer__div--vertical {
    width: 45%;
  }

  .footer__text {
    padding-left: 7px;
  }

  .menu__links {
    background-color: var(--grey);
  }

  .icon-3 {
    color: var(--color);
    font-family: Poppins, sans-serif;
    font-size: 36px;
  }

  .div__calendar-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .calendar-wrap__calendar {
    height: auto;
  }

  .section-regular__table-wrap {
    width: 100%;
  }

  .menu-button, .menu-button.w--open {
    background-color: rgba(200, 200, 200, 0);
  }
}

@media screen and (max-width: 767px) {
  .hero-section, .menu {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .section-regular {
    padding-top: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .section-regular.section-regular--yellow {
    height: auto;
  }

  .section-regular__div.section-regular__div--features, .section-regular__div.section-regular__div--gap-small {
    flex-direction: column;
  }

  .section-regular__div.section-regular__div--height-tablet {
    height: auto;
    flex-direction: column;
  }

  .div__flexbox.div__flexbox--vertical {
    flex-direction: column;
  }

  .div__flebox-vertical, .div__flebox-vertical.div__flexbox-vertical--35 {
    width: 100%;
    height: auto;
  }

  .div__flebox-vertical.div__flexbox-vertical--shadow {
    height: auto;
  }

  .div__tlacitko.div__tlacitko--pruhledne {
    justify-content: center;
  }

  .table-wrap__table-header {
    width: 536px;
    background-color: var(--green);
  }

  .table-header__cell {
    width: 24%;
  }

  .table-header__cell.table-header__cell--longer {
    width: 29%;
  }

  .table-wrap__table-regular {
    width: 536px;
  }

  .table-regular__cell.table__cell-left {
    width: 24%;
    height: 100%;
  }

  .table-regular__cell.table__cell-right.table__cell--long {
    width: 29%;
    height: 100%;
  }

  .table-regular__cell.table__cell-both {
    height: 100%;
  }

  .table-regular__text {
    white-space: nowrap;
    word-break: keep-all;
  }

  .section-yellow__nadpis {
    text-align: center;
  }

  .section-yellow__div {
    flex-flow: column;
    align-content: center;
    align-items: center;
  }

  .div__calendar, .div__reservation-form {
    width: 70%;
  }

  .reservation-form__submit-button {
    width: 80%;
  }

  .footer__div {
    flex-direction: column;
  }

  .footer__div--vertical {
    width: 100%;
  }

  .div__calendar-copy {
    width: 70%;
  }

  .section-regular__table-wrap {
    flex-wrap: nowrap;
    align-content: flex-start;
    overflow: auto;
  }
}

@media screen and (max-width: 479px) {
  .hero-section {
    height: 650px;
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .menu {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .div__titulek {
    font-size: 48px;
  }

  .div__podtitulek {
    font-size: 18px;
  }

  .section-regular {
    border: 1px #000;
    border-bottom-width: 0;
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-regular__nadpis {
    font-size: 38px;
  }

  .section-regular__div.section-regular__div--gap {
    flex-direction: column;
    align-items: center;
  }

  .div--vertical__text {
    font-size: 16px;
  }

  .nadpis-ikona__nadpis, .flexbox-vertical__title {
    font-size: 20px;
  }

  .flexbox-vertical__text {
    font-size: 16px;
  }

  .div__reservation-form, .reservation-form__submit-button {
    width: 90%;
  }

  .footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-regular__text {
    font-size: 16px;
  }

  .footer__div {
    flex-direction: column;
  }

  .footer__div--vertical {
    width: 100%;
  }

  .text-block {
    color: var(--color);
  }

  .flex-block {
    display: none;
  }

  .icon-3 {
    font-size: 34px;
  }

  .div__calendar-wrap {
    width: 90%;
    flex-direction: column;
    align-items: center;
  }
}

@keyframes fadeInBackground {
  0% {
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
  }
  10% {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  }
  20% {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  }
  30% {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  }
  40% {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  }
  50% {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  }
  60% {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  }
  70% {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  }
  100% {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
  }
}


.menu-scrolled {
  animation: fadeInBackground 200ms ease-in-out forwards;
  /* Další styly pro stav 'scrolled' */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))!important;
}