@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
  /* Set by Compass from Design Wizard: */
  --branding-default: #0a6e46;
  --branding-hovered: #efcb78;
  --branding-pressed: #efcb78;

  /* Aliases (derive from above): */
  --brand-color-rgb: 10, 110, 70;
  --brand-color: #0a6e46;
  --brand-color-2: #efcb78;
  --brand-color-3: #00492c;
  --brand-color-4: #8c733a;
  --brand-color-5: #f2ecdd;
  --brand-hovered: #efcb78;
  --brand-pressed: var(--branding-pressed);

  /* Customisable text/bg variants: */
  --text-over-branding: #FFFFFF;
  --brand-color-text: #413210;
  --brand-color-background: #00492c;
  --brand-color-border: #413210;

  /* Adjust spacing here: */
  --spacing-1x: 10px;

  /* Adjust font families here: */
  --font-family-1: "Cormorant Garamond", serif;
  --font-family-2: "Nunito Sans", sans-serif;
  --footer-font: "Nunito Sans", sans-serif;
  --font-stack-sans-serif: "Nunito Sans", sans-serif;
  
  /* Adjust paragraph size: */
  --text-size-paragraph: 16px;
  --line-height-paragraph: 24px;

  /* Adjust heading size: */
  --text-size-h3: 26px;
  --line-height-h3: 32px;
  --text-size-h4: 24px;
  --line-height-h4: 28px;
  --text-size-h5: 20px;
  --line-height-h5: 24px;

  /* Border radius */
  --border-radius-1x: 0;

  /* Make primary images wider (cinematic): */
  --img-ratio-primary: 21 / 9;
  --img-ratio-room-primary: 21 / 9;
  --img-ratio-rate-primary: 4 / 3;

  /* Make secondary images square: */
  --img-ratio-secondary: 1 / 1;
  --img-ratio-room-secondary: 1 / 1;
  --img-ratio-rate-secondary: 1 / 1;

  /* Different ratios for mobile: */
  --img-ratio-primary-mobile: 16 / 9;
  --img-ratio-room-primary-mobile: 4 / 3;

  /* Design system overrides: */
  --background-surface: #faf7f1;
  --base-default: #ffffff;
  --base-depth: #faf7f1;
  --text-default: #333333;
  --button-default: #413210;
  --border-default: #fff6;

  /* Transition */
  --custom-transition: all .35s;

  /* Font Awesome */
  --_fa-family: "Font Awesome 7 Pro";

  /* Fixed Icon Size */
  --fixed-icon-size: 12px;
}

#avvio .ACClayer {
  *:not(.kkACCButton) {
    color: var(--text-default);
  }
  .kkACCButton {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-1x);
    position: relative;
    text-align: center;
    padding: 13px 23px;
    overflow: hidden;
    z-index: 1;
    border: 0;
    border-radius: 0;
    font-size: var(--text-size-paragraph);
    text-transform: uppercase;
    letter-spacing: .9px;
    background-color: var(--branding-default);
    color: white;
  }

  .kkACCButton::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-color: var(--branding-hovered);
    transition: var(--custom-transition);
    z-index: -1;
  }

  .kkACCButton::after {
    content: "⟶";
    font-size: 20px;
    line-height: 100%;
    transform: translateY(-1px);
  }

  .kkACCButton:hover,
  .kkACCButton:active {
    color: var(--button-default) !important;
  }

  .kkACCButton:hover::before,
  .kkACCButton:active::before {
    transform: translateX(0);
    right: -24px;
    border-radius: 0 30px 30px 0;
  }
} 

.sticky {
  background: var(--brand-color-5);
}

@media screen and (max-width: 991px) {
  :root {
    --font-size-body: 16px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --container-max-width: 1200px;
  }
}

/* ----- Headings ------ */
.heading,
.heading.h1, 
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.sub-heading {
  font-family: var(--font-family-2);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
}

/* ----- Header (Top) ----- */
.brand {
  background-color: var(--brand-color-background);
}

.brand a {
  color: var(--text-default);
}

.logo img {
  width: 169px;
  transition: var(--custom-transition);
}

.logo img:hover {
  opacity: 0.7;
}

