.responsive {
  width: 100% !important;
  height: auto !important; }

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

body {
  background-color: #FFFFFF;
  font-family: "Montserrat", serif;
  color: #260101; }

b {
  font-family: "Montserrat", serif;
  font-weight: 600; }

h1 {
  font-size: 60px; }

.section-title {
  font-size: 42px;
  font-weight: 500;
  padding-bottom: 30px; }

.py-20 {
  padding: 20px 0px; }

.py-40 {
  padding: 40px 0px; }

.py-80 {
  padding: 80px 0px; }

.pt-30 {
  padding-top: 30px; }

.pb-30 {
  padding-bottom: 30px; }

.text-18 {
  font-size: 18px;
  line-height: 21px; }

nav {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1; }
  nav .topnav {
    text-align: right; }
    nav .topnav a {
      float: left;
      display: block;
      color: white;
      padding: 24px 16px 6px 16px;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500; }
    nav .topnav .hover-underline-animation {
      display: inline-block;
      position: relative; }
      nav .topnav .hover-underline-animation::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #ece7e2;
        transition: transform 0.25s ease-out; }
      nav .topnav .hover-underline-animation:hover::after {
        transform: scaleX(1); }
      nav .topnav .hover-underline-animation .center::after {
        transform-origin: bottom center; }
      nav .topnav .hover-underline-animation .center:hover::after {
        transform-origin: bottom center; }
    nav .topnav .icon {
      display: none; }
  nav .logo-img {
    width: 100px;
    text-align: left; }
  @media screen and (max-width: 600px) {
    nav .topnav a:not(:first-child) {
      display: none; }
    nav .topnav a.icon {
      float: right;
      display: block; }
    nav .topnav.responsive {
      position: relative;
      background-color: #735448; }
      nav .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0; }
      nav .topnav.responsive a {
        float: none;
        display: block;
        text-align: left; } }

#header {
  height: 80vh;
  background: url("img/header.png") center/cover no-repeat;
  color: #fff;
  position: relative; }
  #header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); }
  #header .container {
    margin: 0 auto;
    justify-content: left;
    height: 100%;
    position: relative;
    z-index: 1; }
    #header .container h1 {
      color: white;
      font-weight: 300;
      line-height: 60px;
      padding-top: 4rem;
      padding-bottom: 3rem; }
    #header .container p {
      font-size: 1.5rem;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-bottom: 2.5rem; }
    #header .container .logo-img {
      padding: 1rem 0;
      width: 150px; }
    #header .container .button:hover {
      color: #260101; }
    #header .container .button a {
      text-decoration: none;
      color: #fff; }
      #header .container .button a:hover {
        background: #e7ded3;
        border: 1px solid #e7ded3;
        color: #260101; }
    #header .container .outlined {
      font-size: 1.5rem;
      color: white;
      text-align: center;
      padding: 1rem;
      background: transparent;
      border: 1px solid white;
      cursor: pointer;
      width: 150px; }
      #header .container .outlined:hover {
        background: #e7ded3;
        border: 1px solid #e7ded3;
        color: #260101; }

#intro .intro-text {
  font-size: 20px;
  font-weight: 300; }
  #intro .intro-text .title {
    font-size: 28px;
    font-weight: 500;
    padding-bottom: 18px; }

#about {
  background-color: #e7ded3;
  padding-bottom: 80px; }
  #about .content img {
    width: 36px; }
  #about .content .list {
    padding-bottom: 36px; }
    #about .content .list .item {
      padding-bottom: 16px;
      display: grid;
      grid-template-columns: 36px 1fr;
      align-items: center; }
      #about .content .list .item .text {
        padding-left: 12px; }
  #about .content .title {
    font-size: 28px;
    padding-bottom: 18px;
    font-weight: 500; }
  #about .content .text {
    font-size: 20px;
    font-weight: 300; }

#gallery {
  padding-top: 80px;
  background-color: #e7ded3; }
  #gallery .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; }
    #gallery .grid .blur-load {
      background-size: cover;
      background-position: center; }
      #gallery .grid .blur-load::before {
        content: "";
        position: absolute;
        inset: 0;
        animation: pulse 2.5s infinite;
        background-color: rgba 255, 255, 255, 0.1; }
    #gallery .grid .blur-load.loaded::before {
      content: none; }

