/* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .SlideShow { position: relative; height: 100%; overflow: hidden; } .Icon__arrow { position: absolute; top: 40%; width: 40px; height: 40px; fill: white; background-color: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 100%; } .Icon__arrow:hover { cursor: pointer; } .Icon__arrow--chevron_thin_left { left: 25px; z-index: 1; } .Icon__arrow--chevron_thin_right { right: 25px; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /********************************************************************* * The .home-slideshow class was replaced with .SlickSlideShow * * The .home-slides class was replaced with .SlickSlideShow__slides * *********************************************************************/ /* * Classes from slick * * @class slick-slider -- container for everything (is attached to SlickSlideShow__slides) * @class slick-track -- wide container that holds slides and gets transformed along X axis * @class slick-list -- visible part of the slick-track container * @class slide-slide -- individual slide * @class slick-arrow -- arrow * @class slick-prev -- previous arrow * @class slick-next -- next arrow * */ /* * global variable: $LandingPageSlideShowHeight; */ .SlickSlideShow { overflow: hidden; background-color: #000; border-bottom: none; margin: 0px auto 15px; } .SlickSlideShow__slides { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; position: relative; display: block; overflow: hidden; max-height: 0; -webkit-transition: max-height .9s ease-in-out; -o-transition: max-height .9s ease-in-out; transition: max-height .9s ease-in-out; } /* This is not relevant anymore (?) because we don't have to wait for things to mount in react */ /* Use the ready class instead to have the slideshow drop down */ .SlickSlideShow__slides.ready { max-height: 460px; } .SlickSlideShow__slide { -webkit-transition: opacity .75s ease-in-out; -o-transition: opacity .75s ease-in-out; transition: opacity .75s ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0.5; } .SlickSlideShow__slide.slick-current { opacity: 1; -webkit-transition: opacity 1.25s ease-in-out; -o-transition: opacity 1.25s ease-in-out; transition: opacity 1.25s ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .Divider { position: relative; text-align: center; } @media (min-width: 1025px) { .Divider { margin: 50px auto; } } @media (min-width: 768px) and (max-width: 1024px) { .Divider { margin: 50px auto 20px; } } .Divider::before { border-top: 2px solid #ccc; content: ' '; position: absolute; left: 0; width: 100%; top: 45%; z-index: -1; } .Divider__title { display: inline-block; text-transform: uppercase; color: black; background: #fff; border: 1px solid #999; font-size: 14px; line-height: 1em; font-family: AvenirNext-DemiBold, Arial, sans-serif; padding: 10px 20px; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .Stepper { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; padding: 10px 15px; } .Stepper__label { color: #444; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .Stepper__label { font-size: 19px; } } @media (min-width: 1025px) { .Stepper__label { font-size: 16px; } } .Stepper__BtnContainer { display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 100px; flex-basis: 100px; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; } .Stepper__btn { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear; } .Stepper__btn:hover { cursor: pointer; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .Icon__StepperIcon { height: 40px; width: 40px; } } @media (min-width: 1025px) { .Icon__StepperIcon { height: 33px; width: 33px; } } .Stepper__btn--disabled { opacity: 0.3; } .Stepper__btn--disabled:hover { cursor: not-allowed; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .Stepper__count { font-size: 22px; margin: 0 25px; } } @media (min-width: 1025px) { .Stepper__count { font-size: 16px; margin: 0 19px; } } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .OccupancyPicker { cursor: default; } @media (min-width: 1025px) { .OccupancyPicker { -webkit-box-shadow: 0 6px 8px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.175); } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .OccupancyPicker { height: 200vh; background-color: white; overflow: hidden; } } .OccupancyPicker__header { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; margin-bottom: 20px; padding: 10px 15px 0px 15px; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .OccupancyPicker__btn--close { margin-left: 5px; } .OccupancyPicker__btn--close .Icon__XIcon { width: 18px; height: 18px; } } @media (min-width: 1025px) { .OccupancyPicker__btn--close .Icon__XIcon { width: 14px; height: 14px; } } .OccupancyPicker__btn--close:hover { cursor: pointer; } .OccupancyPicker__btn--reset { font-size: 13px; padding: 3px 8px; border: 1px solid #ccc; border-radius: 6px; } .OccupancyPicker__btn--reset:hover { cursor: pointer; } .OccupancyPicker__btn--save { background-color: #333; text-align: center; border-top: 1px solid #ddd; cursor: pointer; padding-top: 20px; padding-bottom: 20px; } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .OccupancyPicker__btn--save { margin-top: 20px; width: 100%; } } @media (max-width: 767px) { .OccupancyPicker__btn--save { display: block; margin: 20px auto 0; width: 96%; } } .OccupancyPicker__btn--save:hover { cursor: pointer; -webkit-box-shadow: 0px 1px 5px black; box-shadow: 0px 1px 5px black; } .OccupancyPicker__btn--saveLabel { font-size: 20px; color: white; line-height: 16px; } .CalendarDay{border:1px solid #e4e7e7;color:#666}.CalendarDay,.CalendarDay__button{padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.CalendarDay__button{position:relative;height:100%;width:100%;text-align:center;background:none;border:0;margin:0;color:inherit;font:inherit;line-height:normal;overflow:visible}.CalendarDay__button:active{outline:0}.CalendarDay--highlighted-calendar{background:#ffe8bc;color:#666;cursor:default}.CalendarDay--highlighted-calendar:active{background:#ccc}.CalendarDay--outside{border:0;cursor:default}.CalendarDay--outside:active{background:#fff}.CalendarDay--hovered{background:#f30;border:1px double #000;color:#fff}.CalendarDay--blocked-minimum-nights{color:#d9d9d9;background:#fff;border:1px solid #e4e7e7;cursor:default}.CalendarDay--blocked-minimum-nights:active{background:#fff}.CalendarDay--selected-span{background:#f30;border:1px double #000;color:#fff}.CalendarDay--selected-span.CalendarDay--hovered,.CalendarDay--selected-span:active{background:#d9d9d9;border:1px double #000}.CalendarDay--selected-span.CalendarDay--last-in-range{border-right:#f30}.CalendarDay--hovered-span{background:#f30;border:1px double #000;color:#fff}.CalendarDay--hovered-span:active{background:#f30}.CalendarDay--selected,.CalendarDay--selected-end,.CalendarDay--selected-start{background:#f30;border:1px double #000;color:#fff}.CalendarDay--selected-end:active,.CalendarDay--selected-start:active,.CalendarDay--selected:active{background:#f30}.CalendarDay--selected-end.CalendarDay--hovered,.CalendarDay--selected-end:active,.CalendarDay--selected-start.CalendarDay--hovered,.CalendarDay--selected-start:active,.CalendarDay--selected.CalendarDay--hovered,.CalendarDay--selected:active{background:#d9d9d9;border:1px double #000}.CalendarDay--blocked-calendar{background:#d9d9d9;color:#939393;cursor:default}.CalendarDay--blocked-calendar:active{background:#d9d9d9}.CalendarDay--blocked-out-of-range{color:#d9d9d9;background:#fff;border:1px solid #e4e7e7;cursor:default}.CalendarDay--blocked-out-of-range:active{background:#fff}.CalendarMonth{text-align:center;padding:0 13px;vertical-align:top;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.CalendarMonth:first-of-type{position:absolute;z-index:-1;opacity:0;pointer-events:none}.CalendarMonth table{border-collapse:collapse;border-spacing:0;caption-caption-side:initial}.CalendarMonth--horizontal{display:inline-block;min-height:100%}.CalendarMonth--vertical{display:block}.CalendarMonth__caption{color:#4b4b4b;margin-top:7px;font-size:18px;text-align:center;margin-bottom:2px;caption-side:top}.CalendarMonth--horizontal .CalendarMonth__caption,.CalendarMonth--vertical .CalendarMonth__caption{padding:15px 0 35px}.CalendarMonth--vertical-scrollable .CalendarMonth__caption{padding:5px 0}.CalendarMonthGrid{background:#fff;z-index:0;text-align:left}.CalendarMonthGrid--animating{-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;-o-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;z-index:1}.CalendarMonthGrid--horizontal{position:absolute;left:9px}.CalendarMonthGrid--vertical{margin:0 auto}.CalendarMonthGrid--vertical-scrollable{margin:0 auto;overflow-y:scroll}.DayPicker{background:#fff;position:relative;text-align:left}.DayPicker--horizontal{background:#fff;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);box-shadow:0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);border-radius:3px}.DayPicker--horizontal.DayPicker--portal{-webkit-box-shadow:none;box-shadow:none;position:absolute;left:50%;top:50%}.DayPicker--vertical.DayPicker--portal{position:static}.DayPicker__focus-region{outline:none}.DayPicker__week-headers{position:relative}.DayPicker--horizontal .DayPicker__week-headers{margin-left:9px}.DayPicker__week-header{color:#757575;position:absolute;top:62px;z-index:2;padding:0 13px;text-align:left}.DayPicker__week-header ul{list-style:none;margin:1px 0;padding-left:0;padding-right:0}.DayPicker__week-header li{display:inline-block;text-align:center}.DayPicker--vertical .DayPicker__week-header{left:50%}.DayPicker--vertical-scrollable{height:100%}.DayPicker--vertical-scrollable .DayPicker__week-header{top:0;display:table-row;border-bottom:1px solid #dbdbdb;background:#fff}.DayPicker--vertical-scrollable .transition-container--vertical{padding-top:20px;height:100%;position:absolute;top:0;bottom:0;right:0;left:0;overflow-y:scroll}.DayPicker--vertical-scrollable .DayPicker__week-header{margin-left:0;left:0;width:100%;text-align:center}.transition-container{position:relative;overflow:hidden;border-radius:3px}.transition-container--horizontal{-webkit-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;transition:height .2s ease-in-out}.transition-container--vertical{width:100%}.DayPickerNavigation__next,.DayPickerNavigation__prev{cursor:pointer;line-height:.78;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DayPickerNavigation__next--default,.DayPickerNavigation__prev--default{border:1px solid #dce0e0;background-color:#fff;color:#757575}.DayPickerNavigation__next--default:focus,.DayPickerNavigation__next--default:hover,.DayPickerNavigation__prev--default:focus,.DayPickerNavigation__prev--default:hover{border:1px solid #c4c4c4}.DayPickerNavigation__next--default:active,.DayPickerNavigation__prev--default:active{background:#f2f2f2}.DayPickerNavigation--horizontal{position:relative}.DayPickerNavigation--horizontal .DayPickerNavigation__next,.DayPickerNavigation--horizontal .DayPickerNavigation__prev{border-radius:3px;padding:6px 9px;top:18px;z-index:2;position:absolute}.DayPickerNavigation--horizontal .DayPickerNavigation__prev{left:22px}.DayPickerNavigation--horizontal .DayPickerNavigation__prev--rtl{left:auto;right:22px}.DayPickerNavigation--horizontal .DayPickerNavigation__next{right:22px}.DayPickerNavigation--horizontal .DayPickerNavigation__next--rtl{right:auto;left:22px}.DayPickerNavigation--horizontal .DayPickerNavigation__next--default svg,.DayPickerNavigation--horizontal .DayPickerNavigation__prev--default svg{height:19px;width:19px;fill:#939393}.DayPickerNavigation--vertical{background:#fff;-webkit-box-shadow:0 0 5px 2px rgba(0,0,0,.1);box-shadow:0 0 5px 2px rgba(0,0,0,.1);position:absolute;bottom:0;left:0;height:52px;width:100%;z-index:2}.DayPickerNavigation--vertical .DayPickerNavigation__next,.DayPickerNavigation--vertical .DayPickerNavigation__prev{display:inline-block;position:relative;height:100%;width:50%}.DayPickerNavigation--vertical .DayPickerNavigation__next--default{border-left:0}.DayPickerNavigation--vertical .DayPickerNavigation__next--default,.DayPickerNavigation--vertical .DayPickerNavigation__prev--default{text-align:center;font-size:2.5em;padding:5px}.DayPickerNavigation--vertical .DayPickerNavigation__next--default svg,.DayPickerNavigation--vertical .DayPickerNavigation__prev--default svg{height:42px;width:42px;fill:#484848}.DayPickerNavigation--vertical-scrollable{position:relative}.DayPickerNavigation--vertical-scrollable .DayPickerNavigation__next{width:100%}.DayPickerKeyboardShortcuts__close,.DayPickerKeyboardShortcuts__show{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;cursor:pointer}.DayPickerKeyboardShortcuts__close:active,.DayPickerKeyboardShortcuts__show:active{outline:none}.DayPickerKeyboardShortcuts__show{width:22px;position:absolute;z-index:2}.DayPickerKeyboardShortcuts__show--bottom-right{border-top:26px solid transparent;border-right:33px solid #f30;bottom:0;right:0}.DayPickerKeyboardShortcuts__show--bottom-right:hover{border-right:33px solid #939393}.DayPickerKeyboardShortcuts__show--bottom-right .DayPickerKeyboardShortcuts__show_span{bottom:0;right:-28px}.DayPickerKeyboardShortcuts__show--top-right{border-bottom:26px solid transparent;border-right:33px solid #f30;top:0;right:0}.DayPickerKeyboardShortcuts__show--top-right:hover{border-right:33px solid #939393}.DayPickerKeyboardShortcuts__show--top-right .DayPickerKeyboardShortcuts__show_span{top:1px;right:-28px}.DayPickerKeyboardShortcuts__show--top-left{border-bottom:26px solid transparent;border-left:33px solid #f30;top:0;left:0}.DayPickerKeyboardShortcuts__show--top-left:hover{border-left:33px solid #939393}.DayPickerKeyboardShortcuts__show--top-left .DayPickerKeyboardShortcuts__show_span{top:1px;left:-28px}.DayPickerKeyboardShortcuts__show_span{color:#fff;position:absolute}.DayPickerKeyboardShortcuts__panel{overflow:auto;background:#fff;border:1px solid #dbdbdb;border-radius:2px;position:absolute;top:0;bottom:0;right:0;left:0;z-index:2;padding:22px;margin:33px}.DayPickerKeyboardShortcuts__title{font-size:16px;font-weight:700;margin:0}.DayPickerKeyboardShortcuts__list{list-style:none;padding:0}.DayPickerKeyboardShortcuts__close{position:absolute;right:22px;top:22px;z-index:2}.DayPickerKeyboardShortcuts__close svg{height:15px;width:15px;fill:#d9d9d9}.DayPickerKeyboardShortcuts__close svg:focus,.DayPickerKeyboardShortcuts__close svg:hover{fill:#939393}.DayPickerKeyboardShortcuts__close:active{outline:none}.KeyboardShortcutRow{margin:6px 0}.KeyboardShortcutRow__key-container{display:inline-block;white-space:nowrap;text-align:right;margin-right:6px}.KeyboardShortcutRow__key{font-family:monospace;font-size:12px;text-transform:uppercase;background:#fff;padding:2px 6px}.KeyboardShortcutRow__action{display:inline;word-break:break-word;margin-left:8px}.DayPickerKeyboardShortcuts__panel--block .KeyboardShortcutRow{margin-bottom:16px}.DayPickerKeyboardShortcuts__panel--block .KeyboardShortcutRow__key-container{width:auto;text-align:left;display:inline}.DayPickerKeyboardShortcuts__panel--block .KeyboardShortcutRow__action{display:inline}.DateInput{font-weight:200;font-size:16px;line-height:24px;color:#757575;margin:0;padding:8px;background:#fff;position:relative;display:inline-block;width:auto;vertical-align:middle}.DateInput--label{text-transform:uppercase;font-size:11px;line-height:1.5em;padding:0 8px}.DateInput--with-caret:after,.DateInput--with-caret:before{content:"";display:inline-block;position:absolute;bottom:auto;border:10px solid transparent;border-top:0;left:22px;z-index:2}.DateInput--with-caret:before{top:62px;border-bottom-color:rgba(0,0,0,.1)}.DateInput--with-caret:after{top:63px;border-bottom-color:#fff}.DateInput--disabled{background:#d9d9d9}.DateInput__input{opacity:0;position:absolute;top:0;left:0;border:0;height:100%;width:100%}.DateInput__input[readonly]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.DateInput__display-text{padding:4px 8px;white-space:nowrap;overflow:hidden}.DateInput__display-text--has-input{color:#484848}.DateInput__display-text--focused{background:#f30;border-color:#f30;border-radius:3px;color:#fff}.DateInput__display-text--disabled{font-style:italic}.screen-reader-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DateRangePicker{position:relative;display:inline-block}.DateRangePicker__picker{z-index:1;background-color:#fff;position:absolute;top:72px}.DateRangePicker__picker--rtl{direction:rtl}.DateRangePicker__picker--direction-left{left:0}.DateRangePicker__picker--direction-right{right:0}.DateRangePicker__picker--portal{background-color:rgba(0,0,0,.3);position:fixed;top:0;left:0;height:100%;width:100%}.DateRangePicker__picker--full-screen-portal{background-color:#fff}.DateRangePicker__close{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2}.DateRangePicker__close svg{height:15px;width:15px;fill:#d9d9d9}.DateRangePicker__close:focus,.DateRangePicker__close:hover{color:#b0b3b4;text-decoration:none}.none-enter{opacity:.01}.none-enter.none-enter-active{opacity:1;-webkit-transition:opacity 1ms ease-in;-o-transition:opacity 1ms ease-in;transition:opacity 1ms ease-in}.none-leave{opacity:1}.none-leave.none-leave-active{opacity:.01;-webkit-transition:opacity 1ms ease-in;-o-transition:opacity 1ms ease-in;transition:opacity 1ms ease-in}.story-enter{-webkit-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%)}.story-enter.story-enter-active{-webkit-transition:-webkit-transform .35s ease-out;transition:-webkit-transform .35s ease-out;-o-transition:transform .35s ease-out;transition:transform .35s ease-out;transition:transform .35s ease-out,-webkit-transform .35s ease-out}.story-enter.story-enter-active,.story-leave{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.story-leave.story-leave-active{-webkit-transform:translateY(200%);-ms-transform:translateY(200%);transform:translateY(200%);-webkit-transition:-webkit-transform .35s ease-in-out;transition:-webkit-transform .35s ease-in-out;-o-transition:transform .35s ease-in-out;transition:transform .35s ease-in-out;transition:transform .35s ease-in-out,-webkit-transform .35s ease-in-out}.DateRangePickerInput{background-color:#fff;display:inline-block}.DateRangePickerInput--disabled{background:#d9d9d9}.DateRangePickerInput--rtl{direction:rtl}.DateRangePickerInput__arrow{display:inline-block;vertical-align:middle}.DateRangePickerInput__arrow svg{vertical-align:middle;fill:#484848;height:24px;width:24px}.DateRangePickerInput__clear-dates{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 10px 0 5px}.DateRangePickerInput__clear-dates svg{fill:#939393;height:12px;width:15px;vertical-align:middle}.DateRangePickerInput__clear-dates--hide{visibility:hidden}.DateRangePickerInput__clear-dates--hover,.DateRangePickerInput__clear-dates:focus{background:#dbdbdb;border-radius:50%}.DateRangePickerInput__calendar-icon{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 5px 0 10px}.DateRangePickerInput__calendar-icon svg{fill:#666;height:15px;width:14px;vertical-align:middle}.SingleDatePicker{position:relative;display:inline-block}.SingleDatePicker__picker{z-index:1;background-color:#fff;position:absolute;top:72px}.SingleDatePicker__picker--rtl{direction:rtl}.SingleDatePicker__picker--direction-left{left:0}.SingleDatePicker__picker--direction-right{right:0}.SingleDatePicker__picker--portal{background-color:rgba(0,0,0,.3);position:fixed;top:0;left:0;height:100%;width:100%}.SingleDatePicker__picker--full-screen-portal{background-color:#fff}.SingleDatePicker__close{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2}.SingleDatePicker__close svg{height:15px;width:15px;fill:#d9d9d9}.SingleDatePicker__close:focus,.SingleDatePicker__close:hover{color:#b0b3b4;text-decoration:none}.SingleDatePickerInput{background-color:#fff;border:1px solid #dbdbdb}.SingleDatePickerInput--rtl{direction:rtl}.SingleDatePickerInput__clear-date{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 10px 0 5px}.SingleDatePickerInput__clear-date svg{fill:#939393;height:12px;width:15px;vertical-align:middle}.SingleDatePickerInput__clear-date--hide{visibility:hidden}.SingleDatePickerInput__clear-date--hover,.SingleDatePickerInput__clear-date:focus{background:#dbdbdb;border-radius:50%}/* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .DateRangePicker { width: 100%; } @media (min-width: 1025px) { .DateRangePicker { text-align: center; } } .DateRangePicker__picker { width: 100%; } @media (min-width: 1025px) { .DateRangePickerInput__clear-dates--hover { background: none; border-radius: 0; } .DateRangePickerInput__clear-dates--hover:focus { background: none; border-radius: 0; } .DateRangePickerInput { display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto; text-align: left; } .DateRangePickerInput__arrow { margin: 0; padding: 0; margin-bottom: 3px; margin-left: 5px; margin-right: 5px; } .DateRangePickerInput__arrow svg { width: 18px; } .DateRangePickerInput__clear-dates { margin: 0; padding: 0; margin-bottom: 3px; margin-left: 5px; margin-right: 5px; opacity: 1; } .DateRangePickerInput__clear-dates:focus { background: none; } .DateRangePickerInput__clear-dates--hide { visibility: visible; opacity: 0.2; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .DateRangePickerInput { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .DateRangePickerInput .DateRangePickerInput__calendar-icon { display: none; } } .DateInput__display-text--has-input { color: #f30; font-weight: 400; } .DateInput__display-text--focused { color: white; } .DateInput__display-text { font-weight: 400; color: #999; font-family: AvenirNext-Regular, Arial, sans-serif; } .DateInput__display-text--focused { color: white; } /* DESKTOP */ @media (min-width: 1025px) { .DateInput { padding: 0; } .DateInput__input { cursor: pointer; } .DateInput--label { font-size: 10px; color: black; text-transform: uppercase; padding: 0 0 0 6px; min-height: 1em; text-transform: uppercase; overflow: visible; white-space: nowrap; width: 1px; } .DateInput.endDate { background-color: transparent; } .DateInput__display-text { font-size: 14px; padding: 2px 6px; font-family: AvenirNext-Medium, HelveticaNeue-Light, Helvetica Neue Medium, Gill Sans MT, Arial, sans-serif; text-transform: capitalize; } .DateInput__display-text--has-input { color: #F30; } .DateInput__display-text--focused { color: white; background-color: #333; border-color: #333; } } .DayPicker--vertical { min-height: 600px; height: 100%; z-index: 15; } @media (max-width: 767px) { .DayPicker__week-header { padding-top: 5px; } } @media (max-width: 320px) { .DayPicker__week-header li { width: 40px !important; } } .CalendarMonth__caption { font-family: AvenirNext-Regular, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; letter-spacing: 1px; } @media (max-width: 767px) { .CalendarMonth { margin-top: 15px; } } @media (max-width: 320px) { .CalendarMonth { padding: 0 3px; } } .CalendarDay--blocked-out-of-range.CalendarDay--hovered { cursor: default; } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .CalendarDay { border: 1px solid #eee; } } @media (max-width: 767px) { .CalendarDay { border: 1px solid #ccc; } } .CalendarDay__button { font-size: 14px; } .CalendarDay--selected-span { background: #f9977e; border: 1px solid #f9977e; } .CalendarDay--selected, .CalendarDay--selected-end, .CalendarDay--selected-start { border: 1px solid #F30; } .CalendarDay--hovered-span { border: 1px solid #eee; } .CalendarDay--selected-span.CalendarDay--hovered { background: white; border: 1px solid #eee; color: #333; } /* MOBILE AND TABLET */ @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .DatePicker__header { height: 12vh; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; padding: 20px; } .DatePicker__dateinputs { width: 100%; text-align: center; } .DatePicker__date { display: inline-block; color: white; padding: 5px; margin: 0 5px; border-radius: 5%; background: white; color: #999; } } @media (max-width: 767px) and (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) { .DatePicker__date { font-size: 20px; } } @media (max-width: 767px) and (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (max-width: 767px) { .DatePicker__date { font-size: 16px; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .DatePicker__date:hover { cursor: pointer; } .DatePicker__arrow { display: inline-block; color: #484848; font-size: 1.25em; } .DatePicker__date--has-input { background-color: white; color: #F30; } .DatePicker__date--focused { background-color: #222; color: white; } .DatePicker__icon--reset { cursor: pointer; text-transform: capitalize; } } @media (max-width: 767px) and (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (max-width: 767px) { .DatePicker__icon--reset { font-size: 12px; } } @media (max-width: 767px) and (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) { .DatePicker__icon--reset { font-size: 16px; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .DatePicker__icon--close .Icon__XIcon { cursor: pointer; } } @media (max-width: 767px) and (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (max-width: 767px) { .DatePicker__icon--close .Icon__XIcon { width: 12px; } } @media (max-width: 767px) and (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) { .DatePicker__icon--close .Icon__XIcon { width: 16px; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .DatePicker__calendar { max-width: 100%; height: 88vh; } } @media (max-width: 767px) and (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) { .DatePicker__calendar .DayPicker.DayPicker--horizontal { margin: 0 auto; } } @media (max-width: 767px) and (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (max-width: 767px) { .DatePicker__calendar .DayPicker--vertical-scrollable .DayPicker__week-header { background: #f6f6f6; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .transition-container--horizontal { min-height: 400px; } } /* DESKTOP */ @media (min-width: 1025px) { .DatePicker--desktop { display: -ms-flexbox; display: flex; padding-left: 24px; padding-right: 24px; } } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape), (min-width: 1025px) { .transition-container--horizontal { -webkit-box-shadow: 0 2px 4px #333; box-shadow: 0 2px 4px #333; } } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .AutoComplete__results { background: white; color: black; z-index: 1; margin-top: 10px; position: absolute; left: -14px; /* some resets */ } @media (min-width: 1025px) { .AutoComplete__results { width: 400px; } } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .AutoComplete__results { width: calc(100% + 28px); } } .AutoComplete__results dl { margin: 0; padding: 0; } .AutoComplete__results--open { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); } .AutoComplete__category-title { font-size: 11px; text-align: left; padding: 14px; border-bottom: 1px solid #ddd; text-transform: uppercase; background: #eee; } .AutoComplete__category-title--hide { display: none; } .AutoComplete__category-row { border-bottom: 1px solid #ddd; margin-left: 0; } .AutoComplete__categorylink { padding: 11px 14px 11px 14px; font-size: 14px; display: block; color: black; } .AutoComplete__categorylink:hover { background: #F30; cursor: pointer; font-family: AvenirNext-DemiBold, Arial, sans-serif; color: white; } .AutoComplete__categorylink:hover * { color: white; } .AutoComplete__categorylink .highlight { font-family: AvenirNext-DemiBold, Arial, sans-serif; } .AutoComplete__categorylink .capitalize { text-transform: capitalize; } .AutoComplete__input { width: 100%; border: none; color: #F30; font-family: AvenirNext-Regular, Arial, sans-serif; font-size: inherit; padding: 0; padding-right: 10px; margin: 0; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-sizing: border-box; box-sizing: border-box; } .AutoComplete__input:focus { outline-style: none; } .AutoComplete__input::-webkit-input-placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } .AutoComplete__input::-moz-placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } .AutoComplete__input:-ms-input-placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } .AutoComplete__input::placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } @media (min-width: 1025px) { .BookingToolbar { -webkit-box-shadow: 0 3px 5px #222; box-shadow: 0 3px 5px #222; border-top: 1px solid #ccc; z-index: 1; position: relative; } } .BookingToolbar__site-content-container { display: -ms-flexbox; display: flex; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } @media (min-width: 1025px) { .BookingBlock { height: 80px; padding-top: 17px; } } @media (min-width: 768px) and (max-width: 1024px) { .BookingBlock { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: end; justify-content: flex-end; border: 0; width: 100%; } } @media (max-width: 767px) { .BookingBlock { display: block; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock { border-bottom: 1px solid #999; margin-bottom: 20px; padding: 6px 0 10px; } } /*********** Autocomplete **********/ @media (min-width: 1025px) { .BookingBlock--autocomplete { -ms-flex: 1 1 0%; flex: 1 1 0%; } } /*********** Calendar **********/ @media (min-width: 1025px) { .BookingBlock--datepicker { -ms-flex-preferred-size: 280px; flex-basis: 280px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: start; justify-content: flex-start; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock__InputPicker--datepicker { width: 100vw; height: 100vh; z-index: 1; background-color: white; opacity: 1; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: fixed; top: 0; left: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .BookingBlock__InputPicker--datepicker.hide { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } } /*********** Occupancy **********/ @media (min-width: 1025px) { .BookingBlock--occupancy { -ms-flex: 1 1 0%; flex: 1 1 0%; } } .BookingBlock--occupancy:hover { cursor: pointer; } .BookingBlock__InputWrapper { width: 100%; } @media (min-width: 1025px) { .BookingBlock__InputWrapper { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; text-align: center; } } @media (max-width: 767px) { .BookingBlock__InputWrapper { text-align: left; } } @media (min-width: 1025px) { .BookingBlock--occupancynumber-label { display: none; } } .BookingBlock__InputPicker.BookingBlock__InputPicker--occupancy { background-color: white; z-index: 1; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock__InputPicker.BookingBlock__InputPicker--occupancy { position: fixed; top: 0; left: 0; height: 100vh; opacity: 1; -webkit-box-shadow: 0px 3px 10px 1px #666; box-shadow: 0px 3px 10px 1px #666; border-radius: 2px; width: 100%; padding-top: 20px; -webkit-transition: all 0.65s ease-in-out; -o-transition: all 0.65s ease-in-out; transition: all 0.65s ease-in-out; } } @media (min-width: 1025px) { .BookingBlock__InputPicker.BookingBlock__InputPicker--occupancy { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: all 0.25s ease-out, opacity 0.15s ease-in; -o-transition: all 0.25s ease-out, opacity 0.15s ease-in; transition: all 0.25s ease-out, opacity 0.15s ease-in; position: relative; } } .BookingBlock__InputPicker.BookingBlock__InputPicker--occupancy.hide { pointer-events: none; } @media (min-width: 1025px) { .BookingBlock__InputPicker.BookingBlock__InputPicker--occupancy.hide { opacity: 0; height: 0; visibility: hidden; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock__InputPicker.BookingBlock__InputPicker--occupancy.hide { -webkit-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); } } /*********** Search Btn **********/ .BookingBlock--search { padding: 0; border: none; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .BookingBlock--search { margin-bottom: 50px; } } @media (min-width: 768px) and (max-width: 1024px) { .BookingBlock--search { margin-bottom: 25px; } } @media (min-width: 1025px) { .BookingBlock--search { -ms-flex-preferred-size: 110px; flex-basis: 110px; height: 80px; } } .BookingBlock__btn--search { width: 100%; color: white; text-align: center; } @media (min-width: 1025px) { .BookingBlock__btn--search { height: 100%; background-color: #F30; } .BookingBlock__btn--search:hover { cursor: pointer; } } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .BookingBlock__btn--search { background-color: #333; padding: 20px 0; text-transform: uppercase; -webkit-transition: -webkit-box-shadow 0.75s ease-in; transition: -webkit-box-shadow 0.75s ease-in; -o-transition: box-shadow 0.75s ease-in; transition: box-shadow 0.75s ease-in; transition: box-shadow 0.75s ease-in, -webkit-box-shadow 0.75s ease-in; font-size: 22px; line-height: 24px; margin-top: 10px; } } .BookingBlock__btn--valid { background-color: #F30; } .BookingBlock__btn--valid:hover { cursor: pointer; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .BookingBlock__inputlabel { display: none; } } @media (min-width: 1025px) { .BookingBlock__inputlabel { font-size: 10px; color: black; text-transform: uppercase; display: block; margin: 0; margin-bottom: 6px; } } .BookingBlock__input { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .BookingBlock__input { font-size: 20px; line-height: 24px; } } @media (min-width: 1025px) { .BookingBlock__input { font-size: 14px; } } @media (min-width: 1025px) { .BookingBlock__input ::-webkit-input-placeholder { font-size: 14px; } .BookingBlock__input ::-moz-placeholder { font-size: 14px; } .BookingBlock__input :-ms-input-placeholder { font-size: 14px; } .BookingBlock__input ::placeholder { font-size: 14px; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock__input ::-webkit-input-placeholder { font-size: 20px; line-height: 24px; } .BookingBlock__input ::-moz-placeholder { font-size: 20px; line-height: 24px; } .BookingBlock__input :-ms-input-placeholder { font-size: 20px; line-height: 24px; } .BookingBlock__input ::placeholder { font-size: 20px; line-height: 24px; } } .BookingBlock__input--touched { color: #F30; } .BookingBlock__input--touchdevice { cursor: pointer; } @media (min-width: 1025px) { .BookingBlock__input--touchdevice { display: none; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock__input--desktop { display: none; } } .BookingBlock__input--autocomplete { width: 100%; border: none; color: #F30; position: relative; } .BookingBlock__input--autocomplete:focus { outline-style: none; } .BookingBlock__input--autocomplete::-webkit-input-placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } .BookingBlock__input--autocomplete::-moz-placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } .BookingBlock__input--autocomplete:-ms-input-placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } .BookingBlock__input--autocomplete::placeholder { font-family: AvenirNext-Regular, Arial, sans-serif; color: #999; text-align: left; margin: 0; padding: 0; border: none; } @media (min-width: 1025px) { .BookingBlock__input--occupancy { font-size: 16px; } } .BookingBlock__input--occupancy.BookingBlock__input--touchdevice { display: inline-block; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock__input--occupancy.BookingBlock__input--touchdevice { margin-right: 5px; } } @media (max-width: 767px) { .BookingBlock__input--occupancy.BookingBlock__input--rooms { display: block; border-top: 1px solid #999; padding-top: calc(20px + 6px); margin-top: 10px; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .BookingBlock__input--adults::after { content: ','; } } @media (min-width: 768px) and (max-width: 1024px) { .BookingBlock__input--children::after { content: ','; } } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /* * global variable: $LandingPageSlideShowHeight */ .SlideContent { background-size: cover; } .SlideContent.SlideContent--landingpage { height: 460px; width: 960px !important; color: white; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -ms-flex-direction: column; flex-direction: column; } .SlideContent.SlideContent--landingpage:hover * { color: white; } .SlideContent__new { font-family: AvenirNext-Medium, HelveticaNeue-Medium, Helvetica Neue Medium, Gill Sans MT, Arial, sans-serif; padding: 4px 8px 3px; color: white; font-size: 14px; line-height: 1em; margin: 0 0 10px; background-color: #F30; text-shadow: none; text-transform: uppercase; } .SlideContent__title { font-size: 80px; color: white; text-transform: uppercase; line-height: 88px; text-shadow: 0 1px 4px #000; margin-bottom: 5px; } .SlideContent__subtitle { font-family: AvenirNext-Regular, HelveticaNeue-Light, Helvetica Neue Medium, Gill Sans MT, Arial, sans-serif; font-size: 26px; color: white; text-shadow: 0 1px 4px #000; margin: 5px auto 0; line-height: 30px; text-align: center; text-transform: uppercase; } .SlideContent__SaleSVG { width: 397px; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container, .LandingPage__ListContainer, .LandingPage__LargeTitle, .LandingPage__blurb { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container, .LandingPage__ListContainer, .LandingPage__LargeTitle, .LandingPage__blurb { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .LandingPage__ListSectionTitle { text-align: center; font-size: 18px; text-transform: uppercase; line-height: 36px; } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .LandingPage__ListSectionTitle { margin-bottom: 50px; } } @media (max-width: 767px) { .LandingPage__ListSectionTitle { margin-bottom: 15px; } } .LandingPage__ListContainer { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .LandingPage__ListContainer { margin-bottom: 50px; } } @media (max-width: 767px) { .LandingPage__ListContainer { text-align: center; } } .LandingPage__getIosApp { width: 100vw; } .List--landingPage { position: relative; } @media (min-width: 768px) and (max-width: 1024px), (min-width: 1025px) { .List--landingPage { padding-left: 35px; } } @media (max-width: 767px) { .List--landingPage { margin-bottom: 40px; } } .List--landingPage a { color: black; } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .List--landingPage:nth-child(1) { margin-bottom: 100px; } .List--landingPage:nth-child(1)::before { height: 1px; background: #ccc; position: absolute; left: 0; bottom: -50px; width: 101%; content: ' '; } .List--landingPage:nth-child(n+2):nth-child(-n+4) { margin-bottom: 100px; border-left: 1px solid #ccc; } .List--landingPage:nth-child(n+2):nth-child(-n+4)::before { height: 1px; background: #ccc; position: absolute; left: 0; bottom: -50px; width: 101%; content: ' '; } .List--landingPage:nth-child(n+6):nth-child(-n+8) { border-left: 1px solid #ccc; } } .List--landingPage .List__title { font-family: "AvenirNext-DemiBold", Arial, sans-serif; margin-bottom: 15px; text-transform: uppercase; } @media (min-width: 768px) and (max-width: 1024px), (min-width: 1025px) { .List--landingPage .List__title { font-size: 18px; line-height: 36px; } } @media (max-width: 767px) { .List--landingPage .List__title { font-size: 24px; line-height: 28px; } } @media (min-width: 1025px) { .List--landingPage .List__item { font-size: 16px; line-height: 26px; margin-top: 6px; } } @media (min-width: 768px) and (max-width: 1024px) { .List--landingPage .List__item { font-size: 18px; line-height: 22px; margin-top: 18px; } } @media (max-width: 767px) { .List--landingPage .List__item { font-size: 20px; line-height: 23px; margin-top: 12px; } } .LandingPage__LargeTitle { color: black; text-align: center; font-size: 34px; line-height: 50px; margin-bottom: 10px; } .LandingPage__blurb { color: #444; font-size: 18px; line-height: 28px; margin-bottom: 50px; } .LandingPage__blurb p { margin-top: 10px; } .LandingPage__blurb--en { font-size: 16px; line-height: 26px; } .LandingPage__blurb--en a { color: black; } .LandingPage__blurb--en a:hover { color: #F30; } .LandingPage__learnmore { display: block; text-align: center; color: black; margin-bottom: 50px; margin-top: 50px; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /* DesktopNavigation Container */ @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .DesktopNavigation { display: none; } } @media (min-width: 1025px) { .DesktopNavigation { margin: 0 auto; display: block; padding-bottom: 15px; } } /* Nav Links Containers */ .DesktopNavigation__navlinks { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-direction: row; flex-direction: row; } .DesktopNavigation__navlinks--left { width: 65%; } .DesktopNavigation__navlinks--left .DesktopNavigation__link { margin-right: 27px; } .DesktopNavigation__navlinks--right { width: 35%; -ms-flex-pack: end; justify-content: flex-end; } /* Nav Link Item */ .DesktopNavigation__link * { color: #666; font-size: 14px; line-height: 20px; font-family: AvenirNext-Regular, Arial, sans-serif; } .DesktopNavigation__link * a:hover { color: #F30; } .DesktopNavigation__link--account { width: 100%; text-align: right; position: relative; text-transform: capitalize; } .DesktopNavigation__greeting { position: absolute; top: -20px; right: 0; font-size: 12px; line-height: 20px; color: black; text-transform: capitalize; } .DesktopNavigation__link--register { white-space: nowrap; margin-left: 30px; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } @media (min-width: 1025px) { .SidePanelNavigation { display: none; } } /******************************* ***** HAMBURGER CONTAINER ***** *******************************/ .SidePanelNavigation__hamburger { position: absolute; display: -ms-flexbox; display: flex; height: 28px; width: 28px; top: 0; right: 0; padding: 22px 20px; -webkit-box-sizing: content-box; box-sizing: content-box; } .SidePanelNavigation__hamburger:hover { cursor: pointer; } .SidePanelNavigation--open .SidePanelNavigation__hamburger { z-index: 10; } /************************** ***** HAMBURGER ICON ***** **************************/ .SidePanelNavigation__hamburgerIcon, .SidePanelNavigation__hamburgerIcon::after, .SidePanelNavigation__hamburgerIcon::before { height: 1px; background-color: #222; width: 100%; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .SidePanelNavigation__hamburgerIcon { position: relative; } .SidePanelNavigation__hamburgerIcon::after, .SidePanelNavigation__hamburgerIcon::before { content: ' '; position: absolute; } .SidePanelNavigation--closed .SidePanelNavigation__hamburgerIcon { margin-top: 8px; } .SidePanelNavigation--closed .SidePanelNavigation__hamburgerIcon::before { top: -8px; } .SidePanelNavigation--closed .SidePanelNavigation__hamburgerIcon::after { top: 8px; } .SidePanelNavigation--open .SidePanelNavigation__hamburgerIcon { background-color: transparent; } .SidePanelNavigation--open .SidePanelNavigation__hamburgerIcon::before { top: 0px; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .SidePanelNavigation--open .SidePanelNavigation__hamburgerIcon::after { top: 19px; -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /************************************ ***** FADED BACKGROUND OVERLAY ***** ************************************/ .SidePanelNavigation__faded-background-overlay { z-index: 3; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } .SidePanelNavigation--open .SidePanelNavigation__faded-background-overlay { background-color: rgba(0, 0, 0, 0.2); } .SidePanelNavigation--closed .SidePanelNavigation__faded-background-overlay { opacity: 0; pointer-events: none; } /******************* **** SIDE PANEL *** *******************/ .SidePanelNavigation__side-panel { position: fixed; z-index: 5; top: 0; right: 0; width: 96%; background-color: white; height: 100%; text-align: right; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .SidePanelNavigation--closed .SidePanelNavigation__side-panel { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .SidePanelNavigation--open .SidePanelNavigation__side-panel { padding-top: 64px; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-x: hidden; } /************* *** LINKS *** *************/ .SidePanelNavigation__link { border-bottom: solid 1px #eee; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; text-align: left; } .SidePanelNavigation__link a { padding: 14px; padding-left: 30px; display: inline-block; width: 100%; } .SidePanelNavigation__link * { color: #333; font-size: 18px; text-transform: capitalize; } .SidePanelNavigation__link:hover { cursor: pointer; text-decoration: none; background-color: #f6f6f6; } .SidePanelNavigation__link:hover * { color: black; } .SidePanelNavigation__link--language { background-color: #222; border-bottom: 1px solid black; } .SidePanelNavigation__link--language * { color: #ccc; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .LanguageCurrencySelector { position: absolute; right: 0; top: 0; z-index: 5; display: -ms-flexbox; display: flex; font-size: 10px; line-height: 20px; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .LanguageCurrencySelector { display: none; } } .LanguageCurrencySelector * { color: black; } /* Container */ .LanguageCurrencySelector__container { text-align: right; } .LanguageCurrencySelector__container:last-child { margin-left: 4px; } .LanguageCurrencySelector__container--open { -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); border: 1px solid rgba(0, 0, 0, 0.15); } .LanguageCurrencySelector__container--closed { height: 30px; } /* Title */ .LanguageCurrencySelector__title { display: block; border: 1px solid #eee; padding: 4px 15px; text-transform: capitalize; } .LanguageCurrencySelector__title:hover { cursor: pointer; } .LanguageCurrencySelector__title:hover * { color: #F30; } .LanguageCurrencySelector__container--open .LanguageCurrencySelector__title { border: none; border-bottom: 1px solid #eee; color: #F30; font-size: 14px; padding: 8px 20px; } /* Dropdown */ .LanguageCurrencySelector__dropdown { overflow-y: auto; max-height: 400px; background: white; -webkit-transition: opacity 0.5s ease-out, max-height 0.5s ease-out, width 0.1s ease-out; -o-transition: opacity 0.5s ease-out, max-height 0.5s ease-out, width 0.1s ease-out; transition: opacity 0.5s ease-out, max-height 0.5s ease-out, width 0.1s ease-out; opacity: 1; } .LanguageCurrencySelector__dropdown--closed { max-height: 0; width: 0; opacity: 0; } .LanguageCurrencySelector__dropdown--open { font-size: 14px; } .LanguageCurrencySelector__dropdown--open.LanguageCurrencySelector__dropdown--language { min-width: 130px; } /* Currency List Item */ .LanguageCurrencySelector__currency { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; padding: 6px 20px; text-transform: capitalize; } .LanguageCurrencySelector__currency:hover * { cursor: pointer; color: #F30; } .LanguageCurrencySelector__currencySymbol { margin-right: 15px; } .LanguageCurrencySelector__currencyName { max-width: 165px; } .LanguageCurrencySelector__currency-separator { text-align: left; border-bottom: 1px dotted #e5e5e5; font-family: GillSansBold,HelveticaNeue,arial,sans-serif; margin-bottom: 5px; padding: 5px 20px; } /* Language List Item */ .LanguageCurrencySelector__language { padding: 6px 20px; } .LanguageCurrencySelector__language:hover { cursor: pointer; color: #F30; } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container, .Header__site-content-container { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container, .Header__site-content-container { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } .Header { margin: 0px auto 0; padding-top: 22px; } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .Header__site-content-container { margin-bottom: 38px; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } } @media (min-width: 1025px) { .Header__site-content-container { position: relative; } } .Header__logo { display: inline-block; } .Header__logo img { margin: 0; padding: 0; } @media (min-width: 1025px) { .Header__logo img { width: 224px; margin-bottom: 15px; } } @media (min-width: 768px) and (max-width: 1024px) { .Header__logo img { width: 150px; } } @media (max-width: 767px) { .Header__logo img { height: 28px; } } /* Responsive variables */ /* Layout variables */ @font-face { font-family: 'AvenirNext-Bold'; src: url("/fonts/AvenirNext/AvenirNext-Bold.eot"); src: url("/fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNext-Bold") format("svg"), url("/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-BoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.svg#AvenirNext-BoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-BoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBold'; src: url("/fonts/AvenirNext/AvenirNext-DemiBold.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBold.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBold.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBold.svg#AvenirNext-DemiBold") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBold.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-DemiBoldItalic'; src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.svg#AvenirNext-DemiBoldItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-DemiBoldItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Heavy'; src: url("/fonts/AvenirNext/AvenirNext-Heavy.eot"); src: url("/fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Heavy.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Heavy.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Heavy.svg#AvenirNext-Heavy") format("svg"), url("/fonts/AvenirNext/AvenirNext-Heavy.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-HeavyItalic'; src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.svg#AvenirNext-HeavyItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-HeavyItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Italic'; src: url("/fonts/AvenirNext/AvenirNext-Italic.eot"); src: url("/fonts/AvenirNext/AvenirNext-Italic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Italic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Italic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Italic.svg#AvenirNext-Italic") format("svg"), url("/fonts/AvenirNext/AvenirNext-Italic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Medium'; src: url("/fonts/AvenirNext/AvenirNext-Medium.eot"); src: url("/fonts/AvenirNext/AvenirNext-Medium.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNext-Medium") format("svg"), url("/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-MediumItalic'; src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNext-MediumItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-MediumItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-Regular'; src: url("/fonts/AvenirNext/AvenirNext-Regular.eot"); src: url("/fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNext-Regular") format("svg"), url("/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLight'; src: url("/fonts/AvenirNext/AvenirNext-UltraLight.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLight.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNext-UltraLight") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'AvenirNext-UltraLightItalic'; src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot"); src: url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff2") format("woff2"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.woff") format("woff"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.ttf") format("truetype"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.svg#AvenirNext-UltraLightItalic") format("svg"), url("/fonts/AvenirNext/AvenirNext-UltraLightItalic.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; } .site-content-container, .Footer__copyright { max-width: 960px; margin: 0 auto; } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .site-content-container, .Footer__copyright { padding: 0 25px; } } .grid-container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 767px) { .grid-mobile-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (max-width: 767px) { .grid-mobile-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (max-width: 767px) { .grid-mobile-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (max-width: 767px) { .grid-mobile-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (max-width: 767px) { .grid-mobile-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (max-width: 767px) { .grid-mobile-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (max-width: 767px) { .grid-mobile-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (max-width: 767px) { .grid-mobile-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (max-width: 767px) { .grid-mobile-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (max-width: 767px) { .grid-mobile-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (max-width: 767px) { .grid-mobile-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (max-width: 767px) { .grid-mobile-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 768px) and (max-width: 1024px) { .grid-tablet-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (min-width: 1025px) { .grid-desktop-1 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; } } @media (min-width: 1025px) { .grid-desktop-2 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; } } @media (min-width: 1025px) { .grid-desktop-3 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 25%; flex-basis: 25%; } } @media (min-width: 1025px) { .grid-desktop-4 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } } @media (min-width: 1025px) { .grid-desktop-5 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; } } @media (min-width: 1025px) { .grid-desktop-6 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1025px) { .grid-desktop-7 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; } } @media (min-width: 1025px) { .grid-desktop-8 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; } } @media (min-width: 1025px) { .grid-desktop-9 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 75%; flex-basis: 75%; } } @media (min-width: 1025px) { .grid-desktop-10 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; } } @media (min-width: 1025px) { .grid-desktop-11 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; } } @media (min-width: 1025px) { .grid-desktop-12 { -webkit-transition: flex-basis 0.25s linear; -o-transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear; transition: flex-basis 0.25s linear, -ms-flex-preferred-size 0.25s linear; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } @media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) { .desktop-only { display: none; } } @media (max-width: 767px), (min-width: 1025px) { .tablet-only { display: none; } } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .mobile-only { display: none; } } @media (min-width: 1025px) { .touchdevice-only { display: none; } } /* * These should be rare cases that styles are shared across components. * In this rare case, you should probably use a global class or variable * If you need to apply multiple styles, then use a mixin and * * PLEASE COMMENT IN THE SOURCE THAT THIS IS A GLOBAL MIXIN * */ /* Because the DatePicker input label is controlled by the airbnb datepicker classes & styles * We must include the common styles in a mixin. (vs. have a BookingBlock__inputlabel class * that controls everything.) */ html { -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, span, div, ul, li, p, button { margin: 0; padding: 0; font-family: AvenirNext-Regular, Arial, sans-serif; } ul { list-style: none; } a { text-decoration: none; } a:hover * { cursor: pointer; color: #F30; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /************************** * FOOTER LAYOUT ELEMENTS * **************************/ .Footer { background-color: #333; } .Footer__container { margin: 0 auto 0; padding: 60px 10px 0; border-bottom: solid 1px #222; } @media (min-width: 1025px) { .Footer__container { width: 960px; } } @media (min-width: 768px) and (max-width: 1024px), (max-width: 767px) { .Footer__container { width: 90%; } } .Footer__container--left { margin-bottom: 35px; } /********************************************** * FOOTER LISTS (generic links and languages) * **********************************************/ @media (min-width: 768px) and (max-width: 1024px), (min-width: 1025px) { .Footer__list { font-size: 14px; } } @media (max-width: 767px) { .Footer__list { font-size: 16px; } } .Footer__list .List__item { margin-bottom: 6px; text-transform: capitalize; } .Footer__list .List__item:hover * { cursor: pointer; color: white; } .Footer__list--top { margin-bottom: 20px; } .Footer__list * { color: #999; font-family: AvenirNext-Regular, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; } /****************************** * FOOTER SECTIONS COMPONENTS * ******************************/ @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .Footer__section { max-width: 310px; } } .Footer__section--stayconnected { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #222; max-width: 300px; } .Footer__section--socialmedia { margin-bottom: 85px; } .Footer__section--ios { margin-bottom: 18px; } .Footer__section-title { display: inline-block; color: white; font-size: 22px; line-height: 18px; margin-bottom: 15px; font-family: AvenirNext-Medium, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; } .Footer__section-text { color: #999; font-size: 14px; margin-bottom: 15px; } .Footer__btn--sign-up { background-color: #222; padding: 15px 24px; text-align: center; border: none; cursor: pointer; font-family: AvenirNext-Medium, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif; } .Footer__btn--text { font-family: AvenirNext-Medium, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; color: white; font-size: 16px; line-height: 16px; } .Footer__iosLogo { display: inline-block; overflow: hidden; width: 140px; height: 40px; margin: 0 auto; } .Footer__social-media-icon { width: 26px; margin-right: 15px; } .Footer__container--right-2 .Dropdown__container { background: #222; border: none; cursor: pointer; width: 100%; max-width: 300px; margin-bottom: 80px; position: relative; } .Footer__container--right-2 .Dropdown__container:first-child { margin-bottom: 8px; } .Footer__container--right-2 .Dropdown__select { background: transparent; border: none; color: white; font-size: 16px; font-family: "AvenirNext-Regular", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; text-transform: capitalize; cursor: pointer; width: 100%; padding: 10px 14px; -webkit-appearance: none; -moz-appearance: none; } .Footer__container--right-2 .Dropdown__select::-ms-expand { display: none; } .Footer__container--right-2 .Dropdown__select * { text-align: center; color: black; } .Footer__container--right-2 .Footer__option { text-transform: capitalize; } .Footer__container--right-2 .Dropdown__arrow { position: absolute; top: 10px; right: 14px; width: 20px; pointer-events: none; } .Footer__container--right-2 .Dropdown__arrow img { width: 100%; } /******************** * FOOTER COPYRIGHT * ********************/ .Footer__copyright { color: #999; font-size: 14px; padding-top: 30px; padding-bottom: 30px; } /*# sourceMappingURL=main-react.fd5c25b0.css.map*/