.header-style-4 {
  padding: 20px 12px;
  min-height: 180px;
  border-bottom: 1px solid var(--border-default);
}

.header-style-4 .header-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.header-style-4 .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-style-4 .logo a {
  display: flex;
  height: auto;
  margin: 0;
}

.header-style-4 .backtosite {
  width: fit-content;
}

.header-style-4 .backtosite a.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  text-align: center;
  padding: 13px 23px;
  overflow: hidden;
  z-index: 1;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .9px;
  background-color: var(--branding-hovered);
  color: var(--button-default);
}

.header-style-4 .backtosite a.button::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-color: var(--branding-default);
  transition: var(--custom-transition);
  z-index: -1;
}

.header-style-4 .backtosite a.button::after {
  content: "⟶";
  font-size: 20px;
  line-height: 100%;
  transform: translateY(-1px);
}

.header-style-4 .backtosite a.button:hover,
.header-style-4 .backtosite a.button:active {
  color: white;
}

.header-style-4 .backtosite a.button:hover::before,
.header-style-4 .backtosite a.button:active::before {
  transform: translateX(0);
  right: -24px;
  border-radius: 0 30px 30px 0;
}

/* Header (Ribbon Below) */
.full-ribbon-one {
  background-color: var(--brand-color-background);
}

.full-ribbon-one .header-grid {
  padding: 7px 0;
}

.full-ribbon-one .button__text.paragraph {
  font-family: var(--font-family-1);
}

.full-ribbon-one .button.button--primary {
  text-transform: uppercase;
  background-color: transparent;
  border-color: transparent;
  color: white;
}

.full-ribbon-one .button.button--primary:hover,
.full-ribbon-one .button.button--primary:active {
  color: var(--branding-hovered);
  background-color: transparent;
  border-color: transparent;
}

.full-ribbon-one .button.disabled {
  color: rgba(255,255,255,0.5);
  background-color: transparent;
  border-color: transparent;
}

.full-ribbon-one .navigation-box-small a {
  color: white;
}

#navigation-box-small-details {
  padding: 0 var(--spacing-2x);
  border-top: 1px solid var(--border-default);
  background-color: var(--brand-color-background);
}

#navigation-box-small-details .button-icon .button-icon__icon {
  color: white;
}

/* Content - General */
.button,
.button__text,
.button--branded,
.button--primary,
.button--secondary,
.button-card-horizontal {
  transition: var(--custom-transition);
}

.button--small .button__text {
  font-size: 14px;
}

.button__text.paragraph {
  font-family: var(--font-stack-sans-serif);
}

.button.button--branded {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  text-align: center;
  padding: 13px 23px;
  overflow: hidden;
  z-index: 1;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .9px;
  background-color: var(--branding-default);
  color: white;
}

.button.button--branded::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-color: var(--branding-hovered);
  transition: var(--custom-transition);
  z-index: -1;
}

.button.button--branded::after {
  content: "⟶";
  font-size: 20px;
  line-height: 100%;
  transform: translateY(-1px);
}

.button.button--branded:hover,
.button.button--branded:active {
  color: var(--button-default);
}

.button.button.button--branded:hover::before,
.button.button.button--branded:active::before {
  transform: translateX(0);
  right: -24px;
  border-radius: 0 30px 30px 0;
}

.button.button--primary {
  color: var(--brand-color-text);
  background-color: var(--base-default);
  border-color: var(--brand-color-border);
}

.button.button--primary:hover, 
.button.button--primary:active {
  color: white;
  background-color: var(--branding-default);
  border-color: var(--branding-default);
}

.button.button--secondary {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .9px;
  padding: 13px 23px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--button-default);
  border-radius: 0;
  background-color: transparent;
  color: var(--button-default);
}

.button.button--secondary::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  background-color: var(--branding-default);
  transition: var(--custom-transition);
  z-index: -1;
}

.button.button--secondary:hover,
.button.button--secondary:active {
  color: white;
  border-color: var(--branding-default);
}

.button.button--secondary:hover::before,
.button.button--secondary:active::before {
  transform: translateY(0);
}

.button.button--plain {
  padding: 5px 0;
  color: var(--text-default);
  background-color: transparent;
  border: none;
}

