.booking-widget-wrapper .close-area { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 31; display: none; }
.booking-widget-wrapper.open .close-area { display: block; }

.booking-widget { background: #E7E6E0; color: #141F1F; font-weight: 300; font-family: "FuturaBT-Book"; display: flex; position: absolute; z-index: 32; top: 120px; right: 50px; max-height: 0; overflow: hidden; transition: all .2s linear; opacity: 0; }
.booking-widget-wrapper.open .booking-widget { max-height: 100vh; opacity: 1; }
.booking-widget .date-block { padding: 1rem; line-height: 1; width: 144px; box-sizing: border-box; cursor: pointer; }
.booking-widget .date-block.arrival { padding-left: 2rem; }
.booking-widget .date-block.departure { padding-right: 2rem; }
.booking-widget input[type="submit"] { margin: 0; font-weight: 300; font-size: .9rem; }
.booking-widget .title { font-size: .7rem; margin-bottom: .5rem; }
.booking-widget .title .arrow-down { border-color: #141F1F; }
.booking-widget .visual-date { display: flex; }
.booking-widget .visual-date .column { text-transform: uppercase; font-size: .9rem; display: flex; flex-direction: column; justify-content: flex-end; margin: 0 0 .3rem .3rem; }
.booking-widget .visual-date .date { font-size: 3.25rem; }

.arrow-down { width: 10px; height: 10px; border-left: 1px solid #FFF; border-bottom: 1px solid #FFF; transform: rotate(-45deg); display: inline-block; margin-left: .5rem; top: -.15rem; position: relative; }

.booking-widget-toggler { background: transparent; color: #e7e6df; transition: all .2s linear;  }
.header-nav a.secondary-button.booking-widget-toggler:hover, .header-nav a.secondary-button.booking-widget-toggler.active {  background: #deded7; border: 1px solid #deded7; color: #15282a; }
.booking-widget-toggler:hover .arrow-down, .booking-widget-toggler.active .arrow-down { transform: rotate(135deg); top: 0.15rem; border-color: #15282a; }

#calendarCalendar { z-index: 10000; font-family: "FuturaBT-Book"; transition: visibility 0.25s ease, opacity 0.25s ease; visibility: hidden; opacity: 0; font-family: sans-serif; font-size: 13px;box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; position: absolute; left: 0px; top:0px; width:100%; height: 100%;}
#calendarCalendar.open { visibility: visible; opacity: 1; }
#calendarCalendar .background { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6);cursor:pointer;}
#calendarCalendar .close-button {position: absolute;z-index: 1;top: -1em;right: -1em;background: #fff;width: 2em;height: 2em;text-align: center;line-height: 2em;border-radius: 1em;cursor:pointer;box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.calendars { position: fixed;
    top: 270px;
    right: 172px;
    z-index: 9999; }
.calendar { padding: 7px; float: left; width: 288px; color: #141F1F; background: #E7E6E0; }
    #calendarCalendar .range #calendar-start-date { border-right: none; }
    .calendars:before, .calendars:after, .calendar-table:before, .calendar-table:after { content: ' '; clear: both; display: block; height: 0; }
    .calendar-header { text-align: center; }
    .calendar-title {  display: inline-block; width: 80%; }
    .calendar-arrow { width: 0; height: 0; display: inline-block; border-color: transparent #141F1F; border-style: solid; margin: 10px 2%; cursor: pointer; }
    .calendar-arrow.left { border-width: 7px 7px 7px 0; float: left; }
    .calendar-arrow.right { border-width: 7px 0 7px 7px; float: right; }
    .calendar-cell {     font-size: inherit; float: left; width: 10.285714286%; padding: 2%; text-align: center; line-height: 1; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;}
    .calendar-cell.disabled { color: gray; cursor: normal; }
    .calendar-dates .calendar-cell.active { cursor: pointer; }
    .calendar-dates .calendar-cell.active.active.selected, .calendar-dates .calendar-cell.active:hover { color: #E7E6E0;  background: #141F1F; }
    .max-month .calendar-arrow.right, .min-month .calendar-arrow.left { display: none; }
#calendarCalendar:focus, #calendarCalendar *:focus { box-shadow: 0 0 5px pink; }
  


@media screen and (max-width: 500px) {
    .booking-widget { flex-direction: column; top: 80px; }
    .booking-widget .date-block.arrival, .booking-widget .date-block.departure { text-align: center; padding: 1rem; }
    .calendars { position: fixed; top: 50%; right: 50%; z-index: 9999; transform: translate(50%,-50%); }
}