@keyframes pulse {
  0% {
    background-color: rgba 255, 255, 255, 0; }
  50% {
    background-color: rgba 255, 255, 255, 0.1; }
  100% {
    background-color: rgba 255, 255, 255, 0; } }
    #gallery .grid .blur-load.loaded > img {
      opacity: 1; }
    #gallery .grid .blur-load > img {
      opacity: 0;
      transition: opacity 200ms ease-in; }
    #gallery .grid #img0-small-load {
      background-image: url("img/kint/img0-small.jpg"); }
    #gallery .grid #img1-small-load {
      background-image: url("img/kint/img1-small.jpg"); }
    #gallery .grid #img2-small-load {
      background-image: url("img/kint/img2-small.jpg"); }
    #gallery .grid #img3-small-load {
      background-image: url("img/kint/img3-small.jpg"); }
    #gallery .grid #img4-small-load {
      background-image: url("img/kint/img4-small.jpg"); }
    #gallery .grid #img6-small-load {
      background-image: url("img/kint/img6-small.jpg"); }
    #gallery .grid #pingpong-small-load {
      background-image: url("img/kint/pingpong-small.jpg"); }
    #gallery .grid #szoba1-small-load {
      background-image: url("img/szobak/szoba1-small.jpg"); }
    #gallery .grid #nappali1-small-load {
      background-image: url("img/szobak/nappali1-small.jpg"); }
    #gallery .grid #szoba2-small-load {
      background-image: url("img/szobak/szoba2-small.jpg"); }
    #gallery .grid #szoba3-small-load {
      background-image: url("img/szobak/szoba3-small.jpg"); }
    #gallery .grid #szoba4-small-load {
      background-image: url("img/szobak/szoba4-small.jpg"); }
    #gallery .grid #szoba5-small-load {
      background-image: url("img/szobak/szoba5-small.jpg"); }
    #gallery .grid #szoba6-small-load {
      background-image: url("img/szobak/szoba6-small.jpg"); }
    #gallery .grid #kozoster1-small-load {
      background-image: url("img/szobak/kozoster1-small.jpg"); }
    #gallery .grid #kozoster2-small-load {
      background-image: url("img/szobak/kozoster2-small.jpg"); }
    #gallery .grid #furdo1-small-load {
      background-image: url("img/szobak/furdo1-small.jpg"); }
    #gallery .grid #furdo2-small-load {
      background-image: url("img/szobak/furdo2-small.jpg"); }
    #gallery .grid #dezsa-small-load {
      background-image: url("img/kint/dezsa-small.jpg"); }
    #gallery .grid img {
      width: 100%;
      display: block;
      aspect-ration: 1 / 1;
      object-position: center;
      object-fit: cover; }

#prices .content img {
  width: 36px; }

#prices .content .list {
  padding-bottom: 36px; }
  #prices .content .list .item {
    padding-bottom: 16px;
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center; }
    #prices .content .list .item .text {
      padding-left: 12px; }

#contact {
  background-color: #e7ded3;
  color: #260101; }
  #contact .text-18 {
    line-height: 2rem; }
  #contact .subtext {
    font-size: 22px;
    font-weight: 500;
    padding-bottom: 20px; }
  #contact .maps {
    padding-top: 30px; }

#booking .container-form {
  background-color: #e7ded3;
  padding: 24px; }
  #booking .container-form #submitMsg {
    height: 100%; }
    #booking .container-form #submitMsg .thankyou-msg {
      font-size: 20px;
      position: relative;
      top: 40%; }
  #booking .container-form .hidden {
    display: none; }
  #booking .container-form .calendar-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    padding: 20px 50px;
    position: relative;
    z-index: 3; }
    #booking .container-form .calendar-container .error {
      color: #864a4f;
      text-align: left;
      margin-top: 16px; }
  #booking .container-form .calendar-header {
    font-size: 18px;
    margin-bottom: 20px; }
  #booking .container-form .calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; }
    #booking .container-form .calendar-nav button {
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      border-radius: 50%;
      background-color: #e7ded3; }
      #booking .container-form .calendar-nav button:hover {
        background-color: #735448; }
      #booking .container-form .calendar-nav button span {
        width: 100%;
        height: 100%;
        font-size: 20px;
        color: #260101;
        font-weight: bolder; }
  #booking .container-form .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 10px; }
  #booking .container-form .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px; }
    #booking .container-form .calendar-days .dayOfWeek {
      margin: 0 0 10px 0; }
      #booking .container-form .calendar-days .dayOfWeek span {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
        user-select: none; }
  #booking .container-form .day.disabled {
    pointer-events: none;
    opacity: 0.5; }
  #booking .container-form .day {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 5px;
    background-color: #ece7e2;
    cursor: pointer;
    overflow: hidden; }
    #booking .container-form .day span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      z-index: 2;
      pointer-events: none;
      user-select: none; }
  #booking .container-form .day.afternoon::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
    background-color: #864a4f;
    z-index: 1; }
  #booking .container-form .day.morning::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    background-color: #864a4f;
    z-index: 1; }
  #booking .container-form .day.full {
    background-color: #864a4f;
    z-index: 0; }
  #booking .container-form button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer; }
    #booking .container-form button:disabled {
      background-color: #ccc;
      cursor: not-allowed; }
  #booking .container-form .btn {
    background: #735448;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1rem; }
    #booking .container-form .btn:hover {
      background: #e7ded3;
      color: #260101; }
  #booking .container-form .date-price {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; }

.form-content {
  padding: 48px 48px 30px 48px;
  background-color: #fff; }
  @media only screen and (max-width: 768px) {
    .form-content {
      padding: 0 24px 24px 24px; } }

.price-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px; }

.booking-form label {
  display: block;
  margin-bottom: 5px; }

.booking-form input {
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px; }

.submit-btn {
  background: #735448;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  width: 50%;
  font-size: 1rem; }
  .submit-btn:hover {
    background: #e7ded3;
    color: #260101; }

#footer {
  background-color: #735448;
  color: #fff;
  font-size: 14px; }

/*# sourceMappingURL=styles.css.map */