.button.button--plain:hover,
.button.button--plain:active {
  color: var(--text-default);
  background-color: transparent;
}

.button.book-now-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  text-align: center;
  padding: 10px 16px;
  overflow: hidden;
  z-index: 1;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .9px;
  background-color: var(--branding-default);
  color: white;
}

.button.book-now-button::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-color: var(--branding-hovered);
  transition: var(--custom-transition);
  z-index: -1;
}

.button.book-now-button::after {
  font-size: 12px;
}

.button.book-now-button:hover,
.button.book-now-button:active {
  color: var(--button-default);
}

.button.book-now-button:hover::before,
.button.book-now-button:active::before {
  transform: translateX(0);
  right: -24px;
  border-radius: 0 30px 30px 0;
}

.button-icon .button-icon__icon {
  width: 32px;
  height: 32px;
  color: var(--text-default);
  background: none;
  border: none;
  border-radius: 0;
  transition: var(--custom-transition);
}

.button-icon:hover:not(.disabled) .button-icon__icon {
  color: var(--branding-default);
  background: none;
  border: none;
}

.button-icon.button-icon--branded:not(.disabled) .button-icon__icon {
  background-color: var(--branding-default);
  border: 1px solid var(--branding-default);
  color: var(--text-over-branding);
}

.button-icon.button-icon--branded:hover:not(.disabled) .button-icon__icon {
  border: 1px solid var(--branding-hovered);
  background-color: var(--branding-hovered);
  color: var(--button-default);
}

/* Calendar Area */
.avvioCalendarFragment .label {
  font-family: var(--font-family-1);
  font-size: var(--text-size-h5);
  font-weight: 500;
  font-style: italic;
}

.avvioCalendarFragment .label .button__text {
  color: var(--text-default);
}

.avvio-calendar__month-header {
  font-family: var(--font-family-1);
  font-size: var(--text-size-h5);
  line-height: var(--line-height-h5);
  margin-bottom: 16px;
}

.avvio-calendar__month-header:hover,
.avvio-calendar__month-header:active {
  color: var(--branding-default);
}

.avvio-calendar__month-header i {
  font-size: var(--fixed-icon-size);
}

.monthSelector .avvio-modal__main--scroll {
  padding-top: var(--main-space, 16px);
}

#bigCalendar {
  .confirm-section button {
    width: fit-content;
  }
  .bottom {
    flex-wrap: wrap;
  }
}

#ipulse .price-section {
  width: 100%;
}

.avvio-calendar .avvio-calendar__date.available .minlosTooltip {
  background-color: black;  
}

.avvio-calendar .avvio-calendar__date.available .minlosTooltip::after {
  border-color: black;
}

/* Form Styling */
.input-container .button {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  font-family: var(--font-stack-sans-serif);
  font-size: var(--text-size-paragraph);
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .9px;
  padding: 13px 23px;
  border: 0;
  border-radius: 0;
  background-color: var(--branding-hovered);
  color: var(--button-default);
}

.input-container .button::before,
.input-container .button::after {
  display: none;
}

.input-container .button:hover,
.input-container .button:active {
  color: white;
  background-color: var(--branding-default);
}

.checkbox-field {
  font-size: var(--text-size-paragraph);
}

.info-bar-container .item {
  transition: var(--custom-transition);
}

.info-bar-container .one-item-image {
  border: none;
}

/* Payment Area */
.details-page-terms #details_submit_button {
  flex: 0 0 auto;
}

.occupancy-modal__room-config-header {
  align-items: center;
}

.text-field .text-field__input {
  border-radius: 4px;
}

.box.page-control-panel #section_filtered-banner .banner {
  margin: 0 var(--spacing-1x);
} 

#ipulse .panel-footer {
  z-index: 1;
}

#ipulse .panel-footer > div {
  flex-wrap: wrap;
}

#ipulse #details .button--plain:not(.button--small) {
  white-space: break-spaces;
}

.sr-visibility-none {
  display: none;
}

.tooltip-ctrl__tooltip {
  background-color: black;
  color: white;
  transform: translateX(5px);
}

/* Footer */
.footer.footer-style-centred {
  background-color: transparent;
  max-width: 1200px;
  margin: 0 auto;
}

.footer.footer-style-centred p {
  color: var(--text-default);
}

.footer.footer-style-centred a:hover,
.footer.footer-style-centred a:active {
  text-decoration: underline;
}

.footer.footer-style-centred .address,
.footer.footer-style-centred .logo,
.footer.footer-style-centred .quick-links {
  flex: 1;
}

.footer.footer-style-centred .address .heading-2 {
  font-family: var(--font-family-1);
}

.footer.footer-style-centred .logo {
  margin-bottom: 1rem;
}

.footer.footer-style-centred .socials { 
  padding: 0;
  gap: 10px;
  display: flex;
  justify-content: center;
  list-style: none;
}

.footer.footer-style-centred .socials a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #2f2d2b33;
  background-color: transparent;
  color: var(--button-default);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: var(--custom-transition);
}

.footer.footer-style-centred .socials i {
  margin: 0;
}

.footer.footer-style-centred .socials .icon-tripadvisor {
  display: flex;
}

.footer.footer-style-centred .socials svg {
  width: 24px;
  height: auto;
}

.footer.footer-style-centred .socials svg path {
  fill: var(--button-default);
  transition: var(--custom-transition);
}

.footer.footer-style-centred .socials a:hover,
.footer.footer-style-centred .socials a:active {
  text-decoration: none;
  background-color: var(--brand-color-4);
  color: white;
}

.footer.footer-style-centred .socials a:hover svg path,
.footer.footer-style-centred .socials a:active svg path {
  fill: white;
}

.footer.footer-style-centred .quick-links {
  display: flex;
  align-items: center;
  justify-content: center;
}

#menu-footer {
  text-align: left;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .footer.footer-style-centred .logo {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: #2f2d2b33;
  }
  
  .footer.footer-style-centred .address {
    text-align: left;
  }
}

/* Responsives */
@media screen and (max-width: 2000px) {
  .info-bar-container .item {
    min-width: 200px;
  }
}

@media screen and (max-width: 1023px) {
  .info-bar-container {
    padding: 0 var(--spacing-05x);
  }
}

@media screen and (max-width: 991px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) { 
  .logo img {
    width: 130px;
    height: auto;
  }

  .header-style-4 {
    min-height: 90px;
  }

  .header-style-4 .logo {
    position: relative;
    left: unset;
    top: unset;
    transform: unset;
    justify-content: flex-start;
  }

  .header-style-4 .header-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .info-bar-container .item {
    flex: 100%;
  }

  #ipulse #guests .panel-footer > div > .button,
  #ipulse #guests .addRoomButton {
    width: 100%;
  }

  .footer.footer-style-centred {
    flex-wrap: wrap;
  }

  .footer.footer-style-centred .address,
  .footer.footer-style-centred .logo,
  .footer.footer-style-centred .quick-links {
    flex: 100%;
  }

  .footer.footer-style-centred .logo {
    order: -1;
  }

  .footer.footer-style-centred .quick-links {
    display: none;
    visibility: hidden;
  }
}

@media screen and (max-width: 744px) {
  #section_restricted-banner {
    top: 89px;
  }

  #section_filtered-banner {
    top: unset;
    bottom: 0;
  }

  :not(.avvio-modal__main) > .layout-results .box.page-control-panel.is-pinned > div {
    padding: var(--spacing-1x);
  }
}

@media screen and (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {
  #avvio .ACClayer {
    .kkACCButtonsRight {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-1x);
    }
    .kkACCButton {
      width: 100%;
      margin: 0;
    }
  }
  #navigation-box-small-details {
    padding-top: var(--spacing-2x);
    margin-top: 0;
    top: 0;
  }

  #navigation-box-small-details > div {
    flex-direction: column;
  }

  .card-grid--secondary {
    grid-template-areas: 
      "title title bubbles bubbles" 
      "image price price price" 
      "image button button button";
  }
}

@media screen and (max-width: 420px) {
  .box.page-control-panel {
    justify-content: center;
  }
}

@media screen and (max-width: 360px) {
  .layout-search .box.page-control-panel,
  .layout-results .box.page-control-panel, 
  :not(.avvio-modal__main) > .layout-results .box.page-control-panel.is-pinned > div {
    padding-left: 0;
    padding-right: 0;
  }
}